パンくずリスト（パンくずナビ、トピックパス、フットパス、英：Breadcrumb List）とは？

この記事を読むための時間：5分

多くのWebサイトで使用されている「パンくずリスト」は、ユーザーの現在地を直感的に把握しやすくするナビゲーションのひとつです。

変わった名前ということもあり、Web制作初心者の方はパンくずリストがどんなものかわからないのではないでしょうか？

今回は、「パンくずリストって何？」という方向けに基礎知識や作成のポイント、デザイン事例などを紹介します。

パンくずリスト（パンくずナビ、トピックパス、フットパス、英：Breadcrumb List）とは？

パンくずリストとは、ユーザーの現在地とトップページからの経路を可視化したナビゲーションです。英語では「Breadcrumb List」と呼ばれています。

最も標準的なパンくずリストでは、最も左にトップページが置かれ下層ページに入るたびに右側に伸びて上位ページへのリンクが順番に表示されます。

パンくずナビ、トピックパス、フットパスなどと呼ばれることもあり、ページ上部に表示されることが多いですが下部に配置しても問題ありません。

「パンくずリスト」の名前の由来

パンくずリストという名前は、童話「ヘンデルとグレーテル」で主人公たちが森で迷子にならないようにとパンくずを少しずつ落としながら歩いたエピソードが由来です。

パンくずリストはWebサイトのトップページから一層ずつ経路を置きながら潜り、上位ページへ迷子にならずに戻れるようにするもの。確かに「ヘンデルとグレーテル」のパンくずと役割が似ています。

パンくずリストの種類

パンくずリストには以下の3種類があります。

1. 位置型パンくずリスト
2. 属性型パンくずリスト
3. パス型パンくずリスト

ここからは、それぞれどんなものなのか紹介します。

1. 位置型パンくずリスト

「位置型パンくずリスト」は、そのページがWebサイト内のどの階層にあるのかを示す、最も一般的なパンくずリストです。

このパンくずリストでは、どういう経路でそのページにたどり着いたとしても表示されるリストは同じです。ユーザ自身がどの位置にいるのか把握しやすく、しかも上位階層のページに1クリックで戻れるため広く使用されています。特に階層の多いWebサイトに向いています。

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

「属性型パンくずリスト」は、カテゴリによって分類しているパンくずリストです。ECサイトなどで検索フィルタのような役割を果たしており、ユーザーが「どのカテゴリを見ているのか」を把握するのに役立ちます。

しかし、クリックしても上位ページに戻ることはできず、位置やトップページへの経路は直感的にわかりにくいです。現在はECサイトでも位置型パンくずリストを採用しているサイトが目立ちます。

階層が多くなく、ユーザーが位置よりもカテゴリを把握したいサイト向きです。また、位置型パンくずリストと組み合わせて使用されていることもあります。

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

「パス型パンくずリスト」は、ユーザーが今閲覧しているページにどのようにして行き着いたのかを示すリストです。検索の方法や経路によってその都度表示されるリストが変わります。

3種類の中では名前の由来である「ヘンデルとグレーテル」のパンくずに最もイメージが近いですが、ブラウザの「戻る」ボタンや履歴と同様の機能しか持たないため、最近はほとんど使われていません。

パンくずリストを設置するメリット

Webサイトにパンくずリストを設置すると、以下のようなメリットがあると考えられます。

• ユーザビリティの向上
• SEO（検索エンジン最適化）効果
• クローラーがサイト内を巡回しやすくなる

順番に見ていきましょう。

ユーザビリティの向上

ページ数や階層が多いサイトは構造が複雑でユーザビリティ（使いやすさ）に欠けた状態になりがちです。

パンくずリストがあることでユーザーが現在位置とトップページまでの経路を把握でき（属性型パンくずリストでは今見ているカテゴリを把握できる）、ユーザーが迷わずに目的のページへたどり着きやすい、または回遊しやすいサイトになるでしょう。

SEO（検索エンジン最適化）効果

パンくずリストは内部リンクでもあるため、SEOにも効果的です。パンくずリストでは上位ページに内部リンクが集まる構造になっています。そのため、主要な上位ページが重要なページとして評価されやすくなります。

また、適切に設置されたパンくずリストは、検索結果のタイトルとディスクリプションの間に表示されます。クリック前のユーザーにサイトの構造を伝えられ、アクセス数向上に繋がるでしょう。

クローラーがサイト内を巡回しやすくなる

Googleに評価してもらうためには、「クローラー」と呼ばれる情報収集ロボットにサイトを巡回して理解してもらう必要があります。

パンくずリストは、どのページがどのカテゴリーに属していてどの階層にあるのかなどのサイトの構造をユーザーだけでなくクローラーにもわかりやすく伝えます。

その結果クローラーがサイト内を巡回しやすくなり、サイトの評価につながりページの順位も向上するのです。

パンくずリスト作成の3つのポイント

最適なパンくずリストを作成するためには、以下の3つのポイントを押さえると良いでしょう。

1. サイトの構造を整理して関連性を意識する
2. 全ページに配置する
3. SEOキーワードを含める

順番に紹介します。

【1】サイトの構造を整理して関連性を意識する

パンくずリストはWebサイトの階層構造をわかりやすくしますが、ページ数や階層が増えるほど複雑になり、わかりやすいパンくずリストを作成するのが困難になります。

例えば、以下のようなパンくずリストはどうでしょうか。

「スカート」と「長袖シャツ」に関連性がなく、ユーザーにもクローラーにもわかりにくいものになっています。こういった設計ミスを防ぐためにもサイトの構造を整理することが重要です。

ホームページの階層構造、つまりディレクトリの構造を整理しましょう。構造が整理されていれば、パンくずリストは関連性のある適切なものになるはずです。

【2】全ページに配置する

パンくずリストを作成するときは、トップページとLP（ランディングページ）以外の全ページに設定するようにしましょう。パンくずリストがあるページとないページが混在すると、ユーザーにとって使いにくいサイトになります。

【3】SEOキーワードを含める

「パンくずリストを設置するメリット」でも述べたように、パンくずリストはSEOに影響する要素です。ユーザーにわかりやすい言葉で表記するのはもちろんのことですが、できるだけSEOキーワードを使用することで、SEO効果を高められます。

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

最後に、パンくずリストのデザインをいくつか紹介します。バリエーションが豊富な要素ではありませんが、設置する場所やスマホサイトの関係などに注目してみましょう。

DAISO（ダイソー）

国内・国外で5500店舗以上を展開している100円ショップDAISO（ダイソー）の公式サイトでは、メインビジュアル下に位置型パンくずリストを設置しています。ゆったりと大きめのスペースをとったデザインなので、スマホでも同じパンくずリストが表示されますが、指でもタップしやすいです。

DAISO公式サイト：https://www.daiso-sangyo.co.jp/

ONLYMINERALS（オンリーミネラル

日本生まれのミネラルコスメブランドONLYMINERALS（オンリーミネラル）のサイトでは、メニュー下に位置型パンくずリストを設置しています。シンプルなデザインで、スマホでは表示されません。

ONLYMINERALS公式サイト：https://www.onlyminerals.jp/

パパママハウス

関西・東海地方で注文住宅・リノベーションを手がける「パパママハウス」のサイトでは、ページ下部のフッター上に位置型パンくずリストを設置しています。一見シンプルながら、マウスオーバーでアンダーラインがでるエフェクトがおしゃれです。こちらのサイトのパンくずリストも、スマホでは表示されません。

パパママハウス公式サイト：https://papamamanhouse.com/

ETUDE HAUSE（エチュードハウス）

人気韓国コスメETUDE HAUSE（エチュードハウス）の公式通販サイトでは、位置型パンくずリストがサイト上部に複数並んで表示されます。

商品が多いブランドや、カテゴリを細分化しているECサイトではこのようなパンくずリストがよく見られます。設置に手間がかかりますが、サイト内回遊率をアップする工夫です。

公式サイト：https://www.etudehouse.com/jp/ja/

まとめ

今回は、パンくずリスト（パンくずナビ、トピックパス、フットパス、英：Breadcrumb List）について紹介しました。

ユーザビリティの向上だけでなくSEOにも効果的なので、構造が複雑なサイトではぜひ取り入れたい要素のひとつです。「パンくずリスト作成の3つのポイント」を押さえて、自社サイトに最適なパンくずリストを作成しましょう。