3つの事例から学ぶ！適切なパンくずリストの使い方

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、コピーライターのMarc Schenker氏によって投稿されました。

「パンくず」と聞くとグリム童話の『ヘンゼルとグレーテル』を連想する人が多いかもしれません。

物語の中で、ヘンゼルはパンくずを家に帰るときの道しるべとして道に置いていきました。

Webの世界でも同じように、サイト訪問者のためにより良いUXを創造するときに、パンくずリストがナビゲーションとして役立つようになっています。

ユーザーがWebサイト内で現在どの位置にいるかを確認したいときに、パンくずリストは頼もしい存在です。パンくずリストは、ユーザーのアクセスしたページを追跡して表示することができます。アクセスした順にページを表示する場合もあれば、別の配置方法でページを表示する場合もあります。

この記事では、適切なパンくずリストの使い方を紹介しています。

パンくずナビゲーションの主な3タイプ

パンくずリストには主に3つのタイプがあり、そのうち最初の2タイプは、最後のタイプよりもよく使われているでしょう。

位置型パンくずリスト

位置型パンくずリストは、サイトの階層構造において現在どの場所にいるかをユーザーに示します。サイト内でユーザーをわかりやすく導くことができるため、広く利用されているパンくずリストです。

位置型パンくずリストは、コンテンツが複数のレベルから構成され、ナビゲーションが複数のレイヤーから構成されているサイトで特によく利用されています。

ユーザーは、現在より前の、より上位のレベルの階層にあるコンテンツに、1クリックで戻ることができます。位置型パンくずリストは静的であるため、ユーザーがサイト内での現在位置を確認するのに役立ちます。

基本的な使い方の例として、1-800 Flowersのサイトを見てみましょう。

ユーザーは「私の誕生日（It’s My Birthday）」というフラワーアレンジメントのページにアクセスすると、このサイトが、トップページ（Home）、誕生日（Birthday）の順にページを辿って、「私の誕生日」のページに辿り着くことができる構造になっていると一目でわかります。

ユーザーはこれらの上位の階層にあるページにアクセスすることもできます。

属性型パンくずリスト

属性型パンくずリストは、位置型パンくずリストとは異なり、静的ではなく、ユーザーの操作によって絶えず変化し、検索フィルタのように機能します。

サイト内での現在位置を示すことはない代わりに、ページのコンテンツのメタデータを表示します。

そのため、属性型パンくずリストはユーザーが「何を買いたいか」をフィルタでカスタマイズして検索できるような、ECサイトによく使用されています。例えば、車の販売サイトなどです。

属性型パンくずリストは、すでにアクセスしたページに戻るために役立つとは限りません。

具体的な例として、Cars.comで使われているパンくずリストを見てみましょう。ユーザーが車の「メーカー」、「モデル」の検索条件からオプションを選択して検索すると、ページ左上にあるサイトのロゴのすぐ下に、パンくずリストが現れます。

検索条件の「製造年」、「メーカー」、「モデル」からユーザーが選択したオプションが表示されますが、前のページに戻ることはできません。

このように、属性型パンくずリストは、前にアクセスしたページに戻ることができる位置型パンくずリストとは異なっているという点が重要です。

パス型パンくずリスト

パス型パンくずリストは、パンくずリストの主な3つのタイプの中で最も人気のないものです。その理由は、率直に言うと、このパンくずリストはブラウザの「戻る」ボタンを再表示したものに過ぎないからです。

UXを改善する効果はなく、むしろ余分な繰り返しなのです。

履歴型のパンくずリストとも呼ばれているパス型パンくずリストは、サイトの階層構造の深いレベルにあるページにアクセスしたユーザーに対して、追加的なコンテキストや情報を与えることはできないため、役に立つとはいえません。

例として、ユーザーがすでにクリックした検索結果から商品ページにアクセスする場合などがあります。

パス型パンくずリストにはこのようなUX上の問題があるため、現在ではサイトに使われることもますます稀になっています。

パンくずリストごとに使用が適したサイトとは

パンくずリストの3つのタイプは各々どのようなサイトに使用するのが適しているのでしょうか？

まず最初に、パス型パンくずリストについては考える必要はないでしょう。少なくともUXを向上する効果はなく、最悪の場合にはユーザーが混乱する原因となる可能性さえあります。

というのもサイトの階層構造そのものを正確に表示するものではないからです。ここでは、他の2つについて考えます。

位置型パンくずリスト

位置型パンくずリストは、複数のレベルのコンテンツから成る、深い階層構造の大型サイトに適しています。大型サイトの例として、数多くのアイテムが販売・オークションのために出品されているeBayが挙げられます。

したがって、ユーザーにとって、サイトの階層構造がわかりやすくページを行き来するのに役立つため、位置型パンくずリストは、コンテンツの階層構造が深いサイトに最適です。

属性型パンくずリスト

次に、属性型パンくずリストに注目しましょう。

すでにCars.comのサイトの例で見たように、ユーザーに検索条件について数多くのカスタマイズ可能なオプションを提供しているeコマースのサイトには、属性型パンくずリストのようなナビゲーションが適しています。

ユーザーは、検索や注文のときに加えた数多くの変更を確認したいと思うことが多いため、位置型パンくずリストを使用するよりも、属性型パンくずリストによってフィルタを表示する方が効果的です。

パンくずリストのベストプラクティス

あなたがクライアントのサイトでパンくずリストのナビゲーションを設計するときには、これらの手法を実践すれば、間違いなく上手くいくでしょう。

• パンくずリストの構造の中に、重複する要素がないかどうか確認します。ユーザーを混乱させる元となるため、1つのページが複数のカテゴリまたはコンテンツの複数のレベルに重複して分類されることのないように注意します。
• パンくずリストの各リンク部分を区分するときには、記号(>) を使います。なぜなら、このスタイルが数年来の伝統であり、多くのユーザーが慣れていて使いやすいものだからです。
• パンくずリストの中の各カテゴリには、検索順位に反映したいと思うキーワードを設定します。SEO対策として有効です。

パンくずリストは、正しく実装することが重要です

デザインやUXの多くのコンセプトと同様に、正しく実装されていなければ、本来ユーザにとって非常に役立つ素晴らしい技法もかえって障害となります。

UXに何の効果ももたらさない、あるいはUXに悪影響を与えるようなパンくずリストではなくて、UXを最適化できるパンくずリストを設計するために正しい知識を身につけることが、このガイド記事の目的です。

パンくずリストは、様々なサイトで絶対的に必要となるわけではありません。

しかし、サイトのコンテンツが数多くのレイヤーから構成されている場合や、検索条件に数多くのオプションを設置した方が良いような場合には、パンくずリストを使用すれば、ユーザーにとって役立つナビゲーションを加えることが可能です。

パンくずリストのタイプ別の目的を理解することで、設計するサイトに合ったパンくずリストを実装できます。適切なパンくずリストを選択できれば、ユーザーの満足度を向上させ、集客の効果も高まるでしょう。

次にパンくずリストを実装するときには、これらのことを考えてみてください。

TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。これからプログラミングやデザインの勉強をしてみたいと思っている方は、ぜひご覧ください。

過去に独学で始めてみたけど挫折してしまった人でも、現役のエンジニアやデザイナーの元でサポートを受けながら進めることができます。その場ですぐ聞けるので、つまずくことなく習得できるはずです。