定義

パンくずリスト（Breadcrumb）とは、Webサイト内でユーザーが現在いる位置と、上位階層への道筋を示すナビゲーションです。
例）トップ > カテゴリ > 記事名 のように階層をテキストリンクで並べ、上位ページへ容易に戻れる導線を提供します。

役割・効果

• 回遊性向上： 迷子防止と「戻る」以外の移動手段を提供。
• 階層の理解促進： コンテンツの位置づけを一目で把握可能。
• SEOの補助： 構造化データにより検索結果へパンくずが表示されることがある。
• 直帰率の低減： 関連上位ページへ誘導し離脱を抑制。

設計のポイント

• 左から上位→右が下位： 一般的な読解順に合わせる。
• 最後の要素は非リンク： 現在地はテキストのみで示すのが基本。
• 区切りは視認性重視： > や /、アイコン等。装飾過多は避ける。
• サイト構造と一致： カテゴリやURL階層と齟齬がないように。
• モバイル最適化： 折り返し・省略（中間省略）・スクロール対応を検討。
• アクセシビリティ： <nav aria-label="Breadcrumb"> を付与し、リスト構造でマークアップ。

実装例（HTML）

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/category/">カテゴリ</a></li>
    <li aria-current="page">記事タイトル</li>
  </ol>
</nav>
    

リスト（ol/li）と aria-current="page" を用いるとスクリーンリーダー配慮になります。

構造化データ（BreadcrumbList）

JSON-LDでパンくずを検索エンジンへ明示できます。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem","position": 1,"name": "ホーム","item": "https://www.example.com/"},
    {"@type": "ListItem","position": 2,"name": "カテゴリ","item": "https://www.example.com/category/"},
    {"@type": "ListItem","position": 3,"name": "記事タイトル","item": "https://www.example.com/category/article/"}
  ]
}
</script>
    

よくある落とし穴

• サイト構造との不一致： パンくずとURL/カテゴリが噛み合わず混乱を招く。
• すべてリンク化： 現在地までリンクにするとUXが低下。
• モバイルでの折り返し崩れ： 長いタイトルでUIが破綻。中間省略（例：ホーム > … > 記事）を検討。
• 構造化データの順番ミス： position の不整合は無視される原因に。