検索で表示されたページにもしリンクがなかったら、そのページだけを見て戻るしかありません。そのサイトに複数のページがあっても、それぞれのページを行き来できるリンクがなければ、そのサイトにどれくらいのページがあるのか、どのような情報が載っているかも想像がつかないでしょう。ほとんどのWebサイトには全ページに共通して「グローバルナビゲーション」と呼ばれるメニューが表示されています。このグローバルメニューのサイトにおける役割についてご紹介します。
目次
グローバルナビゲーションとは？
グローバルナビゲーションとは、Webサイトの全ページに共通して表示するメニューのこと。本でいう目次のような役割をしていて、グローバルナビゲーションを見ればそのサイトの構成が大まかにわかります。
では、なぜそれが全ページについているのでしょうか。本は、表紙をめくって、目次、その後はノンブルを辿って順番に読み進めますが、Webサイトは必ずトップページから見られるとは限らず、さまざまな検索キーワードで検索結果に表示されたページから見られるので、欲しい情報が無かった時に同じサイト内の他のページも探せるようにサイト内リンクで繫がっているのです。
したがってグローバルナビゲーションは、どこをクリックすれば欲しい情報にたどり着けるのか、サイトを訪れた時にすぐに判断できる分かりやすさが求められます。
グローバルナビゲーションの種類
グローバルナビゲーションと一口にいっても、サイトで扱っている情報の種類によって表示形式はさまざまです。ここではその中の代表的なタイプを5つご紹介します。
1.ブレッドクラムナビゲーション
ブレッドクラム（Breadcrumb）はその名の通りパンくずのナビゲーションです。ページのタイトルが現在見ているページからトップページまで、右から左に向かって「>」を挟んで順番に並んでいます。
2.ローカルナビゲーション
グローバルナビゲーションがサイト全体の主要コンテンツを案内しているメニューなのに対して、ローカルナビゲーションは、グローバルナビゲーションの下位で、サイト内の同じ階層に共通するコンテンツを案内するメニューです。
3.リニアナビゲーション
リニアナビゲーションは、同じ階層にある複数のページを順番に表示させるメニューです。「＜ 2 ＞」のような表示でブログのページに利用されることが多く、このタイプはページの前後にしか移動できません。
4.ページネーション
ページネーションは、文章が長いページを分割して表示させるときに使用します。検索結果画面やブログのページの下に「＜ 1 2 3 4 5 6 7 8 ＞」のように番号で表示するものです。
5.ステップナビゲーション
ステップナビゲーションは、会員登録や商品購入のフォームで手続きのステップが何処まで進んでいるかを示す案内です。
手続きの流れでその時行っている段階を色でおしえてくれます。
グローバルナビゲーション作成の注意点
サイト内でグローバルナビゲーションをどこに配置したらいいのか、どんな項目にしたらいいかは悩みどころです。
全ページのデザインを統一する
どのページに移動してもグローバルナビゲーションが同じ位置に同じデザインであることで、ユーザーがナビゲーションの機能を理解して記憶しやすくなります。
項目を増やしすぎない
グローバルナビゲーションは、サイト全体の主要コンテンツを案内するメニューです。下層のページで共通する項目はローカルナビゲーションをつけることもできますので、グローバルナビゲーションは、全ページに共通する必要最低限の項目数に絞りましょう。
メニューの並び方も意識する
人の目線は左から右に移る傾向があります。グローバルナビゲーションのデザインを考える際には、左から右に、使用頻度が高い項目を並べるなどして、ユーザーの使いやすいデザイン設計を意識しましょう。
テキストで制作する
グローバルナビゲーションの文字の部分を画像にした場合、alt値は設定できますが、テキストよりは検索ロボットの可読性が良くないため、項目はテキストで作成しましょう。
ウェブブラウザには、「進む」か「戻る」しかついていないため、WEBサイト内に設置されているグローバルナビゲーションは、サイト内を円滑に移動するために重要な機能です。サイトのビジュアルやコンテンツだけでなく、どのページへリンクさせたらユーザーがほしい情報にストレスなくたどり着けるかも良く考えて設定しましょう。
どんなに良いコンテンツを掲載していても、グローバルナビゲーションが使いにくいと離脱を招いてしまう可能性もあります。
課題となるWebサイトをプロが分析し、効果を出す情報設計をご提案します！
