パンくずリストとは？種類・作り方とモバイルUIの設計

パンくずリストは、「ホーム ＞ カテゴリ ＞ 現在のページ」のようにサイト内の位置を示す補助ナビゲーションです。基本は上位カテゴリへ戻れる位置型にし、検索条件や閲覧履歴とは役割を分けます。スマートフォンでも、少なくとも親カテゴリへ移動する手がかりを残しましょう。

パンくずはメインメニューの代わりではありません。メニュー・タブ・戻る操作との分担は、ナビゲーション設計の基本を踏まえて決めます。ここではパンくずの種類、サイトでの使い方、長いページ名を含むモバイル表示、Pixsoでの設計方法を説明します。

パンくずリストとは？

パンくずリストとは、ページの上部（多くの場合、メインメニューのすぐ下あたり）に「トップ ＞ カテゴリ ＞ 商品名」のように横並びで表示される、補助的なナビゲーションのことです。今見ているページがサイト全体のどの位置にあるのかを、視覚的かつ簡潔に示してくれます。

名前の由来は、帰り道の目印としてパンくずを落とす童話『ヘンゼルとグレーテル』です。ただし、ウェブでよく使われる位置型のパンくずリストは、実際に通ってきた順番ではなく、サイト内での現在地を示します。検索結果から商品ページへ直接訪れた場合でも、その商品の上位カテゴリを確認できます。

日本語のサイトでも「パンくずリスト」「パンくずナビ」という呼び方がそのまま定着していて、ECサイトやメディアサイト、コーポレートサイトまで、業種を問わず幅広く採用されています。似たような役割を持つものに「サイトマップ」がありますが、サイトマップがサイト全体の構成を一覧で示すのに対して、パンくずリストはあくまで「今このページがどこにあるか」という一点にフォーカスしている点が異なります。両方を併用しているサイトも少なくありません。

表示される位置についても、ある程度の慣習があります。もっとも多いのはヘッダー直下、記事タイトルのすぐ上あたりです。ページを開いた瞬間に目に入る位置に置くことで、訪問者が迷う前に現在地を伝えられるようにする狙いがあります。なかにはページの一番下、フッター付近に補助的に設置しているサイトもあり、コンテンツを読み終えたあとに次のカテゴリへ移動してもらう導線として使われています。

パンくずリストの3つの種類

位置型は「どこに属するか」、属性型は「どの条件で絞ったか」、パス型は「どこを通ったか」を表します。見た目が似ていても、ユーザーに伝える情報とリンクを押した結果は異なります。

位置型：サイトの階層を示す

サイトの階層構造にもとづいて、今見ているページがどのカテゴリに属しているかを表示します。たとえば「ホーム ＞ 家電 ＞ 掃除機 ＞ 商品名」です。検索から来た人もトップページから来た人も、その商品の上位カテゴリを確認できます。

表示する階層は、利用者が理解しやすいカテゴリ構造を基準にします。URLの文字列をそのまま分割して並べる必要はありません。また、複数カテゴリに属する商品なら、複数の妥当な階層が存在することもあります。どの階層を画面に示すかはサイト内の分類ルールとして決めます。

属性型：選択した条件を示す

ECサイトや不動産サイトなどで、選択した属性を順に表示するタイプです。「メンズ ＞ Tシャツ ＞ サイズM」のように、現在の絞り込み条件を伝えます。ただし「サイズM」を外す操作は上位カテゴリへの移動とは違います。条件を解除できるチップやフィルターと、階層を移動するリンクを混同させないことが重要です。

商品詳細ではカテゴリの位置型パンくずを表示し、「検索結果に戻る」を別に用意する方法もあります。この場合、戻った先でキーワードや選択条件が維持されるかまで設計します。入口が違うという理由だけで、すべてを属性型と呼ぶわけではありません。

パス型：実際の閲覧順を示す

訪問者が実際にたどってきたページの順番を表示するタイプです。閲覧履歴に応じて内容が変わるため、同じページでも人によって経路は異なります。

サイトの階層を知りたい人には、長い履歴がかえって分かりにくくなることがあります。履歴を残す必要があるサービスでは、「最近見たページ」や「検索結果に戻る」として位置型パンくずから分ける方法も検討します。外部から直接アクセスした人に、通っていない経路を履歴として見せないようにします。

パンくずリストを設置するメリット

パンくずリストの役割は、現在地を示し、上位の情報へ移動できるようにすることです。SEOのためだけに追加するのではなく、実際の移動先が役立つかを確認します。

上位カテゴリへ戻り、関連情報を探せる

訪問者は、自分が今どのカテゴリのページを見ているのか一目で分かるので、目的の情報にすぐ戻れます。ブラウザの「戻る」ボタンを何度も押して、ページを一つずつさかのぼる必要がありません。一段階だけ上のカテゴリに戻りたいときも、パンくずリストの該当箇所をクリックするだけで済みます。

検索エンジンから下層ページへ直接訪れた人にとっても、上位カテゴリは関連する商品や記事を探す手がかりになります。ただし、カテゴリを開いても内容がほとんどなければ役に立ちません。移動先の一覧とパンくずを一緒に設計する必要があります。

内部リンクとしてページの関係を伝えられる

パンくずリストは、見た目上はナビゲーションですが、技術的には内部リンクの一種でもあります。検索エンジンがリンクをたどれるよう、上位ページへの通常のリンクとして実装します。

「階層が複数あるとGoogleが理解できない」というわけではありません。Googleのパンくず構造化データは、同じページについて複数の経路を記述する場合も扱っています。重要なのは、実在するページの関係を一貫した名称で表し、ユーザーに不自然な経路を作らないことです。

構造化データで階層情報を伝えられる

BreadcrumbList の構造化データを使うと、ページの階層情報をGoogleに伝えられます。ただし、マークアップした表示が必ず検索結果に出るわけではなく、順位やクリック率の改善を保証するものでもありません。

Googleの現行の説明では、パンくずによる検索結果の表示はデスクトップ検索が対象です。モバイルの検索結果で同じ見え方になる前提では設計しないでください。階層の選び方と必要な項目は、Googleのパンくず構造化データの説明に沿って実装します。

サイトの用途に合わせたパンくずの使い方

商品カタログ、ニュース、宿泊施設では、利用者が戻りたい分類が異なります。掲載画像と具体的な用途を見ながら、残すべき階層を考えてみましょう。

商品数の多いカタログ：主ナビゲーションと役割を分ける

下のAmazon.co.jpの画像は、ホームページの全体ナビゲーションです。パンくずリストの例ではありません。検索欄やカテゴリの入口は商品を広く探すための導線で、パンくずは商品詳細などで現在地と上位カテゴリを伝える補助導線です。商品数の多いサイトでは、この二つを同じものとして扱わず、似た商品へ戻るときに必要なカテゴリを考えます。

製品ラインナップ：製品メニューを階層表示と混同しない

下のAppleの画像も、上部の製品ナビゲーションです。製品を横並びで選ぶメニューは、現在のページへ至る親子関係を順に示すパンくずとは異なります。自社でパンくずを追加する場合は、見た目をそろえるためにメニュー項目を並べるのではなく、実際の上位カテゴリへのリンクを選びます。

ニュースや読み物：記事ジャンルへ移動する

たとえば「ホーム ＞ ニュース ＞ クラウド ＞ 記事名」と表示すれば、読んでいる記事から同じ分野の記事へ移動できます。記事に複数のタグが付いていても、すべてを一列に並べるのではなく、カテゴリとタグの役割を分けます。

アパレル：似た商品を比較できる分類にする

ユニクロの掲載例のようなアパレルの商品一覧では、部門、カテゴリ、アイテムの分類が移動の手がかりになります。一方、色やサイズなどの選択条件を解除する操作はフィルター側に置き、カテゴリへの移動と区別します。

宿泊施設：地域の広さを切り替える

宿泊施設を探す場面なら、「ホーム ＞ 東京都 ＞ 新宿エリア ＞ 施設名」のような地域の階層が考えられます。施設の詳細から近隣の施設を探せるよう、親の地域一覧へ戻る導線を残します。日程や人数は地域そのものではないため、検索条件として別に扱います。

出品型のマーケット：商品分類をそろえる

多くの出品者が商品を登録するサイトでは、カテゴリ名の表記と階層を共通化することが重要です。たとえば「バッグ ＞ ハンドバッグ」を商品ごとに別の呼び方にすると、パンくずから同じ分類へ戻ることが難しくなります。

複数のソフトウェア：製品群と個別製品を区別する

Adobeの掲載例のように複数の製品を展開するサイトでは、製品群と個別製品の関係を示せます。ただし、製品の分類と料金プランは別の軸です。実際の親子関係がないプラン名を、見た目の都合で階層に加えないようにします。

これらの用途に共通するのは、情報を足すことよりも、戻りたい分類を選ぶことが大切だという点です。階層を短くしても、必要な親カテゴリへ移動できればパンくずは役割を果たします。

パンくずリストのデザインで気をつけたいポイント

パンくずリストは機能面だけでなく、見た目の設計もユーザー体験に大きく影響します。実装する前に押さえておきたいポイントを、6つに分けて紹介します。

区切り記号はシンプルに

「＞」や「／」など、視認性が高く意味が直感的に伝わる記号を使うのが基本です。オリジナリティを出そうとしてアイコンや矢印のデザインに凝りすぎると、かえって「これは区切りなのか、それとも別の意味を持つ記号なのか」と読み手を迷わせてしまうことがあります。

現在地と移動できる項目を区別する

最後の項目を現在のページ名として表示する場合は、通常のテキストにすると移動先との違いが明確になります。現在のページもリンクにする設計では、そのリンクに aria-current="page" を指定して現在地を伝えます。パンくず全体は、名前の付いたナビゲーション領域として扱います。実装時にはWAI-ARIAのパンくずパターンを参照できます。

アンカーテキストには分かりやすい言葉を使う

リンク部分の文字列（アンカーテキスト）は、社内用語や略称ではなく、訪問者が見て意味の分かる言葉にしましょう。カテゴリ一覧の名称とそろえ、リンク先を開く前に内容が予想できる表現にします。

スマホでは省略のルールを決めておく

画面幅が狭いスマートフォンでは、まず直近の親カテゴリに戻る操作を残します。中間階層を「…」にまとめるなら、押すと省略したリンクが開くようにします。省略記号が単なる飾りなのか操作なのかを曖昧にせず、キーボードでも開閉できる設計にしてください。長い現在のページ名は、ページ見出しで全文を確認できるようにし、パンくずを収めるためだけに文字を極端に小さくしないことが大切です。

主役になりすぎないサイズ・色にする

パンくずリストは補助的なナビゲーションです。メインコンテンツやCTAボタンとの優先順位は分けながら、リンクは背景から十分に読み取れる色と大きさにします。グレーを薄くしすぎたり、項目間を詰めたりすると、読むことも押すことも難しくなります。色だけでリンクと現在地を区別しないようにしましょう。

全ページで表示ルールを統一する

ページによってパンくずの有無や表示位置がバラバラだと、訪問者はそのたびに視線を動かして探すことになり、かえって使いにくく感じられます。トップページやランディングページなど、あえて設置しない例外を決める場合も、その基準をチーム内であらかじめ共有しておくと、サイト全体で一貫した体験を作れます。

長い商品名を含むモバイル表示を設計する

照明のECサイトを例に、「ホーム ＞ 照明 ＞ ペンダントライト ＞ 北欧デザインの調光ペンダントライト」という階層を考えます。商品名を無理に一行へ収めるのではなく、どの画面幅でも「ペンダントライト」の一覧へ戻れることを優先します。

文字を拡大したときや、さらに長い商品名に差し替えたときも確認します。中間階層を開くボタンとカテゴリのリンクは別の操作です。省略を開いても突然ページ移動しないよう、画面と操作を合わせて設計します。

Pixsoでパンくずリストを設計する

PixsoのUIデザイン機能を使い、通常のリンク、現在地、区切り記号を部品として組み合わせます。最初から短いダミーテキストだけで完成させず、実際に使うカテゴリ名と長い商品名を入れると、表示の課題を見つけやすくなります。

1. 基本の部品を作る。カテゴリリンク、現在地、区切り記号を用意し、色と余白をそろえます。繰り返し使う部分をコンポーネントにします。
2. 画面幅ごとの配置を作る。Auto Layoutで項目間の余白を調整し、デスクトップ版とモバイル版を並べます。中間階層を省略する場合は、展開した状態も作ります。
3. 戻り先の画面を用意する。商品詳細だけでなく、親カテゴリの一覧と検索結果も作ります。パンくずを押す操作と検索結果に戻る操作で、遷移先を分けます。
4. 操作を確認して共有する。プロトタイプで画面間をつなぎ、「同じカテゴリの別の商品を探す」という作業を確認します。実装担当者には、省略の条件、長い名前の扱い、現在地の表現も伝えます。

リアルタイムの共同編集やコメントを使えば、デザイナーと実装担当者が同じ画面上で表示ルールを確認できます。デザイン上の見え方に加えて、キーボード操作や読み上げの対応は実装後の画面でも確認してください。

まとめ

パンくずリストでは、階層、検索条件、閲覧履歴を混ぜないことが基本です。親カテゴリに戻るリンクを用意し、長いページ名や狭い画面でも移動先が分かるようにします。検索結果の表示だけを目的にせず、戻った先でユーザーが作業を続けられるかまで考えましょう。

Pixsoでパンくずと戻り先の画面を設計する