パンくずリスト（breadcrumbs）とは、いま見ているページと、その上の階層のページを、リンクで並べた道筋である。「トップ ＞ 家電 ＞ パソコン ＞ ノートパソコン」のように、トップページまでの経路を示す。
たとえば、検索結果から、いきなり、ノートパソコンの商品ページに来た人がいる。サイトのどこにいるのか、分からない。パンくずがあれば、「パソコン」の一覧に、1回で戻れる。
何のためにあるのか
サイトの階層のどこにいるかを、示すためにある。外から、深いページに直接来た人に、特に役立つ。区切りには、「＞」を使うのがよい、と NN/g の記事（ページ・ラウハイマー、2018年）は書いている。
11の指針
パソコン向けの指針は、8つある。
- グローバルナビゲーションや、ローカルナビゲーションの代わりにしない。補うものとして置く。
- サイトの階層を示す。利用者の閲覧履歴は示さない。
- 複数の階層に入るページでも、道筋は1つだけ見せる。
- 最後に、いまのページを入れる。
- いまのページは、リンクにせず、見た目を変える。
- リンクにするのは、実際にあるページだけ。ページのない抽象的な分類は、リンクにしない。
- 階層が1〜2段のサイトや、順番に進むサイトでは、使わない。
- 先頭は、ホームへのリンクにする。
スマートフォン向けは、3つある。
- 複数行に、折り返さない。
- 小さく、詰まったリンクにしない。タップする場所は、1cm四方ほどが目安になる。
- 最後の1〜2段に、短くしてよい。パソコンでは、全部を出す。
使うときの注意
スマートフォンでは、画面が小さい。パンくずが折り返すと、本文が、スクロールしないと見えない位置（ファーストビューの下）に押し下げられる。得られるものより、失うもののほうが大きいこともある。よくある折衷案は、直前の1段だけを出す形である。
パンくずは、閲覧履歴ではない。前に見たページへの「戻る」の代わりには、ならない。
語源・位置づけ
NN/g の記事は、パンくずを、グローバルナビゲーションを補うものと位置づけている。情報アーキテクチャの階層を、画面に出す部品の1つである。
出典
- Nielsen Norman Group「Breadcrumbs: 11 Design Guidelines for Desktop and Mobile」（Page Laubheimer、2018年12月23日）
