パンくずリストの型の選び方
パンくずリストの型は、「階層がどのくらい深いか」「SPで何を残すか」「となりの分類へ移ってもらうか」の3つで変わります。問い1で階層の深さに合う形を決め、問い2でSPでの見せ方を選び、問い3で移動の広げ方と置き場所を確かめます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：階層は、どのくらい深いですか？
横一列に並べたときに、PCで1行に収まるかどうかで形が分かれる問いです。
問い2：SPで、パンくずに何を残しますか？
狭い画面で、全部の階層を見せるか、戻り道だけに絞るかを決める問いです。
| SPで残したいもの | 向く型 |
|---|---|
| 全部の階層。ただし高さは1行に抑えたい | 横スクロール型 |
| 1つ上の一覧へ戻る道だけ | 親へ戻る型 |
| 全部の階層を、折り返して読めるように | 横一列型（SPでは折り返す） |
| ホームと親だけ。途中は必要な人が開く | 省略型 |
問い3：パンくずから、どこへ移ってもらいますか？
上の階層へ戻るだけでよいか、となりの分類へも移ってほしいか、パンくずをどこに置くかを確かめる問いです。
パンくずリストの型の比較
| 型 | 役割 | SPでの見え方 | 向く状況 |
|---|---|---|---|
| 横一列型 | 基本の形 | 折り返して全部を表示 | 階層が4段程度までのサイト |
| 省略型 | 長い階層の扱い | 途中を「…」にまとめる | 階層が5段以上ある |
| 横スクロール型 | SPの見せ方 | 1行のまま横にスクロール | SPでも全部の階層を残したい |
| 親へ戻る型 | SPの見せ方 | 1つ上へ戻るリンクだけ | SPでは戻り道を1つに絞りたい |
| ドロップダウン型 | 移動の広げ方 | 開閉の印を大きくして折り返す | となりの分類を見比べながら探す |
| 見出し一体型 | 置き方 | 見出しの帯を画面の端まで広げる | ページの冒頭に見出しの帯がある |
すべての型に共通する設計の原則
パンくずリストの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- 階層はサイトの構造に合わせて固定し、閲覧した順の履歴にはしない
- nav 要素に aria-label="パンくずリスト" を付け、ol で上の階層から順に並べる
- 今のページはリンクにせず、aria-current="page" を付けて示す
- 区切りの印は CSS で描き、読み上げに含めない
- 置き場所はヘッダーの下、ページの見出し（h1）の上にそろえる
- 画面の見せ方を変えても、BreadcrumbList の構造化データには全部の階層を出す
- SPでは、リンクの上下に指で押せる余白を残す
組み合わせの例
- 製造業の製品ページ：PCはドロップダウン型で、温度センサーから圧力センサーのように、となりの製品分類へ直接移れるようにする。SPは親へ戻る型で、製品分類の一覧へ戻るリンクだけを出す
- 記事が多いブログやメディア：横一列型で「ホーム ＞ カテゴリ ＞ 記事」を見せる。カテゴリが深い場合は省略型に切り替える
- 物件や商品の一覧：SPは横スクロール型で1行にそろえ、エリアや種類の階層をたどれるようにする
- ブランドの印象を大切にするサイト：見出し一体型で、見出しの帯の中にパンくずを入れ、ページの冒頭をすっきりと見せる。帯のないページでは横一列型にそろえる
- ヘッダーとの組み合わせ：主要なページは横並び型 ヘッダーやドロップダウン型 ヘッダーに任せ、深い階層の移動はパンくずに任せると、メニューを主要なページだけに絞れる
よくある質問
パンくずリストは、どんなサイトに必要ですか?
一覧から個別のページへ入る作りで、階層が2段以上あるサイトで役に立ちます。製品や記事、物件のように同じ種類のページが多いサイトほど、今どこにいるかと戻り道を示す意味が大きくなります。ページの数が少なく、ヘッダーのメニューで現在地が分かるサイトでは省くこともできます。
PCとSPで、型を変えてもよいですか?
PCは横一列型、SPは横スクロール型や親へ戻る型、のように画面の幅で見せ方を変えるのはよくある組み合わせです。その場合も、構造化データには全部の階層を出し、画面の幅によって伝える階層を変えないようにします。
パンくずとページ内の目次は、どう違いますか?
パンくずはサイトの中で今のページがどこにあるかを示し、目次は今のページの中にどんな見出しがあるかを示します。役割が違うため、長いページでは両方を置くことがあります。その場合は、パンくずを見出しの上、目次を見出しの下に置くと区別しやすくなります。
構造化データは、必ず入れたほうがよいですか?
画面のパンくずと同じ階層を、BreadcrumbList の構造化データでも出しておくのが一般的です。検索結果にURLの代わりに階層が表示されることがありますが、表示されるかどうかは検索エンジンの判断によります。画面と食い違わないように、同じデータから出力します。
階層を閲覧した順の履歴にしてもよいですか?
履歴の形にすると、同じページでも来た道によって表示が変わり、サイトの中の位置が伝わりません。検索から直接来た人には履歴がないため、役に立たない場合もあります。パンくずは、サイトの階層に合わせて固定するのが一般的です。