パンくずリストの基本と気をつけるべきポイント

Anthony

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザーのために戦います。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

When You Should Use a Breadcrumb Navigation

あなたが広大な敷地で迷ったとしたら、真っ先に知りたいことは自分が今どこにいるかでしょう。一度自分の現在地を知ることができれば、目的地からどのくらい離れているのか見つける事ができます。ショッピングモールなどで「You are here(現在地)」と地図に表記するのも同様の理由からです。

ユーザーはサイト内で迷子になったとき、自分たちがどこにいるのか知りたいのです。ユーザーが自分の現在地を知るということは、ユーザーがどこに行くべきなのかを示すことと同義です。その方法として、パンくずリストを使って道順を示す地図をユーザーに提供するべきです。これはサイトの構造の中での「You are here(現在地)」表示のようなものになります。

パンくずリストを使うべき状況とは

全てのサイトはコンテンツを階層化しています。コンテンツの量によって、浅いものもあれば深いものもあります。もしあなたのサイトの階層が3階層以上あるならば、パンくずリストを使うべきです。

2階層だけのサイトにはパンくずリストは不要です。トップページから、一つの階層を潜るくらいではユーザーは迷子になりません。

しかしもしあなたのサイトが3階層以上であれば、ユーザーは迷子になりやすくなります。ユーザーはメインとサブのカテゴリー間を何度も行ったり来たりします。メインとサブカテゴリーページのどちらにいるのか、ユーザーはたやすく混乱してしまいます。

全てのパンくずリストはトップページから始まる必要があります。トップページは最初の階層です。なぜならほとんど常にユーザーのスタート位置だからです。トップページを基準にすることで、ユーザーが今いるサイトでどのくらい深くにいるのかわかるようになります。最初にトップページを表示する事はユーザーが階層を理解する事を助けます。

トップページのリンクに「home(ホーム)」の言葉を用いる必要はありません。ホームを示すアイコンや小さなサイトロゴを代わりに用いる事もできます。これは基礎レベルをより明確にし、発見しやすくします。エレベーターが星のアイコンや「G(Ground。1階の意味)」の文字をビルの1階を表す為に用いるのと似ています。

スラッシュではなく矢印を使う

パンくずリストを示すビジュアルとしては矢印を使うべきです。矢印は方向を表すので、ユーザーが閲覧して来たページの足跡のように見せてくれます。スラッシュを用いられる場合もありますが、スラッシュはただの区切り文字としてしか機能しないので避けたほうが良いでしょう。

ユーザーが今いるページにリンクするのはやめる

パンくずリストの最後の階層はユーザーが今いる場所です。それはテキストにして、リンクはしないでおきましょう。もしリンクにしてしまうと、ユーザーがクリックしてしまったときに混乱させてしまいます。彼らは同じページにたどり着き、ページのどこが変わったのかを探してしまいます。ユーザーがどこにいるのかを明確にする為には、リンクではなくテキストにしておきましょう。

ユーザーがいるページのテキストラベルは手前に記載されているリンクと異なる見た目にするべきです。これによりユーザーは一目で今どこにいるのか見つける事ができるようになります。テキストを太文字にし、リンクよりも暗いもしくは異なる色にするといいでしょう。

まとめ

パンくずリストは任意で追加すべきものというよりは、サイトが3階層以上のカテゴリー構造を持つ場合に必須となるようなものです。多くのユーザーテストの結果、パンくずリストの利用は導入しない理由が見当たらないという事を示しています。

ユーザーはサイトを閲覧するとき、自分たちがどこにいるのかを、サイトの残りのページと併せて知りたいのです。そういった情報を欠いてしまうことで、ユーザーを迷子にさせ、時間を無駄にしてしまいます。パンくずリストで足跡を残す事で、ユーザーが目的地を見つける事を簡単にしましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて