パンくずリストとは？設置するメリットや具体的な作成方法、CSSデザイン例を徹底解説！

生徒

Webサイトを作成していますが、パンくずリストって何ですか？

ペン博士

パンくずリストについてだな！今から詳しく説明するぞ！

生徒

ありがとうございます！

Webサイトを作成する中で、「パンくずリストは本当に必要？」「設置場所や書き方がわからない」と悩んでいませんか？
本記事では、パンくずリストの役割や設置のメリット、HTML・構造化データを使った実装方法までを解説します。
記事を読み終えるころには、ご自身のサイトに適したパンくずリストを正しく作成し、ユーザビリティとSEOの両立にもつながります。

「学習→収入」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

O.Yさん
子育てと両立できる働き方を目指し、プログラミングの学習を開始する。独学での学習に限界を感じ、WithCodeの副業コースの受講を決意。最終目標から逆算した学習計画のもとスキルを習得し、卒業後に初案件を担当。現在は実案件サポートのもと、複数案件を担当している。

詳しくはこちらの記事をご覧ください。

あわせて読みたい

【副業目指すママさん必見】テックアカデミー卒業後に再入学！育児と学習を両立させて”月10万円&#... 副業コース 16週間の学習を経て、月10万円を達成された卒業生！育児と学習を両立して成功できた秘訣をお伺いしました！子育てをしながら在宅ワークを考えられている方は...

O.Yさんの主な制作実績はこちら

企業ブランディングを目的にしたHP制作

株式会社バックステージプロジェクト 様

パンくずリストとは？

パンくずリストとは、現在表示されているページが、サイト内のどの位置にあるかを示すナビゲーションの一種です。以下の画像のように、ページ上部に配置されることが一般的です。
この名称は、グリム童話「ヘンゼルとグレーテル」で道しるべとして使われたパンくずに由来しています。訪問者が迷わずにページを移動できるように、道案内の役割を果たしています。

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

ペン博士

パンくずリストを設置するメリットを紹介するぞ！

ここでは、パンくずリストを導入することで得られる具体的なメリットを紹介します。
ユーザーにとっての使いやすさや、検索エンジンへの効果など、導入による効果は想像以上に大きなものです。

ユーザビリティーの向上

パンくずリストの最大のメリットは、サイト内をスムーズに移動できる点です。特にページ数が多く、階層構造が複雑なサイトでは、ユーザーが現在地を見失いやすくなります。そんなときにパンくずリストがあれば、簡単に上位階層へ戻ることができて便利です。

例えば、ファッション通販サイトで「ホーム ＞ メンズ ＞ トップス ＞ Tシャツ ＞ 商品名」と表示されていれば、Tシャツ一覧ページにすぐ戻ることができ、ほかのアイテムとの比較や検討もしやすくなります。

このように、ユーザーは現在地をひと目で把握できるため操作に迷わず、ストレスを感じにくくなります。その結果、サイト内の回遊性が高まり、滞在時間の延長や再訪率の向上にもつながるでしょう。

SEO効果が期待できる　

パンくずリストは、検索エンジンにとっても理解しやすい構造を作れます。
検索エンジンは、サイト構造が明確なほうがコンテンツを正しく評価しやすいため、パンくずリストの設置は効果的です。
内部リンクが整理されることで、クロールの効率も向上します。

また、検索結果にパンくずが表示されることもあり、クリック率の向上にもつながる可能性があります。
このように、パンくずリストはSEO対策としても有効な手段と言えるでしょう。

よくある疑問を解決！パンくずリストについてのQ&A

ペン博士

パンくずリストに関するよくある疑問を解決していくぞ！

ここではパンくずリストに関して、よくある疑問を具体的に解説します。
設置場所やSEOとの関係、複数設置の可否など、実装前に確認しておきたい基本的なポイントをわかりやすく紹介します。

パンくずリストをどの場所に設置するべきですか？

一般的には、ヘッダーのすぐ下、ページ上部に配置するのが最も一般的です。
パンくずリストは、ユーザーが現在位置を把握するためのナビゲーションであり、視認性の高い場所に設置するのが望ましいとされています。
特に、ファーストビュー内に配置されていれば、移動先の判断がしやすくなります。

複数のパンくずリストを設置しても良いですか？

基本的には、1ページにつき1つで十分です。
あまり多く設置すると、ユーザーが混乱するだけでなく、検索エンジンもどれを正と判断すべきか迷うおそれがあります。

ただし、目的が異なる場合は例外です。例えば、商品詳細ページに「商品カテゴリ」と「ブランドカテゴリ」の2系統の道筋を表示するケースなどが該当します。
そのような場合には、設置の意図を明確にしておくことが重要です。

カテゴリー構造が整理されていないとどうなりますか？

パンくずリストを効果的に活用するには、あらかじめカテゴリー構成を整理しておくことが重要です。
階層が曖昧だったり、同じ内容が複数のカテゴリーに重複していたりすると、ユーザーの混乱を招く恐れがあります。

例えば、ある記事が「ブログ ＞ お知らせ」と「お知らせ ＞ ブログ」の両方に属している場合、ページごとにパンくずリストの表示順が異なり、どちらが正しいか判断しにくくなります。

このような状態では、パンくずリスト本来の役割である「現在地の明示」や「スムーズな移動」が十分に機能しません。

HTMLでパンくずリストを作成する方法

ペン博士

パンくずリストの具体的な作成方法を紹介するぞ！

生徒

お願いします！

ここからは、パンくずリストをHTMLで作成する方法を紹介します。記述のポイントやサンプルコードを交えながら、順を追ってわかりやすく解説します。

HTMLでの基本的な記述例

HTMLでは、navタグで全体を囲み、olタグとliタグを使って階層を表現するのが基本です。以下のようにリンクを順に並べて作成します。

<nav aria-label="パンくずリスト" >
  <ol class="breadcrumb">
    <li><a href="https://example.com/">ホーム</a></li>
    <li><a href="https://example.com/categorya/">カテゴリA</a></li>
    <li><a href="https://example.com/categoryb/">カテゴリB</a></li>
  </ol>
</nav>

このように階層ごとに区切りながら、ユーザーの現在地を視覚的に示せます。

検索エンジンに正しく認識させる構造化リストの記述例　

パンくずリストを検索エンジンに正しく認識させるには、単にHTMLで記述するだけでは不十分です。
そのため、構造化データ（microdata）を使った記述が必要となります。
「BreadcrumbList」という形式を使うことで、「このリストは階層構造を持つパンくずリストである」と明確に伝えることができます。

以下は、その具体的な記述例です。

<nav aria-label="パンくずリスト">
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/">
        <span itemprop="name">ホーム</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/categorya/">
        <span itemprop="name">カテゴリA</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/categoryb/" aria-current="page">
        <span itemprop="name">カテゴリB</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

それぞれの属性が持つ役割は以下の通りです。

itemscope itemtype=”https://schema.org/BreadcrumbList”

リスト全体がパンくずリストであることを検索エンジンに示します。

itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”

各リスト項目がパンくずリストの一部であることを示します。

itemprop=”item”

各リスト項目が指すページ（URL）を検索エンジンに示します。
URLとリスト項目の関係を明確にするための属性です。

meta itemprop=”position” content=”1″

パンくずリスト内の要素がリストの何番目にあるかを示します。
先頭の項目には「content=”1″」、2番目には「content=”2″」のように順番を付けることで、検索エンジンが正しい並び順を理解しやすくなります。

構造化データが正しく認識されているか確認する方法

ペン博士

パンくずリストを設置したあとは、正常に機能しているか必ず確認するのじゃぞ。
見た目が正しく表示されていても、構造化データに誤りがあると、検索エンジンに正しく認識されないことがあるのじゃ。

Googleが提供する「リッチリザルトテスト」や「スキーママークアップ検証ツール」を活用すれば、マークアップが正しく機能しているかを確認することができます。
テスト結果にエラーや警告が出た場合は、内容をよく読み、指摘された箇所を修正しましょう。
たとえコードに自信があっても、念のため確認しておく姿勢が重要です。

以下は、「スキーママークアップ検証ツール」で確認した結果画面です。
「エラーなし」と表示されていることを確認するとともに、構造化データ内の「name」や「@id」などが意図どおりに出力されているかも忘れずに確認してください。

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

ペン博士

ここでは、パンくずリストのCSSデザイン例を紹介するぞ！

パンくずリストは見た目でもユーザー体験に影響を与えます。ここでは、使いやすさとデザイン性を両立させたCSSデザイン例を紹介します。HTMLの基本コードをもとに、サイトの雰囲気に合わせてアレンジできるように構成しています。

紹介するCSSデザイン例で使用するHTMLは以下のような構造です。CSSを適用する際は、class名などを必要に応じて変更してください。

<nav aria-label="パンくずリスト">
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/">
        <span itemprop="name">ホーム</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/categorya/">
        <span itemprop="name">カテゴリA</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/categoryb/" aria-current="page">
        <span itemprop="name">カテゴリB</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

① シンプルでベーシックなデザイン

最も汎用的なスタイルです。文字色は黒系で、区切りには「>」を使用します。リンクには下線を付けており、どんなサイトデザインにも馴染みやすい点が特徴です。まずはこの形式を基本にして、カスタマイズしていくのがおすすめです。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

/* パンくずリスト全体のレイアウト */
.breadcrumb {
  list-style: none;
  display: flex;
  font-size: 14px;
  color: #333;    
  padding: 0;
  margin: 0;
}
/* 区切り文字は「>」で薄めのグレー */
.breadcrumb li + li::before {
  content: ">";
  margin: 0 6px;
  color: #999;
}
/* リンクは下線ありでベーシックに */
.breadcrumb a {
  color: inherit; 
  text-decoration: underline;
}

② 色付き背景でボタン風に

各パンくず要素に薄い背景色と角丸を付け、ボタンのような見た目にするデザインです。スマートフォンサイトなどで、タップしやすさを重視したい場合に適しています。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

/* パンくずリスト全体のレイアウト */
.breadcrumb {
  list-style: none;
  display: flex;
  gap: 6px;
  font-size: 14px;
  color: #333;
  padding: 0;
  margin: 0;
}
/* 区切り文字を非表示 */
.breadcrumb li + li::before {
  display: none;
}
/* 各リンクをボタン風に背景＆角丸 */
.breadcrumb a {
  display: block;
  padding: 6px 10px;
  background: #f2f2f2;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

③ ホバーで色が変わるアニメーション付き

マウスを乗せると、背景色や文字色が変化するインタラクション付きのデザインです。動きが加わることでUIとしての視認性が高まり、クリックされやすい導線になります。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

/* パンくずリスト全体のレイアウト */
.breadcrumb {
  list-style: none;
  display: flex;
  font-size: 14px;
  color: #555;
  padding: 0;
  margin: 0;
}
/* 区切りは「>」で少し淡いグレー */
.breadcrumb li + li::before {
  content: ">";
  margin: 0 8px;
  color: #aaa;
}
/* ホバー時に背景と文字色が変わるようにトランジション */
.breadcrumb a {
  color: inherit;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
/* ホバーすると青背景＋白文字でインタラクションを演出 */
.breadcrumb a:hover {
  background: #007acc;
  color: #fff;
}

④ アイコンを組み合わせたデザイン

Font Awesomeなどのアイコンフォントを使用し、アイコンを表示させる方法です。視覚的に情報が伝わりやすく、洗練された印象を与えます。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

/* パンくずリスト全体のレイアウト */
.breadcrumb {
  list-style: none;
  display: flex;
  font-size: 14px;
  color: #333;
  padding: 0;
  margin: 0;
}
/* 2つ目以降のリストの前に矢印アイコンを表示 */
.breadcrumb li + li::before {
  content: "\f105"; /* Font Awesome の矢印アイコン */
  font-family: "Font Awesome 6 Free"; /* アイコンフォント指定 */
  font-weight: 900;
  margin: 0 8px;
  color: #999;
}
/* リンクの文字色 */
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
/*「ホーム」に家のアイコンを追加 */
.breadcrumb li:first-child a::before {
  content: "\f015"; /* Font Awesome のホームアイコン */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 6px;
}

⑤ フラットデザインでモダンに

シンプルな配色とフォントで構成されたフラットデザインです。ポートフォリオ系のサイトにも馴染みやすいスタイルです。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

/* パンくず全体のレイアウトと文字色を設定 */
.breadcrumb {
  list-style: none;
  display: flex;
  font-size: 14px;
  color: #2563eb;
  padding: 0;
  margin: 0;
  font-weight: 500; /* 適度に太く読みやすく */
}
/* 区切りは「>」で少し淡いグレー */
.breadcrumb li + li::before {
  content: ">";
  margin: 0 8px;
  color: #aaa;
}
/* リンクの文字色 */
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
/* ホバー時は下線を付けてシンプルに変化 */
.breadcrumb a:hover {
  text-decoration: underline;
}

⑥ 吹き出し風の装飾で個性を出す

吹き出しのような形でパンくずを装飾し、柔らかく親しみやすい印象を与えるデザインです。ブログやデザイン性を重視するサイトに適しています。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

/* パンくず全体のレイアウトと文字色を設定 */
.breadcrumb {
  list-style: none;
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #333;
  padding: 0;
  margin: 0;
}
/* 各パンくず要素を吹き出し風の角丸ボックスに */
.breadcrumb li {
  position: relative;
  background: #f0f0f0;
  padding: 8px 16px;
  border-radius: 12px;
}
/* 区切り代わりに次の要素に吹き出しの矢印を追加 */
.breadcrumb li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #f0f0f0; 
}
/* リンクの文字色 */
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

⑦ ダークテーマに合わせた反転配色

背景をダークカラー、テキストを白系にした反転配色のデザインです。夜間モードのサイトや、高級感を演出したい場合に適しています。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

/* ダーク背景で全体を横並びにし、文字色を白に */
.breadcrumb {
  list-style: none;
  display: flex;
  font-size: 14px;
  color: #fff;
  background: #222;
  padding: 8px 12px;
  margin: 0;
}

/* 区切りは「>」で少し淡いグレー */
.breadcrumb li + li::before {
  content: ">";
  margin: 0 8px;
  color: #aaa;
}

/* リンクの文字色 */
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

/* ホバー時は下線を表示して強調 */
.breadcrumb a:hover {
  text-decoration: underline;
}

ペン博士

これらを参考にパンくずリストを作成するんじゃぞ！

生徒

ありがとうございます！助かりました！

まとめ

パンくずリストは、ユーザーに現在地を伝える重要なナビゲーション要素です。
使いやすいサイトを実現するだけでなく、SEO対策としての効果も期待できます。

HTMLや構造化データを活用すれば、ご自身でも手軽に実装できるでしょう。
さらに、デザインを工夫すれば、見た目の印象も高まります。

まずはサイト構造を見直し、最適な形でパンくずリストを取り入れてみましょう。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！