あやね
サイト制作の打ち合わせでは、配色やフォント、トップページの見た目といった話題が中心になりがちです。もちろんそれも大切ですが、実際にサイトを訪れる人にとってもっと切実なのは「今、自分がどこにいるのか」が分かるかどうかです。どれだけデザインが整っていても、自分の位置を見失ってしまうサイトは、居心地が悪く感じられ、使い続けてもらいにくいものです。
そこで欠かせないのが「パンくずリスト」です。ページの上のほうに小さく表示されているだけの、地味なパーツに見えるかもしれません。ですが、ユーザーがストレスなく目的のページへたどり着けるかどうか、そして検索エンジンがサイトの構造を正しく理解できるかどうかにも関わってくる、意外と奥の深い存在です。
この記事では、パンくずリストの基本的な仕組みと3つの種類、導入するメリット、実際に採用されているサイトの事例、そしてデザインするときに気をつけたいポイントまで、順を追って詳しく紹介していきます。これからサイトに実装しようと考えている方はもちろん、既にあるパンくずリストを見直したい方の参考にもなるはずです。
パンくずリストとは？
パンくずリストとは、ページの上部（多くの場合、メインメニューのすぐ下あたり）に「トップ ＞ カテゴリ ＞ 商品名」のように横並びで表示される、補助的なナビゲーションのことです。今見ているページがサイト全体のどの位置にあるのかを、視覚的かつ簡潔に示してくれます。
名前の由来は、グリム童話の『ヘンゼルとグレーテル』です。貧しい木こりの家に生まれた兄妹が、森の中に置き去りにされそうになったとき、帰り道が分かるようにと、持っていたパンをちぎって道すじに少しずつ落としていきます。物語の中では、そのパンくずを小鳥に食べられてしまい、結局は道しるべとして機能しませんでした。ウェブサイトの世界では、その「道に印を残しながら進む」という発想の部分だけを借りて、訪問者が通ってきた道すじを把握しながら、いつでも上の階層に戻れるようにする仕組みとして「パンくずリスト」と呼ばれるようになりました。
日本語のサイトでも「パンくずリスト」「パンくずナビ」という呼び方がそのまま定着していて、ECサイトやメディアサイト、コーポレートサイトまで、業種を問わず幅広く採用されています。似たような役割を持つものに「サイトマップ」がありますが、サイトマップがサイト全体の構成を一覧で示すのに対して、パンくずリストはあくまで「今このページがどこにあるか」という一点にフォーカスしている点が異なります。両方を併用しているサイトも少なくありません。
表示される位置についても、ある程度の慣習があります。もっとも多いのはヘッダー直下、記事タイトルのすぐ上あたりです。ページを開いた瞬間に目に入る位置に置くことで、訪問者が迷う前に現在地を伝えられるようにする狙いがあります。なかにはページの一番下、フッター付近に補助的に設置しているサイトもあり、コンテンツを読み終えたあとに次のカテゴリへ移動してもらう導線として使われています。
パンくずリストの3つの種類
パンくずリストは、表示のしかたによって大きく3つに分類されます。それぞれ役割が異なるので、自分のサイトにどれが向いているかを考えながら見ていきましょう。
位置型パンくずリスト
もっとも一般的で、実際に多くのサイトで採用されているタイプです。サイトの階層構造にもとづいて、今見ているページがどのカテゴリに属しているかを表示します。大きな特徴は「静的」であることです。つまり、ユーザーがどんな経路でそのページにアクセスしても、同じページであれば常に同じパンくずリストが表示されます。検索から来た人も、トップページから順番にたどってきた人も、見えるパンくずは変わりません。
たとえば「トップ ＞ 家電 ＞ 掃除機 ＞ 商品名」のように、URLの階層構造とパンくずリストの並びがそのまま対応しているケースが多く見られます。コーポレートサイトやブログ、士業や店舗のホームページなど、階層がそこまで複雑でないサイトでは、まずこのタイプを選んでおけば大きな失敗はありません。
属性型パンくずリスト
ユーザーがどんな条件で商品や情報にたどり着いたかを、そのまま反映するタイプです。位置型とは違い「動的」な性質を持ち、同じページであっても、訪問者の検索経路によって表示内容が変わります。ECサイトや不動産サイトのように、探し方が複数用意されているサイトでよく使われます。
たとえばアパレルのECサイトでTシャツを探すとき、「カテゴリの一覧から探す」「ランキングから探す」「ブランド名で探す」など、人によって入口が異なりますよね。その入口に合わせて、一覧ページのパンくずも「トップ ＞ トップス ＞ Tシャツ ＞ メンズ」「トップ ＞ Tシャツ ＞ 人気ランキング（メンズ）」のように、内容が変化していくのが属性型の特徴です。ユーザーからすると、自分がどんな条件で絞り込んで検索したのかが一目で分かるので、検索フィルターのような役割も果たしてくれます。
ただし興味深いことに、最終的にたどり着く商品詳細ページでは、経路にかかわらず「トップ ＞ ブランド名 ＞ Tシャツ ＞ 商品名」のように、表示を統一しているサイトが増えています。これは、検索エンジンのクローラーに対して、そのページの位置づけを一貫して伝えるための工夫です。同じページのパンくずが訪問者ごとにバラバラだと、クローラーがサイト構造を正確に認識しづらくなるためだと考えられています。
パス型パンくずリスト
訪問者が実際にたどってきたページの順番を、そのまま表示するタイプです。「ブログ一覧 ＞ 記事タイトル ＞ コメント」のように、閲覧履歴に応じてパンくずの内容が人それぞれ変わります。
理屈としては便利そうに思えますが、実際にはブラウザの「戻る」ボタンや閲覧履歴の機能と役割がほぼ重複してしまうため、現在ではあまり採用されていません。日本語の企業サイトやECサイトを見渡しても、パス型パンくずリストが単独で使われているケースはかなり少なく、実務では位置型・属性型の2つを押さえておけば、ほとんどの場面をカバーできます。ただし、独自の検索・診断フローを持つ会員制サービスなど、ユーザーごとの操作履歴を見せること自体に意味があるサイトでは、限定的に採用されることもあります。
パンくずリストを設置するメリット
パンくずリストの導入には、訪問者側とサイト運営側、それぞれに具体的なメリットがあります。
ユーザーの利便性が上がり、離脱を防げる
訪問者は、自分が今どのカテゴリのページを見ているのか一目で分かるので、目的の情報にすぐ戻れます。ブラウザの「戻る」ボタンを何度も押して、ページを一つずつさかのぼる必要がありません。一段階だけ上のカテゴリに戻りたいときも、パンくずリストの該当箇所をクリックするだけで済みます。
この効果が特に大きいのは、検索エンジンからいきなり下層ページに着地したユーザーです。トップページを経由せずにアクセスしてきた人ほど、サイト全体の構造を把握できていない状態からスタートします。「このページに求めていた情報がなかった」というときも、パンくずリストから一つ上のカテゴリページに戻れば、関連する他の情報を探しやすくなります。この「戻りやすさ」が、目的の情報にたどり着けないまま離脱してしまう事態を防ぐことにつながります。
複数の階層をまたいで商品を比較検討するECサイトでは、この効果がとりわけ分かりやすく表れます。カテゴリ間の移動がスムーズであればあるほど、比較検討がストレスなく進み、購入に至る確率も高まると考えられています。
検索エンジンのクロールを助ける
パンくずリストは、見た目上はナビゲーションですが、技術的には内部リンクの一種でもあります。検索エンジンのクローラー（サイトを巡回して情報を収集するプログラム）は、このリンクをたどることでサイト全体の階層構造を把握しやすくなります。
特に位置型のパンくずリストは、同じページに対して常に同じ経路を示すため、クローラーにとって「このページはこのカテゴリに属している」という情報を安定して伝えられます。逆に、属性型のパンくずが訪問者ごとにバラバラに表示され続けてしまうと、クローラーが「結局このページはどこに位置しているのか」を判断しづらくなる可能性があります。近年、ECサイトの商品詳細ページで表示を統一する傾向が強まっているのは、この点が理由のひとつです。
検索結果でのリッチリザルト表示に対応できる
構造化データ（JSON-LDなどの記述形式）を使ってパンくずリストをマークアップしておくと、Googleの検索結果画面にパンくずの情報がそのまま表示される「リッチリザルト」に対応できます。青い文字のリンクとURLだけが並ぶ通常の検索結果と比べて、ページがサイトのどのカテゴリに属しているかが視覚的に伝わるため、検索したユーザーがクリックする前にページの内容をイメージしやすくなります。これが結果としてクリック率の改善につながるケースもあります。
なお、構造化データを実装していなくても、Googleがリンク構成から自動的にパンくずリストらしき情報を推測して表示することもあります。ただし表示内容を意図した形にコントロールしたい場合は、構造化データをきちんと実装しておくことが推奨されています。
参考になるパンくずリスト事例7選
実際にどんな企業がどのようにパンくずリストを使っているのか、業種の異なる7つのサイトを見ていきましょう。
事例1：Amazon.co.jp
Amazonの商品ページでは「Kindleストア ＞ Kindle本 ＞ 文芸・小説」のような表示が見られます。ただしAmazonが扱う商品は膨大な数にのぼるため、単純な一本のカテゴリ階層だけではすべての商品の位置づけを表現しきれません。実際には検索結果やレコメンド機能と組み合わされたナビゲーション全体の一部として、パンくずリストが補助的な役割を果たしています。商品ページ単体で見るとシンプルですが、その裏側には巨大な商品カタログを支える複雑な検索・分類の仕組みがある点も、あわせて知っておくと理解が深まります。
事例2：Apple 日本
Apple公式サイトのパンくずは非常にシンプルです。MacBook Airの製品ページであれば「Mac ＞ MacBook Air」というように、必要最低限の情報だけが表示されます。製品数がAmazonのようなECサイトほど多くないからこそ実現できる設計ではありますが、余計な装飾を削ぎ落とし、製品ラインナップ全体における位置づけを一目で伝えるという姿勢は、他のサイトを作る際にも参考になる部分が多いはずです。
事例3：ITmedia
IT系のニュースメディアであるITmediaでは、記事ページに「トップ ＞ NEWS ＞ クラウド」のようなカテゴリ・サブカテゴリのパンくずが表示されます。日々大量の記事が公開されるニュースメディアでは、読者が今読んでいる記事のジャンルを把握し、関連する他の記事にも移動しやすくすることが、サイト内の回遊率を左右します。カテゴリの粒度をどこまで細かく分けるか、というメディア運営ならではの設計判断が垣間見える事例です。
事例4：ユニクロ
ユニクロの公式オンラインストアでは、「トップ ＞ メンズ ＞ アウター ＞ ジャケット」のように、性別・カテゴリ・アイテム種別が段階的に表示される位置型のパンくずが採用されています。シンプルながら視認性が高く、似たアイテムを何度も見比べたいユーザーにとって、カテゴリ間をすばやく行き来できる作りになっています。
事例5：じゃらん
宿泊予約サイトのじゃらんでは、「トップ ＞ 関東 ＞ 東京都 ＞ 新宿・代々木・池袋エリア」のように、エリアの階層構造をそのままパンくずに反映しています。旅行先を大きな地方から都道府県、さらに細かいエリアへと絞り込んでいくユーザーの行動パターンと自然にかみ合っていて、周辺の宿泊施設を比較しながら探しやすいレイアウトになっています。
事例6：メルカリ
フリマアプリのメルカリでは、商品ページに「トップ ＞ レディース ＞ バッグ ＞ ハンドバッグ」といったカテゴリ階層が表示されます。個人の出品者が日々大量に商品を追加していくフリマアプリでは、運営側が用意したカテゴリ構造をパンくずとして明示することが、雑多になりがちな商品群の中で目的のものを見つけるための実用的な手がかりになっています。
事例7：Adobe 日本語サイト
Adobeの製品サイトでは、「製品 ＞ Creative Cloud ＞ Photoshop」のように、製品群と個別製品の関係性がパンくずで表現されています。Photoshop、Illustrator、Premiere Proなど、複数のソフトウェアをまとめて展開しているAdobeにとって、それぞれの製品がどのシリーズ・プランに属するのかを分かりやすく伝える手段として機能しています。
これら7つの事例を見比べると、業種やサイトの規模によってパンくずの見せ方や情報量が違うことが分かります。それでも共通しているのは、「余計な要素を足さず、位置関係だけを簡潔に伝える」という姿勢です。仕組みとしては単純に見えるパンくずリストですが、実際に自分のサイトに落とし込もうとすると、どこまで階層を見せるか、デザインにどう馴染ませるかなど、意外と判断に迷う部分が多いものです。
パンくずリストのデザインで気をつけたいポイント
パンくずリストは機能面だけでなく、見た目の設計もユーザー体験に大きく影響します。実装する前に押さえておきたいポイントを、6つに分けて紹介します。
区切り記号はシンプルに
「＞」や「／」など、視認性が高く意味が直感的に伝わる記号を使うのが基本です。オリジナリティを出そうとしてアイコンや矢印を凝りすぎると、かえって「これは区切りなのか、それとも別の意味を持つ記号なのか」と読み手を迷わせてしまうことがあります。
今見ているページはリンクにしない
現在のページをクリックできる状態にしておくと、押しても画面が変わらず、ユーザーを混乱させてしまいます。パンくずリストの最後の項目だけは、リンクではなく通常のテキストとして表示するのが一般的な作法です。
アンカーテキストには分かりやすい言葉を使う
リンク部分の文字列（アンカーテキスト）は、社内用語や略称ではなく、訪問者が見て意味の分かる言葉にしましょう。パンくずリストは検索結果にもそのまま表示されることがあるため、専門的すぎる表現は避けたほうが親切です。
スマホでは省略のルールを決めておく
画面幅が狭いスマートフォンでは、階層が深くなるとパンくずリストが折り返してしまい、レイアウトを圧迫します。中間の階層を「…」で省略したり、直近の1〜2階層だけを表示したりするなど、あらかじめルールを決めておくと、どのページでも安定した見た目を保てます。
主役になりすぎないサイズ・色にする
パンくずリストはあくまで補助的なナビゲーションです。メインコンテンツやCTAボタンより目立ってしまわないよう、文字サイズは本文よりひと回り小さく、配色もグレーなど控えめなトーンに設定するのが基本です。
全ページで表示ルールを統一する
ページによってパンくずの有無や表示位置がバラバラだと、訪問者はそのたびに視線を動かして探すことになり、かえって使いにくく感じられます。トップページやランディングページなど、あえて設置しない例外を決める場合も、その基準をチーム内であらかじめ共有しておくと、サイト全体で一貫した体験を作れます。
[画像プレースホルダー：スマホ画面でパンくずリストの一部が省略表示されているレイアウト例]
Pixsoでパンくずリストのデザインを効率化
ここまで紹介してきたようなデザインのルールを一から検討し、チーム内で認識をすり合わせながら形にしていく作業には、想像以上に時間がかかるものです。区切り記号ひとつ、文字の色ひとつをとっても、「これで本当に統一感が出ているか」を確認する作業が発生します。
そこで役立つのがデザインツールの Pixso です。豊富なコンポーネントライブラリが用意されているので、ゼロから作り込まなくても、既存のパーツを組み合わせながらスピーディーにプロトタイプを作成できます。一度作ったパンくずリストのコンポーネントを他のページにも使い回せるため、サイト全体でルールを統一しやすくなる点もメリットです。
リアルタイムの共同編集機能も備わっているため、デザイナーとエンジニア、ディレクターが同じ画面を見ながら細かい調整を進められるのも便利なポイントです。「区切り記号を矢印にしたい」「スマホ表示だけ省略ルールを変えたい」といった調整も、その場でチームに確認を取りながら反映できます。サイト全体のトーンとパンくずリストがきちんと馴染むよう、デザインを磨き上げていく作業を、Pixsoが後押ししてくれます。
[画像プレースホルダー：Pixsoの画面上でパンくずリストのコンポーネントを編集している様子]
まとめ
パンくずリストは、地味に見えて実はサイト全体の使いやすさを底上げしてくれる、シンプルながら効果の大きいナビゲーション要素です。位置型・属性型・パス型という3つの種類の違いを理解したうえで、自分のサイトの構造や訪問者の行動パターンに合った形を選ぶことが、遠回りのようで一番の近道になります。今回紹介した7つの事例や、デザイン時に気をつけたい6つのポイントも、ぜひ自社サイトの改善に役立ててみてください。
まだパンくずリストを導入できていないサイトがあれば、ユーザー体験の向上はもちろん、検索エンジンからの評価にも良い影響が期待できるので、一度検討してみる価値はあります。Pixso のようなツールを使えば、細かいルール決めからチームでの調整まで、アイデアを形にする作業がぐっとスムーズに進められるはずです。
