WEBサイトについて 【考察】パンくずリストはどこに置く？

皆様はWEBサイトのパンくずリストという単語を聞いたことがありますか？もし聞いたことないという方はこちらをご覧ください。

この、階層を示すものをパンくずリストと言います。童話「ヘンゼルとグレーテル」で、自分たちが来た道を引き返すためにパンをちぎって目印を道に付けていたことが名前の由来だと言われています。

このパンくずリストですが、置き場所についてけっこう議論が頻繁に行われます。

上部に置く場合

以下はパソコン工房のwebサイトの例ですが、コンテンツの上部にあります。ナビゲーションを左のサイドバーで行っており、普通のwebサイトよりもさらに現在地がわかりやすい構成になっています。

こちらはハーレーダビッドソンのページですね。上部のナビゲーションバーに続いてパンくずリストが配置されています。

ページの上部にパンくずリストがあると、現在地がわかりやすく回遊しやすいというメリットがあります。

下部に置く場合

一方で、下部にパンくずを置いているケースもあります。Apple社のWEBサイトなんかがそうです。

こちらは、ナビゲーションに重きを置いているわけではなくコンテンツに重きを置いている場合の見せ方ですね。あと、フッターには「フッターナビゲーション」があります。ページ最下部にあるものなので、ここは情報が多くてもコンテンツを妨げる心配がありません。そのすぐ近くにパンくずがある訳ですから、これはこれで合理的なナビゲーションが出来ていると言えるでしょう。

実は上下どちらに設置しても問題はない

そう。パンくずリストは、どちらに設置しても問題ありません。今回記事を書くにあたって色々調べたのですが、そもそも設置していないWEBサイトもけっこうありました。

パンくずリストは、あれば便利だけど、実は無くても困るわけではないのです。戻りたいのならブラウザバックをすれば良いだけですしね。

弊社はナビゲーションの利便性よりも、コンテンツに重視してほしくてパンくずリストを下に設置しています・・・。が、要所要所でパンくずっぽい見せ方をしてるコンテンツもあります。

例えば、子カテゴリーから1つ上の親カテゴリーを表示するために、下記のように不等号をつけています。

ブログ記事の場合はコンテンツよりも実は回遊性が大事だったりしますので、記事タイトルの左にカテゴリを。そして、アイキャッチ画像の左右に「前の記事」「次の記事」に移動できる矢印も設置しています。

これはコンバージョン(お問い合わせ)を目的とする商品ページには無いものです。

以上、パンくずに対する細かなお話でした！面白いと思ってもらえたら幸いです。