パンくずリスト

定義

パンくずリストは、いま見ている画面が全体の構造のなかでどこにあるのかを、「ホーム > カテゴリー > 詳細」のように上位から現在地まで一列につないで見せてくれる道しるべです。 それぞれの段は区切り文字でつながれて階層の深さを表し、手前の項目はクリックすれば 上の階層へさかのぼれます。名前は、童話で道に迷わないようにパンくずを落としていった話に 由来していて、実際にも、ユーザーがたどってきた経路を振り返って上の層へ手軽に戻れるよう 助ける役割を果たします。画面いちばん上の見出しのすぐ近くに置かれ、ページを開いた瞬間に 自然と目に入ります。

なぜ重要か

通販サイトやドキュメントサイトのように階層が何重にも深いところでは、リンクを何度か たどって奥へ進むうちに、自分がいまどのあたりにいるのか見失いがちです。パンくずリストは 現在地を階層の経路として常に見せることで、この方向感覚を取り戻してくれます。おかげで ユーザーは戻るボタンを何度も押さなくても、一度で目的の上位段へジャンプでき、移動が ぐっと軽くなります。画面上部に一列でおとなしく収まってほとんど場所を取らないのに、 サイト全体の構造をさりげなく伝えてくれる効果まであります。ただしこうした利点はどれも、 階層が実際に深いときにこそ意味があり、構造が浅いところではむしろ余計なものになります。

よくある間違い

• 最後の項目、つまり現在地までクリックできるリンクにしてしまうケースです。いま見ている まさにそのページへもう一度移動するリンクには何の意味もなく、ユーザーを戸惑わせ、 リンクを押したのに何も起こらないという印象を与えます。最後の項目はリンクではなく 現在の状態として置くべきです。
• 階層が一つか二つしかない浅い構造に、わざわざパンくずリストを入れてしまうケースです。 戻れる上位がほとんどないと、経路の表示は情報を与えるどころか画面を混み合わせるだけで、 かえって無いほうがましな飾りになってしまいます。
• パンくずリストを戻るボタンと同じものだと思い込み、訪れた順に並べてしまうケースです。 パンくずリストはサイトの固定された階層構造を示すものであって、ユーザーが実際に たどってきた閲覧履歴ではありません。両者を混ぜると経路が毎回変わってしまい、 かえって混乱を招きます。

実務のヒント

• 最後の項目は現在地なのでリンクにはせず通常のテキストとして置き、その手前の上位項目 だけをクリックしてさかのぼれるようにしましょう。階層が浅い画面なら、パンくずリスト 自体を省いてしまうほうが賢明です。
• 区切り文字は矢印やスラッシュのように方向が感じられる記号を一貫して使いましょう。 左が上位、右が下位という流れがはっきりしていれば、ユーザーは経路を直感的に読み取れ、 どちらを押せば上へ戻れるのか迷わずにすみます。
• 経路がとても長いときは、途中の段を … で折りたたんで、最初と現在地の近くだけが見える ようにしましょう。一列のなかにすっきり収まりつつ、必要なら展開して階層全体を確認できます。

関連概念