0120-900-587
パンくずリスト?～初心者のための基本解説～
パンくずリストは、ウェブサイトの閲覧を支援する機能の一つです。
ユーザーがサイト内を行き来するのに役立つだけでなく、検索ロボットがサイト内を巡回する手助けにもなります。パンくずリストとは、どのような機能なのか解説します。
ホームページ制作.jpってどんなサービス？
- 運営10年！老舗のホームページ制作無料一括見積サービス。
- 審査済の優良ホームページ制作会社のみに見積もり依頼ができる。
- お見積もり無料。何度でもご相談無料。お断り代行も無料。
- 訪問無しのオンライン相談可能！
- しつこい営業は一切致しません！
全国通話無料
受付：年中無休/24時間電話受付0120-900-587
私たちが全力でサポート致します！
宇野（うの）
田丸（たまる）
真中（まなか）
1.パンくずリストとは
パンくずリストは、ユーザーが辿ってきた道のりや現在位置を表示するために設置されるナビゲーション機能です。
設置される位置は、パンくずリストの種類やウェブサイトの設計にもよります。
通常は、グローバルナビゲーションやページタイトルの直下などが定位置でしょう。
グローバルナビゲーションは、ウェブページの上部に置かれるメインのナビゲーション機能です。
詳細は、グローバルナビゲーションの記事でご確認ください。
下の画像の赤線で囲まれた部分がパンくずリストです。
パンくずリストは、画像のように薄くてシンプルなナビゲーション機能です。テキストも、見やすくシンプルかつユーザーが認識しやすい言葉にする必要があります。
それからなぜ、パンくずリストという名前かというと、童話「ヘンゼルとグレーテル」で、兄妹が行った行動に由来します。兄妹は、森の中で道に迷わないように、パンくずを落として目印にしました。
ウェブサイトでも、ユーザーが膨大なページ数のサイト内で、迷わないように目印として、パンくずリストが表示されています。
2.パンくずリストにはいくつかの種類がある
パンくずリストには、いくつかの種類がありますが、主要なタイプは位置型パンくずリストと属性型パンくずリストです。
ちなみに、先ほどの画像は、位置型パンくずリストです。
1.位置型パンくずリスト
位置型パンくずリストは、ウェブサイトの階層構造において、どの位置にいるかを示します。
位置型パンくずリストは、通常、グローバルナビゲーション直下に配置されます。位置型パンくずリストでは、どのような経路で現在のページまで辿り着いても、ページが同じであればリストも同じです。
どの内部リンクをクリックして辿り着いたかなどの、経路の違いは関係しません。あくまで階層構造を静的に示しますので、同一ページであればパンくずナビゲーションのリストは同じです。
位置型パンくずリストでは、「>」などの記号を間に挟んで階層を示します。左から、第1階層、第2階層、第3階層と並んでいます。
各階層のテキストにはリンクが貼られ、ダイレクトに上位階層に移動できる仕組みです。
そのため、位置型パンくずリストは、階層構造が深い大型サイトには、高い利便性をもたらすナビゲーション機能と言えるでしょう。
ユーザーはサイトの階層構造を把握しながら、行き来することができます。
2.属性型パンくずリスト
属性型パンくずリストは、検索フィルタのような機能であり、現在位置を示すことはありません。
属性型パンくずリストは、ページタイトルなどの直下に配置されることが多いリストです。
これらは、ユーザーが選択した検索条件のオプションリスト、もしくは表示ページが所属するカテゴリリストと考えてよいでしょう。
属性型パンくずリストは、どちらかというと階層が浅めのサイトに適しています。
属性型パンくずリストは、ECサイトなどで、買いたい物をフィルタリングするなど、表示するページの絞り込みに便利です。
この場合の属性型パンくずリストの利点は、ユーザーが加えた検索条件を確認できることでしょう。
並んでいる検索オプションの一つを、取り消しにする操作も可能です。
属性型パンくずリストには、所属する上位のカテゴリリストが並んでいます。
必要な情報のカテゴリリストを選んで、ページ一覧を表示させるといった使い方も可能です。
3.パス型パンくずリスト
パス型パンくずリストは、ユーザーが現在のページまで遷移してきた過程が表示されます。
どのような経路を辿ってきたかで、表示されるリストが動的に変わります。同じページを表示していても、別の経路から辿り着くと、表示されるリストは異なります。
したがって、パス型パンくずリストは、ブラウザの「戻る」ボタンに、ダイレクト移動する仕組みを、加えるような機能とも言えるでしょう。
パス型パンくずリストは、一度クリックしたページを再表示したいときには、役立ちます。
しかし、パス型パンくずリストは、サイトに使われることは少なくなっています。
なぜなら、位置型パンくずリストのように、ユーザーにウェブサイトの階層構造を知らせることの方が重要だからです。また、場合によっては、パス型パンくずリストによって、ユーザーが混乱することがあるかもしれません。
3.パンくずリストを設置する理由
パンくずリストは、絶対に必要な機能というわけではありませんが、サイトによってはユーザービリティ向上にとても有効です。
サイトのページ数が増えると、ページを移動するための経路も増え、初めてサイトを訪問したユーザーが、戸惑うことも少なくありません。
ユーザーがサイトの階層構造を理解できるようにしたり、検索条件に指定できるオプション数を増やしたりすれば、ユーザービリティ向上に効果的でしょう。
1.ユーザーが現在の位置を確認できる
パンくずリストには、いくつかの種類がありますが、広く利用されているのは、位置型パンくずリストです。
パンくずリスト設置の目的は、ユーザービリティ向上です。そして、サイト内をスムーズに行き来できるように、階層構造の理解を促すことは、特に重要視されています。
ユーザーは、サイトの階層構造が分かると、サイト内のコンテンツへのアクセスがスムーズになります。
そして、サイト内の多くのコンテンツを、ユーザーに閲覧してもらう機会が増えるかもしれません。
パンくずリストは、比較的小規模なウェブサイトにも、置かれることが多い機能ですが、ほとんどが位置型パンくずリストです。
パンくずリストは、薄くてシンプルな機能であり、地味な存在かもしれません。
しかし、パンくずリストは、ウェブサイト閲覧者に、階層構造と現在位置を知らせるという、重要な役割を担っています。
2.クローラー巡回の手助けになる
Google検索では、ページ情報を分類する際に、パンくずリストを使用します。検索ロボットにとって、階層構造を把握できるパンくずリストは、効率的に巡回できるリンクです。
Google検索でヒットしたタイトルの下に、ホームページ情報の一部が表示されます。表示された情報に、パンくずリストが含まれているのを、見たことはないでしょうか。
URL情報が表示されるよりも、パンくずリストが表示される方が、サイトページの内容を知るために役立つでしょう。SEO対策の観点でも、パンくずリストのカテゴリを、検索結果で上位表示させたい、キーワードにすることは有効です。
パンくずリストを記述する際に、構造化データを書いておけば、Google検索結果のホームページ情報に、パンくずリストが表示されます。構造化データとは、HTMLで書かれている情報を、クローラーに伝える仕組みです。パンくずリストが表示されると、ユーザーへのアピールに繋がるかもしれません。
4.まとめ
パンくずリストとは、名前の由来からも分かるとおり、ユーザーが迷わずにサイト内を行き来できるようにする機能です。
また、パンくずリストには、いくつかの種類があり、3つのタイプをご紹介しました。その内、広く使われているのは、位置型パンくずリストと属性型パンくずリストです。
位置型パンくずリストは、サイトの階層構造を知る手掛かりとなり、現在位置をユーザーに伝えます。
リストには、リンクが貼られているため、ダイレクトに上位階層に移動できます。属性型パンくずリストは、ページが属しているリスト、あるいは選択した検索リストが表示されます。
属する大きなカテゴリに移動したり、検索オプションを減らして検索結果の幅を広げたりする操作が可能です。
ウェブサイト制作において、ユーザーの行動をガイドする機能の設置は欠かせません。
パンくずリストもまた、他のナビゲーション機能と同様に正しく実装されることで、役立つ技法です。パンくずリストは、リスト間の区切りに「>」などの記号を使います。
この「>」の記号は、伝統的でありユーザーにとっても見慣れた使いやすいものです。
