パンくず詳解
Post on:2009年3月30日
sponsors
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。
以下、その意訳です。
パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。
パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。
このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。
また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。
What is a breadcrumb?
パンくずとは何ですか？
「パンくず」は、ウェブサイトやウェブアプリケーションでユーザーの現在位置を明示するセカンダリー ナビゲーション スキームです。
「パンくず」の由来は、童話「ヘンゼルとグレーテル（wikipedia）」で子供たちが家に戻るための足跡に使用したパンくずです。
「パンくず」とはこの物語と同様に、ユーザーにウェブサイトやウェブアプリケーション上の現在位置とその起源をたどる方法を明示するものです。
「パンくず」の実例をみてみましょう。
Delicious.comの「パンくず」
階層構造になっている大量のページを持つウェブサイトの多くで「パンくず」をみつけることができます。
「パンくず」のシンプルなフォーマットは、テキストリンクが水平に配置されており、大なり記号（＞）でページの構造があらわされています。
When Should You Use Breadcrumbs?
パンくずはいつ使うべきですか？
大量のページを階層構造に整理したウェブサイトで、パンくずナビゲーションを使用してください。
特に、論理的にグループ分けされた多種多様なカテゴリを持つウェブサイトには効果的です。
もし、ウェブサイトが論理的な階層を持っていない場合は、パンくずを使用すべきではありません。
パンくずを使用すべきか判断する方法の一つを紹介します。
ウェブサイトのサイトマップもしくはナビゲーションのアーキテクチャを作成し、その上でパンくずが各カテゴリ内でユーザーに有用であるか検討してみてください。
パンくずナビゲーションは追加の存在であり、プライマリー ナビゲーションにとってかわるものではないことに注意してください。
パンくずはあくまでも便利な存在で、ユーザーがどこにいるかを確認できるセカンダリー ナビゲーション スキームです。
Types of Breadcrumbs
パンくずのタイプ
パンくずは、主に３つのタイプに分けられます。
Location-based
ロケーションベースのパンくずは、ユーザーがウェブサイトのどの階層にいるかを明示します。
このタイプは、2レベル以上の階層をもつサイトに使用されます。
Attribute-based
属性ベースのパンくずは、特定のページでそのページの属性を明示します。
Path-based
パスベースのパンくずは、ユーザーがそのページに遷移した過程を明示します。
このタイプは、ユーザーが実際に遷移したページを明示するという点で、ダイナミックに生成させるものです。
Benefits of Using Breadcrumbs
パンくずを使用する利点
パンくずを使用した際の利点を紹介します。
Convenient for users
ユーザーに利便性を提供します
パンくずは、ユーザーにウェブサイトをナビゲートする第二の手段を与えるものです。
巨大で深い階層を持つウェブサイトでもパンくずを使用することで、ユーザーは簡単に上位の階層に移動することができます。
Reduces clicks or actions to return to higher-level pages
上位階層に戻る際のクリックや手間を減らします
ブラウザの「戻る」ボタンやウェブサイトのナビゲーションを使用して上位階層に戻る際、パンくずを使用することでユーザーはより少ないクリックと手間で移動できます。
Doesn't usually hog screen space
無駄にスペースを占拠しません
通常、パンくずは水平タイプにデザインされるため、多くのスペースを必要としません。これは、ページに配置すべきコンテンツの量が多くなっても、悪影響をわずかしか与えないということです。
パンくずが適切に設置されるのであれば、この欠点をを補って余りあるものとなるでしょう。
Reduces bounce rates
バウンスレート（直帰率）を改善します
パンくずは、そのページを初めて訪れたユーザーにウェブサイトの構造を把握させる効果もあります。
例えば、検索エンジン経由で階層が下のページに訪れた時、それがユーザーの目的のページでなかった場合に、一つ上の階層に戻って関連したページを探す気にさせることもあります。
こうした配慮が、ウェブサイトのバウンスレートを減らすことに繋がります。
Mistakes in Breadcrumb Trail Implementation
パンくず実装時のよくある間違い
パンくずを設置することは、とても簡単なことです。
ただし、実装する際に気をつけておくべきことがあります。
Using breadcrumbs when you don’t need to
使う必要がないのに設置している
この例では、プライマリ、セカンダリ、パンくずの３つのナビゲーションがかなり狭い範囲に配置されていて、ユーザーを圧倒させてしまっています。
このセカンダリ ナビゲーションが表示されるページでは、その上の階層（Home, Music）はプライマリ ナビゲーションに表示されているので、パンくずの利便性はありません。
Using breadcrumb trails as primary navigation
プライマリ ナビゲーションとして配置している
パンくずは、上記で説明した通り、オプションのナビゲーションです。
ナビゲーションをパンくずのみにしてしまうと、他のカテゴリに横移動することが面倒で困難になってしまいます。
Using breadcrumbs when pages have multiple categories
ページのカテゴリが複数あるのに使用している
パンくずはウェブサイトの構造を一本のラインで明示します。そのため、複数の親カテゴリに属するページがある場合、パンくずは不正確になってしまい、とても紛らわしいものになってしまいます。
Breadcrumb Navigation Design Considerations
パンくずのデザインで気をつけるポイント
パンくず ナビゲーションをデザインする際に念頭におくポイントを紹介します。
hat should be used to separate link items?
各リンクの分離に使うアイテム
認知度が高く、最も識別しやすいのは、「大なり記号（＞）」です。
使い方は、「親カテゴリ ＞ 子カテゴリ」になります。
分離に使うアイテムは、設置するパンくずのタイプに依存します。
例えば階層構造を持っていない場合には、「＞」のような関係性を持たせてはいけません。
How big should it be?
パンくずの大きさ
極端な例ですが、パンくずがページの大部分を占めることはありません。パンくずはユーザーにとって単に便利な道具として機能すべきなので、プライマリ ナビゲーションより小さくし、目立たせないようにします。
ユーザーがページを見た瞬間、注意をひきつけすぎないようにデザインします。
Where should breadcrumbs be located?
パンくずの配置
水平型のナビショーンを設置したウェブサイトであれば、ナビゲーションの下、ページを表示した際の上半分に表示されるようにパンくずを配置します。
Breadcrumb Showcase
1. Classic Text-Based Breadcrumbs
テキストベースのクラシックなパンくず
2. Replacing "＞" with Other Symbols
「＞」以外のアイテムを使用したパンくず
3. Beyond Simple Text Links
テキストリンクから進化したパンくず
4. Breadcrumbs for Multi-Step Processes
複数のステップを明示するパンくず
5. Breadcrumbs with Sub-Navigation
ナビゲーション付きのパンくず
6. Interactive Breadcrumbs
インタラクティブなパンくず
7. Experimental Examples
実験的なパンくず
sponsors
