深い階層に潜ったユーザーに「今どこにいるか」と「どこから来たか」を同時に伝えるナビゲーション補助。プライマリナビゲーションの代替ではなく、階層の深さを可視化する補助線として機能する。
この記事を読むと、Breadcrumbの適切な深さ判断・現在地の表現方法・aria-label / aria-currentによるA11y設計が自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
現在ページの階層位置を「ルート → 中間 → 現在地」の形式で示すナビゲーション補助コンポーネント。
プライマリナビゲーションとの違い：メニューやサイドバーは「どこにでも行ける」グローバルナビゲーション。Breadcrumbは「今どこから来たか・どこにいるか」を示す現在地表示。両者は補完関係であり、Breadcrumbはプライマリナビゲーションの代替にならない。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 階層が3段階以上ある深いサイト・アプリ（ECサイト・ドキュメントサイト・設定画面など）
- ユーザーが検索やリンクから直接ページに到達する可能性があり、文脈が失われやすい場面
- 上位階層への「戻る」ナビゲーションをワンクリックで提供したい場合
3.2 When NOT to use
- 階層が1〜2段階しかない浅いサイト（Breadcrumbは情報量ゼロになる）
- ホームページや最上位ランディングページ（現在地 = ルートなので不要）
- モバイルで画面幅が狭く、長いパスを省略しなければ表示できない場合（代わりに「← 戻る」リンクを使う）
3.3 代替UI（Alternatives）
- 浅い階層での「戻る」 →
← 戻るリンク（シンプルな Back button） - 複数階層の横断ナビゲーション →
Sidebar / Side nav - ステップ進行の現在地表示 →
Stepper / Progress Indicator
4. 設計判断の核（Decision Principles）
現在地はリンクにしない。Breadcrumbは「今どこにいるか」を示す道標であり、「今いるページへのリンク」は意味をなさない。
判断の優先順位：① 現在地の表現 → ② 階層の深さ → ③ 区切り文字の選択 → ④ モバイル対応
- 現在地（最後のアイテム）は必ず非リンクのテキストにし、
aria-current="page"を付与する - 階層は「ユーザーが実際に辿れるパス」と一致させる。URLの構造ではなく、ユーザーの認知モデルに従う
- 区切り文字（
›///>など）はCSSの::beforeまたはaria-hidden="true"の<span>で実装し、スクリーンリーダーに読み上げられないようにする - モバイルでは長いパスを省略（中間項目を
...にする）か、「← 上位へ」のシンプルなリンクに切り替える
5. 状態設計（States）
5.1 必須状態（Required）
- Default：中間リンクはテキストリンクスタイル（青・下線）、現在地はグレーテキスト（非リンク）
- Focus：各リンクにフォーカスリングを表示（省略不可）
- Current（現在地）：
aria-current="page"を付与。視覚的にもリンクと区別できる色・スタイルにする
5.2 条件付き状態（Conditional）
- Hover：中間リンクにホバー時の下線や色変化
- Truncated：長いラベルを省略する場合は
title属性または Tooltip で全文を確認できるようにする - Collapsed（モバイル）：中間項目を
...に折りたたみ、タップで展開できるようにする
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| Default | ✅ | 現在の階層位置とナビゲーション可能なパス |
| Focus | ✅ | キーボードユーザーに今どのリンクにいるかを示す |
| Current | ✅ | 現在地であり、クリックしても移動しないことを示す |
| Hover | — | このリンクでナビゲートできることを強調する |
| Collapsed | — | 長いパスをモバイルで省略して表示していること |
6. バリエーション設計（Variants）
区切り文字の種類は「ブランドスタイル」の問題。機能的な差はない。重要なのは現在地の表現方法。
| バリアント | 目的 |
|---|---|
| Arrow（›） | 方向性を示す一般的なスタイル。階層の「進む」感覚と一致する |
| Slash（/） | ファイルシステムやURLの慣習に合わせたスタイル。ドキュメントサイトに多い |
| Collapsed | モバイル等で中間階層を ... に折りたたむ省略パターン |
| With Icons | ホームアイコン付きの最初のアイテム（ルートをアイコンで示す） |
禁止パターン：全アイテムをリンクにする → 現在地もリンク扱いになり「どこにいるか」が伝わらない。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 現在地がリンク：最後のアイテムもリンクになっており「今どこにいるか」が視覚的・意味的に不明確になる
- 区切り文字がスクリーンリーダーに読まれる：
>や/を通常テキストで書くと「大なり」「スラッシュ」と読み上げられる - URLの構造通りにしか組めない：URLは
/products/category/itemでもユーザーの認知モデルが違う場合、Breadcrumbがかえって混乱を招く
7.1 Bad（典型3つ）
- 「ホーム > カテゴリ > 現在ページ」の全アイテムがリンクになっている → 現在地の識別ができない
<span> > </span>で区切り文字を書き、スクリーンリーダーが「大なり」と読み上げる- 8段階の深い階層を全て表示し、モバイルで3行に折り返して使いにくくなっている
7.2 Good（対になる3つ）
- 現在地（最終アイテム）は
<span aria-current="page">で実装し、グレーテキストで視覚的にも区別する - 区切り文字は
<span aria-hidden="true">›</span>または CSS::before/contentで実装する - モバイルでは中間項目を省略し「ホーム › ... › 現在ページ」の3項目にまとめる
7.3 How to fix（手順）
- 最後のアイテムが
<a>になっていれば<span aria-current="page">に変更する - 区切り文字に
aria-hidden="true"を付与する <nav aria-label="パンくずリスト">と<ol>/<li>で適切なセマンティクスを確保する- モバイルで3行以上に折り返す場合は中間項目の折りたたみを実装する
7.4 GUNJO 実装で見る（Bad / Good）
同じ GUNJO の Breadcrumb を、現在地の示し方が崩れた使い方と正しい使い方で対比。
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Keyboard
Tabで各リンクにフォーカスでき、Enterでナビゲートできること- 現在地（非リンク）はフォーカス対象外で良い
Focus
- フォーカスリングは周囲と4.5:1以上のコントラストを持つこと
Screen Reader
<nav aria-label="パンくずリスト">でランドマークとして認識させるaria-current="page"で現在地をスクリーンリーダーに伝える- 区切り文字は
aria-hidden="true"で読み上げを抑制する
<!-- 基本パターン -->
<nav aria-label="パンくずリスト">
<ol>
<li>
<a href="/">ホーム</a>
<span aria-hidden="true"> › </span>
</li>
<li>
<a href="/products">プロダクト</a>
<span aria-hidden="true"> › </span>
</li>
<li>
<span aria-current="page">Breadcrumb</span>
</li>
</ol>
</nav>
Touch / Pointer
- 各リンクのタップ領域を44×44px以上確保する（リンクテキストが短い場合は padding で補う）
Contrast / Readability
- リンクテキストは背景色と4.5:1以上のコントラスト比を確保する
- 現在地テキスト（グレー）も4.5:1を確保する（薄すぎると読みにくくなる）
10. 実装メモ（Implementation Notes）
- 区切り文字の実装は
<li>の CSS::after { content: '›'; }で実現すると、HTMLをシンプルに保てる。ただし Tailwind + React ではaria-hiddenな<span>の方がメンテしやすい - Next.js / Remix など SSR フレームワークでは
usePathname()でパスを取得し、スラッシュで分割して動的にBreadcrumbを生成するパターンが一般的 - JSON-LD（
BreadcrumbList）を<head>に追加すると、Google の検索結果にBreadcrumbが表示される（SEO効果あり）
11. 関連リンク
- 関連するUIデザイン原則: 情報設計 (Information Architecture), ナビゲーション設計 (Navigation), 迷わせない情報設計 (Findability)
- 用語集（定義）: 情報アーキテクチャ (Information Architecture), ファインダビリティ (Findability)
- 関連するUIコンポーネント（横）: Pagination（ページネーション）, Tabs（タブ）
12. まとめ
Breadcrumbの設計は「現在地をリンクにしない」という一点から始まります。迷ったら 4. 設計判断の核 に戻り、現在地の表現・区切り文字の実装・モバイル対応の3点を確認してください。<nav aria-label> + <ol> + aria-current="page" の3点セットが最低ラインです。階層が2段階以下のサイトにはBreadcrumbは不要——入れないことも設計判断のひとつです。
