デザイン・コーディング

パンくずリストとは?Webサイトにおけるパンくずリストの役割と重要性

私たちは地図で行きたい場所を調べようとするとき、いま自分が居る場所がどこかを把握しようとするのではないでしょうか。Webサイトも同じで、ユーザーが次のページを探すとき、今自分が見ているページの位置を知りたいと考えます。そんなとき最も直感的に把握できるのが「パンくずリスト」です。今回はこの「パンくずリスト」の重要性と役割についてご紹介していきます。

パンくずリスト

目次

パンくずリストとは

パンくずリスト(breadcrumbs navigation)という一見変わった名前は、グリム童話の『ヘンゼルとグレーテル』で、道に迷わないようにパンくずを落としながら歩いたというお話から来ています。英語ではtopic passという呼び名もあるのですが、日本ではこの名前のまま定着してしまいました。ゆるい感じの名前ですが、実は非常に重要な機能を担っているものです。

それは、Webサイトの階層構造をリンクの一覧リストとしてユーザーに示し、現在見ているページの位置をわかりやすくするのと共に、上位の階層へ簡単に辿れるようにする機能です。通常はWebページの、コンテンツエリアの最上部に配置されます。

パンくずリストのメリット

ユーザーにとって今自分が居る位置がわからなければ、次にどこへ移動すればよいか判断できずに迷ってしまったり、欲しい情報にたどり着く前にWebサイトから離脱してしまうかもしれません。サイト運営者としては、そのような機会損失が起こらないよう、ユーザーに現在位置をわかりやすく伝えてあげなくてはなりません。

ユーザーが前に見ていたページに戻るという意味ではブラウザの「戻る」「進む」ボタンも使えますが、パンくずリストは、Webサイトの階層構造を表しているという点で異なります。今見ているページが属するカテゴリー、つまり関連する情報がありそうなページにすばやく移動できることがメリットです。

パンくずリストとグローバルナビゲーション

Webサイトの上部や左部に表示されるナビゲーション(グローバルナビゲーション)でも、現在開いているカテゴリーをハイライト表示するなどして目立たせ、現在位置をわかりやすく提示しています。しかしサイトの規模が大きくなり、階層が第三、第四と深くなるとメインナビゲーションでは表しきれません。

また、ユーザーは常にトップページから順序よく見ているとは限りません、検索エンジン経由で訪れる場合、最も下層のページにダイレクトにやってくる場合も多いものです。そのような場合もパンくずリストがあれば、階層を辿って移動することが簡単で、同列にまとめられている他のページも参照するなど、スムーズなサイト回遊をサポートしてくれます。

ナビゲーション

重要性が増しているパンくずリスト

もともとパンくずリストは、習熟したユーザーが効率よくサイトを回遊するのを助けるためのものでしたが、多くのWebサイトに採用されたことや、Windows やMacなどOSレベルでも積極的に取り入れられていることで、いまでは大部分のユーザーにとって馴染み深く、使いやすいナビゲーションとなっています。

また、Webサイトが長く運営され、総ページ数がどんどん増えていく中で、内部構造を正しく示したパンくずリストを設置することは、検索エンジンにとってもわかりやすく、SEO上も有益なものです。

Webサイトのアクセシビリティにおいても、欠かせない基準の1つとなっています。例えば、W3Cが定めているアクセシビリティの基準「WCAG2.0」では、G65において「パンくずリストを提供する」ことが明記されています。下記「WCAG2.0」の引用です。

G65: パンくずリストを提供する

パンくずリストは、コンテンツがどのような構造になっていたのか、及びこれまでにたどってきたウェブページへ戻る方法を、利用者が想起する助けとなり、また一連のウェブページの中で現在位置を特定する。パンくずリストには、利用者がそのウェブページに到達するまでに通ってきた場所、又はサイトの編成における現在のウェブページの位置が表示されている。

パンくずリストは、現在のウェブページまでナビゲートする途中にアクセスしたウェブページへのリンクを使って実装される。パンくずリストは、ウェブページ一式の各ウェブページの中で同じ位置に置く。

目に見える区切り文字でパンくずリストの中の項目を切り離すと、利用者の助けになる。区切り文字の例には「>」、「|」、「/」、「::」、及び「→」がある。

その他のアクセシビリティの重要な基準について知りたい方は以前の記事をご覧ください。

パンくずリスト設置の注意点

設置には手間がかかる

このような観点から、大規模なWebサイトにはすべて導入をおすすめしたいパンくずリストですが、新規導入には意外と手間がかかります。パンくずリストはページ1つ1つに固有のものとなりますので、ページごとにコツコツと追加や修正を行わなくてはなりません。

手間を軽減するために、Webページの制作ソフトやCMSなどのシステムをうまく利用することがお勧めです。自動的にパンくずを生成するような方法もありますので、まだパンくずリストが付いてないPC用のサイトがあれば、ぜひ導入を検討してみてください。

小さなスマホサイトにも1階層上の表示を推奨

なお、画面の小さなスマートフォン用サイトでは、パンくずリストをトップページから全階層をフル表示させることが難しい場合があります。「スマホ版にはパンくずリストは入れないでおく」といわれるお客様もいますが、できればスマホ版では上の1階層だけ表示させるなど、工夫することをお勧めします。PC用とスマホ用で書き直す手間はかかりますが、スマートフォンサイトにもパンくずリストの導入は有効です。

まとめ

パンくずリストの重要性はわかっていただけたでしょうか?設置の手間はありますが、ユーザーのセッション時間が長くなる、などのメリットにもつながります。自社サイトに取り入れておきたい機能ですね。

こういう機能をホームページに入れたい、サイトのリニューアルをしたい、など自社サイトで改善したいところはありませんか?

弊社ホームページでは制作実績をご紹介していますので、サイト改善のお役に立つかと思います。また、フォームからのご相談も承っております。ぜひお気軽にお問い合わせください。

関連記事

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。

初めて使う人にも使いやすく、セキュリティレベルの高いCMSパッケージ「iCMS」

詳しくはこちら
itra