💁‍♂️概要

皆さんも一度は目にしたことがある『パンくずリスト』ですが、パンくずリストは最古参のUIでありながら、長年繰り返し使われるユーザーにとって非常に頼れる道しるべとなります。サイト内迷子の解決にはパンくずリストを検討してみてはいかがでしょうか。

📄目次

パンくずリストとは、ユーザーが閲覧しているページがWebサイト内のどこに位置しているかを階層で示したものです。

よくある例としてはECサイトなどで以下のようにページ上部に表示されています。

🍞

トップ > 衣料品 > シャツ

このようにパンくずリストは小さく目立たないので、様々なデバイスでWebサイトを閲覧するようになった現代でもサイトやアプリの間に違和感なく設置することができます。

ちなみに、パンくずリストという名前は童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていったというエピソードに由来します。

パンくずリストには3つの種類が存在します。

そのページがWebサイトの階層構造のどこに位置しているかを示すもので、静的でたどり着くまでの経路が違っても、同じページであればリストも同一になります。一般的に広く使われているパンくずリストは位置型パンくずリストになります。

そのページがどんな属性で分類されているかを示すもので、動的でユーザーの操作によってリストも変化します。ECサイトなどでよく見かけます。

そのページにどういう経路でたどり着いたのかを示すもので、動的で同じページでもたどり着くまでの経路が異なればリストも異なります。履歴型のパンくずリストとも呼ばれますが、最近のWebサイトではあまり見かけません。

パンくずリストによってユーザーはアプリやサイト内で現在位置を一目で確認することができ、ひとつ前の階層に戻ることも容易にできます。また、現在位置に来るまでの経緯が表示されることでユーザーの中でアプリやサイト内の構造について正確なメンタルモデルが形成されます。

また、パンくずリストはインターネット初期から存在する最古参のUIのひとつです。つまりは多くのユーザーにとって慣れ親しんだ機能となっており、テスト段階や実用段階でもユーザーに誤用される心配は杞憂でしょう。

Google公式のウェブデベロッパー向けSEOガイドもパンくずリストの仕様を推奨しています。パンくずリストはクローラーにとっても親切な機能であり、サイトの全体像が把握しやすくなり、効率的にクローリングをしてくれます。

パンくずリストによるナビゲーションの実装で、アプリやサイト内の移動も、構造の把握も簡単になります。

近年ではシングルページアプリケーションが増えてきたことで「パンくずリストはもう古い」という意見もありますが、ユーザーが慣れ親しんだUIこそがユーザビリティの改善につながり、ページ内迷子にさせずストレスのないUXを実現できるのではないでしょうか。