パンくずナビゲーションのUIデザインガイド：階層・表示形式・SEO・アクセシビリティ

パンくずナビゲーション（Breadcrumb）は、ユーザーが現在いるページの階層的な位置を示し、上位ページへのナビゲーションを提供するUIコンポーネントです。深い階層を持つECサイト・コンテンツサイト・ドキュメントサイトで特に重要です。本記事では、パンくずナビゲーションの設計パターンとベストプラクティスを解説します。

パンくずの種類

ロケーション型（Location/Hierarchical）：

最も一般的なタイプ。サイトの階層構造を表示します。

例: ホーム ＞ ファッション ＞ メンズ ＞ Tシャツ

アトリビュート型（Attribute/Filter）：

フィルタ条件を積み重ねたナビゲーション。ECサイトの検索・絞り込みの過程を表示します。

例: ホーム ＞ 家電 ＞ テレビ ＞ 4K対応 ＞ 〜50,000円

パス型（Path/History）：

ユーザーが実際に訪問した履歴を表示。現在はあまり使われていません（ブラウザの戻るボタンで代替できるため）。

パンくずの表示形式設計

区切り文字（Separator）：

＞ が最も一般的ですが、/・›・→ も使われます。区切り文字は装飾的な要素で、スクリーンリーダーには読み上げさせないようにします（aria-hidden="true" または CSS ::before で表示）。

リンクと現在ページの区別：

• 前のページ（リンク可能）: 通常のリンクスタイル（プライマリカラー・アンダーライン）
• 現在のページ（リンク不可）: テキストのみ・より暗い・または太字で表示

フォントサイズとスタイル：

パンくずは補助的な情報であるため、本文より小さめ（12〜14px）・グレーのテキストが一般的です。現在のページを少し強調することで、位置が伝わります。

モバイルでのパンくず対応

画面幅が限られるモバイルでは、長いパンくずが折り返して複数行になる問題があります。

省略パターン：

中間の階層を「...」で省略し、直前の親ページと現在のページのみを表示するパターン：

ホーム ＞ ... ＞ メンズ ＞ Tシャツ

最後の1〜2段階のみ表示：

モバイルでは直前のページ（← メンズ）だけを表示し、フルのパンくずはデスクトップのみに表示するパターンも有効です。

横スクロール：

パンくずをhorizontalスクロール可能な1行にし、右端の現在ページが常に見えるように（末尾から表示）するパターンもあります。

SEO最適化

構造化データ（JSON-LD）：

Googleに対してパンくずの構造を明示的に伝えることで、検索結果にパンくずが表示される可能性が高まります：

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "ファッション",
      "item": "https://example.com/fashion/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Tシャツ"
    }
  ]
}

アクセシビリティ

WAI-ARIAによる実装：

<nav aria-label="パンくずナビゲーション">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li aria-hidden="true">＞</li>
    <li><a href="/fashion/">ファッション</a></li>
    <li aria-hidden="true">＞</li>
    <li><a href="/fashion/mens/">メンズ</a></li>
    <li aria-hidden="true">＞</li>
    <li>
      <a href="/fashion/mens/tshirts/" aria-current="page">
        Tシャツ
      </a>
    </li>
  </ol>
</nav>

• aria-current="page" で現在のページを示します
• 区切り文字は aria-hidden="true" で読み上げを防ぎます
• を使うことで「リストの○番目」という読み上げが可能です

パンくずが必要でない場面

• 単階層のシンプルなサイト（階層が2レベル以下）
• シングルページアプリ（ページ遷移がない）
• ランディングページ（ナビゲーションを意図的に省いている）

まとめ

パンくずナビゲーションは深い階層を持つサイトでの現在位置の把握と上位ページへの移動を助けます。適切なセパレーター・リンクと現在ページの区別・モバイル対応・JSON-LD構造化データ・WAI-ARIA実装を組み合わせることで、ユーザーとSEOの両方に優れたパンくずUIが完成します。UI ZUKANではナビゲーションUIのサンプルを掲載しています。