パンくずリストとは？

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

パンくずリストについて、また、パンくずリストの重要性を解説していきます！

Webサイトを制作する際に「パンくずリスト」を耳にしたことはないでしょうか？

パンくずリストって何？
設置するメリットはあるの？…
作成方法が分からない…

上記のように、疑問に思っていることを解決できる記事となっています。

僕は、フロントエンドエンジニア・マークアップエンジニアとして、主にWebサイトを作成しています。

Webサイトを作成する際に、「パンくずリスト」って設置する必要あるのかな…なんて思った方がいるかと思います。

また、この場で初めて聞いた方も、いるかと思います。

ここでは、パンくずリストがどんな役割があり、どれだけ重要なものなのか分かりやすく解説していきます！

1 パンくずリストとは？
- 名前の由来
- パンくずリストを設置するメリット
2 パンくずリストの設置について
- パンくずリストの設置位置
- パンくずリストの作り方（一例）
3 まとめ

1 パンくずリストとは？

パンくずリストとは、ユーザーがWebサイトのどこの位置にいるのか階層をリスト化したナビゲーションのことを指します。

下記、サイトページの画像下に「ホーム」、「日本農家名鑑とは」と記載のあるナビゲーションメニューになります。

日本農家名鑑サイト：https://noukameikan.jp/whatis/

上記のページで言いますと、「今あなたは、ホームの下階層の日本農家名鑑とはページにいますよ」ということを示しています。

規模が大きなサイトは、階層が更に深くなり、自分がサイト内のどの位置のページを閲覧しているのかが分かりにくくなります。パンくずリストがそれを直感的に伝える役割となります。

名前の由来

なぜ「パンくずリスト」という名前なのか？疑問を持たれる方も多いかと思います。

パンくずリストという語源は、童話の「ヘンゼルとグレーテル」の話の中に主人公の兄弟が森に入るときに、迷子にならないように自分達が通ってきた道にパンくずを置いていったエピソードが由来となっています。

Webサイトでも同じように、ユーザー自身の現在位置と辿ってきたルートを示す役割を担っていることから「パンくずリスト」と呼ばれるようになりました。

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

パンくずリストを設置するメリットは、大きく2つあります。

1つ目はユーザーにとって、2つ目はSEOにとってです。

ユーザーが迷いにくい

Webサイトの構造が明確になるので「今どこにいるのか」がすぐに見て分かりやすくなります。

また、テキストがリンクになっているため、1つ前の階層にすぐにページを切り替えたりとサイトの巡回がしやすく、ユーザビリティが高い（使いやすい）と言えます。

SEO効果が期待できる

Webサイトを分かりやすいカテゴリーにした上で、正しくパンくずリストを作成するとSEOの効果も期待できます。

Googleなどの検索エンジンにヒットさせるには、まずはクローラーと呼ばれる情報収集ロボットに自身のサイトの情報を収集（クローリング）してもらう必要があります。

パンくずリストを設置することは、そのサイトが整理されることになり、クローラーもパンくずリストによって効率的にそのサイト内のカテゴリーをたどることができるようになるため、サイトの全体像が把握しやすくなり、効率的なクローリングを期待することができます。

2 パンくずリストの設置について

いざ、パンくずリストを作成する！となっても、実際にどの位置に作成したり、どのような作り方で悩む方もいるかと思います。

ここでは、実際に作成して完成までの、簡単な流れをご説明していきます。

パンくずリストの設置位置

大体のWebサイトで、パンくずリストがある位置は上部に設置されておりますが、ページの下部に設置しても、Googleはパンくずリストと認識してくれますので、基本的にはどこに設置しても問題ございません。

複数のパンくずリストを設置した場合は、最初の1つ目のパンくずリストを認識するそうです。

パンくずリストは、上部にあるとユーザーにとって馴染みもあり、分かりやすい位置になりますので、上部に設置をおすすめします。

パンくずリストの作り方（一例）

パンくずリストの作り方は人それぞれで、あくまで自分ならこのように作成するという一例にはなります。

<div class="pan-nav">
 <ul>
  <li class="pan-item"><a href="#">ホーム</a></li>
  <li class="pan-item">></li>
  <li class="pan-item"><a href="#">日本農家名鑑とは</a></li>
 </ul>
</div>

.pan-nav ul {
 display: flex;
}

.pan-item {
 margin-right: 1rem;
}

.pan-item a {
 font-size: 14px;
}

「日本農家名鑑」というメディアサイトを元に参考程度にみていただければと思います。

※HTMLについては、こちらの記事「【初心者向け】HTMLとは？HTMLの書き方」を読んでみてください。

3 まとめ

今回は、パンくずリストについて解説してきました！

パンくずリストはそこまで目立たない部分にはなるのですが、使い勝手に関してだけではなく、SEOにおいてもその効果を期待できます。

この記事を参考に、パンくずリストを作ってみたり、見直しをしてみると良いと思います！