パンくずリストのデザイン｜読者が迷わない置き場所と見た目の決め方

デザインの参考サイトをまねして、トップページ以外のページにパンくずリストを置いてみたけれど…
「これ、要る？」「なぜこの大きさ？」と聞かれたら、答えられそうにない…

パンくずリストは、読者に今どこにいて、どこへ戻れるかを伝える部品です。役割がしっかり理解できれば、置く場所も大きさも理由つきで決められます。この記事では、

• パンくずリストの配置
• 見た目
• 要否

を、良い例と悪い例を比べながらご紹介します。最後に、カンプで確かめるチェックリストも付けました。

パンくずリストとは？役割は「今どこにいるか」を伝えること

パンくずリストとは
「ホーム ＞ サービス ＞ 外壁塗装」のように、今いるページまでの階層を順に並べたリンクです。

パンくずリストは、サイトの階層の中で読者が今どこにいるかを示すものです。読者に伝えることは、次の2つです。

1. 今、サイトのどの階層にいるか
2. 1つ上の階層へ、どこから戻れるか

とくに助かるのは、検索からいきなり記事やサービス詳細のページに来た読者です。トップページを通っていないので、パンくずリストがないと「このサイトには他に何があるのか」が分かりません。

グローバルナビゲーションはどのページへ行けるかを示す働きをします。メニュー項目の選び方や順番は、以下の記事で詳しく説明しています。

パンくずリストの配置｜ヘッダーの下、ページ見出しの上が基本

パンくずリストはヘッダーとページ見出しの間に置きます。この位置がよいのは、ページを開いた人が最初に見る左上から、見出しの手前までの間にあるからです。本文を読み始める前に、現在地が目に入ります。

ページを開いたときの視線の動きは、以下の記事で詳しく説明しています。

左右の位置は、ページ見出しと左端を揃えるのがおすすめです。中央や右に寄せると、見出しとの関係が切れて、ただの飾りに見えてしまうからです。

メインビジュアルの下に置くと、スマホでは最初の画面に入らないこともあります。現在地が分かる前に本文が始まってしまうわけです。

架空のリフォーム会社の「外壁塗装」ページで比べると、次のようになります。

スマホで長くなったときは改行か横スクロール

階層が深いページや、ページ名が長いページでは、パンくずリストが1行に収まりません。パソコンの画面でも、コンテンツ幅より長くなったら改行するのが前提です。スマホでは、次のどちらかにします。

• 改行して、全部の階層を見せる
• 改行せず、横にスクロールして読めるようにする

横スクロールにする場合は、ページ下部（フッターエリアの上）にも、改行したパンくずリストを置いておきます。

横スクロールは本文を押し下げない一方で、隠れた部分に気づかない読者もいます。下にも全部見える形を置くと、その読者も現在地を確かめられるわけです。

パンくずリストの見た目｜良い例・悪い例で比べる

見た目は、次の4つのチェックポイントで判断します。

1. 大きさと色：ページ見出しや本文より控えめにする
2. 区切り記号：進む向きが分かる記号を1種類に揃える
3. 現在地：最後の項目だけリンクにせず、色や太さで区別する
4. 階層名：ページ見出しと同じ言葉で、短く書く

悪い例と良い例を並べると、次のとおりです。

比べるポイント	悪い例	良い例
大きさと色	見出しと同じ太字で目立ちすぎる。または薄い灰色で読めない	本文より少し小さく、読める濃さの色
区切り記号	「＞」「→」「｜」が混ざっている	「＞」か「/」のどちらか1種類
現在地	最後の項目もリンクで、他と同じ色	最後の項目はリンクにせず、色や太さで区別
階層名	「service」「詳細」など、URLの英語やあいまいな言葉	「サービス」「外壁塗装」など、見出しと同じ言葉

区切り記号を1種類に揃えるのは、記号が変わると、そこで意味が変わったように見えるからです。「＞」の次に「｜」が来ると、階層の区切りなのか別の項目なのか、読者は一瞬迷います。

大きさと色は「控えめ、でも読める」

ページの主役は本文です。パンくずリストが見出しと同じ大きさで並ぶと、どちらを先に読めばいいか迷います。

例えば「ホーム ＞ サービス ＞ 外壁塗装」を、見出しと同じ大きさで置いた場合と、本文より少し小さくした場合を並べてみてください。小さいほうが、見出しの「外壁塗装」に目が向きませんか？

ただし、薄すぎる灰色にすると、今度は読めなくなります。控えめにするのは大きさで、色は読める濃さを残します。

現在地とリンクは見分けがつくように

ホームや途中の階層は、押せると分かる見た目にします。下線や、本文とは違う色が目印です。

最後の項目は、今見ているページそのものです。リンクにすると同じページを読み込み直すだけなので、リンクにせず色や太さで区別します。

見た目だけでなく、読み上げソフトにも「今いるページ」を伝える指定が、W3Cのアクセシビリティの指針に用意されています。実装を担当する人に、現在地の項目だと伝えておきましょう。

階層名は読者がたどる道筋で決める

Google検索セントラルでは、パンくずリストにはURL構造をそのまま反映させず、一般的な経路を示すことがすすめられています。

フォルダ名の「service」をそのまま出すより、ページ見出しと同じ「サービス」にしたほうが、どこにいるかが伝わります。

余白や揃え、現在地だけを目立たせる強弱は、デザインの基本で判断できるんです。整列と対比の考え方は、以下の記事で詳しく説明しています。

パンくずリストがいらないサイトもある｜要否の判断基準

階層があるサイトには置き、階層がないページには置きません。具体的に置いたほうがよいのは、次のようなサイトです。

• カテゴリと記事があるブログ・メディアサイト
• サービス一覧とサービス詳細があるコーポレートサイト
• カテゴリと商品ページがあるECサイト
• 募集職種ごとのページがある採用サイト

置かなくてよいのは、次のようなページです。

• LP（ランディングページ）：1ページで完結し、戻る階層がない
• トップと数ページだけの小さなサイト：どのページもグローバルナビゲーションから1クリックで行ける

LPのゴールは、お問い合わせや申し込みです。ほかのページへ戻る道を増やすより、ゴールまで読み進めてもらうほうが目的に合います。

1と2が「はい」で、3が「いいえ」なら置きます。

例えば、トップ・会社概要・サービス・お問い合わせの4ページだけのサイトなら、どのページもトップのすぐ下にあります。1が「いいえ」になるので、置かなくても読者は迷いません。

パンくずに出る階層は、サイト構成を決める段階でほぼ決まっています。ページの中で何をどこへ置くかを紙1枚で決める手順は、以下の記事で詳しく説明しています。

カンプで確かめるパンくずリストのチェックリスト

下層ページのカンプができたら、次の項目を確かめます。

• ヘッダーとページ見出しの間にあるか
• ページ見出しと左端が揃っているか
• 見出し・本文より控えめで、読める色と大きさか
• 区切り記号は1種類か
• 最後の項目（現在地）がリンクにならず、区別されているか
• 階層名がページ見出しと同じ言葉か（URLの英語のままになっていないか）
• スマホで長い階層が切れていないか（改行するか、横スクロールなら下部にも配置）
• そもそも、このサイトに階層があり、置く必要があるか

といった項目に、1つずつ理由を添えて答えられれば、クライアントに聞かれても説明できます。

まとめ

1、パンくずリストは「今どこにいて、どこへ戻れるか」を伝える部品
2、配置はヘッダーの下・ページ見出しの上、見た目は控えめにして現在地だけ区別する
3、階層のないLPや小さなサイトでは、置かない判断もある

参考にした情報源

• デジタル庁 デザインシステムβ版「パンくずナビゲーション」https://design.digital.go.jp/dads/components/breadcrumb/（2026年10月30日確認）
• デジタル庁 デザインシステムβ版「パンくずナビゲーション（使い方）」https://design.digital.go.jp/dads/components/breadcrumb/usage/（2026年10月30日確認）
• Google 検索セントラル「パンくずリスト（BreadcrumbList）構造化データ」https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=ja（2026年10月30日確認）
• W3C WAI-ARIA Authoring Practices Guide「Breadcrumb Pattern」https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/（2026年10月30日確認）