パンくずリスト

パンくずリストとは

パンくずリスト（Breadcrumb）は、Webサイト内での現在位置を示すナビゲーション要素です。通常、ページの上部に「ホーム＞カテゴリー＞記事タイトル」のような形式で表示されます。

名前の由来は、童話「ヘンゼルとグレーテル」で主人公たちが森で迷わないようにパンくずを落としながら歩いたエピソードからきています。訪問者がサイト内で迷わないように「道しるべ」を示す役割を果たします。

ホーム > WordPress入門 > 初心者ガイド > この記事

ホーム > 商品一覧 > パソコン > ノートPC > 製品詳細

パンくずリストの重要性

1. ユーザビリティの向上

訪問者が現在どのページにいるのか、そのページがサイト内のどの位置にあるのかを一目で把握できます。また、上位階層に簡単に戻れるため、サイト内の移動がスムーズになります。

2. SEO効果

検索エンジンがサイトの構造を理解しやすくなり、内部リンクとしてもSEO効果があります。また、検索結果にパンくずリストが表示されることもあり、クリック率の向上につながります。

3. 直帰率の低下

パンくずリストを通じて他のページに簡単にアクセスできるため、1ページだけ見て離脱する割合が減少します。

パンくずリストの種類

1. 階層型パンくずリスト

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

ホーム > カテゴリー > サブカテゴリー > 記事

2. 属性型パンくずリスト

主にECサイトで使われ、商品の属性を示します。

ホーム > メンズ > シューズ > スニーカー > Nike

3. 履歴型パンくずリスト

ユーザーが訪問したページの履歴を示します。あまり使われません。

トップページ → 商品一覧 → 商品詳細 → カート

WordPressでのパンくずリスト設置方法

テーマの機能を使う

多くのWordPressテーマには、パンくずリスト機能が標準装備されています。テーマのカスタマイザーや設定画面で有効化できます。

SEOプラグインを使う

Yoast SEOの場合

1. 管理画面の「SEO」→「検索での見え方」を開きます。
2. 「パンくずリスト」タブをクリックします。
3. 「パンくずリストを有効化」をオンにします。
4. 区切り文字や表示設定を調整します。
5. テーマのテンプレートファイルにコードを追加します。

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

専用プラグインを使う

• Breadcrumb NavXT：高機能で柔軟なカスタマイズが可能
• Flexy Breadcrumb：シンプルで使いやすい

パンくずリストの設計ポイント

構造化データの実装

検索エンジンがパンくずリストを正しく認識するために、構造化データ（JSON-LD）を実装することが推奨されます。多くのSEOプラグインは自動的に対応しています。

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "WordPress入門",
      "item": "https://example.com/wordpress/"
    }
  ]
}

パンくずリストのデザイン

一般的なスタイル

パンくずリストは、目立ちすぎず、かつ視認性の高いデザインが理想的です。

• 色：本文よりも薄いグレー系が一般的
• サイズ：本文より小さめのフォントサイズ
• 配置：左寄せが基本
• 区切り文字：「>」「/」「»」「→」など

レスポンシブ対応

スマホでは画面幅が限られるため、パンくずリストが複数行になることがあります。適切に折り返すか、一部を省略表示する工夫が必要です。

よくある質問（FAQ）

まとめ

パンくずリストは、ユーザビリティとSEOの両方を向上させる重要なナビゲーション要素です。適切に設置・設計することで、サイトの使いやすさと検索エンジンからの評価が高まります。

関連用語