横一列型 パンくずリスト

通称：パンくずリストBreadcrumb trail

見本の中のメニューやボタンは押して動きを試せます（リンク先へは移動しません）。

トップから現在地までをひと続きの一行で示す、もっとも素直なパンくずリストです。いまサイトのどこにいるかが分かり、1つ上の一覧へ1回で戻れます。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# サイトの情報（ここを書き換える）
- どんなサイトか：〈例：工務店のサイト、税理士事務所のサイト、ネットショップ〉
- 入れたい文言・項目：〈見出し・ボタンの文言・項目の数など。決まっていなければ空けてよい〉
- 今あるページ：〈今のページを直すなら、その HTML を貼る。新しく作るなら空ける〉

# 部品の呼び名
一般に「パンくずリスト」（Breadcrumb trail）と呼ばれる部品です。

# 作ってほしいもの
横一列型のパンくずリスト（Breadcrumb trail）。ホームから今のページまでの階層を、横一列に並べる。

# 並べるもの（左から）
- ホーム → 施工事例 → 戸建てリフォーム → 今のページ
- 階層と階層のあいだに、右向きの小さな山形（›）の区切りを入れる

# 守ってほしいこと
- 全体を nav 要素で囲み、aria-label="パンくずリスト" を付ける。中は ol と li で順番を表す
- 今のページはリンクにせず、aria-current="page" を付けた文字にする
- 区切りの印は CSS の疑似要素で前の項目の後ろ（::after）に描き、読み上げに含めない
- リンクは下線付き、今のページは下線なしの濃い文字にして見分ける
- 文字は 14px、色は本文より少し薄い灰色にして、ページの見出しより目立たせない
- 構造化データ（JSON-LD の BreadcrumbList）も同じ階層・同じ名前で出す

# SP（画面幅 599px 以下）
- 収まらない分は折り返してよい。区切りの印が行頭に来ないようにする
- リンクの上下に余白をとり、押せる高さを 44px 近くにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 色は CSS 変数（--accent など）にまとめ、あとから変えやすくする
- 文言は「サイトの情報」に合わせて考える。決まっていないところは〈 〉で囲んだ仮の文言にする
- 「並べるもの」に書いた項目の名前（エリア・間取りなど）は一例。サイトに合うものに置き換える
- 今あるページを渡したときは、そのページの色・文字・余白に合わせ、変えた場所を最後に箇条書きで知らせる

パンくずリストを8つの型に分け、AIへの指示文・動く見本・コードを載せています。

パンくずリストはどの型を選ぶか

パンくずリストは、いまサイトのどこにいるかを示し、上の階層へ戻る道をつくる部品です。型を選ぶときは、いちばん深いページが何階層か、ページの名前がどれだけ長いか、SP でどう使われるか、の3つを見ます。迷ったら横一列型から始め、SP で折り返しが気になったら、SP の見せ方の型を組み合わせます。

こんなとき 向いている型
2〜4階層で、ページの名前も短い横一列型
写真や色の帯でページの見出しを見せている見出し一体型
階層は浅いが、今のページの名前が長いアイコンつき型
5階層以上になるページがある省略型
今のページの名前が長く、SP で何行にも折り返す横スクロール型
SP では一覧へ戻る使い方がほとんど親へ戻る型
同じ階層のページを見比べることが多いドロップダウン型
縦に長いページが多く、読み終えた人を一覧へ戻したいページ下にも置く型（ほかの型と組み合わせる）

横スクロール型と親へ戻る型は SP での見せ方を変える型なので、PC では横一列型として見えます。ページ下にも置く型は、ページの上のパンくずにどの型を使っていても足せます。

どの型でも守ること

  1. nav と ol で作る。外側を nav（aria-label="パンくずリスト"）、内側を ol と li で組み、並び順に意味があることを伝えます。
  2. 現在地は文字のまま置く。aria-current="page" を付けた文字にして、リンクとは見た目でも分けます。
  3. 区切りの印は CSS で描く。「>」や「/」を HTML の文字で書くと、読み上げで階層ごとに読まれます。疑似要素で描くか、代わりの文字を空にします。
  4. 構造化データとそろえる。BreadcrumbList に書く名前と並びは、画面のパンくずと一致させます。画面で畳んだ階層があっても、構造化データの側は省きません。
  5. 見出しより控えめにする。パンくずはページの見出しの上に置きますが、文字は小さく色は薄めにして、見出しより先に目を引かない程度に抑えます。

よくある質問 (FAQ)

トップページには要りません。トップページは階層のいちばん上なので、「ホーム」だけのパンくずを出しても戻る先がありません。2階層目のページから出します。

右向きの山形（›）が、階層を下っていく向きを伝えやすくおすすめです。どの印でも、HTML の文字として書かず CSS で描くか、読み上げに含めない書き方にします。印は文字より薄い色にして、階層の名前が読みやすい状態を保ちます。

あると、サイトの中での位置づけを検索エンジンが把握しやすくなります。名前と階層は画面のパンくずと同じにします。画面では途中を畳んでいる場合でも、構造化データにはトップからの階層を漏れなく書きます。

主な分類を1つ決めて、その階層だけを出します。来た経路によってパンくずが変わると、同じページなのに場所がずれて見え、構造化データとも食い違います。もう一方の分類へは、本文の終わりに関連のリンクを置きます。