パンくずリスト（Breadcrumb List）｜東京のホームページ制作会社

パンくずリスト（Breadcrumb List）

ユーザーと検索エンジンの“道しるべ”となるナビゲーション構造

パンくずリスト（Breadcrumb List）とは、Webサイト内において現在閲覧しているページが、全体構造のどこに位置するかを階層的に示すナビゲーションの一種です。
一般的には、ページの上部（ヘッダー直下やタイトル上部）にテキストリンク形式で配置され、親階層 → 子階層 → 現在ページという流れで構成されます。

例：
ホーム＞サービス＞ホームページ制作＞制作実績

このように、ユーザーが今どこにいるかを視覚的に把握できる手段として、Webサイトのユーザビリティを高める重要なUI要素です。

名前の由来：童話から生まれたWeb用語

「パンくずリスト」という名称は、グリム童話『ヘンゼルとグレーテル』に登場するシーンに由来しています。
主人公たちが森の中で迷わないように、通った道にパンくずを撒いて帰り道を辿ろうとしたことから、“辿ってきた道筋を残す”という意味でこの言葉が使われるようになりました。

英語ではそのまま「Breadcrumbs」と呼ばれています。

パンくずリストの主な役割

ユーザビリティの向上

Webサイトが階層構造になっている場合、ユーザーが現在地を把握しやすくなり、迷子防止に繋がります。
上位ページへスムーズに戻れる導線が用意されているため、ストレスのない回遊が実現できます。

SEO（検索エンジン最適化）への貢献

Googleはパンくずリストをクロール時のサイト構造の理解に利用しており、構造化データ（schema.org）でマークアップされたパンくずリストは検索結果上にも表示されることがあります。
パンくずのリンクにより内部リンク構造が強化され、クローラーの巡回効率が向上します。

パンくずリストの種類と表示パターン

タイプ	概要	適用例
階層型（Location-Based）	サイトの物理的な階層構造を反映	ECサイト、企業サイトのサービス詳細ページなど
履歴型（Path-Based）	ユーザーの辿った実際の遷移履歴を表示	Webアプリやシステム内でのセッション追跡向き
属性型（Attribute-Based）	商品カテゴリやタグなど、属性情報を表示	商品一覧 → カテゴリ → サイズなど（ECに多い）

ウェブサイトでは、一般的に階層型が最も多く使用されており、ナビゲーションの補助として活用されます。

実装におけるベストプラクティス

トップページからの順序を守る
常に「ホーム＞上位カテゴリ＞サブカテゴリ＞現在ページ」という構造を統一。
各項目にリンクを付ける（末尾除く）
ユーザーがすぐに上位ページに遷移できるよう、現在ページ以外にはクリック可能なリンクを設ける。
構造化データのマークアップ
Googleに正しく認識させるため、schema.org/BreadcrumbList を使ってマークアップ。
スマホ対応（レスポンシブ）
モバイル画面では省略表示やアイコン化、アコーディオン展開にしてUXを損なわない設計を

WordPressでのパンくずリストの実装方法

WordPressでは、パンくずリストを簡単に導入する方法が複数あります。サイトの構造やカスタマイズの自由度に応じて、以下の方法から実装できます。

方法①：SEO系プラグインを使う（初心者向け）

【例：Yoast SEO】
Yoast SEOには、パンくずリストの自動生成機能があり、以下の手順で簡単に設置できます。

1.WordPress管理画面 → SEO → 検索での見え方 → パンくずリストに移動

2.「パンくずリストを有効にする」をオンにする

3.使用しているテーマの single.php や page.php の表示したい場所に以下のコードを追加

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}
?>

4.必要に応じてCSSでデザイン調整

方法②：専用のパンくずプラグインを使う

【例：Breadcrumb NavXT】
より詳細な設定やデザインをしたい場合は、専用プラグインの「Breadcrumb NavXT」がおすすめです。

1. プラグインをインストール・有効化

2.「設定 → Breadcrumb NavXT」で各階層の表記や区切り文字を調整

3.テーマファイルに以下を追加

<?php if(function_exists('bcn_display')) {
  bcn_display();
} ?>

Breadcrumb NavXTは、構造化データにも対応しており、SEO観点でも有利です。

方法③：PHPで自作する（中・上級者向け）

オリジナルテーマや独自設計が必要な場合には、自作関数で実装することも可能です。

簡易的なサンプル：

オリジナルテーマや独自設計が必要な場合には、自作関数で実装することも可能です。

function custom_breadcrumb() {
  echo '<ul class="breadcrumb">';
  echo '<li><a href="'.home_url().'">ホーム</a></li>';

  if (is_category() || is_single()) {
    $category = get_the_category();
    if ($category) {
      echo '<li><a href="'.get_category_link($category[0]->term_id).'">'.$category[0]->cat_name.'</a></li>';
    }
    if (is_single()) {
      echo '<li>'.get_the_title().'</li>';
    }
  } elseif (is_page()) {
    echo '<li>'.get_the_title().'</li>';
  }
  echo '</ul>';
}

この関数を functions.php に追加し、任意のテンプレートファイル内で呼び出します。

<?php custom_breadcrumb(); ?>

実装時の注意点

すべてのページタイプ（投稿・固定・カテゴリ・タグ）への対応を意識
表示位置やデザインの統一感を保つ
schema.orgの構造化マークアップ対応でSEO効果を最大化する

WordPressでの実装はプラグインを使えば非常に簡単ですが、構造に合わせてカスタマイズできるようになるとより効果的です。

まとめ

パンくずリストは、Webサイトにおいて単なるナビゲーション補助にとどまらず、ユーザー体験（UX）とSEOの双方に貢献する重要なUI要素です。
特に多層構造のサイトでは、ユーザーが自分の居場所をすぐに理解でき、上位階層への移動もスムーズになるため、回遊性や直帰率の改善にもつながります。

また、構造化データによる検索結果への視覚的な効果もあり、Googleからの評価にもプラスに働くため、積極的に導入すべき基本機能の一つと言えるでしょう。

ユーザーにもクローラーにも優しい設計を目指すなら、パンくずリストの最適化は欠かせない施策です。

Back