Webmediaデザイン・コーディングセキュリティバックエンドCMSプロデュース・ディレクションWeb便利ツールパンくずリストとは?Webサイトにおけるパンくずリストの役割と重要性デザイン・コーディングパンくずリストとは?Webサイトにおけるパンくずリストの役割と重要性2019/07/08ShareTweet私たちは地図で行きたい場所を調べようとするとき、いま自分が居る場所がどこかを把握しようとするのではないでしょうか。Webサイトも同じで、ユーザーが次のページを探すとき、今自分が見ているページの位置を知りたいと考えます。そんなとき最も直感的に把握できるのが「パンくずリスト」です。今回はこの「パンくずリスト」の重要性と役割についてご紹介していきます。navigation)という一見変わった名前は、グリム童話の『ヘンゼルとグレーテル』で、道に迷わないようにパンくずを落としながら歩いたというお話から来ています。passという呼び名もあるのですが、日本ではこの名前のまま定着してしまいました。ゆるい感じの名前ですが、実は非常に重要な機能を担っているものです。それは、Webサイトの階層構造をリンクの一覧リストとしてユーザーに示し、現在見ているページの位置をわかりやすくするのと共に、上位の階層へ簡単に辿れるようにする機能です。通常はWebページの、コンテンツエリアの最上部に配置されます。パンくずリストのメリットユーザーにとって今自分が居る位置がわからなければ、次にどこへ移動すればよいか判断できずに迷ってしまったり、欲しい情報にたどり着く前にWebサイトから離脱してしまうかもしれません。サイト運営者としては、そのような機会損失が起こらないよう、ユーザーに現在位置をわかりやすく伝えてあげなくてはなりません。ユーザーが前に見ていたページに戻るという意味ではブラウザの「戻る」「進む」ボタンも使えますが、パンくずリストは、Webサイトの階層構造を表しているという点で異なります。今見ているページが属するカテゴリー、つまり関連する情報がありそうなページにすばやく移動できることがメリットです。パンくずリストとグローバルナビゲーションWebサイトの上部や左部に表示されるナビゲーション(グローバルナビゲーション)でも、現在開いているカテゴリーをハイライト表示するなどして目立たせ、現在位置をわかりやすく提示しています。サイトの規模が大きくなり、階層が第三、第四と深くなるとメインナビゲーションでは表しきれません。ユーザーは常にトップページから順序よく見ているとは限りません、検索エンジン経由で訪れる場合、最も下層のページにダイレクトにやってくる場合も多いものです。そのような場合もパンくずリストがあれば、階層を辿って移動することが簡単で、同列にまとめられている他のページも参照するなど、スムーズなサイト回遊をサポートしてくれます。MacなどOSレベルでも積極的に取り入れられていることで、いまでは大部分のユーザーにとって馴染み深く、使いやすいナビゲーションとなっています。Webサイトが長く運営され、総ページ数がどんどん増えていく中で、内部構造を正しく示したパンくずリストを設置することは、検索エンジンにとってもわかりやすく、SEO上も有益なものです。Webサイトのアクセシビリティにおいても、欠かせない基準の1つとなっています。W3Cが定めているアクセシビリティの基準「WCAG2.0」では、G65において「パンくずリストを提供する」ことが明記されています。下記「WCAG2.0」の引用です。パンくずリストを提供するパンくずリストは、コンテンツがどのような構造になっていたのか、及びこれまでにたどってきたウェブページへ戻る方法を、利用者が想起する助けとなり、また一連のウェブページの中で現在位置を特定する。パンくずリストには、利用者がそのウェブページに到達するまでに通ってきた場所、又はサイトの編成における現在のウェブページの位置が表示されている。パンくずリストは、現在のウェブページまでナビゲートする途中にアクセスしたウェブページへのリンクを使って実装される。パンくずリストは、ウェブページ一式の各ウェブページの中で同じ位置に置く。目に見える区切り文字でパンくずリストの中の項目を切り離すと、利用者の助けになる。区切り文字の例には「>」、「|」、「/」、「::」、及び「→」がある。その他のアクセシビリティの重要な基準について知りたい方は以前の記事をご覧ください。設置には手間がかかるこのような観点から、大規模なWebサイトにはすべて導入をおすすめしたいパンくずリストですが、新規導入には意外と手間がかかります。パンくずリストはページ1つ1つに固有のものとなりますので、ページごとにコツコツと追加や修正を行わなくてはなりません。手間を軽減するために、Webページの制作ソフトやCMSなどのシステムをうまく利用することがお勧めです。自動的にパンくずを生成するような方法もありますので、まだパンくずリストが付いてないPC用のサイトがあれば、ぜひ導入を検討してみてください。小さなスマホサイトにも1階層上の表示を推奨なお、画面の小さなスマートフォン用サイトでは、パンくずリストをトップページから全階層をフル表示させることが難しい場合があります。「スマホ版にはパンくずリストは入れないでおく」といわれるお客様もいますが、できればスマホ版では上の1階層だけ表示させるなど、工夫することをお勧めします。PC用とスマホ用で書き直す手間はかかりますが、スマートフォンサイトにもパンくずリストの導入は有効です。まとめパンくずリストの重要性はわかっていただけたでしょうか?設置の手間はありますが、ユーザーのセッション時間が長くなる、などのメリットにもつながります。自社サイトに取り入れておきたい機能ですね。いう機能をホームページに入れたい、サイトのリニューアルをしたい、など自社サイトで改善したいところはありませんか?弊社ホームページでは制作実績をご紹介していますので、サイト改善のお役に立つかと思います。フォームからのご相談も承っております。お気軽にお問い合わせください。官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。人気の記事1AdobeのFlash終了に向けた正しい撤収方法と代替案2GoogleのURL短縮サービスが3月で終了。カスタムサーチ」が3月末で終了。