グローバルナビとは？作成時のポイント・デザインの参考例
グローバルナビは、WEBサイトの要素のひとつです。WEBサイトにアクセスしたユーザーを適切なページに導くことが、グローバルナビの主な役割です。グローバルナビを正しく設置すれば、WEBサイトの利便性を高めることができます。
当記事では、グローバルナビが持つ役割や作成するときのポイント、グローバルナビのデザイン例について解説しています。WEBサイトを新規開設する方や運営中のWEBサイトを改善したい方は、ぜひ参考にしてください。
1.グローバルナビとは？
グローバルナビとは、WEBサイトの上部や下部、サイドなどに設置された主要ページへのリンクのことです。多くのスマホサイトでは、画面の隅にあるアイコンをタップすることでグローバルナビが表示されます。
グローバルナビには、正式に決められた名称がありません。
そのため、グローバルナビは「グローバルメニュー」「メインメニュー」「ヘッダーメニュー」「ヘッダーナビゲーション」と呼ばれることもあります。
1-1.グローバルナビが持つ役割
グローバルナビが持つ役割には、ユーザーに対する役割と、検索エンジンに対する役割の2つが挙げられます。
●ユーザーに対する役割
WEBサイトを閲覧するユーザーは、常にトップページ経由でアクセスするとは限りません。グローバルナビがあれば、どのページからアクセスしても他のページを見つけやすくなります。WEBサイト上のどこからでも目的のページにたどり着けるようにすることが、グローバルナビのユーザーに対する役割です。
●検索エンジンに対する役割
検索エンジンは、WEBサイト内で多くのリンクが張られているページを重要だと認識する傾向があります。グローバルナビを設置すると、WEBサイト内に数多くの内部リンクが張られるため、検索エンジンに対して主要なページを伝えることが可能です。
2.グローバルナビを作成するときのポイント
グローバルナビは、ただWEBサイトに設置すればよいわけではありません。
グローバルナビを設置するページやデザイン、グローバルナビに含める項目の数など、ポイントを押さえることが重要です。
ここでは、グローバルナビを作成するときのポイントについて解説します。
2-1.サイト内の全ページに表示させる
グローバルナビは、原則としてWEBサイト内の全ページに表示させる必要があります。
グローバルナビが表示されていないページが存在すると、そのページからアクセスしたユーザーに対する利便性が低くなるためです。
ただし、メールマガジン登録や資料請求、商品購入などを目的とするフォームがあるページは例外です。フォームを用意しているページでは、「ユーザーにフォームへ入力してもらう」という目的を完結させることがポイントとなります。ほかのページへ離脱させたくない場合は、グローバルナビをあえて表示しないことが一般的です。
2-2.グローバルナビのデザイン・項目は統一する
グローバルナビのデザインや、グローバルナビに含める項目は、すべてのページで共通の仕様にしましょう。ページごとにグローバルナビのデザインが変わると、ユーザーが戸惑い、離脱率が高くなる恐れがあります。
また、ページによってグローバルナビの項目が増えたり減ったりすると、ユーザーが目当てのページにたどり着くことができません。
2-3.階層がわかるよう文字サイズ・デザインを工夫する
グローバルナビの文字サイズやデザインは、WEBサイトの階層・構造がわかるように工夫する必要があります。
階層とは、WEBサイトのトップページから、リンクをたどってアクセスできるほかのページまでを含む構造のことです。多くのWEBサイトでは、トップページのほかにいくつかのカテゴリーページがあり、カテゴリーページ内にはさらに複数の下層コンテンツが含まれています。
たとえば、グローバルナビの文字サイズを、リンク先の階層に合わせて変化させれば、WEBサイトの構造を表現することが可能です。トップページやカテゴリーページなど上位階層のリンクは大きな文字、各カテゴリーに含まれる下位階層のリンクは小さな文字で表示するなど、デザインを工夫しましょう。
また、階層の深さに応じてグローバルメニューの背景色を濃くしたり薄くしたりすることでも、ユーザーの利便性を高めるのに効果的です。
2-4.グローバルナビの項目は7個以内にする
グローバルナビに含める項目は7個以内に抑えましょう。
心理学分野の研究から、人が一度に把握できる要素の数は最大で7個程度ということが判明しています。そのため、グローバルメニューに表示する項目数が8個以上となった場合、ユーザーが情報を把握しにくくなる恐れがあります。
WEBサイトの主要コンテンツに絞ってリンクを張ることで、グローバルナビの項目を7個以内に抑えることができます。WEBサイトのページ数が豊富な場合は、メニュー構成を整理してからグローバルナビを作成してください。
2-5.項目の並びは視線の流れを考慮する
グローバルメニューに含める項目の並びは、視線の流れを考慮して決めることが重要です。
一般的に、人の視線はまずページ上部の左側に行き、右側へと動いていきます。
そのため、グローバルメニューの左側には、最初に見せたい項目を配置しましょう。
たとえば、プロフィールや会社情報、初めての人向けのページなどへのリンクは、グローバルメニューの左側に配置するべき項目です。一方、問い合わせや申し込みページへのリンクは、グローバルメニューの右側への配置が適しています。
3.グローバルナビのデザイン例
グローバルナビは、ユーザーの閲覧環境に合わせたデザインで表示することが重要です。
パソコンサイトとスマホサイトでは画面の大きさや形が異なるため、閲覧環境によってグローバルナビのデザインを調整しましょう。
ここでは、グローバルナビのデザイン例について、パソコンサイトとスマホサイトに分けて解説します。
3-1.パソコンサイトのグローバルナビ
パソコンサイトのグローバルナビにおけるデザイン例とポイントは以下の通りです。
●各項目にイラストを置く
グローバルメニューの項目名に沿ったイラストを置くことで、各ページの概要が一目で理解できるようになります。また、各項目のイラストは画面上部のグローバルナビだけでなく、画面横に固定して表示するグローバルナビでも活用できます。
●ドロップダウンメニューに写真を入れる
ドロップダウンメニューとは、グローバルナビにカーソルを重ねると下に伸びるように表示されるメニューのことです。ドロップダウンメニューに写真を入れることで、グローバルナビの内容がわかりやすくなります。
●シンプルなテキストリンクにする
グローバルナビの項目を、あえてシンプルなテキスト表示にすることも、利便性を高めるために有効です。グローバルナビの項目数が少なく、横の位置に固定する場合は、シンプルなテキストリンクが役立ちます。
3-2.スマホサイトのグローバルナビ
スマホサイトのグローバルナビにおけるデザイン例とポイントは以下の通りです。
●スライドメニュー
スライドメニューは、スマホサイトの右上や左上などにあるハンバーガーメニューと呼ばれるアイコンをタップすることで、横からせり出すようにして表示されます。アイコンをタップするまでは隠れているため、グローバルナビの項目数が多い場合におすすめです。
●ドロップダウンメニュー
ドロップダウンメニューはスライドメニューと同様に、アイコンをタップしたタイミングで表示されます。グローバルナビの項目数が少ない場合は、ドロップダウンメニューが有効です。
●モーダルウィンドウ
モーダルウィンドウでは、アイコンをタップすることで画面全体にグローバルナビが表示されます。幅広いスペースに項目が表示されるため、レイアウトの自由度が高いことがモーダルウィンドウの特徴です。
ただし、モーダルウィンドウの表示によってコンテンツが隠れてしまうため、グローバルナビの利用頻度が高いスマホサイトでは使用を控えましょう。
このように、「グローバルナビ」と一口に言ってもさまざまなデザインが存在します。
WEBサイトの雰囲気や利便性を踏まえて、適切なデザインのグローバルナビを設置しましょう。
まとめ
グローバルナビは、WEBサイトのすべてのページに共通して表示される主要ページへのリンクです。グローバルナビを設置することで、WEBサイト訪問者を目的のページへ導いたり、検索エンジンに重要なページを伝えたりできます。
グローバルナビを作成するときは、デザインや項目を統一すること、視線の流れを考慮して設計することなどがポイントです。また、パソコンサイトやスマホサイトなど、ユーザーの閲覧環境に応じて適切なグローバルナビを設置しましょう。
KEYWORD
