パンくず詳解

パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。

Breadcrumbs In Web Design

Breadcrumbs In Web Design

以下、その意訳です。

パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。

パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。
このことはウェブサイトのセクションやページのファインダビリティ(見つけやすさ)を改善するものとなります。

また、ランディングページ(検索などから訪れた最初のページ)にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。

What is a breadcrumb?

パンくずとは何ですか?

「パンくず」は、ウェブサイトやウェブアプリケーションでユーザーの現在位置を明示するセカンダリー ナビゲーション スキームです。

「パンくず」の由来は、童話「ヘンゼルとグレーテル(wikipedia)」で子供たちが家に戻るための足跡に使用したパンくずです。

「パンくず」とはこの物語と同様に、ユーザーにウェブサイトやウェブアプリケーション上の現在位置とその起源をたどる方法を明示するものです。

「パンくず」の実例をみてみましょう。

パンくずのキャプチャ

Delicious.comの「パンくず」

階層構造になっている大量のページを持つウェブサイトの多くで「パンくず」をみつけることができます。
「パンくず」のシンプルなフォーマットは、テキストリンクが水平に配置されており、大なり記号(>)でページの構造があらわされています。

When Should You Use Breadcrumbs?

パンくずはいつ使うべきですか?

大量のページを階層構造に整理したウェブサイトで、パンくずナビゲーションを使用してください。
特に、論理的にグループ分けされた多種多様なカテゴリを持つウェブサイトには効果的です。

もし、ウェブサイトが論理的な階層を持っていない場合は、パンくずを使用すべきではありません。

パンくずを使用すべきか判断する方法の一つを紹介します。
ウェブサイトのサイトマップもしくはナビゲーションのアーキテクチャを作成し、その上でパンくずが各カテゴリ内でユーザーに有用であるか検討してみてください。

パンくずナビゲーションは追加の存在であり、プライマリー ナビゲーションにとってかわるものではないことに注意してください。
パンくずはあくまでも便利な存在で、ユーザーがどこにいるかを確認できるセカンダリー ナビゲーション スキームです。

Types of Breadcrumbs

パンくずのタイプ

パンくずは、主に3つのタイプに分けられます。

Location-based

ロケーションベースのパンくずは、ユーザーがウェブサイトのどの階層にいるかを明示します。
このタイプは、2レベル以上の階層をもつサイトに使用されます。

パンくずのキャプチャ

Site Point

Attribute-based

属性ベースのパンくずは、特定のページでそのページの属性を明示します。

パンくずのキャプチャ

Neweqq

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

使う必要がないのに設置している

パンくずのキャプチャ

Slicethepie

この例では、プライマリ、セカンダリ、パンくずの3つのナビゲーションがかなり狭い範囲に配置されていて、ユーザーを圧倒させてしまっています。
このセカンダリ ナビゲーションが表示されるページでは、その上の階層(Home, Music)はプライマリ ナビゲーションに表示されているので、パンくずの利便性はありません。

Using breadcrumb trails as primary navigation

プライマリ ナビゲーションとして配置している

パンくずのキャプチャ

mefeedia

パンくずは、上記で説明した通り、オプションのナビゲーションです。
ナビゲーションをパンくずのみにしてしまうと、他のカテゴリに横移動することが面倒で困難になってしまいます。

Using breadcrumbs when pages have multiple categories

ページのカテゴリが複数あるのに使用している

パンくずはウェブサイトの構造を一本のラインで明示します。そのため、複数の親カテゴリに属するページがある場合、パンくずは不正確になってしまい、とても紛らわしいものになってしまいます。

Breadcrumb Navigation Design Considerations

パンくずのデザインで気をつけるポイント

パンくず ナビゲーションをデザインする際に念頭におくポイントを紹介します。

hat should be used to separate link items?

各リンクの分離に使うアイテム

パンくずのキャプチャ

Google

認知度が高く、最も識別しやすいのは、「大なり記号(>)」です。
使い方は、「親カテゴリ > 子カテゴリ」になります。

分離に使うアイテムは、設置するパンくずのタイプに依存します。
例えば階層構造を持っていない場合には、「>」のような関係性を持たせてはいけません。

How big should it be?

パンくずの大きさ

極端な例ですが、パンくずがページの大部分を占めることはありません。パンくずはユーザーにとって単に便利な道具として機能すべきなので、プライマリ ナビゲーションより小さくし、目立たせないようにします。

ユーザーがページを見た瞬間、注意をひきつけすぎないようにデザインします。

Where should breadcrumbs be located?

パンくずの配置

水平型のナビショーンを設置したウェブサイトであれば、ナビゲーションの下、ページを表示した際の上半分に表示されるようにパンくずを配置します。

Breadcrumb Showcase

1. Classic Text-Based Breadcrumbs

テキストベースのクラシックなパンくず

パンくずのキャプチャ

TypePad Design Assistant

パンくずのキャプチャ

Bridge 55

2. Replacing ">" with Other Symbols

「>」以外のアイテムを使用したパンくず

パンくずのキャプチャ

Alertbox

パンくずのキャプチャ

Target

3. Beyond Simple Text Links

テキストリンクから進化したパンくず

パンくずのキャプチャ

Grooveshark

パンくずのキャプチャ

Yahoo! TV

パンくずのキャプチャ

IDEO

パンくずのキャプチャ

Apple Store

パンくずのキャプチャ

Coolspotters

パンくずのキャプチャ

Devlounge

パンくずのキャプチャ

LottaNZB

パンくずのキャプチャ

Pixelpoodle

4. Breadcrumbs for Multi-Step Processes

複数のステップを明示するパンくず

パンくずのキャプチャ

Statement Tracker

パンくずのキャプチャ

Flickr

5. Breadcrumbs with Sub-Navigation

ナビゲーション付きのパンくず

パンくずのキャプチャ

Profoto

パンくずのキャプチャ

Cranfield University

6. Interactive Breadcrumbs

インタラクティブなパンくず

パンくずのキャプチャ

Delicious

7. Experimental Examples

実験的なパンくず

パンくずのキャプチャ

Booreiland

パンくずのキャプチャ

AEN UI

sponsors

top of page

©2018 coliss