はじめに
本ドキュメントの目的
本ドキュメントは「パンくずリスト 言い換え」に関する情報を分かりやすくまとめた案内です。パンくずリストの英語表現や日本語の別称、正式名称の説明を行います。また、パンくずリストの基本的な役割や名前の由来、種類ごとの特徴、HTMLサイトマップとの違いも解説します。
なぜ知るべきか
パンくずリストはウェブサイトの使いやすさに直接関わります。たとえば「ホーム > 商品一覧 > メンズ > 靴」と表示されると、現在地が分かりやすく、前の階層に移動しやすくなります。サイト管理やSEO対策の観点でも有益です。
対象読者
ウェブ担当者、コンテンツ制作者、デザイナー、初心者の方まで幅広く役立ちます。専門用語は最小限にし、具体例で丁寧に説明します。
本書の構成
第2章で言い換えや別名を紹介し、第3章で定義と役割を説明します。第4章で種類ごとの違いを整理し、第5章でHTMLサイトマップとの違いを比較します。順を追って読み進めてください。
パンくずリストの言い換え・別名
はじめに
パンくずリストは複数の呼び方で表現されます。ここでは英語と日本語の代表的な別名と、使い分けのポイントを分かりやすく説明します。
英語での呼び方
- breadcrumb / breadcrumbs
- breadcrumb list
- breadcrumb navigation
これらはほぼ同義で、WebやUXの文献ではどれも使われます。短く「breadcrumbs」と表記することが多いです。
日本語での別称
- パンくず：最も一般的な呼び方です。利用者向けの表示でよく使います。
- パンくずナビ：ナビゲーションであることを強調する表現です。
- ブレッドクラム：英語の音訳で、技術系の文書で見かけます。
- トピックパス／フットパス：学術や設計の場で使われることがありますが、一般的ではありません。
具体例（表示例）
ホーム > カテゴリ > サブカテゴリ > 商品名
用語選びのポイント
- 一般向けの説明やUIには「パンくず」または「パンくずナビ」を使うと分かりやすいです。
- 開発者や英語文献に触れる場面では「breadcrumb(s)」を使うと誤解が少なくなります。
- 表記はサイト内で統一してください。
パンくずリストとは
定義
パンくずリストは、Webサイトのページ階層を順に並べて表示し、ユーザーが現在どの場所にいるかを示すナビゲーションです。現在地の手がかりを与え、上位のページへ簡単に戻れるようにします。
名前の由来
名前はグリム童話「ヘンゼルとグレーテル」のパンくずを使った道しるべに由来します。サイト内での「道しるべ」としての役割を端的に表しています。
役割と利点
- 迷子になりにくくし、操作の負担を減らします。
- ページ構造を視覚化することで、サイト全体の把握を助けます。
- 内部リンクとして検索エンジンがサイト構造を理解しやすくなります。
配置と見た目の例
通常、ページ上部（見出しの上か下）に水平で表示します。例：ホーム > カテゴリ > 商品名。HTMLでは
のように記述し、現在ページはaria-current=”page”で示します。
使う場面
階層が深いサイトやカテゴリ分けがある場合に特に有効です。シンプルなサイトでは必須でないこともあります。
パンくずリストの種類
パンくずリストには主に3種類あります。ここではそれぞれの特徴と具体例、向いている場面を分かりやすく説明します。
1. 位置型（階層型）
サイトの階層構造をそのまま示します。どのページが上位にあるかが一目で分かるため、ユーザーが現在地を把握しやすいです。表示は同じページなら常に同じです。例：ホーム > 製品 > スマートフォン > 機種名。コンテンツサイトや企業サイトでよく使われます。
2. 属性型（ファセット型）
ユーザーが選んだ条件や属性に応じて表示が変わります。ECサイトでの絞り込み検索の経路表示に便利です。例：ホーム > メンズ > ジャケット > カラー：ネイビー > サイズ：M。商品のフィルターが多い場合に向いていますが、表示が長くなることがあります。
3. パス型（履歴型）
ユーザーが実際に辿った閲覧履歴を基に表示します。訪問ごとに異なるため、個別の戻り操作に役立ちます。例：ホーム > キャンペーンページ > 商品詳細。個人の操作に合わせるので分かりやすいですが、構造が不安定で検索エンジン向けには不利な場合があります。
それぞれ長所と短所があります。サイトの目的に合わせて、位置型は構造の明確化、属性型は絞り込みの表現、パス型は個人の回遊支援に使い分けると良いです。
パンくずリストとHTMLサイトマップの違い
はじめに
パンくずリストとHTMLサイトマップは、どちらもサイトの案内役ですが目的と見せ方が異なります。ここでは違いを分かりやすく説明します。
目的の違い
- パンくずリスト：ユーザーが今いる場所を示すためのセカンダリナビゲーションです。例：「トップ > 製品 > ノートPC」。現在地の把握と上位階層への移動を助けます。
- HTMLサイトマップ：サイト全体のページ構成を一覧で示すページです。カテゴリ別に全ページを見せるため、目的のページを見つけやすくします。
表示場所と使い方
- パンくずリストは各ページの上部に小さく表示します。ユーザーが閲覧中に現在地を確認しやすくなります。
- HTMLサイトマップはフッターや特別なページとして設置します。サイト全体の構造を俯瞰したいときに使います。
SEOやユーザビリティへの影響
どちらも検索エンジンの巡回とユーザーの利便性に役立ちます。パンくずはページの文脈を検索結果に示せる場合があり、HTMLサイトマップはクローラーにページを見つけやすくします。
実務上のポイント
- サイトが深い階層になっているときはパンくずが有効です。
- ページ数が多いサイトではHTMLサイトマップを用意すると探しやすくなります。
- 両方を用意するとユーザーと検索エンジンの両方に親切です。
