グローバルナビゲーション

グローバルナビゲーションは、Webサイトの主要なページやセクションへ移動するための、サイト内で共通して使うメニューです。

「グローバルナビ」「グロナビ」とも呼びます。UI上の呼称としての単一の公式定義・共通規格はなく、項目や表示方法はサイトの構成によって変わります。HTMLやアクセシビリティの仕様とは区別する言葉です。

例えば、企業サイトの各ページから「事業紹介」「会社情報」「お問い合わせ」へ移動できる共通メニューが挙げられます。

役割の中心は、主要な情報のまとまりを利用者へ示し、セクションをまたいで移動できるようにすることです。共通メニューから、サイト全体の主な行き先を探せます。

個別ページの内容をすべて並べるのではなく、サイトの主な分類を見せる設計が基本です。入口となる情報のまとまりを、詳しいページへのリンクと分けて整理します。

ナビゲーションは、移動したい範囲や、探している情報によって役割が異なります。主要な行き先を示すメニューと、現在位置や詳しいページの一覧を示す案内を使い分けます。

例えば、主要メニューから「サービス」へ移動したあと、その中の製品一覧をローカルナビゲーションで探す、といった組合せです。サイトマップとは、情報をまとめて一覧するか、主要な行き先を繰り返し示すかという役割も異なります。

基本は、行き先が分かる項目名と、サイトの情報構造に合ったまとまりを用意することです。表示場所や見た目を決める前に、主要な情報をどう分類して伝えるかを整理します。

項目名と情報の分類

項目名には、利用者がリンク先を想像できる言葉を使います。

リンクのテキスト（アンカーテキスト）は、利用者とGoogleの両方にリンク先の内容を伝えます。[1]

例えば、「その他」という項目に異なる情報を集める前に、何を一緒に扱うかを見直します。社内の部署名をそのまま使うかどうかも、利用者が行き先を理解できるかという観点で考えます。

スマートフォンでの表示

画面幅が狭いときも、主要な行き先を見つけ、操作できることが必要です。折りたたむか、項目を並べるかなどの表示方法は、項目数やレイアウトに応じて決めます。

W3C WAIのメニュー構造のチュートリアルは、画面サイズが変わっても、表示する項目の順序・表記・リンク先をそろえるよう勧めています。[2]

HTMLの<nav>要素は、主要なナビゲーションリンクのまとまりを示します。一つの文書に、サイト内の移動用とページ内の移動用など、複数の<nav>を置くこともできます。[3]

W3C WAIは、リストなどの意味を持つマークアップでメニュー構造を伝えることを推奨しています。現在のページを示す方法として、aria-current="page"も紹介しています。[2]

W3C WAIのARIA Authoring Practices Guide（APG）にある通常のWebサイト向けナビゲーションの例は、リンクの一覧を表示・非表示にする部分にdisclosureパターンを使い、WAI-ARIAのmenuロールを使っていません。通常のサイトナビゲーションには、menu・menubarパターンが定めるキー操作のすべてが必要なわけではありません。[4]

Google検索が通常クロールできるリンクは、href属性を持つ<a>要素です。[1]

メニューを置くことや、クロール可能なリンクを用意することだけで、検索順位が上がると保証することはできません。 利用者の移動と、検索エンジンがリンクをたどれる条件は分けて確認します。