【ぱんくずりすと】

Breadcrumb（パンくずリスト）とは？

最終更新: 2026年10月4日

💡 サイトの中で迷子にならないための「道しるべ」

Webサイト内の現在位置と上位ページへの経路を示すナビゲーション。よく使う階層型では「ホーム > カテゴリ > 記事名」のように並べる。ブラウザーの閲覧履歴と同じとは限らない。

📌 このページのポイント

ブラウザーの中の階層型パンくずの例です。青い下線は上位ページへのリンク、橙の項目は現在地。区切り記号は階層の並びを表し、実際の訪問順を表す矢印ではありません。

ひよこ

パンくずリストって何？

ペンギン先生

例えば「ホーム > 用語集 > パンくずリスト」のような案内だよ。よく使う階層型では、サイトの中で今どこにいるかと、上位のページへの経路を示すんだ

ひよこ

さっき見たページが順に並ぶの？

ペンギン先生

階層型ではそうとは限らないよ。検索から記事へ直接来ても、その記事の上位ページを並べる。操作の経路を示す種類もあるけれど、図の例はサイトの階層を示すもので、閲覧履歴の一覧ではないんだ

ひよこ

最後の項目もリンクにする？

ペンギン先生

現在のページを文字だけで示す方法も、リンクにする方法もあるよ。どの項目が現在地かを分かるようにすることが大切。W3Cの例ではnavに名前を付け、現在のページへのリンクにはaria-current="page"を付けて意味を伝えるんだ

ひよこ

全部のサイトに必要？

ペンギン先生

深い階層の現在地や上位への移動を助けたいときに役立つよ。一つのページだけなら、同じ案内の効果は小さいね。主なメニューやページ内の案内と合わせ、サイトの構造に応じて使うんだ

ひよこ

付ければ検索順位も上がる？

ペンギン先生

それだけで順位が上がるとは言えないよ。Googleのパンくず構造化データは検索で内容の位置を伝える手掛かりになるけれど、検索結果への表示も保証されない。画面の案内と構造化データは、それぞれ目的に合うように整えよう

まとめ：ざっくりこれだけ覚えればOK！

「Breadcrumb」って出てきたら「サイトの中での現在地を階層で示すナビゲーション」と思えればだいたいOK！

📖 おまけ：英語の意味

「Breadcrumb」＝パンくず

💬 文字どおりにはパンくずという意味だよ。Webではページの位置や経路を示す道しるべとして覚えると分かりやすいね

参考資料