- 公開日： 最終更新日：
パンくずリストとは？書き方と作り方、種類、SEO効果
Webサイトを訪れた際に、今どこにいるのかがすぐに分かると、スムーズに目的の情報へたどり着けます。そんな場面で役立つのがパンくずリストです。サイトの利便性を高めるだけでなく、SEOにも関係があるため、多くのホームページで採用されています。
このページでは、パンくずリストの基本、種類、デザイン例、SEOとの関係、書き方と作り方について解説します。ホームページ制作やサイト運営を行う方にとって、パンくずリストを適切に活用することは重要なポイントのひとつです。パンくずリストを正しく理解し、より使いやすいサイトを目指しましょう。
目次
パンくずリストとは
パンくずリストとは、Webサイトの階層構造を視覚的に示すナビゲーションのことです。主に、ページの上部やコンテンツの直前に配置され、ユーザーが今どこにいるのかを把握しやすくする役割を持っています。
パンくずリストの名称は、グリム童話のヘンゼルとグレーテルに由来します。物語の中で、森に迷わないようにパンくずを落としながら進んだことにちなんで、Webサイト内での現在地を示すナビゲーションがパンくずリストと呼ばれるようになりました。
パンくずリストは、サイトの構造を整理し、ユーザーが迷子になりにくい設計を可能にします。特に、ページ数の多いECサイトや情報サイトでは、適切に配置することで直帰率の低下や回遊率の向上につながるため、重要なUI要素のひとつとされています。
また、Webサイトのナビゲーションにはグローバルメニューやサイドメニューなどもありますが、パンくずリストは階層構造を直線的に示す点が特徴です。これにより、ユーザーは現在のページと上位のページの関係を素早く理解し、必要に応じて簡単に移動できます。
パンくずリストの種類
パンくずリストには、位置型・属性型・パス型の3種類があります。ここでは、それぞれの種類を解説します。
位置型パンくずリスト
位置型パンくずリストは、Webサイトの階層構造を示す最も一般的なタイプです。ユーザーが現在どのカテゴリやページにいるのかを直感的に把握できるように、トップページからの経路を階層的に表示します。
例えば、ECサイトなどでは以下のようなパンくずリストを表示します。
ホーム>カテゴリ>サブカテゴリ>商品ページ
これにより上位ページへの移動がスムーズになります。
位置型パンくずリストは、サイトの構造を整理しやすく、ユーザーが迷わず目的のページへ移動できるメリットがあります。また、Googleも推奨する形式であり、SEOの観点からも有効です。特にページ数が多いECサイトや情報サイトでは、位置型パンくずリストを設置することで直帰率の低下や回遊率の向上が期待できます。
属性型パンくずリスト
属性型パンくずリストは、ユーザーごとに表示される内容が変化するのが特徴です。
例えば、スニーカーを販売するECサイトで、異なる検索条件を持つ2人のユーザーがナイキのブラックスニーカーにたどり着いたケースを考えてみます。
ユーザーAは、価格：10,000円以下のスニーカーを探して、ナイキのブラックスニーカーにたどり着きました。一方で、ユーザーBは、ランニングシューズを探して、同じナイキのブラックスニーカーにたどり着きました。
この場合、ユーザーAのパンくずリストには、ホーム>10,000円以下>ナイキ>ブラックが表示されます。また、ユーザーBのパンくずリストには、ホーム>ランニングシューズ>ナイキ>ブラックと表示され、それぞれ異なる経路をたどったことが分かります。
このように、属性型パンくずリストは、最終的に閲覧しているページが同じでも、どのような過程でたどり着いたかを示します。ユーザーの検索フィルターの役割を果たすため、ECサイトや不動産サイトなど、さまざまな条件で商品を絞り込む必要があるサイトでよく使われています。
パス型パンくずリストパン
パンくずリストの中でも、近年あまり使われなくなったのがパス型パンくずリストです。その理由は、ブラウザの戻るボタンとほぼ同じ機能しか持たないためです。
ユーザーがサイト内を移動するたびに履歴が反映されるため、たどったページの順番を追うことはできますが、戻るボタンと役割が重複してしまい、実用性が低いとされています。
また、パス型パンくずリストは、検索結果から特定のページへアクセスした場合にも、その履歴を表示するという特徴があります。そのため、履歴型パンくずリストとも呼ばれることがあります。
くずリストのデザイン例
パンくずリストのデザインは、ユーザーエクスペリエンスとサイトの使いやすさに大きく影響します。以下に、効果的なパンくずリストのデザイン例を紹介します。
リンクを強調したデザイン
ユーザーがサイト内の階層を容易に把握し、上位ページへスムーズに移動できるように、リンク部分を視覚的に強調するデザインがあります。例えば、ZOZOTOWNでは、現在のページをグレーアウトし、他の階層を青色のリンクカラーで表示することで、クリック可能な部分を明確に示しています。
現在地が分かりやすいデザイン
ユーザーが自身の位置を直感的に理解できるようにすることも重要です。クラシルでは、パンくずリスト内で現在のページを太字で表示することで、ユーザーの現在地を強調しています。これにより、ユーザーは自分がサイト内のどこにいるのかを一目で把握できます。
フッターに設置するデザイン
パンくずリストは通常、ページ上部に配置されますが、フッターに設置するデザインもあります。Appleのホームページでは、パンくずリストをフッター直前に配置し、コンテンツを重視したレイアウトを採用しています。
ユーザーがページを読み進めた後でも、サイト内の他のページへ容易に移動できるよう配慮されています。
パンくずリストのSEO効果
パンくずリストがSEOにどのように有利に働くのかについて解説します。
SEO的に有利になる
パンくずリストは、検索エンジンがサイトの階層構造を正確に把握するのを助ける役割を持っています。検索エンジンは、パンくずリストを通じてページ同士の関連性が理解しやすくなり、適切に評価を行います。
また、パンくずリストは内部リンクの最適化にも貢献します。適切に設定することで、サイト内の各ページが効率的にリンクされ、クローラーの巡回がスムーズになります。これにより、検索エンジンのインデックスが最適化され、SEOの向上につながります。
特に、ECサイトや情報サイトのようにページ数が多いサイトでは、パンくずリストを活用することで、検索エンジンがページの重要度をより正確に判断できるようになります。その結果、適切なページが検索結果に表示されやすくなり、サイト全体のSEO効果が向上します。
ユーザー行動が最適化される
パンくずリストは、ユーザーがサイト内をスムーズに移動できるようにするナビゲーションの役割を果たします。訪問者が現在地を把握しやすくなり、サイト内の回遊率が向上し、直帰率の低下につながります。
また、パンくずリストを適切に設置することで、ユーザーはメニューを開かずに上位ページへ移動できるため、利便性が向上します。特に、ECサイトなどでは、商品ページからカテゴリページに戻ることで、他の商品を閲覧する機会が増え、サイト内での滞在時間が長くなる効果も期待できます。
こうしたユーザー行動の最適化は、検索エンジンの評価にも影響を与えます。検索エンジンは、サイト内での滞在時間や直帰率などのユーザー行動を指標としており、パンくずリストの最適化により、結果的にSEO効果を高めることにつながります。
パンくずリストの書き方と作り方
HTMLとCSSを使った基本的なパンくずリストの作り方を解説します。
HTMLの書き方
パンくずリストをHTMLで記述する際は、ulタグとliタグを使用するのが一般的です。以下のように記述することで、シンプルなパンくずリストを作成できます。
<nav aria-label="パンくずリスト">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/category/">カテゴリ</a></li>
<li><a href="/category/item/">商品ページ</a></li>
</ul>
</nav>
<nav>タグを使用することで、検索エンジンが、これはパンくずリストであると認識しやすくなります。また、<a>タグを使うことで、各ページへリンクを設定できます。
CSSの書き方
デフォルトのulタグは、リストを縦に並べて表示します。そのため、パンくずリストを横並びにするには、CSSでスタイルを調整する必要があります。以下のCSSを適用することで、パンくずリストを横一列に整えることができます。
nav ul {
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
nav li {
margin-right: 10px;
}
nav li::after {
content: ">";
margin-left: 10px;
}
nav li:last-child::after {
content: "";
}
CSSでは、display: flex;を適用することで、リストアイテムを横一列に配置しています。また、::afterの疑似要素を使い、各リストアイテムの間に>を追加することで、一般的なパンくずリストのデザインに整えています。
さらに、font-sizeやcolorを調整することで、サイトのデザインに合わせたカスタマイズが可能です。リンクの色やサイズを変更することで、より視認性の高いデザインにすることができます。
パンくずリスト設置時の注意点
パンくずリストを設置する際に注意すべきポイントについて解説します。
シンプルで分かりやすい階層構造を設計する
パンくずリストは、サイトの階層を直感的に把握できるシンプルな構造にすることが重要です。カテゴリや階層が複雑になりすぎると、ユーザーが迷いやすくなり、逆にナビゲーションの妨げになることがあります。
例えば、ホーム>カテゴリ>商品ページのように、主要な階層のみを表示することで視認性が向上します。無駄に細かい分類を表示すると、パンくずリストが長くなりすぎ、かえって分かりにくくなるため注意が必要です。
アンカーテキストにSEOキーワードを利用する
パンくずリストの各リンクに適切なSEOキーワードを含めることで、検索エンジンにページの関連性を伝えやすくなります。
例えば、メンズファッション>スニーカーという構成なら、メンズファッションやスニーカーといった検索されやすいキーワードを含めることで、ページの評価を高めることが可能です。ただし、過剰にキーワードを詰め込むとスパムと見なされる可能性があるため、自然な形での記述を意識することが大切です。
スマートフォンでの見やすさに注意する
パンくずリストは、PCだけでなくスマートフォンでも見やすいデザインにすることが重要です。スマホの画面は小さいため、長すぎるパンくずリストは邪魔になる可能性があります。そのため、以下のような対策を行うと良いでしょう。
- 文字サイズを適切に設定する
- 省略表示を活用する
- スクロール可能なデザインにする
特に、ECサイトや情報サイトでは、スマホユーザーの割合が多いため、レスポンシブデザインを考慮したパンくずリストの設計が求められます。
構造化データをマークアップする
検索エンジンにパンくずリストの情報を正しく伝えるために、構造化データをマークアップすることが推奨されます。これにより、Googleの検索結果にパンくずリストが表示される可能性が高まり、ユーザーのクリック率向上につながります。以下は、構造化データをJSON-LD形式で記述する例です。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "カテゴリ",
"item": "https://example.com/category/"
},
{ "@type": "ListItem",
"position": 3,
"name": "商品ページ",
"item": "https://example.com/category/item/"
}
]
}
</script>
このコードを適用することで、検索エンジンがサイトの階層をより正確に認識できるようになります。
まとめ：パンくずリストで使いやすいサイトに
パンくずリストは、ユーザーがサイト内をスムーズに移動できるようにする重要なナビゲーションです。適切に設置することで、サイトの利便性向上はもちろん、SEOにも良い影響を与えることが期待できます。
パンくずリストの種類やデザインを理解し、自サイトに適した形で実装することが大切です。また、階層構造をシンプルに設計し、SEOキーワードを適切に配置することで、より効果的な運用が可能になります。
ホームページ制作を行う際には、ユーザーと検索エンジンの両方に配慮したパンくずリストの設計を意識し、サイトの使いやすさを向上させましょう。
