--- title: "グローバルナビゲーションとは？ヘッダーとの違い・デザインの型と作り方、HTML実装とSEOの基準" url: "https://www.issoh.co.jp/column/details/7706/" published: 2025-07-15 updated: 2026-10-12 categories: ["Webサイト"] publisher: "株式会社一創" --- # グローバルナビゲーションとは？ヘッダーとの違い・デザインの型と作り方、HTML実装とSEOの基準 グローバルナビゲーション（グロナビ、グローバルメニューとも呼びます）は、サイトのどのページにも同じ位置・同じ順序で表示される主要カテゴリへの入口です。見た目の流行で形を選ぶと、スマホでは項目が隠れて使われず、ドロップダウンはタッチ端末で開かず、JavaScriptのクリック処理だけで遷移する項目からは、Googleがリンク先を確実に抽出できません。この記事では、ヘッダーとの境界、デザインの型ごとの使い分け、項目数とラベルの決め方、nav要素と開閉ボタンの実装、SEOで効く条件を、NN/gの実測値とW3C・Googleの一次資料で判断できる形にまとめます。 ## まとめ：グローバルナビゲーション設計の要点 - グローバルナビゲーションは全ページ共通の主要カテゴリへの入口です。ヘッダーはロゴや検索窓も含む「領域」で、グロナビはその中に置かれる「部品」の1つです。 - デスクトップでハンバーガーメニューに隠すのは避けます。NN/gの2016年の調査では、隠したナビゲーションはデスクトップで少なくとも39%、スマホで15%タスク時間が延びました。 - 項目数を「7±2」で決める根拠はありません。Millerの1956年の論文は記憶の範囲の研究で、画面に見えているメニューの選択とは別の話です。 - ドロップダウンは`role="menu"`ではなく、`button`と`aria-expanded`による開閉で作ります。ホバーだけで開く実装はタッチ端末で操作できません。 - リンクは`href`属性を持つ`a`要素で書き、メニュー内のリンクも最初のHTMLに含めます。タップして初めて読み込むリンクはGoogleに見えません。 以下、定義、デザインの型、項目数とラベル、作り方、実装、SEOの順に根拠を示します。 ## グローバルナビゲーションの定義とヘッダー・他のナビゲーションとの境界 ### 全ページ共通の主要カテゴリへの入口という定義 グローバルナビゲーションは、サイトの最上位カテゴリ（サービス、事例、料金、会社情報など）へのリンクを、全ページで同じ位置と順序に並べたものです。情報アーキテクチャの定番書『情報アーキテクチャ 第4版』（オライリー・ジャパン、2016年11月18日発行）の目次では、8.6「埋め込み型ナビゲーションシステム」の下にグローバル、ローカル、コンテキストの3つが並んでいます。ページの中に組み込まれ、サイト全体・セクション内・本文の文脈という異なる範囲の移動を支える導線、という位置づけです。 識別の基準は「どのページへ移っても項目が変わらないか」です。項目が変わらなければグローバル、セクションごとに入れ替わるならローカルナビゲーションです。ローカル側の設計は[ローカルナビゲーションとは？5種類の使い分けと設計・実装の判断基準](/column/details/7707/)、本文中で関連記事へ送る導線は[コンテキストナビゲーションとは？関連リンクの選び方とHTML実装・SEOの基準](/column/details/7708/)で扱っています。 ### ヘッダーとグローバルナビゲーションの違い ヘッダーはページ上部の「領域」の名前で、ロゴ、サイト内検索、ログイン、問い合わせボタン、そしてグローバルナビゲーションが入ります。グロナビはヘッダーに置かれることが多い「部品」の1つにすぎません。HTMLでも両者は別の要素で、ヘッダー領域は`header`要素、ナビゲーションのまとまりは`nav`要素で表します。HTML Living Standardは`header`要素を「導入部やナビゲーションの補助となるもののまとまり（a group of introductory or navigational aids）」と定義しており、仕様の例でも`header`の中に`nav`を置いていますが、`nav`を必ず含める要素ではありません。 区別が実務で効くのは、ヘッダーに何を足すかを決める場面です。問い合わせへのリンクや電話番号は、主要カテゴリの一覧と分けてヘッダー内に配置できます。グロナビの並びに「お問い合わせ」を混ぜると、カテゴリの一覧と行動ボタンの区別が消え、項目数も1つ増えます。ボタンとして別に置くのが基本です。 ### パンくず・フッターナビゲーションとの役割分担 パンくずリストはトップから現在地までの縦の位置を示し、フッターナビゲーションは規約や会社情報など、毎回は使わないが全ページから届くべきページを受け持ちます。グロナビに載せきれない項目をフッターへ回すと、上部の並びを主要カテゴリに絞れます。パンくずの実装と構造化データは[パンくずリストとは？SEO効果と構造化データの実装・階層設計の判断【2026年時点】](/column/details/16573/)で解説しています。 ## グローバルナビゲーションのデザインの型と選び方 デザインの型は、最上位カテゴリの数と、その下の階層の深さで決まります。見た目の好みより先に、この2つを数えます。 | 型 | 向く構造 | 主な弱点 | 実装の要点 | | ------- | -------------- | ------------ | -------------------- | | 横並びバー | 最上位が少なく下層が浅い | 項目が増えると折り返す | 各項目を実ページへのリンクに | | ドロップダウン | 最上位の下に数項目 | ホバー依存で開かない | button＋aria-expanded | | メガメニュー | 下層が多いEC・大規模サイト | 表示が速すぎるとちらつく | 0.5秒待って表示 | | ハンバーガー | スマホで項目が5つ以上 | 存在に気づかれにくい | 一部の項目は常時表示 | | 固定（追従） | 長いページ | フォーカスを覆い隠す | scroll-padding-top | 型は組み合わせて使います。デスクトップは横並びバーとメガメニュー、スマホはハンバーガーと常時表示の数項目、という分担が一般的です。 ### メガメニューの表示タイミングとグループ分け メガメニューは、2次元に広がる大きなパネルで多くの選択肢を一度に見せるドロップダウンです。NN/gのJakob NielsenとAngie Liは2017年3月26日の記事「Mega Menus Work Well for Site Navigation」で、選択肢が多いサイトや下位階層を見せたい場合に適した設計だと評価しています。ECサイトで「レディース」の下に「トップス」「ボトムス」とその下位分類まで並べるような構成が典型です。 同じ記事は、ホバーで開く場合のタイミングを具体的に示しています。ポインタが項目の上で0.5秒止まってから表示し、表示は0.1秒以内に行い、ポインタが項目とパネルの両方から0.5秒離れたら閉じる、という順序です。ポインタが画面を横切っただけでパネルが開閉すると画面がちらつくためです。パネル内の分類は、ユーザーが実際にどうまとめるかをカードソートで確かめてから決めます。手順はカードソートとは？オープン・クローズド・ハイブリッドの違いと進め方・分析方法にまとめています。 ### ハンバーガーメニューの発見率とスマホでの使い分け NN/gのKara PerniceとRaluca Budiuは、2016年6月26日の記事「Hamburger Menus and Hidden Navigation Hurt UX Metrics」で、179人が6つのサイトをデスクトップとスマホで操作した定量調査の結果を公表しています。ナビゲーションの利用率は、デスクトップで隠した場合27%に対し、表示した場合48%、一部だけ表示した場合50%と、隠すとほぼ半分に落ちました。ナビゲーションを使って目的のコンテンツにたどり着けた割合も20%以上下がり、タスク時間はデスクトップで少なくとも39%、スマホで15%長くなっています。 同記事の推奨は端末で分かれます。デスクトップでは隠したナビゲーションを使わず、最上位の項目を表示します。スマホについては厳密な決まりはないと断ったうえで、最上位が4つ以下なら見えるリンクとして並べ、5つ以上なら一部を隠すのが現実的な解だとしています。スマホでの不利益はデスクトップより小さいためです。NN/gの4項目という目安を出発点に、ラベルの長さと画面幅を確認します。全項目を表示しにくい場合は一部を隠し、重要な項目への見える導線を残します。 ### 固定ヘッダーとキーボードフォーカスの遮蔽 スクロールしても画面上部に残る固定ヘッダーは、グロナビへいつでも戻れる反面、WCAG 2.2の達成基準2.4.11 Focus Not Obscured (Minimum)（レベルAA）に抵触しやすい実装です。この基準は、キーボードフォーカスを受けたコンポーネントが作成者のコンテンツで完全に隠されないことを求めます。Tabキーで下の方のリンクへ移ったとき、対象が固定ヘッダーの裏に入り込むのが典型的な失敗です。 ``` :root { --header-h: 64px; } html { scroll-padding-top: var(--header-h); } ``` 固定ヘッダーの高さを変数にして`scroll-padding-top`に渡すと、フォーカス移動やページ内リンクでのスクロール位置がヘッダーの分だけ下がります。ヘッダーの高さを変えたときに値がずれないよう、レイアウト側も同じ変数を参照させます。 ## 項目数は「7±2」で決めない：数とラベル・並び順の決め方 ### Millerの「マジカルナンバー7」がメニューに当てはまらない理由 「グローバルナビの項目は7つまで」という目安は、George A. Millerが1956年にPsychological Reviewへ発表した論文「The Magical Number Seven, Plus or Minus Two」を根拠に語られることがあります。しかしこの論文が扱っているのは、刺激の大きさを判別する絶対判断の実験と、直前に示された項目をどれだけ覚えていられるかという即時記憶の範囲です。画面に表示され続けるメニューは、覚えておく必要がなく、見て選ぶ対象です。記憶の上限をそのまま適用する前提が成り立ちません。 Miller自身、論文の結びで、さまざまな場面に7が現れることについて「pernicious, Pythagorean coincidence（有害な、ピタゴラス的な偶然）にすぎないのではないか」と書いています。7という数を設計の規則にする根拠は、原典の側にもありません。 ### 項目数を決める実務上の基準 数の上限ではなく、次の条件で決めます。デスクトップでは、最上位カテゴリがヘッダー幅に1行で収まり、ラベルを省略せずに読めること。スマホでは、デザインの型の章で示したNN/gの4項目という目安を基に、ラベルの長さとタップ領域を確保できる表示方法を選びます。最上位に何を置くかは、アクセス解析で入口になっているページと、問い合わせ・購入に至る経路から決めます。階層の深さを何クリックで制限するかという議論も、根拠を確かめると同じように崩れます。経緯は[3クリックルールとは？提唱の起源と調査で否定された根拠、SEOのクリック深度との違い](/column/details/7611/)を参照してください。 ### ラベルの言葉と並び順の固定 ラベルはユーザーが探すときに使う語にします。「ソリューション」「サービス」だけでは内容を区別しにくい場合は、「Web制作」「システム開発」のように提供内容を示します。複数サービスをまとめる一覧ページでは「サービス」も候補になります。社内の部署名や製品のコードネームも同じです。迷ったら、ユーザーに分類と命名をさせるカードソートか、ラベルだけで目的のページを探させるツリーテストで確かめます。 既存項目の並び順は全ページで固定します。WCAG 2.2の達成基準3.2.3 Consistent Navigation（レベルAA）は、複数のページで繰り返されるナビゲーションが、ユーザーが変更を始めた場合を除き、同じ相対的な順序で現れることを求めています。項目を先頭に追加するだけで、既存項目同士の相対的な順序が保たれていれば、この基準には反しません。ページによって既存項目の前後関係を入れ替える運用は避けます。 ## グローバルナビゲーションの作り方：設計から公開までの手順 1. **コンテンツの棚卸し**：既存ページと今後増える予定のページを一覧にし、最上位に置く候補を出します。 2. **最上位カテゴリのグループ分け**：カードソートでユーザーのまとめ方を確かめ、最上位の数を決めます。 3. **ラベルの決定**：ユーザーの語で命名し、ツリーテストで目的のページに到達できるかを測ります。 4. **端末ごとの型の選択**：デスクトップとスマホで、上の表から型を選びます。スマホはNN/gの4項目という目安から検討を始めます。 5. **実装と検証**：キーボードだけで全項目を開閉・移動できるか、スクリーンリーダーで現在地が読まれるかを確認してから公開します。 手順1と2は、サイト全体の構造を決める作業そのものです。トップダウンで構造を決める進め方と分類の考え方は[インフォメーションアーキテクチャ（IA）とは？情報アーキテクチャの4要素と設計手順](/column/details/7612/)が出発点になります。グロナビの設計はこの構造の最上位をそのまま映す作業で、構造が決まらないうちに見た目から作ると、後で項目を足すたびに並びが崩れます。 ## HTML・CSS・JavaScriptでの実装：nav要素・開閉ボタン・現在地表示 ### header要素とnav要素の組み立て HTML Living Standardは`nav`要素を、他のページやページ内の各部へリンクするナビゲーション用のセクションと定義し、ページ上のリンクのまとまりが全て`nav`に入る必要はなく、主要なナビゲーションブロックを主な対象とする要素だとしています。グロナビはこの主要なブロックの代表なので`nav`で囲みます。1ページに複数の`nav`があるときは`aria-label`で用途を区別し、支援技術の利用者が「どのナビゲーションか」を判別できるようにします。 ```
お問い合わせ
``` 「サービス」は文字部分をリンク、隣のボタンをサブメニューの開閉に分けています。最上位のラベルが実ページへのリンクになっていれば、パネルが開かない環境でも一覧ページから下層へ進めます。NN/gのメガメニュー記事も、最も簡単なアクセシビリティ対策として、最上位の項目を通常のページへのリンクにすることを挙げています。問い合わせボタンは`nav`の外に置き、カテゴリの並びと分けています。 ### ドロップダウンの開閉ボタンとARIA属性 W3CのARIA Authoring Practices Guide（APG）は、サイトのナビゲーションを開閉ボタン（ディスクロージャー）で作る例「Disclosure Navigation Menu」を公開しています。この例はあえて`menu`ロールを使っておらず、その理由を「一般的なサイトナビゲーションは、menuとmenubarのパターンが定めるキーボード操作の全てを必要としない」と説明しています。APGの`menu`は、デスクトップアプリケーションのメニューのように操作や機能の選択肢を示すウィジェットです。サイトの導線には、`button`の`aria-expanded`で開閉状態を伝え、`aria-controls`で開閉するパネルを指す方式を使います。 ``` document.querySelectorAll('.gnav button[aria-expanded]').forEach((btn) => { const panel = document.getElementById(btn.getAttribute('aria-controls')); const setOpen = (open) => { btn.setAttribute('aria-expanded', String(open)); panel.hidden = !open; }; btn.addEventListener('click', () => { setOpen(btn.getAttribute('aria-expanded') !== 'true'); }); btn.parentElement.addEventListener('keydown', (e) => { if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') { setOpen(false); btn.focus(); } }); }); ``` サブメニューの中身は最初からHTMLに書いておき、`hidden`属性で隠すだけにします。Escキーで閉じてボタンへフォーカスを戻せます。このJavaScriptはナビゲーションのHTMLより後で実行するか、外部スクリプトをdefer属性付きで読み込みます。 ### ホバーで開くパネルとWCAG 1.4.13の3条件 ホバーで開く実装を残す場合も、クリックとキーボードで同じパネルを開けるようにします。タッチ端末にはホバーがないためです。WCAG 2.2の達成基準1.4.13 Content on Hover or Focus（レベルAA）は、ホバーやフォーカスで現れる内容について、原則としてポインタやキーボードフォーカスを動かさずに閉じられること（入力エラーを伝える内容や、他の内容を覆ったり置き換えたりしない内容は除く）、ポインタをその内容の上へ移しても消えないこと、ユーザーが閉じるかホバー・フォーカスが外れるまで表示が続くことの3点を求めています。メガメニューのパネルへポインタを移す途中で閉じてしまう実装は、2つめの条件に反します。 ### 現在地を示すaria-current 現在表示しているページそのものへのリンクに`aria-current="page"`を付けます。下層ページで親カテゴリを強調する場合は、親カテゴリを現在のページとして示さず、現在の項目を表す`aria-current="true"`などを使い分けます。色や太字だけの強調はスクリーンリーダーに伝わりません。CSSもこの属性を起点に当てると、状態と見た目がずれません。下層ページの正確な現在地は、グロナビではなくパンくずで示します。読み上げ順序まで含めた確認方法は[Webアクセシビリティのスクリーンリーダー対応：NVDA・VoiceOverでの実機検証と読み上げ順序の設計](/tech/details/16505/)にまとめています。 ## SEOから見たグローバルナビゲーション：Googleがリンクを辿れる条件 ### クロール可能なリンクのa要素とhref属性 Google検索セントラルの「リンクのベストプラクティス」は、Googleが一般にリンクをクロールできるのは`href`属性を持つ`a`要素の場合だとし、`href`のない`a`要素やスクリプトのイベントでリンクのように振る舞う要素からは、URLを確実に抽出できないとしています。`onclick`でページを切り替えるだけの項目や、`div`にクリック処理を付けただけの項目は、ユーザーには押せてもGoogleにとってはリンクではありません。JavaScriptでグロナビを組み立てること自体は問題なく、「JavaScript SEOの基本」も、`href`属性を持つ`a`要素としてDOMに挿入されたリンクはクロールできるとしています。 グロナビは全ページに出るため、ここにあるリンクは主要カテゴリのページへの内部リンクを全ページから供給します。同じ資料は、重要なページには少なくともサイト内の別のページから1本のリンクを張るよう勧めています。最上位カテゴリのページがグロナビからしかリンクされていないサイトは珍しくなく、書き方を誤ると主要ページが孤立します。 ### スマホのメニュー内リンクとモバイルファーストインデックス Googleはスマホ版のページを基準にインデックスします。モバイルファーストインデックスのベストプラクティスは、スマホ版にデスクトップ版と同じ内容を載せるよう求めたうえで、アコーディオンやタブのようにデザインを変えるのは構わないとしています。一方で、ユーザーの操作をきっかけに主要な内容を遅延読み込みしないよう求め、Googleはクリックやスワイプなどの操作が必要な内容を読み込まないと明記しています。 ハンバーガーメニューの中身をCSSで隠しておくのは問題ありません。問題になるのは、メニューを開いたときに初めてリンク一覧を取得する実装です。この場合、スマホ版のHTMLにはグロナビのリンクが存在せず、デスクトップ版と内部リンクの構造が変わってしまいます。 ### アンカーテキストの簡潔さとリンク先との関連性 同じリンクのベストプラクティスは、良いアンカーテキストを、説明的で適度に簡潔で、リンク元とリンク先の両方に関連するものと説明しています。グロナビのラベルを「東京のWeb制作・ホームページ制作」のように検索語で長くすると、ヘッダーで読めない長さになり、項目の区別もつきにくくなります。ラベルは短く、カテゴリページの見出しと一致させます。 ## グローバルナビゲーションで避けるべき設計 次の設計には、項目の発見、操作、クロール、一貫性にそれぞれ問題が生じます。公開前に各条件を確認します。 - **デスクトップでのハンバーガーメニュー**：NN/gの調査でタスク時間が少なくとも39%延びた設計です。画面幅に余裕がある端末で隠す理由はありません。 - **ホバーでしか開かないドロップダウン**：タッチ端末とキーボードで下層に到達できなくなります。最上位のラベルが実ページへのリンクでなければ、その下のページ群全体が行き止まりになります。 - **操作時に読み込むメニュー**：スマホ版のHTMLからリンクが消え、Googleが主要カテゴリへの経路を把握できなくなります。 - **ページごとに変わる並び順**：WCAG 2.2の3.2.3に反するおそれがあり、利用者は毎回項目を探し直します。 - **中身の分からないラベル**：「ソリューション」「その他」は、開いてみるまで何があるか判断できません。 逆に、ページ数が10前後の小規模サイトや、1つの行動へ誘導するランディングページでは、グロナビ自体を最小限にするか置かない判断もあります。目的のページへ本文のリンクだけで届くなら、項目の並びが判断の邪魔になるからです。 ## よくある質問 ### グローバルナビゲーションとは何ですか？ サイトのどのページにも同じ位置・同じ順序で表示される、主要カテゴリへのリンクの並びです。グロナビ、グローバルメニューとも呼ばれます。ページを移っても項目が変わらない点で、セクションごとに中身が入れ替わるローカルナビゲーションと区別します。多くのサイトではページ上部のヘッダー内に置かれ、スマホではハンバーガーメニューの中に収められます。 ### グローバルナビとヘッダーの違いは何ですか？ ヘッダーはページ上部の領域の名前で、ロゴ、検索窓、ログイン、問い合わせボタンなどを含みます。グローバルナビゲーションはその中に置かれる部品の1つで、主要カテゴリへのリンク群だけを指します。HTMLでもヘッダーは`header`要素、ナビゲーションは`nav`要素と別の要素で表します。 ### グローバルナビゲーションの項目数はいくつがよいですか？ 決まった上限はありません。「7±2」はMillerの記憶範囲の研究に由来する誤用です。デスクトップではヘッダー幅に1行でラベルを省略せず収まるか、スマホではNN/gが一般的な目安として示す「4つ以下なら全て表示し、超えるなら一部を隠す」を出発点に、重要な項目への見える導線を残せるか、で判断します。 ### スマホではハンバーガーメニューにすべきですか？ 一律の決まりはありませんが、NN/gは最上位の項目が4つ以下なら隠さずに表示することを勧めています。同社の2016年の調査では、隠したナビゲーションはスマホでもタスク時間が15%長くなりました。5つ以上ある場合はハンバーガーに収めるのが現実的ですが、最もよく使われる項目は外に出し、メニューの中身は最初からHTMLに含めておきます。 ### グローバルナビゲーションはSEOに効果がありますか？ 全ページから主要カテゴリのページへ内部リンクを供給するため、Googleがサイトの構造とページの存在を把握する経路になります。効果が出る前提は、`href`属性を持つ`a`要素で書かれ、スマホ版のHTMLにもリンクが含まれていることです。ラベルに検索キーワードを詰め込んでも、順位を上げる根拠にはなりません。 ## 関連記事 - [ローカルナビゲーションとは？5種類の使い分けと設計・実装の判断基準](/column/details/7707/) - [コンテキストナビゲーションとは？関連リンクの選び方とHTML実装・SEOの基準](/column/details/7708/) - [パンくずリストとは？SEO効果と構造化データの実装・階層設計の判断【2026年時点】](/column/details/16573/) - [インフォメーションアーキテクチャ（IA）とは？情報アーキテクチャの4要素と設計手順](/column/details/7612/) - [3クリックルールとは？提唱の起源と調査で否定された根拠、SEOのクリック深度との違い](/column/details/7611/) --- 出典: [グローバルナビゲーションとは？ヘッダーとの違い・デザインの型と作り方、HTML実装とSEOの基準]()（株式会社一創）