パンくずリスト

パンくずリストは、ウェブサイトにおける現在位置を、階層構造を持つハイパーリンクの一覧として示すものです。ユーザーがウェブサイト内で迷子にならないように、ナビゲーションを補助する役割を担います。パンくずナビ、トピックパス、フットパスといった別名でも呼ばれ、英語圏では一般的に「breadcrumbs」または「breadcrumb navigation」と表現されます。

大規模なウェブサイトでは、ユーザーがサイト内のどこにいるのかを把握しやすくすることが重要です。パンくずリストは、まさにそのために活用されます。名前の由来は、童話『ヘンゼルとグレーテル』で、主人公が森で道に迷わないようにパンくずを置いていったエピソードにちなんでいます。

例えば、Curlieディレクトリでは、以下のようにカテゴリが階層構造で表示されます。


各種資料 > 百科事典 > ウィキペディア


このように、パンくずリストはウェブサイトの構造を視覚的に表現し、ユーザーが容易にサイト内を移動できるようにサポートします。

パンくずリストの種類

パンくずリストには、主に以下の3つの種類があります。

1. パス型
- ユーザーがページにたどり着いた経路を動的に示すものです。同じページでも、異なる経路でアクセスすれば、パンくずリストの内容も変化します。ユーザーの行動履歴に沿った表示が特徴です。

2. 位置型
- ウェブサイトの階層構造におけるページの場所を静的に示すものです。アクセス経路に関わらず、同じページであれば、常に同じ内容のリストが表示されます。ウェブサイト全体の構造を理解するのに役立ちます。

3. 属性型
- ページが持つ属性に基づいた分類を示すものです。例えば、商品のカテゴリーや記事のテーマなどが表示されます。ユーザーがページの内容を理解する手助けとなります。

パンくずリストのユーザビリティ

パス型のパンくずリストは、ブラウザの「戻る」ボタンや履歴機能と役割が重複するという指摘があります。そのため、必ずしもすべてのケースで有効とは限りません。

一方、位置型のパンくずリストは、コンテンツが豊富すぎるサイトでは、単一の分類構造ではコンテンツの位置を完全に記述できないことがあります。例えば、Amazonのように検索ベースのナビゲーションを採用しているサイトでは、必ずしも適切とは言えません。

また、パンくずリストは垂直方向のナビゲーションであるため、「この階層には他にどんなカテゴリがあるか」といった水平方向のナビゲーションを表現することができません。そのため、水平方向のナビゲーションは、別途用意する必要があります。

このように、パンくずリストは便利なナビゲーション要素ですが、ウェブサイトの構造やコンテンツの特性に応じて、適切に使い分ける必要があります。

もう一度検索