最近のWebサイトで見かける、パンくずリストのデザイン・配置・機能のまとめ
Post on:2017年9月1日
sponsors
Webサイトのパンくずリストとは、ユーザーにサイトの階層を伝え、そのページがどこにあるのかを正確に理解できるようユーザーエクスペリエンスを強化します。また、Googleのbreadcrumb schemaにより、その重要性は高まっています。
最近のWebサイトで採用されている、デザインも機能も素晴らしいパンくずリストの実装例を紹介します。
11 Ways Breadcrumbs Bolster UX Design
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
※サンプルに日本語版がある場合は、日本語サイトに変更しました。
wayfairのWebサイトはUX全体が素晴らしく、非常に適切なページです。パンくずリストのデザインは大きすぎず、小さすぎず、控えめに存在しているのが好ましい理由です。
パンくずリストはプロダクトとカテゴリページに使用されており、サイト全体であなたをフォローします。これにより、どんな詳細ページからでもカテゴリを1つまたは2つジャンプすることができます。
パンくずリストのバーはナビゲーションの下に配置されており、異なる背景で区切られています。そのため、控えめながら見つけるのは難しくありません。素晴らしいデザインのスタイルで、私のお気に入りの一つです。
素晴らしいUXの仕事で知られているGoogleのパンくずリストを見てみましょう。Googleはほとんどのサービスで階層化されたページを持っているので、すぐに見つかります。
サポートページでは、スキーマからアナリティクスまでのすべてに関するアドバイスを提供しており、ここではSearch Consoleツールを見てみます。各ページにはパンくずがあり、これらのパンくずはページの見出しと同様のスペースを占めているので、はっきりと表示されています。
パンくずのリンクは目立ちますが、全体のデザインにうまく溶け込んでいます。Googleはデザインにおいて非常に自然であると感じており、これはあなたがパンくずをデザインする上で常に目標にすべきです。
Microsoftのページには私が本当に好きなユニークなパンくずがあります。矢印アイコンやカテゴリリンクなど、よく使われるデザイン機能をすべて備えていますが、最後のリンクにはドロップダウンが備わっています。初めてみるタイプのパンくずですが、この機能はユーザーにとって非常に便利です。
通常は、これらのリンクにアクセスするには別のナビゲーションメニューが必要ですが、Microsoftのような巨大サイトでは非常に多くのページが存在します。構造がかなり複雑なので、パンくずリストを作成するのも簡単ではありません。サイトに複雑な階層がある場合、このテクニックは非常に価値があります。
AppleのWebサイトでは、オンラインショップやプロダクトのページにパンくずリストがあります。そして、大きな特徴はフッタの上に配置されていることです。
Appleは多くのページとリソースを持っている巨大な会社です。このパンくずはページの上部に加える価値がありますが、下部に存在することで害を与えることはありません。
デザイナーは一度、これがどのように機能するか試してみるとよいでしょう。パンくずをフッタに配置することは標準ではありませんが、視覚的なナビゲーションに役立ちます。
パンくずの多くは企業サイトやショッピングサイトで見かけますが、ブログにも参考すべきパンくずリストがあります。それがこのtechradarの例です。
パンくずはかなり小さくデザインされており、記事のカテゴリとタイトルに直接リンクされています。ブログは通常、階層が浅いため、パンくずの必要性を見つけるのは困難かもしれません。
しかし、ページに記事のカテゴリを配置する場所がない場合、これはうまく機能します。
より詳細なパンくずのデザインについては、tuts+のブログをチェックしてみてください。各記事ではページの一番上に、メインのカテゴリとセカンダリのカテゴリを含む小さなパンくずが配置されています。
このデザインはページの見出しに自然に溶け込んでいるので、私は大好きです。実装方法も注目で、これらはhnタグにパンくずと見出しを繰り返すのではなく、すべて1つの要素にまとめ、h1の見出しがパンくずの一部になるように実装されています。
この実装は検索でパンくずが表示されないように、Googleスキーマを使用しないことに注意を払ってください。しかし、CTRにはほとんど影響しないと考えると、SEOのメリットをはるかに上回るデザインとページ上のユーザビリティに価値があります。
伝統的なパンくずは、スラッシュ（/）や右矢印の括弧（>）のような記号文字を使用します。これらの記号文字は数十年にわたって使用されており、ユーザーに認知されているので問題なく機能します。
しかし、私はcoolspottersのようなパンくずの他のデザインを見たいと思っています。ここではリンク要素に矢印を組み込んだカスタムデザインのパンくずが使用されています。
通常とは異なる面白いデザインのパンくずを使用することは、ページ全体を活気づける素晴らしい方法です。
MarketWatchはニュースサイトで、ここで基本に戻ってみましょう。ここで使用されているパンくずは右向きの矢印アイコンで、かなり小さいのが特徴です。
この小さいサイズはよく機能します。パンくずを使用することは厳密には難しいことではありませんが、ページの残りの部分よりも小さく、重要ではないと感じます。
ビジターに注目して欲しいのはコンテンツなので、ブログやニュースサイトはより小さなパンくずリストでうまく機能します。パンくずをどこかに配置する際に、このデザインは素晴らしい例となります。
Amazonではプロダクトページの上部ナビゲーションの近くに、パンくずが配置されています。Amazonではカテゴリが深くなるので、パンくずが非常に役立ちます。ビジターにはそのプロダクトのカテゴリを知る手立てになり、デザイナーやWebマスターには巨大な構造を調査するために有益です。
しかし、ページを下にスクロールすると、ベストセラーリストを持つ「商品情報」または「商品詳細」が表示されます。この機能はパンくずを使用して、最も売れたプロダクトを示し、ビジターが関連カテゴリをクリックするよう促します。
Amazonのパンくずリストはかなり長いです。非常に深い階層のサイトを持っていれば、学ぶべきことが数多くあります。
大規模なショッピングサイトをデザインする際、Etsyはよいお手本です。2005年に設立されてから、10年以上絶えず進化し続けているサイトです。
Etsyではカテゴリページをチェックアウトすると、左上隅に小さなパンくずが表示されます。パンくずは検索やナビゲーションに比べると、目立つデザインではありません。しかし、パンくずに表示されるアイテムの合計数は、非常に便利な項目です。サイトの深いページを見るにつれ、各サブキャットに販売されるアイテムの合計数をリストします。
不満があるとしたら、プロダクトページにパンくずがないことです。これは見落とされていると思います、私はパンくずを加えることを希望します。
このパンくずのデザインは特に美しいものではありませんが、私の注意を引く機能があります。
パンくずの右端にあるのは、「次の記事」へのリンクです。まるでナビゲーションの一部のように感じられます。
ビジターは通常、パンくずでカテゴリ内を探したいので、この「次の記事」へのリンクは役立ちます。Linuxのソフトウェアに興味を持ったビジターは、次の記事を読みたいと思うでしょう。
sponsors
