本記事は2024年11月3日に加筆修正しました。
パンくずリストとは？そのメリットと背景
パンくずリスト（Breadcrumbs）は、ユーザーがサイト内で現在の位置を簡単に把握できるようにするためのナビゲーションツールです。ページの上部または下部に表示され、クリック可能なリンクが含まれているため、訪問者はサイト内の階層を辿って、前のページやホームページにすばやく戻ることができます。具体的には、「ホーム ＞ カテゴリ ＞ サブカテゴリ ＞ 現在のページ」といった形で表示されることが多いです。
例えば、当サイトだとページの最後に次のようにパンくずリストが表示されています。
パンくずリストという名前は、グリム童話「ヘンゼルとグレーテル」に由来しています。物語の中で、主人公の兄妹が森で迷わないようにパンくずをまき、そのパンくずを辿って帰る、というエピソードに基づいています。まさに、この機能もユーザーが「道に迷わない」ようにする役割を果たしていると言えます。
パンくずリスト
パンくずリストの種類
パンくずリストにはいくつかの種類があり、サイトの目的や構造に応じて使い分けることができます。
階層型パンくずリスト
一般的なパンくずリストで、サイト内のページの階層構造に基づいて表示されます。
ブログやECサイトでよく見られる形です。
属性型パンくずリスト
商品情報サイトなどで使われ、ページのカテゴリや属性を示す際に使います。
例えば、ファッションサイトなら「ホーム ＞ メンズ ＞ シャツ ＞ カジュアルシャツ」のように表示される場合が多いです。
履歴型パンくずリスト
ユーザーが閲覧したページの履歴に基づいて表示されます。
ユーザーの行動履歴を表示するため、深い階層にいる場合でも、元のページに戻りやすくなりますが、あまり一般的ではありません。
パンくずリストがユーザー体験を向上させる理由
パンくずリストは、特に以下の3つの理由で、サイトのユーザビリティ（使いやすさ）を向上させます。
①使いやすいナビゲーション
ユーザーは、現在のページがサイト全体の中でどこに位置しているかを一目で把握できるため、他のページに簡単に移動できます。
特に階層が深い場合やページ数が多いサイトでは、ユーザーにとって便利です。
②直帰率の低下
パンくずリストを使うことで、ユーザーがサイト内を回遊しやすくなるため、直帰率（1ページだけ見て離脱する率）が低下する傾向があります。
例えば、ある製品のページに訪れたユーザーが、そのカテゴリや関連商品ページに戻るのも簡単です。
③SEO（検索エンジン最適化）への影響
パンくずリストは、サイト内の内部リンクとして機能します。
これにより、検索エンジンがサイトの構造を把握しやすくなり、SEO対策にも効果が期待できます。
検索エンジンはパンくずリストを辿ってサイト構造を理解し、結果としてページがインデックスされやすくなり、ランキング向上に寄与することもあります。
パンくずリストの設定
今回は、Wordpressのテーマ”Cocoon”で、このパンくずリストを設定する方法について説明します。
パンくずリストの設定（WordPressテーマ：Cocoon)
ダッシュボードの”Cocoon設定”の”Cocoon設定”をクリックしてください。
次に「Cocoon設定」メニューの”投稿”（次図①）のタブをクリックします。
そのまま、下の方までスクロールしていくと、”パンくずリストの設定”というブロックが見つかると思います。
まず、”パンくずリストの配置”オプションから、ブログ中のぱんくずリストを表示する位置を指定します。
デフォルトでは「メインカラムボトム」となっていますが、「メインカラムトップ」や「フッター手前」も選べます。
メインカラムトップはページ上部に、メインカラム手前は記事の始まり直前に表示されるため、ページを開いたときにすぐにパンくずリストを確認できます。
先の例でも示したように、このサイトでは記事の最後に表示されるようにこの”メインカラムボトム（デフォルト）”に設定しています（次図）。
メインカラムトップとメインカラム手前を指定すると、次の図のような位置（メインカラムトップは左図、メインカラム手前は右図）に、パンくずリストは表示されます。
フッター手前を指定すると、パンくずリストは次のような表示となります。
「パンくずリストに記事タイトルを含める」にチェックを入れると、パンくずリストの最後に現在の記事タイトルが表示されるようになります。
例えば、「ホーム ＞ カテゴリ ＞ サブカテゴリ ＞ 記事タイトル」となるため、現在のページが明確に示されます。
Cocoon設定のパネルの表示位置を選んだら、”変更をまとめて保存”をクリックします。
以上で、Cocoonを使ったぱんくずリストの設定は完了です。
補足
Cocoon以外にも多くのWordPressテーマやプラグインが、さまざまなパンくずリストのカスタマイズオプションを提供しています。
例えば、「Yoast SEO」プラグインでは、パンくずリストの構造をSEOに特化した形で生成する機能があり、コードをカスタマイズしてデザインや位置を微調整することも可能です。
また、ショートコードを使って任意の位置に挿入したり、CSSでスタイルを変更したりすることもできます。
まとめ
パンくずリストは、サイト内での位置を明確にするだけでなく、SEOやユーザビリティの向上にも効果があります。
Cocoonテーマでの設定はシンプルで、初心者でも簡単にパンくずリストを導入できます。
サイトを訪れるユーザーにとって、より使いやすく快適なナビゲーションを提供するため、ぜひ活用してみてください。
パンくずリストの導入により、ユーザーがサイト内で迷わずに目的の情報にたどり着けるようになるため、より良いユーザー体験とサイトの評価向上に役立つでしょう。
コメント