グローバルナビゲーションとは一体何？役割や作成・デザインのポイントを徹底解説

ホームページを開いた際に、「ホーム」や「〇〇について」といった各ページへリンクする案内メニューを見たことはありませんか。
この案内メニューは、「グローバルナビゲーション（グローバルメニュー）」と呼ばれ、ホームページにおいて重要な役割を持っています。

今回は、このグローバルナビゲーションについて解説いたしますので、これからホームページを作成する方はぜひ参考になさってください。

なお、ホームページ作成をご検討なら、BESTホームページをご検討ください。

グローバルナビゲーションとは、ページのヘッダーやフッター、サイドバーに設置する、主要ページを案内するリンクです。
基本的にはホームページの全てのページに設置されるので、どこにいても主要ページをアピールできます。

グローバルナビゲーションはメニューボタンやテキストで表示され、スマホでは横三本線のアイコンをタップするとプルダウンや全画面でメニューが表示される、「ハンバーガーメニュー」と呼ばれるデザインが多く見られます。

１-１．ローカルナビゲーションとの違い

ローカルナビゲーションは、グローバルナビゲーションを大カテゴリとしたとき、中カテゴリを案内するリンクです。

例えば、メンズ服の商品紹介ページを開いた際、さらにブランドごとに分けられたメニューがいずれかにある場合は、それをローカルナビゲーションと判断できます。
メンズ服という大カテゴリ内にある、ブランド別の商品という中カテゴリという流れです。

引用：Amazon

参考： ワイヤーフレームとは？定義や基礎から作り方まで徹底解説！

グローバルナビゲーションは全てのページに設置するのが基本です。
では、なぜ設置する必要があるのか、グローバルナビゲーションの役割について見ていきましょう。

２-１．ユーザーに対しての役割

グローバルナビゲーションは、ユーザーにとって利便性を高めるための役割があります。

全てのユーザーが、必ずトップページに訪れるとは限らず、検索次第で訪れるページは異なるはずです。
そこで、どのページでも主要コンテンツに誘導できるようにしておけば、ユーザーが迷わずに情報にたどりつくことができます。

コーポレートサイトなら、

などを設置しておくといいでしょう。

また、グローバルナビゲーションは、トップページからどの階層にいるのかを示す「パンくずリスト」と相性がいいです。
ユーザーの視認性を高めるために、併用を検討してみてください。

参考： パンくずリストのメリットとは？本当に必要？語源や書き方のポイントを徹底解説

２-２．検索エンジンに対しての役割

グローバルナビゲーションは検索エンジンに対しても役割を持ちます。

検索エンジンは内部リンクが貼られるページほど、重要コンテンツと認識します。
グローバルナビゲーションは内部リンクになるので、ホームページ内のどのコンテンツが重要なのか、検索エンジンに伝えることができるのです。

グローバルナビゲーションを作成するポイントは、主に3つです。
では、どのような点を意識して作成すればいいのか、ポイントごとに解説します。

３-１．原則すべてのページに表示

グローバルナビゲーションは、原則すべてのページに表示させましょう。
ユーザーがどのページを見ていても、主要コンテンツを発見できるようにしておく必要があるからです。

ただし、商品購入や会員登録、資料請求などの問合せフォームのあるページには、ユーザーが離脱しないようにあえて表示させない方法もあります。
離脱させたくないページ以外には、全て設置するという認識で作成しましょう。

３-２．「ユーザー」「検索エンジン」にわかりやすく

グローバルメニューはユーザーと検索エンジンにわかりやすい位置に設置するのが基本です。
そのため、全ページで統一したデザインと位置を決めておきましょう。

グローバルナビゲーションは、ヘッダーやサイドバーでは、メニューボタンやタブで表示させている場合が多く見られます。
一方、フッターの場合にはアンカーテキストで設置しているケースをよく見かけるので、参考にしてみてください。

３-３．ユーザーがストレスを溜めていないか検証

グローバルナビゲーションがユーザーにとってストレスを与えていないか検証するのも大切です。
アクセス解析を用いて、グローバルナビからの流入があるのか、CVに良い影響を与えられているかを分析しましょう。

また、グローバルナビゲーションを作成する際、表記は日本語、または英語での表記の場合は日本語を併記するようにしましょう。

完全に英語圏向けのサイトであるなら英語表記だけで問題ありません。ですが、日本国内からのアクセスを想定したサイトの場合、英語表記のみよりも日本語表記がある方が、ユーザーは直感的に理解でき使い勝手もよいはずです。
英語表記のみでそのページがどんなページなのかすぐに理解できない場合、そのストレスでユーザーがサイトを離脱してしまうかもしれません。

デザイン性やブランディングといった理由で、グローバルナビゲーションを英語のみの表記にすることもあるかもしれません。
その場合は使いやすさやユーザビリティといった観点では劣ってしまう、ということを理解しておきましょう。

グローバルナビゲーションは、ただ設置するだけでは意味がなく、ページの邪魔にならないようなデザインに仕上げなくてはいけません。

では、見やすくかつホームページの外観を損なわないようなグローバルナビゲーションにするにはどのようにすればいいのか、デザインのポイントについて解説します。

４-１．ナビゲーションメニューの”位置”

グローバルナビゲーションは、ファーストビューに設置しておくと、認知度が高まるのでおすすめです。
そのため、誘導したいメインページがある場合には、ヘッダーやサイドバー上部に設置するのがいいでしょう。

ただし、あくまでおすすめの位置であり、絶対ではありません。

コンテンツに集中してもらいたい場合には、グローバルナビゲーションをフッターに設置しても問題はないでしょう。
基本としては、ユーザーに見えやすくコンテンツの邪魔にならない位置に設置する、と認識しておきましょう。

また、ページをスクロールしてもグローバルナビゲーションがヘッダーに固定される、などのデザインも多く利用されています。

４-２．全ページでデザインを”統一”

グローバルメニューの設置位置とデザインは、全ページで統一すべきです。

ページAでは赤色、ページBでは青色のグローバルナビゲーションとなると、統一感がなくなります。
統一されていないグローバルナビゲーションだと、閲覧者はページ毎にグローバルナビゲーションを探さなくてはならなくなります。
そのため、それがストレスになってサイトを離脱してしまうかもしれません。

またホームページのデザインに合わせたカラーを取り入れると、一体感があるのでおすすめです。

４-３．”階層構造”がわかるデザイン

ページ数が多いホームページの場合、グローバルナビゲーションにあるカテゴリだけではユーザーが迷子になってしまう可能性があります。
そのため、階層構造がわかるようにローカルナビゲーションも挿入しておくと、視認性が高まるでしょう。

また、階層構造を取り入れる際は、親カテゴリがわかるように色を変えて明確にさせておくのがポイントです。

４-４．”少ないクリック数”でたどり着ける工夫

グローバルナビゲーションは、少ないクリック数でページにたどり着いてもらう、という目的もあります。

目的としているページにたどり着くためには、およそ3クリック以内が理想的です。

3クリック以内というユーザーの手間を最小限に済ませるために、グローバルナビゲーションのリンクを考える必要があります。
ユーザーが必要であるコンテンツを分析しておき、グローバルナビゲーション内に設置できるように工夫しておきましょう。

４-５．メニューの数

グローバルナビゲーションのメニュー数についてもポイントがあります。
特にメニュー数を多くしてしまうと、視線がバラついてしまい探したい情報を見つけにくくなるので注意が必要です。

心理学者のジョージ・A・ミラー氏は、人間が1度に記憶できる数を最大で7±2であると提言しています。
上記は「マジカルナンバー7±2」や「ミラーの法則」と呼ばれ、グローバルナビゲーションのメニュー数にも活かすことが可能です。

現在では、人間が記憶できる数は4±1とも提言している学者もいるので、5～7個あたりのメニュー数なら問題ないでしょう。

グローバルナビゲーションの例をいくつかご紹介します。

まず、グローバルナビゲーションに掲載するワードが短く、伝わりやすい場合には7つ程度で作成して問題ありません。

また、掲載するワードが長い、あるいは伝わりにくい場合には、3～5つ程度で作成するといいでしょう。

今回解説しているのは、あくまでグローバルナビゲーションの目安です。
どうしても必要な項目が8つ以上ある場合でも、見やすいように工夫ができれば問題ありません。

ですがもし、メニュー数にもこだわりたいのであれば、A/Bテストのように実施期間を決めてどちらの方が優位であったかを確認するという方法もあります。

参考： ABテストとは？メリットや実施内容・効率的な進め方を徹底解説！

グローバルナビゲーションのデザインを考えるのは、ホームページの知識がない方にとっては難しい話です。
HTML・CSSの言語を使って実装を検討している場合は、なおさら時間がかかってしまいます。

そこでおすすめなのが、弊社が提供している「BESTホームページ」です。

BESTホームページは、プログラミング言語の知識が不要で、簡単な操作で本格的なホームページが作成できます。
グローバルメニューも、様々なデザインが選択でき簡単な操作でメニュー数の変更ができるので、ホームページの知識がなくても直感的な操作で作成可能です。

さらに、ホームページやコンテンツ作成にあたって、デザインや写真・画像素材のテンプレートも豊富にご用意。
自社だけのオリジナリティを出したデザインにすることもできます。

もしわからないことがあっても、弊社在籍のスタッフがサポートいたしますのでご安心ください。

実際にBESTホームページを操作してみたい方のために、今なら15日間の全機能が使える無料体験を実施中です。
この機会にぜひ、BESTホームページが自社に適しているかを確かめてみてください。

今回は、グローバルナビゲーションについて役割や作成時のポイントをご紹介しました。
グローバルナビゲーションがあると、主要ページにユーザーを誘導ができるので、原則全ページに設置すべき重要な要素です。

目安のメニュー数は7±2で、短く伝わりやすいワードを使用しましょう。

ぜひ、グローバルナビゲーションを用いて、ユーザーが目的のページにたどりつけるよう設計しましょう。