一覧に戻る
Lv.1

パンくずリスト

Breadcrumb Navigation

Webサイトで、今自分がどのページにいるかを視覚的に分かりやすく示す案内表示。

簡単に説明すると

パンくずリストは、Webサイトの中で今自分がいるページの場所を、迷子にならないように分かりやすく教えてくれるナビゲーション表示だよ。 例えば、ネットショップで「ホーム > 家電 > テレビ」のように、ページの上に横並びで表示されるんだ。 これをクリックすると、1つ上の階層(カテゴリ)のページや最初のページへ直接移動することができるよ。

名前のヒミツ

パンくずリストの由来は、童話『ヘンゼルとグレーテル』で、森で迷子にならないように道にパンくずを置いていったエピソードからきているよ。 英語では「Breadcrumbs(ブレッドクラム)」とも呼ばれていて、Webサイトの中で迷子にならないように帰り道を教えてくれる目印なんだ。

くわしく見てみよう!

パンくずリストとは、Webサイトの各ページの上部に表示される、表示しているページからトップページまでの道筋を順番に並べたリンク付きのテキストのことだよ。ユーザーがサイトのどこにいるかを一目で理解できるように手助けする仕組みなんだ。
これにより、目的のページまで迷わずスムーズに移動できるようになるよ。

例えば、大きなデパートの中で自分が今どの階のどの売り場にいるのかを示す案内図のような役割を持っているよ。サイトの階層構造をそのまま表しているため、「トップページ > カテゴリ > 個別のページ」といった形で矢印や記号で区切って並べられることが多いんだ。
この表示があることで、ユーザーは迷うことなく1つ上のカテゴリやトップページに戻ることができるよ。

さらに、このリストはサイトを巡回する検索エンジンのロボットにとっても役立つ仕組みなんだ。ページ同士がリンクでつながっているから、ロボットがリンクをたどりながらサイト全体の階層構造を把握しやすくなるんだよ。
ちなみに、Googleの検索結果に「ホーム>家電>テレビ」のような表示が出ることがあるけど、これは今説明した見た目のパンくずリストとは別の仕組みで、「構造化データ」と呼ばれるページ裏側の追加情報を用意して初めて生まれるものなんだ。見た目のパンくずリストを置いただけでは、検索結果にはまだ反映されないよ。
サイトの構造をユーザーと検索エンジンの両方に正しく伝えるための、大切な道しるべになっているんだ。

カテゴリWebデザイン