パンくずリストとは?メリット、種類、設置方法などを解説

パンくずリストとは?メリット、種類、設置方法などを解説

【2026年3月12日】情報を更新するとともに、パンくずリストに関するFAQ(よくある質問)を追加しました。

この記事のレベル

初心者 (3.0)
重要度 (3.5)
難しさ (2.5)

こんにちは、編集長のカワウソです!

「パンくずリストって何?」と悩んでいませんか?

パンくずリストは、ユーザーにとって使いやすいホームページを作るために、設置が推奨される要素の一つです。

そこで今回は、パンくずリストの基礎知識やメリットを解説します。

カワウソ

この記事は次のような人におすすめ!

  • 初めて企業ホームページを作る人
  • ホームページの利便性を高めたい人
  • パンくずリストについて詳しく知りたい人

この記事では、パンくずリストの種類を3つ紹介しています。
この記事を読めば、自社のホームページに合うパンくずリストを選べますよ。

また、記事の後半ではWordPress(ワードプレス)でホームページを作る方向けに、「パンくずリストの設置方法」も解説しているので、ぜひチェックしてみてください。

それではどうぞ!

パンくずリストとは

パンくずリストとは、ホームページを訪れたユーザーが、「現在どこのページにアクセスしているか」を知るための「道しるべ」です。

参考に、弊社『エックスサーバー』のパンくずリストをご覧ください。

エックスサーバーのパンくずリスト

以下、ホームページの種類別の例です。

コーポレートサイトの例

ホーム > 会社情報 > 代表挨拶


ECサイトの例

ホーム > トップス > Tシャツ > 半袖


採用サイトの場合

ホーム > インタビュー > Webデザイナー

このように、パンくずリストは「>」や「/」などを用いて表示されることが多く、ほとんどの場合、ヘッダー(ページ最上部のパーツ)の下部付近に設置されます。

メモ

なかには、フッター(ページの最下部)付近に設置しているホームページもあります。

※ヘッダーやフッターについては、以下の記事で詳しく解説しています。

カワウソ

ただ、「なぜパンくずというのか」が気になりますよね。この機会に、パンくずリストの名前の由来を見てみましょう。

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

パンくずリストの名前の由来は、グリム童話の「ヘンゼルとグレーテル」です。

物語には、ヘンゼルとグレーテルが家から森へ行く途中、帰り道を見失わないように、パンくずを少しずつ落としていった場面があります。

メモ

物語では、小鳥がパンくずを食べてしまったことから、結果的には道しるべにはなりませんでした。その後、ヘンゼルとグレーテルはお菓子の家(魔女の家)に迷い込んでしまいます。最終的には魔女を退治したあと、家に帰れたようです。※諸説あります。

カワウソ

ホームページのパンくずリストは、小鳥に食べられる心配はありませんね。

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

ホームページにパンくずリストを設置するメリットは、主に以下の2つがあります。

それぞれ詳しく解説しますね。

ユーザーが迷子にならない

パンくずリストがあれば、ユーザーがホームページのなかで迷子になることはありません。

なぜなら、パンくずリストはユーザーに対して、以下の2つを示すためです。

パンくずリストが示すもの
  • 閲覧中のページが所属するカテゴリ(分類)
  • 閲覧中のページの上位に位置するページ

参考に、弊社『エックスサーバー』のパンくずリストをご覧ください。

エックスサーバーのパンくずリスト

これを見れば、今閲覧しているのが「よくある質問の新規契約に関するページ」だと判断できますよね。

仮にユーザーが閲覧中のページに対して、「目的のページではない」と判断しても、「よくある質問」ないしは「サポート」のテキストリンクから、ほかを探せます。

もちろん、「ホーム(トップページ)」から、まったく異なるカテゴリのページを探すこともできるでしょう。

ここで押さえておきたいポイントは、下層ページを閲覧しているユーザーのすべてが、トップページからアクセスしてくるわけではないということ。

検索ユーザーであれば、直接下層ページにたどり着くこともあるので、パンくずリストを設置しておいたほうが、ユーザーのためになるのです。

Googleのクロールをサポートする

パンくずリストは、ユーザーだけでなく、Googleのクロールをサポートする効果も期待できます。

前述のとおり、パンくずリストには、テキストリンクを設置するのが一般的。

つまり、パンくずリストを設置することで、クローラーがたどるリンクを効果的に増やせるのです。

クローラーはパンくずリストから、ホームページの全体像を理解しようとするでしょう。

パンくずリストの種類3つを紹介

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

種類特徴
位置型パンくずリストホームページの階層構造を示す
属性型パンくずリスト閲覧中のページの属性(性質や特徴)を示す
パス型パンくずリストユーザーの閲覧履歴を示す

それぞれ、種類ごとに役割が異なるので、「どんなホームページにおすすめなのか」といった点に触れながら、解説しますね。

階層構造を示す「位置型パンくずリスト」

一般的に多く用いられるのが、この「位置型パンくずリスト」です。
位置型パンくずリストは、ホームページの階層構造を示します。

弊社『エックスサーバー』のホームページでも、位置型パンくずリストを採用していますよ。

再度、例を見てみましょう。
URL(階層)とパンくずリストが同じ構造ですよね。

位置型パンくずリストの例
パンくずリストとURLの関係

ホーム( / )サポート(support)よくある質問 (faq)新規契約(faq_contract_new.php)

コーポレートサイトなどの一般的なホームページを作るなら、ひとまず「位置型パンくずリスト」を選べば問題ないでしょう。

なお、ホームページの種類については、以下の記事で解説しています。

属性(性質や特徴)を示す「属性型パンくずリスト」

属性型パンくずリストの特徴は、閲覧中のページの属性(性質や特徴)を示すことです。

ECサイトや不動産情報サイトなど、検索方法が複数あるときに用いられます。

たとえば、アパレルECサイトで「Tシャツ」を探す場合、以下のように複数の方法で検索できますよね。

ECサイトにおける検索方法の例
  1. アイテムカテゴリから探す
  2. ランキングから探す
  3. ブランドから探す

(参考:ZOZOTOWN

以下は、それらに応じて、「検索結果(一覧ページ)」に表示されるパンくずリストの例です。

ECサイトにおける検索結果のパンくずリストの例
  1. ホーム >トップス > Tシャツ/カットソー > 対象商品(性別:メンズ)
  2. ホーム > Tシャツ/カットソー>人気アイテムランキング(メンズ)
  3. ホーム >ブランド名 >トップス > Tシャツ/カットソー > 対象商品(性別:メンズ)

(参考:ZOZOTOWN

どのパンくずリストも、「どのような条件で検索したのか(属性)」を読み取れますよね。

つまり、属性型パンくずリストは、検索フィルターのような役割を果たします。

さらにここで注目したいのは、その後到達する「商品詳細ページ」では、検索方法(経路)に関わらず、一般的な属性を表示することが多い点です。

さきほどの例で言うと、「アイテム」「ランキング」「ブランド」など探し方が変わっても、たどり着いた商品詳細ページのパンくずリストは、統一して以下のように表示されます。

パンくずリストの表示

(例)ホーム >ブランド名 > Tシャツ/カットソー >アイテム詳細

(参考:ZOZOTOWN

カワウソ

これは、アパレルECないしは『ZOZOTOWN』にとって、「ブランド名」と「アイテムカテゴリ」を表示するのが、一般的な属性だと考えられるためでしょう。

これらのように、パンくずリストが都度変化する点も、属性型パンくずリストの特徴です。

閲覧履歴を示す「パス型パンくずリスト」

「パス型パンくずリスト」は、現在アクセスしているページにたどり着くまでの、ユーザーの閲覧履歴を示すものです。

つまり、ユーザーごとに、パンくずリストの内容が異なります。

たとえば、以下のとおりです。

ユーザーの閲覧履歴

トップページ → カテゴリA → ページA → カテゴリB → ページB


パンくずリスト

トップページ > カテゴリA > ページA > カテゴリB > ページB

一見すると便利に感じますが、ブラウザの「戻る」や「履歴」などの機能と大きな差がないため、現在では価値を見出すのが難しいです。

カワウソ

当メディア運営のなかで、さまざまな企業のホームページに目を通していますが、パス型パンくずリストを見かけたことは、ほぼありません。

パンくずリストを設置する方法

ここからは、WordPress(ワードプレス)でホームページを作る方向けに、パンくずリストを設置する方法を解説します。

大別すると、パンくずリストを設置する方法は、以下の2つです。

パンくずリストに対応したテーマを選ぶ

これからホームページを作る方であれば、パンくずリストに対応したテーマを選ぶのが、手っ取り早いです。

また、パンくずリストに対応したテーマであれば、UI設計(ユーザーがホームページを快適に使えるようにするための設計)が行き届いている可能性が高いでしょう。

ここでは例として、弊社が提供するテーマ『Xwrite(エックスライト)』を紹介しますね。

Xwrite(エックスライト)

Xwrite(エックスライト)

▲出典:Xwrite(エックスライト)

『Xwrite(エックスライト)』は、レンタルサーバー国内シェアNo.1の弊社エックスサーバー株式会社が提供するWordPressテーマです。※2025年12月時点、W3Techs 調べ。

デフォルトでパンくずリストの設定機能があります。

Xwriteのパンくずリストの設定

▲出典:Xwrite「パンくずリストの設定」

これからレンタルサーバーを契約する方へ

弊社『エックスサーバー』の「WordPressクイックスタート」なら、レンタルサーバーの申し込みとあわせて、WordPress本体はもちろん、『Xwrite』などのテーマを自動でインストールすることが可能です。

詳しくは、以下の記事で解説しています。

パンくずリストを設置できるプラグインを使う

選んだテーマに、パンくずリストを出力する機能がない場合は、プラグインを利用しましょう。

ここでは、「Breadcrumb NavXT」というプラグインを紹介します。

Breadcrumb NavXT

Breadcrumb NavXT

▲出典:wordpress.org

「Breadcrumb NavXT」は、有効インストール数80万件を超える、パンくずリスト専用のプラグインです。

「ブロックエディタ」での挿入にも対応しているため、コードを編集することなく、初心者の方でも簡単に、パンくずリストを設置できます。

注意

ホームページ全体の共通設定として、パンくずリストを特定の位置(ヘッダーの下部など)に入れる場合は、コードの編集が必要になることが多いです。テーマを構成する重要なファイルを編集する必要があるため、初心者の方は事前にバックアップを取ることをおすすめします。また、ご自身で対応が難しい場合は、専門家に相談してください。

ここでは、固定ページそれぞれに、ブロックエディタでパンくずリストを設置する方法を解説しますね。

STEP1
プラグインの検索

まず、WordPressのメインナビゲーション「プラグイン > プラグインを追加」の画面で「Breadcrumb NavXT」を検索したのち、今すぐインストールをクリックします。

Breadcrumb NavXTを検索してインストール
STEP2
プラグインのインストールと有効化

続けて、有効化しましょう。

Breadcrumb NavXTを有効化
STEP3
固定ページにブロックを挿入

次に固定ページの+からブロックを追加します。
Bread」と検索すれば、パンくずリストがヒットするので、クリックしてください。

Breadcrumb Trailブロックを追加
STEP4
ページ属性をチェック

画面右側の「ページ属性」で、親ページが選択されているかチェックしましょう。
ここで親ページを設定しておかないと、パンくずリストが正しい階層構造を示しません。

ぺージ属性をチェック
STEP5
プレビューして確認

画面右上の保存をクリックしたあと、プレビューしてみましょう。

プレビューして確認

パンくずリストが表示されます。

パンくずリスト設置後の例
メモ

詳細な設定は、メインナビゲーション「設定 > Breadcrumb NavXT」からできます。

設定 > Breadcrumb NavXT

パンくずリストに関するよくある質問(FAQ)

最後に、パンくずリストに関する「よくある質問」をまとめました。

パンくずリストはどこに置くべき?

パンくずリストは、ページの上部に設置するのが望ましいです。

ページにアクセスしたとき、最初に見える位置にパンくずリストがあることで、ユーザーは「自分がホームページ内のどの階層にいるのか」を瞬時に把握できます。
これは、初めてホームページを訪れたユーザーが迷わないための大切な「道しるべ」となります。

具体的には、ヘッダーのすぐ下(メインコンテンツのすぐ上)や、記事タイトルの直前など、視線の動きを邪魔しない分かりやすい位置に配置しましょう。

また、ページが長い場合はフッター付近に補助的に設置するのも有効です。
コンテンツを読み終えたユーザーに対して、次に移動すべき上位カテゴリへの選択肢を提示でき、ホームページ内の回遊を促す助けになります。

パンくずリストの代替手段は?

パンくずリストは優秀なナビゲーションですが、ホームページのデザインや目的によっては「もっと別の見せ方をしたい」という場合もありますよね。

パンくずリストが担っている「ユーザーの案内」という役割を、別の形で実現する代替手段をいくつか紹介します。

  • ドロップダウンメニュー:ナビゲーションメニューに対するクリックやホバーで、親ページに含まれる子ページをリスト表示します。とくに表示領域が広い「メガメニュー」は、ひと目で多くの選択肢を提示できるため、ページ数が多いホームページに適しています。
  • サイドバー:画面の左右どちらかに、カテゴリやページの親子関係を常に表示します。アクセス中のページを強調(ハイライト)することで、ユーザーはホームページ内の現在地を確認しながら回遊できます。
  • サイトマップ型フッター:ページ最下部(フッター)にホームページ全体の構成を一覧表示します。コンテンツを読み終えたユーザーに対し、次に進むべき場所を提示する「サポーター」としての役割を果たします。

なお、表示領域がパソコンに比べて狭く、縦に長いスマホでは、アコーディオンメニューの活用が効果的です。

デフォルトでは親カテゴリのみを表示させておき、タップしたときだけ子ページへのリンクを展開させることで、限られたスペースを節約しながら、迷いのないスムーズな案内が可能になります。

それぞれ以下の記事で詳しく解説しているので、ぜひ参考にしてください。

Googleの検索結果に表示されるパンくずリストを最適化するには?

構造化データを用いて、検索エンジンへ明示的に伝えるのが効果的です。

HTMLで書かれた情報を、検索エンジンが正しく理解できるように専用のタグで意味づけ(マークアップ)したもののこと。

構造化データがなくても、パンくずリスト自体表示されることはあります。
Googleはリンク構成から「これはパンくずリストだ」と推測して反映することがあるためです。

しかし、表示内容を最適化するには、構造化データの追加が推奨されます。
とくに、階層の名前(文字列)を英語から日本語に変えることで、ユーザーが理解しやすくなり、その結果クリック率の向上が期待できます。

「エックスサーバー 料金」の検索結果に表示されたパンくずリスト

実装方法については、以下の公式ドキュメントを参考にしてください。
(参考:Google 検索セントラル「パンくずリスト(BreadcrumbList)の構造化データ」

カワウソ

『Xwrite(エックスライト)』など、デフォルトで構造化データの出力に対応したWordPressテーマもあります。

まとめ

この記事では、パンくずリストの基礎知識やメリットを解説しました。

また、パンくずリストの種類や設置方法なども解説したので、参考になったのではないでしょうか。

まとめ
  • パンくずリストは、ユーザーが迷わないようにするための道しるべ
  • パンくずリストは、検索エンジンのクロールをサポートする効果も期待できる
  • 3種類のパンくずリストのうち、「位置型パンくずリスト」がスタンダード
  • WordPressでホームページを作るなら、パンくずリスト対応のテーマがおすすめ
  • WordPressなら、プラグインで簡単にパンくずリストを設置可能

パンくずリストにメリットを感じたら、ぜひこの記事を参考に設置してみてください。

それでは、ユーザーにとって使いやすいホームページになることを願っています。

以上、最後まで読んでいただき、ありがとうございました。

コスパ&価格重視でレンタルサーバーを探している方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1※1のレンタルサーバーであり、24万社の導入実績※2があります。

2026年4月6日(月)17時まで、サーバー利用料金の半額がキャッシュバックされる期間限定キャンペーンを開催中です!

今なら実質月額495円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※1 2025年12月時点、W3Techs調べ。
※2 2025年12月時点、エックスサーバー・XServerビジネスにおける法人アカウント数の合計値。

法人向けレンタルサーバーをお探しの方へ

XServerビジネスは、エックスサーバーを法人向けに特化したレンタルサーバーです。
サーバー月間稼働率99.99%以上を保証する「SLA」をはじめ、セキュリティやサポートが充実しています。

2026年4月14日(火)17時まで、月額料金が30%キャッシュバックされる期間限定キャンペーンを開催中です!

今ならお得にホームページを開設できます!
コーポレートサイトでよく使われる「.co.jp」のドメインも永久無料で、大変お得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!