ユーザーにきちんと読んでもらうには
前章［サイトマップを作ろう］で説明したとおり、WEBサイトではブロックをどう閲覧してもらうのかを予測することは困難です。
けど、ブロック内の記事や情報に関しては、ある程度あなたが思い描いたストーリー通り閲覧してもらいたいですよね。
的確なリンクを設置することによって、できるだけストーリーを崩さないようにユーザーを誘導したり、ユーザー自身が希望する情報へたどり着きやすくする仕組みのことをナビゲーションと言います。
WEB制作をする上で、プロとアマチュアの腕の違いが如実に出るのがナビゲーションだと言われるほど奥が深く難しい作業です。しかし、難しいからといっておろそかにするわけには行きません。その構築方法について説明しますので、参考にしてください。
まず、最も一般的なWEBサイトの構造の例を下図に表します。
ツリー構造
上図の様にどんどんと枝葉に分かれてゆくあたりが木に似ているところから、このような構造をツリー構造といいます。ツリー構造のほかには、下図の様に同階層のページ群で構成されるリニア構造と呼ばれるものもあります。
リニア構造
ナビゲーションを考えるとき、どのように読み進めて欲しいかということがまず頭に浮かぶと思います。
「ココをまず読んでもらって、それからココ、次にココ･･･と、ページを順番にめくって本を読むように読み進んで欲しいな」と誰しもが期待します。内容がストーリーを順次たどる必要があるものならリニア構造を採用します。
たとえば、商用サイトでの商品説明部分でよくある、「ココの説明を読んで理解してもらってからでないと、先へ進んでもらっては伝えたいことが伝えきれなくて困る」といった場合に有効です。
下図のように、ホームページ→１→２→３→・・・と順次閲覧してもらえます。
リニア構造の長所は、制作側が意図したとおり巡回してもらえることです。
しかし、この構造には短所もあります。上図の構造のとおりだとユーザーはホームページや数ページ前に戻りたいときに、もと来た道をたどって何度もクリックしながら、前へ前へと延々さかのぼらなければならない点です。
先のページへ進みたい場合も同様です。これでは、ほんの数ページのサイトなら我慢できても、ページ数が多いサイトだと面倒になってブラウザごと閉じられてしまうかもしれません。実際、大手のサイトでもこのようにわずらわしく感じるサイトが多々見受けられます。
これを改善するには、隣のページへのリンクだけではなく他の各ページへのリンクを設置しておく（グローバルナビゲーションといいます）か、全体を見渡せるページへいつでも戻れるようにすればよいのです。
そうすることによって、ユーザーも全ページ数が把握できたり、気ままにサイト内で興味を惹かれた記事へ直接ジャンプできるようになり、ユーザーにも使いやすいサイトだと感じてもらえます。この場合、それぞれのページタイトルは必須ですので必ずそれぞれのタイトルをつけておきましょう。
ではツリー構造の場合はどうでしょうか。まずは、下図をご覧ください。
この構造は、[大分類]→[中分類]→[小分類]→[コンテンツ]といった具合に、カテゴリー別にコンテンツを整理するのに向いているため、ほとんどのサイトで用いられています。この構造で重要なのは２点です。
スムーズに目的の情報にたどり着けることと、ユーザーが迷子にならないことです。
ツリー構造の場合、制作時においては、まず上図のように１→２→・・・→９→１０といった巡回ルートをイメージされる方がほとんどです。ところが、実際のユーザーは、８→１→１０→４→５→６・・・のように上位層をまず巡回して下位層へ進んだり、最下位層をあちらこちら巡回して終わりだったり、目的のページだけ見て終わったり、１→２→８→４→６のように気ままに巡回します。
そのため、どのように巡回してもユーザーが迷子にならないようにしなければなりません。
ツリー構造でよく用いられるのが、グローバルナビゲーションです。
これは、どのページを表示していても、常に他のカテゴリーへジャンプできるように、ページの一部へ、各カテゴリーのリンクを常時表示させておくものです。（本ページ上部のメニューと最下部のフッタにもあります）
また、グローバルナビゲーションだけでは、カテゴリー単位で読み進まれてしまう可能性が高いため、カテゴリー内の記事を順次読んでもらうためには、同階層の隣同士のリンクも設けておくことが重要となります。これをローカルナビゲーションといいます。
要するに、ツリー構造では、カテゴリー別の誘導とリニア構造の巡回方法を適宜織り交ぜて構築するのが理想なのです。
先ほどの図で説明すれば、グローバルナビゲーションリンクとして[ホーム]，[１]，[４]，[８]，[１０]を設置します。ローカルナビゲーションとしては[１]の下位層であるWEBページ[２]では、[１へ戻る]，[３へ]を設置します、同様に、WEBページ[３]では、[２へ]，[１へ戻る]を設置して[１]のブロック内を循環できるようにします。（下図参照）
リンクはわかり易い表記を心がけましょう
あと、ナビゲーションリンク名はページタイトルを用いるのが効果的です。
なぜなら、リンク名が曖昧だとユーザーが迷子になってしまいがちだからです。
よく見受けられるものとして、ローカルナビゲーションにて
[トップへ]、[進む]、[戻る]、[Top]、[Next]、[Back]、[Prev.]
などの表記を用いているサイトがあります。これらは制作している側からすると、わかり易く表記しているつもりなのでしょうが、ユーザにとってはわかりにくい表記となっているケースが多いのです。
たとえば、[Top]はホームページ（トップページ）へジャンプするのか、ページのトップへジャンプするのかが不明ですし、[戻る]や[Back]は先ほど閲覧したページへ戻るのか、サイト巡回ルートのひとつ前のページへ戻るのかが不明です。
ある程度WEB巡回に慣れた方や、リピーターの方なら、”勘”やステータスバーなどに表示されるリンク名で判断できるのですが、やはり、ページタイトル名で誘導するのがベストでしょう。
ただし、それが面倒な方は、（[トップへ]、[進む]、[戻る]）よりユーザーが誤解を招くことも少なく、安心感を抱く
[ホームへ]、[ページトップへ]、[上へ]、[次へ]、[前へ]
の表記を用るようにしましょう。
他に、上位の階層から順に下位のページへ行くにつれ、ナビゲーションバーに階層か分かるようにリンクを記載するのもかなりユーザーフレンドリーな方法です。
これはパンくずリストと呼ばれ、辿った軌跡が分かりやすく、多くのサイトで見かける手法ですので、構造によっては積極的に採り入れてみましょう。
ナビゲーションの表示に関しては様々な方法があります。各ページごとにリンクを設ける方法や、ページをフレームで分割してナビゲーションのためのフレームを設ける方法や、別ウインドウにナビゲーションを表示させてそれをリモコンのように操作する方法などです。
それぞれに一長一短はあるのですが、これらに関しては、次章[デザインに凝る？]で説明しますね。
