パンくずリストとは｜意味や由来・メリット・デザイン事例・構造化など解説

スマートキャンプ デザインブログ デザイナーの髙松です。
本記事では「パンくずリスト」の意味・メリットについて解説しています。

パンくずリストとは

パンくずリストとは、ユーザーの現在地（閲覧しているページ）をWebサイトの階層を元に、視覚的に表した表示のことです。スマートキャンプ が運営するボクシル でも、パンくずリストを設置しています。

パンくずリストの名前の由来・意味

「パンくずリスト」という名前の由来は、グリム童話「ヘンゼルとグレーテル」が元になっています。

物語では、登場人物の兄妹が森で迷わないようにパンを粉々にして「パンくず」を落としていくシーンがあります。

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

パンくずリストを設置すると、2つの大きなメリットが期待できます。

メリット01 : SEOによい影響をもたらす（構造化）

SEO（Search Engine Optimization）とは、自社サイトをGoogleの検索結果で上位表示させる施策のことを指します。

Googleの検索エンジンはユーザーが入力した検索キーワードに対し、サイトの内容やドメイン年齢などから検索結果の上位に表示すべきサイトを判別します。

その際、検索エンジンはWebサイトの中身を見に行くために、構造化データ マークアップを辿ってサイト内を回遊します。これはパンくずリストの中身を構成するデータと同じものです。

Tips : 構造化データマークアップとは？
構造化データマークアップとは「構造化したデータ」を「マークアップ（記述）」したデータのことです。

「TOP > 商品一覧 > 商品ページ」のように、サイト階層を示すパンくずリストを作成するには、サイトを構成するページの関係性を正しく整理・設計した構造データが必要となります。

データを構造化する手段とマークアップ（記述）の方法には、いくつかの選択肢があります。

パンくずリスト作成に必要な構造化データマークアップを行うことで、サイト構造は検索エンジンが回遊しやすい形に整理されます。

この対応してあるサイトは検索エンジンに評価されやすくなります。

メリット02 : ユーザー体験（UX）の向上

パンくずリストを表示することで、ユーザーは自分がいまどこにいるのか把握できます。

特にショッピングサイトやレシピサイトなどページ数の多いサイトでは、ユーザーは自分が閲覧しているページがサイト構造のどの位置に当たるのかを自分で把握することは難しくなります。

Tシャツのページを閲覧しているときに「... > トップス > Tシャツ」という表示があれば「Tシャツに絞らず、大きいカテゴリで探してみよう」という行動をとりやすくなります。

パンくずリストのデザイン事例

今回はPCサイトに絞ってパンくずリストのデザイン事例を集めてみました。あらためてパンくずリストに絞って事例を集めてみると、それぞれのサイトで工夫が見られます。

事例01 | パンくずリスト内のリンクを認識しやすくする

パンくずリストの上位階層は、クリックして遷移できる場合が多いです。しかし、そのことに気付いているユーザーはどれくらいいるでしょうか？

ZOZOTOWNでは現在地をグレーアウトし、他の階層を青のリンクカラーにすることで遷移ができることをよりわかりやすく示しています。

事例02 : 現在地をハイライトする

前述のとおり、ユーザーがサイト内のどこにいるか把握しやすくすることもパンくずリストの大事な役割です。

Kurashiruやメルカリは、現在地を太字にすることでユーザーの現在地をよりわかりやすく表示しています。

事例03 : フッターの直前に置く

パンくずリストはヘッダーの直下に設置される場合が多いですが、ヘッダー直下はユーザーの目に入りやすい重要なスペースです。

このスペースに「本当にパンくずリストを置くべきなのか？」は立ち止まって考えてみると良いかもしれません。ユーザーがパンくずリストを必要とする場面は状況によります。

Appleではパンくずリストをフッターの直前に配置しています。コンテンツ（内容）を重視している可能性もあります。

以上、今回はパンくずリストのデザインと重要性について紹介しました！
今後もスマートキャンプ のデザインブログをよろしくお願いします！

WRITER & EDITOR :
Yume Takamatsu ( SMARTCAMP / Designer / @dream_yt95 )