パンくずリストとは~改めて考えてみる~

Pocket

突然ですが、パンくずリスト(話し合いの場ではパンくずと略して言うときもありますね)と聞いたときに何を思い浮かべますか?
知らない人からしてみれば、食べ物のパンのくずを連想する方もいると思います。
ある意味間違いではないのですが、今回ここでは食べれない“パンくず”とはどんなものか改めて調べてみました!

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

1.パンくずリストとは

まず最初に、パンくずリストとはインターネットのWEBサイトにて、ユーザーがWEBページのどの位置にいるかを視覚的に分かりやすいように、サイトTOP(上階層)から階層をたどった順にリスト化し、リンクを設置したリストのことを指します。
基本的には該当するページの上部に置かれることが多く見られます。

2.何故「パンくずリスト」と呼ばれるの?

童話「ヘンゼルとグレーテル」でヘンゼルとグレーテルが道に迷わない様にするために、通ってきた道にパンくずを置いて行ったエピソードに由来しているようです。
WEBサイトでも同様にユーザーがサイト内で迷子にならない様にするための道しるべとして、表示することからパンくずリストと呼ばれているのでしょう。

前置きのところで「知らない人からしてみれば、食べ物のパンのくずを連想する方もいると思います。ある意味間違いではないのですが~」と書きましたが、その理由がこちらでした。
呼び名、由来を知るまでは私も不思議で仕方ありませんでした。

3.パンくずの種類

パンくずリストはパンくずリスト。1つしかないと思っていたのですが、実はいくつか種類がありました。
ここでは使用頻度が割と高いとされる位置型と属性型を中心に書いていきます。

■位置型(ロケーションベース)

これが一番なじみ深いのではないでしょうか。
因みに上部にある「1.パンくずリストとは」の部分で紹介したものはこちらになります。
そのページがWEBサイト内のどの階層の位置かを示すもの。静的であり、最終的に辿り着くまでの経路が違っても同じページであればリストも同一なものになります。
ページ階層が多く必要とされるWEBサイトで使われることが多く、利便性も良いです。

例)商品購入サイト等

もう少しわかりやすく書くとこんな感じになります。

パンくずリストを見るとこのユーザーは、TOPからカテゴリ、雑貨、キャンドルと経緯を含め自分がどこにいるか一目瞭然です!
また、違う商品を見たいと思った場合パンくずリストの「カテゴリ」をクリック(タップ)するだけで戻れます。

簡単に移動出来て便利です。
ユーザーメリットも!

★ユーザーが自分のいる地点を把握できるため迷子にならない。
★自分の現時点の場所がどんなカテゴリに分類されているかがすぐにわかる。
★パンくずリストはリンクになっているため、来た道をすぐに戻ることが可能。

このような、パンくずリストですが皆様がご存知のアマゾンでも適用されています。適用されているのはPC版になり、欲しい商品のページを開いてロゴの下を見てみるとひっそりと商品の邪魔にならない様にパンくずリストが表示されています。
ですが、スマートフォンやアプリ版のページにはパンくずリストが見当たりませんでした。
この場合、ふと考えつくのが「スマートフォンなどの小さな画面では、パンくずリストを設置することで限られた訴求領域を使ってしまう」「パンくずリストが大きく表示されることはそうそうないと考えるとテキストリンクが小さくタップし辛い可能性がある」「ファーストビューに(ここでは)商品を優先している」等でした。

本来はユーザーへWEBサイト内のナビゲーションとして働くパンくずリストが本領を発揮できずに中途半端になってしまってはもったいないですもんね。

また、必ずしもスマートフォンには向いていないということではございません!適用しているWEBサイトも沢山あります。
サイトの方向性やサイトのデザインレイアウトなどに少なからず左右されるのではないでしょうか。

■属性型(属性ベース)

そのページがどんなカテゴリー、属性で分類されているかを示し、自分のいる位置を表示する位置型とは異なりページコンテンツの※メタデータが表示されます。
また、ユーザーの操作によって都度変化し、フィルターの役割を担うため複数の選択肢を選んで表示されるWEBサイトの傾向に向いています。

※メタデータ…データ本体そのものではなく、そのデータ本体に関する情報を記したデータ。
例えば画像に付属する、更新日などを指す。

例えばアマゾンのPC版では商品一覧ページに行くとロゴ下左側に選択した商品の種類に特化したフィルタ機能があり、価格帯など自由に項目を選択できるところがあると思います。

属性型と位置型がかけ合わさってより分かりやすい表現に。

さらに追加で検索フィルターをかけてみますと……


余談ですが「価格1500-5000円」を追加すると上部のパンくずは以下のようになります。

「ホーム&キッチン:家具:
リビングルーム家具:ピンクまたはブルー:1500-5000円

自分で選んだ項目について、居場所がすぐ反映されるととても分かりやすいですね。

■履歴型(パスベース)

そのページにどのような経路で辿り着いたのかを示します。動的であり、同じページでも辿り着くまでの経路が異なればリストも異なります。いわゆる自分が閲覧してきたページを表示するものだそう。
また、ブラウザの戻る(←)ボタン、履歴機能と同じ役割なため、最近では機能が重複してしまうため、見かけることが少ないようです。ユーザーへのナビゲーション機能として考えた際、利便性は良くなさそうです。

4.最後に

パンくずリストは使いようによってはとても分かりやすい位置情報です。
人間、自分の居場所が分かるほど安心なことはございません(と言い切ります!)
例えばリアルでも初めて旅行に来た土地で迷子になるなんてちょっと恐ろしいですよね。
もしも行くところどころに駅前にあるような地図や看板があれば、安心です。

ユーザーにストレスを与えることなくサイト巡りを楽しんでもらい、なおかつ運営側もページをしっかり把握することができたらより良いサービス向上につながる可能性もあるかもしれません。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

Pocket