グローバルナビゲーションとは？役割や作り方のポイントを解説
グローバルナビゲーションは、WEBサイトの案内板としてユーザーをサポートするメニューであり、サイトを訪れたユーザーの目に留まりやすい箇所であるサイトのページ上部やサイドバーなどに設置するのが一般的です。
しかし、ユーザーの目につきやすいからこそ、グローバルナビゲーションの品質次第でWEBサイトの効果を大きく左右します。グローバルナビゲーションを設置する目的は、ユーザーが求めている情報に導くことです。ユーザーニーズを満たせないグローバルナビゲーションではユーザーがWEBページから離脱する原因になります。
そこでグローバルナビゲーションを優秀なナビゲーターにする方法、ユーザビリティの高いグローバルナビゲーションに不可欠な要素についてご説明します。
グローバルナビゲーションとは
グローバルナビゲーション（グローバルナビ、グロナビ）は、WEBサイト上でユーザーが迷うことなく目的の情報にたどり着くために設置するメニューのことです。グローバルナビゲーションを意味する言葉は他にもいくつかあります。
- ヘッダーナビゲーション
- ヘッダーメニュー
- グローバルメニュー
- メインメニュー
呼び名はさまざまですが、共通する役割はユーザーニーズを満たす情報に最短距離で辿り着けるようナビゲートすることです。
グローバルナビゲーションの役割
グローバルナビゲーションの役割は、ユーザーに対する役割と検索エンジンに対するものに分類できます。それぞれに対する役割を知ることは、グローバルナビゲーションの精度を高めるために有効です。
ユーザーに対する役割
グローバルナビゲーションはユーザーに対して、以下の2つの役割を果たします。
- ユーザーが求める情報に最短距離で導く
- WEBサイトの全体像をユーザーが理解するためのサポート
適切な導線で設置されたグローバルナビゲーションは、どの階層のWEBページにユーザーが居ても、ニーズを満たす情報までユーザーを導くことができます。
検索エンジン経由でユーザーがWEBページに辿り着く場合、ユーザーのほとんどはTOPページ以外のページに到着します。しかし、同じWEBページに辿り着いたユーザーであってもそれぞれのニーズは同一ではありません。
そこでユーザーがWEBサイト内で迷い、疲弊しないようにサポートするのがグローバルナビゲーションです。ユーザーニーズを満たすよう設計されたグローバルナビゲーションは、ユーザーがどの階層のページに辿り着いた場合でも、ユーザーが求めている情報に辿り着けるよう導きます。しかも最短ルートでユーザーを情報まで誘導するので、ユーザーのストレスも最小限で済むこともメリットです。
WEBサイトはユーザーに対して個別のサポートやフォローができない弱点も抱えています。このWEBサイトの弱点を補うのがグローバルナビゲーションです。ユーザーがWEBサイト内で迷うことのないようにユーザーを助ける、いわばWEBサイトに常設されたカスタマーサポートの役割を果たします。
ストレスなく必要な情報を入手できれば、ユーザーの満足度は高まります。その結果、コンバージョンに繋がる効果も期待できます。
ユーザーニーズに適した導線で設置されたグローバルナビゲーションは、WEBサイト内の膨大な情報を整理整頓し、ユーザーがアクセスしやすいサイトを作るうえで重要です。
検索エンジンに対する役割
グローバルナビゲーションには、SEOでの評価を高める効果も期待できます
グローバルナビゲーションは、WEBサイトのすべてのページにリンクとして設置します。WEBサイト内のショートカットとして機能を果たすことから、検索エンジンに対して主要なコンテンツを認識させやすくし、ひいてはSEOでの評価を高める効果に繋がります。
グローバルナビゲーションの設置箇所
グローバルナビゲーションはWEBページの上部またはサイドバーにメニューとして設置します。ユーザーがWEBサイトに辿り着いた段階ですぐに視界に飛び込んでくるような場所であることが大切です。
また設定によって、ページをスクロールしてもグローバルナビゲーションは固定して表示することも可能です。この場合、WEBページのどの部分にいてもメニューを活用できるのでユーザビリティが高まります。
グローバルナビゲーションの設置位置に絶対的な正解はありませんが、以下の3つのポイントを満たすことが大切です。
- ユーザーから見えやすい位置
- WEBページのメニューであることがすぐに分かるデザイン
- すべてのページで同じ位置、同じデザインで設置する
グローバルナビゲーションにとってもっとも重要な使命は、ユーザーを迷わせないことです。ページ毎にグローバルナビゲーションの位置やデザインが違う場合、ユーザーはページを移動する度に目線を動かしてグローバルナビゲーションを探すことになってしまい、ユーザビリティが高いとはいえません。
ユーザーがどのページからも活用しやすいように、グローバルナビゲーションはすべてのWEBページで同じ位置に、同じデザインで統一して設置することが大切です。
グローバルナビゲーション設置における7つのポイント
グローバルナビゲーションの設計や設置にあたっては、WEBサイトの目的やユーザーのニーズから逆算して導線を決定します。その際に考慮すべきポイントが以下の7つです。
- 見えやすい位置に設置する
- 異なるページでもデザインを統一する
- 日本語で表記する
- 優先順位の高いメニューから順に設置する
- 導線を最短距離にする
- 項目を増やしすぎない
- テキストで書く
見えやすい位置に設置する
グローバルナビゲーションはWEBページのファーストビュー、つまりユーザーの目に最初に留まる位置に設置します。パソコンで閲覧することを想定しているWEBサイトの場合は、ページのヘッダー部分や左右のサイドバーに配置するのが一般的です。
この時、グローバルナビゲーションはユーザーがページをスクロールする手間をかけなくても見える位置に設置することが大切です。ユーザーの利便性が高まればWEBサイト内の回遊率を上げ、離脱率を下げる効果が期待できます。
スマートフォン向けサイトにおけるグローバルナビゲーションの位置
スマートフォンやタブレットで閲覧されることを想定しているWEBサイトの場合は、ページの右上や左上のほかに、ページの一番下に配置されることがあります。これは、スマートフォンやタブレットを手に持って操作する状況を想定しているためです
すべてのページでデザインを統一する
グローバルナビゲーションは、デザインの質よりもユーザーが分かりやすいことを最優先に作成する必要があります。
- すべてのページで同じ位置に設置する
- すべてのページに同じデザインで設置する
- 視線の流れに合わせてメニューを配置する
- グローバルナビゲーションであるとわかるデザインにする
- 階層別に文字やデザインを変える
- クリックしやすいサイズで表示する
ページによってデザインが異なると、メニュー項目として認識するまでに時間がかかります。また、ページによってグローバルナビゲーションの位置が違えば、ページを追うたびにユーザーは目線を動かして探すことになります。これではユーザーにとっては不親切です。
ユーザーがひと目でメニューであると認識できるデザインであることも大切です。文字やクリックする箇所が小さくなりすぎないように、細部のデザインまでユーザーの利便性に配慮して作成します。
スマートフォン向けサイトのデザイン
スマートフォンは表示画面がパソコンに比べて狭いことから、ハンバーガーメニューと呼ばれるメニューアイコンを使用するケースもあります。通常時はメニューを非表示にし、ユーザーがハンバーガーメニューのアイコンをクリックすることでメニューが表示される仕組みです。
ハンバーガーメニューには以下のようなものがあります。
- ドロップダウンメニュー、プルダウンメニュー
- ドロワーメニュー
- ヘッダーメニュー、フッターメニュー
- モーダルウィンドウ
- スプリングボード
ドロップダウンメニューやプルダウンメニューと呼ばれるハンバーガーメニューは、メニューアイコンをユーザーがクリックすると、メニュー内容が画面上部から落ちるように表示されます。メニューが画面の横からスライドして表示されるドロワーメニューもあります。
メニューアイコンをユーザーがクリックすることで展開するので、メニューを使用しないときは画面を広く使ってコンテンツを表示できるのがメリットです。
スマートフォンやタブレットの限られた画面を広く活用するために、ユーザーニーズの高いメニューはヘッダーやフッターに設置し、それ以外のメニューをハンバーガーメニューに実装する、ヘッダーメニューやフッターメニューもあります。
また、ハンバーガーメニューのアイコンをクリックすると画面全体にメニューが大きく表示されるモーダルウィンドウやユーザーがハンバーガーメニューをクリックする手間を省き、ファーストビューでメニュー内容が大きく表示されるスプリングボードもあります。
スマートフォン向けサイトは表示面積が狭いので、ユーザーの視線の動きや導線がパソコンサイトとは異なります。スマートフォンサイトにおけるユーザーの導線やニーズを検証しながら、適切なグローバルメニューを選定することが大切です。
日本語でわかりやすく書く
グローバルナビゲーションは日本語で、かつ誰もがわかりやすいキーワードを使って作成します。
例えば、ABOUTと英語で表記した場合、何に関するABOUTなのか伝わりません。会社概要なのかサイトに関するページなのか、それとも別のことに関する内容なのか、とユーザーは混乱します。デザイン性を求めて英語表記することは抑え、ユーザビリティを最優先することが肝心です。
また、グローバルナビゲーションで使用する言葉にも配慮が必要です。サイト制作者はWEBサイトの全容を知っていますが、ユーザーは事前の知識を持たずにサイトを訪れています。万人が理解できるだろうと安易に考えて自分の見識で何気なく使った言葉を誰もが同じように理解するとは限りません。さまざまな生活環境にあるさまざまな価値観を持ったユーザーがサイトに訪れることを念頭に、誰が見てもわかる言葉で表記することが大切です。
優先順位の高いメニューから順に配置する
グローバルナビゲーションは優先順位の高いものから順に、メニュー項目を厳選して配置します。グローバルナビゲーションの表示領域は無限ではありません。また情報が増えるほど視認性と利便性が下がります。
グローバルナビゲーションはわかりやすさが大切です。サイトを訪れたユーザーが必要とする度合いに合わせて情報に順位をつけ、優先度の高いものから順に配置します。
最短距離で情報に辿り着けるように設置する
グローバルナビゲーションは、最短距離の導線でユーザーが必要な情報に辿り着けるよう設計されたサイト構造をベースに作成されることが大切です。ユーザーニーズを逆算してグローバルナビゲーションを作成し、最小限の労力でユーザーが求める情報に辿り着けるようにサポートするようにしてください。
このとき、パンくずリストをメインコンテンツの上部に設置するのがおすすめです。パンくずリストがあれば、ユーザーは自分がここまでに辿ってきたページをひと目で確認できます。
パンくずリストとは
WEBサイト内の現在地をわかりやすくリストにしたものがパンくずリストです。WEBサイトの規模が大きくなり、コンテンツが増えるほど階層が複雑になります。ユーザーがWEBサイト内における自分の位置を把握するのは、容易ではありません。
パンくずリストは一般的に、ユーザーの目につきやすいサイト上部に設置されます。パンくずリストを使うことでユーザーは直感的に自分がどの階層にいるかを把握できます。ユーザーの利便性が高まり、探している情報にアクセスしやすくなる点がメリットです。
テキストで作る
グローバルナビゲーションのメニューはテキストで作成してください。テキストで作成されていると、検索エンジンが把握しやすくなるためです。Googleもテキストでの作成を推奨しています。
ナビゲーションにテキストを使用する
サイト上のページ間のナビゲーションの大部分をテキストリンクで制御すると、検索エンジンが容易にサイトをクロールして把握できるようになります。JavaScript を使ってページを作成する場合は、a 要素とともに href 属性の値として URL を使用し、ユーザーの操作を待つのではなく、ページ読み込み時にすべてのメニュー項目が生成されるようにします。
以下のことは避けましょう。
全体的に画像やアニメーションに基づいてナビゲーションを作成する。
出典：検索エンジン最適化（SEO）スターター ガイド（Google検索セントラル）
SEOでの評価という観点で考える場合、Googleが推奨しない画像やアニメーションでグローバルナビゲーションを作成することは避けます。
メニューの適切な数とは？
グローバルナビゲーションの項目は必要最低限に抑えます。
具体的にはいくつにすればよいか、という疑問に対する答えはいくつかあります。かつては、5〜7項目が理想であるといわれてきました。これは、アメリカの心理学者であるジョージ・ミラー氏が提唱した、人間の短期記憶に関する研究「マジカルナンバー7±2の法則」にもとづきます。（参考：The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information）
しかし最近では、コロンビア大学のシーナ・アイエンガー教授による「ジャムの実験」によって、人間の短期記憶は最大4つ程度である可能性も示唆されています。（参考：シーナ・アイエンガー：選択をしやすくするには）
こうしたことから、適切なグローバルナビゲーションの項目数はサイトの性質やユーザーのニーズに合わせて、増やしすぎず不足のない数で設定すべきです。グローバルナビゲーションのメニュー数が多すぎれば、ユーザーが情報をスムーズに探す妨げになり、WEBページから離脱する原因になりかねません。またグローバルナビゲーションの項目が9つを超えると、文字サイズが小さくなりすぎて見にくくなる懸念もあります。
自社サイトに適したグローバルナビゲーションの項目数は、ユーザー層の変化やユーザーニーズの変遷の影響も受けます。グローバルナビゲーションの効果を検証しながら、修正を重ねることが大切です。グローバルナビゲーションの数は最小限に厳選して、検証しながら調整します。
まとめ
グローバルナビゲーションは、WEBサイトを訪れたユーザーが必ず目にするものであると同時に、ユーザーに寄り添い、ユーザーが求める情報に辿り着くためのサポート役でもあります。しかし、グローバルナビゲーションの最適解は一朝一夕には見つかりません。対面できないユーザーの言葉にならないニーズを理解し、ユーザーニーズを満たす情報を先回りして提示するのは容易ではないためです。ウェブサイトを訪れたユーザーを適切に導き、コンバージョンに繋げるためには、検証と修正を重ねることが大切です。
この記事の監修者
新潟大学大学院を卒業後、事業会社で10年働く間にSEOに出会う。自身でサイトを多数立ち上げ、実験と検証を繰り返しながらSEOを研究。お金に変えることを目的とはせず、ユーザーに何が有益かを問い続け改良を繰り返すうち、「インターネット上の真実ではない情報を正してユーザーのためになる情報を発信する」という天啓を得る。現在は東京SEOメーカーの上級SEOアドバイザーとしてアサイン。
