コラム(WEB制作のポイント)

お役立ち・知識 2018年6月27日

「パンくずリスト」は、WEBサイトの道しるべ

「パンくずリスト」は、WEBサイトの道しるべ

WEBページにある「パンくずリスト」をご存知だろうか?
「パンくずリスト」とは、「トップページ」から見た各ページの階層を表したものだが、WEB制作者以外だと名前はご存じではないかもしれない。

WEB制作者にとっては使い慣れた名称だが、WEBサイトの制作部品名としては、ダイレクトに機能を示さないため、初めて聞いたときには困惑した人も多いのではないだろうか。
このコラムでは、「パンくずリスト」の名前の由来や独自の役割を紹介したい。

なぜ「パンくず」?

「パンくずリスト」は下図のように、ほとんどのWEBサイトに存在する。

パンくずのスクリーンショット:HOME > 当社について > 会社概要

階層の図
「パンくず」という名前は、グリム童話「ヘンゼルとグレーテル」の物語から由来している。ヘンゼルとグレーテル兄妹が、森の中で迷子にならず家に帰れるようにするために、目印としてパンをちぎりながら歩いたところから名づけられたそうだ。この説明があれば、WEBページを作ったことのない人でも、「なるほど、それでパンくずなのか」とわかってくれることが多い。

上記の場合だと、今見ているページがトップページから見て、「当社について」カテゴリに含まれる「会社概要」ページということがわかる。パンくずを道しるべとして家に戻るように、パンくずリストの「会社概要」から「当社について」をたどって「HOME」に戻れるようになっている。

しかし、ページの右もしくは左にあるローカルナビゲーション(以下、ローカルナビ)でも、同じようにページの階層が確認できるのだ。それなら、パンくずリストがなくても、ローカルナビで役割が果たせるのではないか?と思われる人もいるのではないだろうか。
それでも、パンくずリストはどこのサイトにも必ずといっていいほど存在している。それは、ローカルナビにはない独自の役割を担っているからだ。

パッと見てわかる!ユーザーのための案内板

ユーザーのための案内板
パンくずリストの役割は大きく2つある。
1つめは、ユーザーがサイトを見た際に、現在のページがそのサイトのどんな情報を掲載しているかが、一目でわかること。

ユーザーがサイトに訪れるのはトップページからとは限らない。
興味のある単語を検索してページにたどり着いたユーザーからすると、訪問したページやサイト全体の内容も、今見ているページからしか、情報を得ることができない。
そんな時にパンくずリストがあれば、パッと見ただけで、今見ているページが「サイト内のどこにあるのか」「どんな項目に属しているか」を把握することができる。

さらに、そのページが属しているカテゴリも、そのユーザーにとって興味のあるコンテンツである可能性がある。パンくずリストは、他にも読みたくなるような情報がありそうだと気づかせ、ユーザーを他のページに誘導するきっかけにもなり得るのだ。

パンくずリストは短い表記で、パッと見てわかりやすいようになっていることが多い。
それは、ユーザーが自分の現在地から上の階層にスムーズに移動するための「一本道を示す案内板」の役割をしているためである。

検索順位に好影響!?プログラムのためのナビゲーター

検索順位に好影響
パンくずリストのもう1つの役割は、検索結果を左右しているプログラムがサイト全体を巡回する手助けをすることだ。

そのプログラムは「クローラー」という。
Googleなどの検索エンジンにサイト情報が表示されるのは、クローラーがインターネット上を巡回し、サイト情報を収集して検索エンジンに登録しているから。

クローラーがサイトにやってくると、人と同じようにリンクをたどってサイト全体を見て回る。
クローラーがパンくずリストを案内人として効率的に情報収集して、初めてそのサイトの正しい情報が検索結果に表示されるのだ。

また、パンくずリストによってページの階層が明快になっているので、サイト全体の構成がわかりやすく伝わり、検索順位が上位になる可能性が高くなる。
検索エンジンを利用するユーザーにとっても、自分が知りたい情報が掲載されているサイトなのかどうかを判断しやすくなる。

ローカルナビとの違いは?

先に紹介したローカルナビもまた、パンくずリストと同じようにカテゴリ全体の階層を表したものだ。
では、ローカルナビとの違いはなんだろうか?それは、ローカルナビの役割をはっきりさせるとよくわかる。

そのサイトに、検索して初めて訪れたユーザーも、パンくずリストを見れば、自分の見ているページの位置がすぐに理解できる。
対してローカルナビは、現在のページが属しているカテゴリ内に、他にどのようなページがあるかという情報がリスト化され、ユーザーが同じカテゴリ内を移動するのを容易にしている。

パンくずとローカルナビのスクリーンショット

パンくずリストは現在のページからトップページまでの案内板で、ローカルナビは、同じカテゴリ内に属しているページを俯瞰できる地図ともいえる。

ローカルナビの場合、サイトによっては掲載の仕方が分かれる。第3階層以降を表示しないケースもある。確実に上の階層やトップページにたどり着ける、パンくずリストという案内板があった方が、初めて訪れたユーザーには親切だろう。

パンくずリストは優れた道しるべ

パンくずリストは優れた道しるべ

名前の由来となった童話では、目印にしたパンは小鳥に食べられてしまい、ヘンゼルとグレーテルは家に帰ることができなかった。パンくずリストは小鳥に食べられてしまうことはないが、リンク切れしていれば、ユーザーもクローラーも迷子になってしまう。
WEBページを制作するときには、サイト全体としての構成を見直すことや、リンク切れを防ぐなど、「パンくずリスト」がちゃんと道案内してくれるように注意していこうと、改めて意識した。

ローカルナビに比べて見た目は地味だが、パンくずリストは人もプログラムも道案内してくれる、優れたナビゲーターだ。
これからWEBサイトをご覧になるとき、ちょっと注目してもらえると、筆者は嬉しい。

シェアする
  • line

別のコラムにもヒントがあるかも・・・

このコラムに興味があったなら、
こんなコラムも

執筆:admin

フレイバーズに、ご相談されませんか?