一貫したナビゲーションの設計と実装｜迷いにくいWebサイトを作るチェックポイント

一貫したナビゲーションとは、サイト内で繰り返し表示するメニューや案内リンクについて、役割、名前、並び順、配置をページ間でそろえる設計です。

ページを移動するたびにメニューの位置や名称が変わると、読者は目的のリンクを探し直さなければなりません。

見た目だけをそろえるのではなく、キーボードやスクリーンリーダーを使ったときにも、同じ順序と分かりやすい名前で操作できる状態を目指します。

一貫性をそろえる対象

すべてのページを同じ外観にする必要はありません。

そろえるのは、サイト内で同じ役割を担うナビゲーションです。

ナビゲーションを一貫させる実装手順

1．繰り返し使う案内を洗い出す

最初に、ヘッダーのメインメニュー、サイドバー、パンくず、フッターなど、複数ページに現れる案内を一覧にします。

テンプレートごとに役割を比較すると、同じ案内なのに名前や順序だけが異なる箇所を見つけやすくなります。

2．メインメニューの項目と順序をそろえる

メインメニューは共通テンプレートや共通コンポーネントで管理し、ページごとの手作業による差を減らします。

nav要素に名前を付けると、ページ内に複数のナビゲーションがある場合も役割を区別しやすくなります。

<nav aria-label="メインナビゲーション">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">当サイトについて</a></li>
    <li><a href="/services">サービス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

ページの種類によって不要な項目がある場合は、理由なく順序だけを入れ替えるのではなく、そのページで表示しない項目を明確に決めます。

3．同じリンク先には同じラベルを使う

同じサービス案内へのリンクを、あるページでは「サービス」、別のページでは「サービス内容」と呼ぶと、読者は別のリンクかどうかを判断しなければなりません。

リンク先と目的が同じなら、表示するラベルもそろえます。

<a href="/services">サービス</a>

短すぎてリンク先を判断できない「こちら」「詳しく見る」などの表現は避け、単独で読んでも目的が伝わるラベルにします。

4．キーボードの移動順とスキップリンクを確認する

Tabキーによるフォーカスは、画面の読み順と操作の流れに沿って移動するようにします。

「最初のTab操作で必ずメインメニューへ移動させる」のではなく、共通メニューを繰り返し通らず本文へ進めるスキップリンクをページの早い位置に置く方法があります。

<a href="#main-content" class="skip-link">メインコンテンツにスキップ</a>

<main id="main-content">
  <!-- ページ固有の本文 -->
</main>

フォーカスの見え方や移動順の確認方法は、キーボード操作とフォーカス表示の実務ガイドで詳しく解説しています。

5．補助的なナビゲーションも同じ位置に置く

プライバシーポリシー、利用規約、お問い合わせなどをフッターに置く場合は、サイト内の各ページで同じ位置と順序を保ちます。

<footer>
  <nav aria-label="フッターナビゲーション">
    <ul>
      <li><a href="/privacy">プライバシーポリシー</a></li>
      <li><a href="/terms">利用規約</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>
</footer>

メニュー内で現在のページを伝える方法は、現在位置が伝わるナビゲーション設計も参考になります。

ページ間の一貫性を確認する方法

一つのページだけを確認しても、ページ間の違いは見つけられません。

1. トップページと主要な下層ページを複数開き、メニューの項目、順序、ラベル、位置を比較します。
2. マウスを使わずTabキーとShiftキーを組み合わせ、フォーカスの移動順とスキップリンクの動作を確認します。
3. 画面幅を変え、デスクトップ表示とモバイル表示のどちらでも項目の関係が保たれているか確認します。
4. メインメニューとフッターナビゲーションを読み上げたとき、それぞれの役割を名前から区別できるか確認します。
5. リンク切れや、同じラベルから異なる目的のページへ移動する箇所がないか確認します。

基準との対応を確認する場合は、WCAG 2.2「3.2.3 一貫したナビゲーション」の解説を参照してください。

一貫したナビゲーションで期待できること

同じ場所に同じ名前の案内があれば、読者はページを移動しても操作方法を学び直さずに済みます。

この予測しやすさは、画面を見て操作する読者だけでなく、キーボードやスクリーンリーダーを使う読者にも役立ちます。

ただし、ナビゲーションをそろえるだけで法令やアクセシビリティ基準への適合が決まるわけではなく、離脱率の低下も保証できません。

コンテンツの構造、文字の読みやすさ、フォーム、画像の代替テキストなど、ほかの要素も含めて確認する必要があります。

実装前後のチェックリスト

• メインメニューの項目と並び順がページ間でそろっている
• 同じリンク先に同じ意味のラベルを使っている
• メインとフッターのナビゲーションを名前で区別できる
• Tabキーの移動順が画面の構造に沿っている
• スキップリンクから本文へ移動できる
• 画面幅が変わってもメニュー項目の関係が分かる
• 複数のページを並べて一貫性を確認している

迷いにくいWebサイトは共通ルールから作る

一貫したナビゲーションを実現するには、メニューの見た目だけでなく、役割、ラベル、順序、キーボードの移動を共通ルールとして管理します。

共通テンプレートを整えたうえで複数ページを比較し、実際の操作で差異を確認すると、ページ追加や更新の後も一貫性を保ちやすくなります。

当社では、Webアクセシビリティの導入を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。

アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。