ローカルナビゲーションとは？5種類の使い分けと設計・実装の判断基準

ローカルナビゲーションは、いま見ているセクションの配下だけを扱う補助的な導線です。サイト全体の入口を示すグローバルナビゲーションと混同したまま設計すると、全ページに同じリンクが並ぶだけの「小さなグローバルナビ」になり、階層を伝える働きを失います。この記事では、5つの設計パターンの使い分け、nav要素とaria-currentによる実装、WCAG 2.2が定める寸法・フォーカスの要件、そしてECサイトで問題になるファセットのクロール設計まで、判断の基準を示します。

まとめ：ローカルナビゲーション設計の要点

• 扱う範囲は「現在地のセクション配下」に限定します。全ページで同じ項目が並ぶならそれはグローバルナビゲーションです。
• 設計パターンは情報構造から選びます。深い階層はサイドバー階層型、単一ページ内の属性切替はタブ型、属性が多いECはファセット型が対応します。
• ページへのリンク群では、現在のページを視覚的な強調とaria-current="page"で示します。ページ内のタブ切替にはaria-selected、手順の現在位置にはaria-current="step"を使います。色や太字だけでは支援技術に伝わりません。
• WCAG 2.2のレベルAAは、ポインタ操作のターゲットを24×24 CSSピクセル以上とし（2.5.8）、フォーカスを受けた要素が作者側のコンテンツで完全に隠れないこと（2.4.11）を求めます。固定ヘッダーと相性が悪い要件です。
• ECサイトのファセットはURLが際限なく増えます。検索流入を必要としない絞り込みはrobots.txtでクロール負荷を抑え、パラメータ区切りは&に統一します。
• リンクはa要素とhref属性で書きます。スクリプトのイベントだけに依存し、href属性を持つa要素を用意しない実装では、Googleによるリンク先URLの抽出を保証できません。

ローカルナビゲーションの定義と他のナビゲーションとの境界

扱う範囲は現在地のセクション配下

ローカルナビゲーションとは、閲覧中のページが属するセクション内で、同一階層および下位階層への移動を担うリンク群です。「製品情報」セクション内の「スキャナー」ページを見ているとき、サイド領域に並ぶ「複合機」「プリンター」「スキャナー」の一覧がこれにあたります。判定は単純で、別のセクションへ移動したときに項目が入れ替わるかどうかで決まります。入れ替わらないなら、それはサイト全体を対象にしたグローバルナビゲーションです。

この境界を曖昧にしたまま「サイドに全カテゴリを並べる」設計にすると、ユーザーはいまどの範囲を見ているのか分からなくなり、階層構造を示すという本来の機能が消えます。サイト全体の入口設計についてはSEOに効くグローバルナビゲーションの設計と実装ポイントで扱っています。

グローバル・パンくず・コンテキストとの役割分担

ナビゲーションは種別ごとに主な役割が異なりますが、同じページへのリンクが重複する場合もあります。それぞれの守備範囲を先に決めておくと、どの導線に何を載せるかで迷わなくなります。

パンくずは階層の「縦の位置」を、ローカルナビゲーションは同じ階層の「横の広がり」を示します。両方を置くと、ユーザーは現在地とその周辺を同時に把握できます。実装と構造化データはパンくずリストとは？SEO効果と構造化データの実装・階層設計の判断【2026年時点】で解説しています。本文中から関連トピックへ送る導線はユーザー体験を支えるコンテキストナビゲーションの役割と重要性の担当です。

ローカルナビゲーション5種類の使い分け

設計パターンは好みで選ぶものではなく、対象の情報構造が決めます。階層の深さ、項目数、属性の多さを先に数えてから選定します。

サイドバー階層型の親・兄弟・子ページの表示

製品カタログや技術ドキュメントのように、親カテゴリの下に子ページが並ぶ構造に向きます。現在地の親を展開し、兄弟と子だけを見せるのが基本形です。項目を見渡しにくい場合は、ラベルの重複や分類の粒度を確認してください。カテゴリの切り方から見直す場合はインフォメーションアーキテクチャ（IA）とは？情報アーキテクチャの4要素と設計手順の分類設計が出発点になります。

タブ型の表示切替とURL設計

1つの対象を複数の側面から見せるときに使います。製品ページの「仕様」「価格」「サポート」のように、対象は同じで観点だけが切り替わる関係です。W3CのTabs Patternでは、表示中のパネルに対応するタブをaria-selectedで示し、他のタブにはfalseを設定します。各観点を個別に共有・検索流入の対象にするなら、直接開けるURLを設けます。ページ内で表示パネルを切り替えるだけのタブでは、各パネルを別ページにすることは必須ではありません。

アコーディオン型の初期展開と開閉操作

項目数が多く、全展開すると画面を占有してしまう分類に使います。初期状態で現在地を含む分類だけを開き、他を閉じておくのが原則です。全て閉じた状態で読み込むと、現在どの分類にいるのかが視覚的に消えます。

W3CのAccordion Patternでは、開閉ボタンのaria-expandedで展開状態を示し、折りたたまれたパネルの見出しにフォーカスがあるときはEnterキーまたはSpaceキーで展開できるようにします。

ファセット型の属性絞り込みとURL管理

ECサイトや求人サイトで、価格帯・サイズ・色などの属性で絞り込む形式です。GoogleはManaging crawling of faceted navigation URLsで、ファセットナビゲーションを「訪問者がページ上の項目の表示のしかたを変えられる、ウェブサイトの一般的な機能」と説明しています。利便性は高い一方で、生成されるURLの組み合わせが膨大になるため、後述のクロール設計とセットで扱う必要があります。

ステップ型の現在段階と戻り先の表示

カート投入から決済完了までのように、順序が固定された手続きで現在の段階を示します。WAI-ARIA 1.2はaria-currentの値としてstepを定義しており、段階表示のリンクに付与する用途を明記しています。完了した段階へ戻れる設計にしておくと、入力のやり直しで離脱する事態を減らせます。

設置位置とカレント表示の実装

情報量と閲覧環境に応じた設置位置

デスクトップでは左サイドが定位置ですが、絶対の正解ではありません。ラベルが利用する画面幅に収まり、拡大時にも操作できるなら、ヘッダー直下の水平配置を候補にできます。逆に階層が深く項目が多いなら、スクロールに追従しない左サイドの縦並びが読みやすくなります。判断材料は、項目数・ラベルの文字数・主要閲覧デバイスの3点です。

現在地の視覚表示とaria-currentによる状態通知

WAI-ARIA 1.2はaria-currentを「コンテナまたは関連する要素の集合の中で、現在の項目を表す要素を示す」状態と定義しています。同じ仕様が、この属性は「集合内の要素が現在の項目であることを示すために視覚的にスタイル付けされているときに使う」ものであり、1つの集合の中で現在として示す要素は1つだけにすべきとしています。色や太字だけの強調は、スクリーンリーダーの利用者には届きません。

<nav aria-label="製品カテゴリ">
  <ul>
    <li><a href="/products/printer/">プリンター</a></li>
    <li><a href="/products/scanner/" aria-current="page">スキャナー</a></li>
    <li><a href="/products/mfp/">複合機</a></li>
  </ul>
</nav>

視覚的な強調は、この属性を起点にCSSで当てると状態と見た目がずれません。クラス名と属性を別々に管理すると、片方の付け忘れが起きます。

[aria-current="page"] {
  font-weight: 700;
  border-left: 4px solid #0b5fff;
}

読み上げ順序まで含めた検証手順はWebアクセシビリティのスクリーンリーダー対応：NVDA・VoiceOverでの実機検証と読み上げ順序の設計にまとめています。

nav要素を使う範囲

HTML Living Standardはnav要素を「他のページまたはページ内の各部へリンクするページのセクション」と定義し、続けて「ページ上のすべてのリンクのまとまりがnav要素に入る必要はない。この要素は主要なナビゲーションブロックを構成するセクションを主な対象としている」と述べています。フッターの短いリンク集については「footer要素だけで十分であり、nav要素を使うこともできるが、通常は不要」とも明記されています。

ローカルナビゲーションは主要なナビゲーションブロックに該当するためnavで囲みます。1ページに異なる用途のnavがある場合は、aria-labelやaria-labelledbyで区別します。同じリンク群を繰り返す場合は同じラベルを使います。ラベルがないと、支援技術の利用者には同じ「ナビゲーション」が複数並んでいるようにしか見えません。

モバイルとアクセシビリティの必須要件

WCAG 2.2は2024年12月12日付のW3C勧告で、ナビゲーションに直接効く達成基準が複数あります。多くの公共調達や企業のアクセシビリティ方針が参照するレベルAAには、次の4つが含まれます。

ターゲットサイズは24×24 CSSピクセル

達成基準2.5.8 Target Size (Minimum)（レベルAA）は「ポインタ入力のターゲットのサイズが少なくとも24×24 CSSピクセルであること」を求めます。例外として、寸法不足の各ターゲットの境界ボックス中心に直径24 CSSピクセルの円を置き、その円が他のターゲットにも、他の寸法不足ターゲットの円にも交差しない「間隔」条件、同じページ上に、この達成基準を満たし、同じ機能を実行できる別のコントロールがある場合、文中のインラインリンク、ユーザーエージェントが寸法を決めている場合などが挙げられています。

モバイルのローカルナビゲーションは行間を詰めがちです。テキストリンクを縦に並べるなら、行の高さではなくリンク領域そのものの高さを24 CSSピクセル以上確保するか、隣接するリンクとの間隔で例外条件を満たす必要があります。

固定ナビによるフォーカス対象の遮蔽防止

達成基準2.4.11 Focus Not Obscured (Minimum)（レベルAA、WCAG 2.2の新規基準）は「ユーザーインターフェースコンポーネントがキーボードフォーカスを受けたとき、そのコンポーネントが作者が作成したコンテンツによって完全に隠されていないこと」を求めます。スクロール時に画面上部へ固定表示するナビゲーションは、この基準に抵触しやすい実装です。アンカーリンクでページ内を移動したとき、あるいはTabキーで下方のリンクへ移ったときに、固定要素の背後へ対象が入り込むためです。

対処の一例は、対象のスクロールコンテナに固定要素の実際の高さに応じたscroll-padding-topを設定する方法です。適用後はTab・Shift+Tab操作と拡大表示で、フォーカス対象が完全に隠れないことを確認します。固定ナビの高さを変数として持ち、レイアウト側と同じ値を参照させると、高さ変更時のずれを防げます。

:root { --nav-h: 56px; }
html { scroll-padding-top: var(--nav-h); }

ページ間のナビゲーション順序と複数の到達手段

達成基準3.2.3 Consistent Navigation（レベルAA）は「ウェブページの集合内の複数のウェブページで繰り返されるナビゲーションの仕組みが、ユーザーによる変更が開始された場合を除き、繰り返されるたびに同じ相対的順序で現れること」を求めます。複数ページで繰り返すナビゲーション項目の相対的な順序を、ユーザーの操作によらず変える設計は不適合になります。カテゴリ固有の項目の追加・削除だけで不適合になるわけではありません。

達成基準2.4.5 Multiple Ways（レベルAA）は「ウェブページの集合内のウェブページを見つける手段が2つ以上利用できること。ただし、そのウェブページが手続きの結果である場合、または手続きの一段階である場合を除く」と規定しています。ローカルナビゲーションだけに依存せず、対象ページを実際に見つけられるサイト内検索やサイトマップなど、別の到達手段を用意する根拠がこの基準です。パンくずを併設するだけで、各ページへの複数の到達手段が成立するとは限りません。なお、この基準自体が「手続きの一段階であるページ」を除外しているため、決済フローの各ステップに検索やサイトマップを足す必要はありません。

ECサイト・大規模サイトのクロール設計

ファセットURLのクロール制御と公開方針

Googleのクロールに関するドキュメントは、ファセットで生成されたURLについて「クローラーは、そのURLが役に立つかどうかをクロールせずに判断できないため、通常はそのURLが実際には無用だとプロセスが判断するまでに、非常に多くのファセットナビゲーションURLへアクセスする」と説明しています。結果としてサーバー負荷が上がり、新しいURLの発見が遅れます。

検索流入を必要としない絞り込みURLのクロール負荷を抑えるには、robots.txtによる制御が選択肢になります。ただし、これは検索結果からの除外を保証しません。インデックスを防ぐ必要があるページでは、Googleが取得できる状態でnoindexを指定します。インデックスさせる方針なら、パラメータ区切りにはカンマやセミコロン、角括弧ではなく業界標準の&を使い、絞り込み結果が0件になる組み合わせではHTTP 404を返します。rel="canonical"やrel="nofollow"も選択肢ですが、同ドキュメントは長期的には効果が劣るとしています。

a要素とhref属性によるクロール可能なリンク

Googleは「一般に、Googleがリンクをクロールできるのは、href属性を持つa要素である場合に限られる」と明記しています。さらに「href属性を持たないa要素や、スクリプトのイベントによってリンクとして振る舞う他のタグからは、URLを確実に抽出できない」としています。JavaScriptのクリックイベントだけでページを切り替え、href属性を持つa要素を用意しないローカルナビゲーションは、GoogleがURLを確実に抽出できる導線として扱えません。

アンカーテキストについても「優れたアンカーテキストは、説明的で、適度に簡潔で、それが置かれているページとリンク先のページの両方に関連している」と示されています。「こちら」「詳細」といった語だけのリンクは、この条件を満たしません。

カテゴリ変更時の孤立ページ防止

Googleのリンクのベストプラクティスでは、重要な各ページに、サイト内の別ページから少なくとも1本のリンクを設けるよう勧めています。

ローカルナビゲーションは、下位ページへの唯一の内部リンク経路になっていることが珍しくありません。カテゴリから外したページがどこからもリンクされない孤立ページになると、クロール経路が失われます。カテゴリ構成を変更するときは、ナビゲーションから外したページに別の到達経路があるかを併せて確認してください。

ローカルナビゲーションを置かない方がよい場面

すべてのサイトに必要な部品ではありません。次の条件に当てはまる場合は、既存の導線で目的の移動を賄えるか確認し、ローカルナビゲーションを省く案を検討します。

• 既存の導線で目的のページへ到達できる構成：総ページ数だけで判断せず、グローバルナビゲーションとパンくずで必要な移動を賄えるか確認します。既存の導線と役割が重複するなら、追加による画面占有を避けられます。
• 本文中のリンクで子ページへの移動を賄える場合：子ページ数だけでなく、繰り返し移動する必要性とリンクの見つけやすさで判断します。項目が少ないローカルナビは、領域を占有する割に選択肢を提示できません。
• 1本道のランディングページ：目的のアクションへ集中させる構成では、横方向の移動手段を増やす前に、そのリンク先が判断に必要な情報かを確認します。

逆に、階層が3層以上あるカタログ、部門ごとに担当が分かれるコーポレートサイト、属性で絞り込む必要がある商品一覧では、ローカルナビゲーションなしに目的のページへ到達させるのは困難です。導入の可否は「セクション配下に、ユーザーが比較・回遊したいページが複数あるか」で判断します。

よくある質問

ローカルナビゲーションとは何ですか？

閲覧中のページが属するセクションの配下を対象に、同一階層や下位階層への移動を担うリンク群です。サイト全体を対象とするグローバルナビゲーションとは扱う範囲が異なり、別のセクションへ移動すると項目が入れ替わる点が識別の基準になります。

ナビゲーションには種類がいくつありますか？

担当範囲で分けると、グローバル・ローカル・パンくず・コンテキスト・フッターの5種別に整理できます。このうちローカルナビゲーションの内部パターンとして、サイドバー階層型・タブ型・アコーディオン型・ファセット型・ステップ型があります。分類の粒度は文献によって異なるため、数え方より担当範囲の切り分けを優先してください。

ローカルナビゲーションのデザインで最初に決めることは何ですか？

見た目より先に、扱う情報構造の深さと項目数を数えます。親子関係を一覧で示したいならサイドバー階層型、属性による絞り込みが必要ならファセット型を候補にし、実際の画面と操作で選定します。配色やフォントの検討はその後です。

カレント表示はCSSだけで十分ですか？

不十分です。背景色や太字による強調は視覚的な手がかりでしかなく、スクリーンリーダーには現在地として伝わりません。aria-current="page"を付与し、そのセレクタを起点にCSSを当てることで、状態と見た目の両方を1か所で管理できます。

HTMLのnav要素はローカルナビゲーションにも使いますか？

使います。HTML Living Standardはnav要素を主要なナビゲーションブロックを対象とした要素と位置づけており、ローカルナビゲーションはこれに該当します。複数のnavは用途に応じてラベルを付け、同じリンク群を繰り返す場合は同じラベルにします。フッターの短いリンク集については、同仕様がfooter要素だけで十分だとしています。

関連記事

• SEOに効くグローバルナビゲーションの設計と実装ポイント
• ユーザー体験を支えるコンテキストナビゲーションの役割と重要性
• パンくずリストとは？SEO効果と構造化データの実装・階層設計の判断【2026年時点】
• インフォメーションアーキテクチャ（IA）とは？情報アーキテクチャの4要素と設計手順
• Webアクセシビリティのスクリーンリーダー対応：NVDA・VoiceOverでの実機検証と読み上げ順序の設計