パンくずリストとは?メリット、種類、設置方法などを解説

この記事のレベル

初心者 (3.0)
重要度 (3.5)
難しさ (2.5)

こんにちは、編集長のカワウソです!

「パンくずリストって何?」と悩んでいませんか?

パンくずリストは、ユーザーにとって使いやすいホームページを作るために、設置が推奨される要素の一つです。

そこで今回は、パンくずリストの基礎知識やメリットを解説します。

カワウソ

この記事は次のような人におすすめ!

  • はじめて企業ホームページを作る人
  • ホームページの利便性を高めたい人
  • パンくずリストについて詳しく知りたい人

この記事では、パンくずリストの種類を3つ紹介しています。
この記事を読めば、自社のホームページに合うパンくずリストを選べますよ。

また、記事の後半ではWordPress(ワードプレス)でホームページを作る方向けに、「パンくずリストの設置方法」も解説しているので、ぜひチェックしてみてください。

それではどうぞ!

パンくずリストとは

パンくずリストとは、ホームページを訪れたユーザーが、「現在どこのページにアクセスしているか」を知るための「道しるべ」です。

コーポレートサイトの例

ホーム > 会社情報 > 代表挨拶


ECサイトの例

ホーム > トップス > Tシャツ > 半袖


採用サイトの場合

ホーム > インタビュー > Webデザイナー

このように、パンくずリストは「>」や「/」などを用いて表示されることが多く、ほとんどの場合、ヘッダー(ページ最上部のパーツ)の下部付近に設置されます。

メモ

なかには、フッター(ページの最下部)付近に設置しているホームページもあります。

※ヘッダーやフッターについては、以下の記事で詳しく解説しています。

カワウソ

ただ、「なぜパンくずというのか」が気になりますよね。この機会に、パンくずリストの名前の由来を見てみましょう。

パンくずリストの名前の由来

パンくずリストの名前の由来は、グリム童話の「ヘンゼルとグレーテル」です。

物語には、ヘンゼルとグレーテルが家から森へ行く途中、帰り道を見失わないように、パンくずを少しずつ落としていった場面があります。

メモ

物語では、小鳥がパンくずを食べてしまったことから、結果的には道しるべにはなりませんでした。その後、ヘンゼルとグレーテルはお菓子の家(魔女の家)に迷い込んでしまいます。最終的には魔女を退治したあと、家に帰れたようです。※諸説あります。

カワウソ

ホームページのパンくずリストは、小鳥に食べられる心配はありませんね。

パンくずリストを設置する2つのメリット

ホームページにパンくずリストを設置するメリットは、主に以下の2つがあります。

それぞれ詳しく解説しますね。

ユーザーが迷子にならない

パンくずリストがあれば、ユーザーがホームページのなかで迷子になることはありません。

なぜなら、パンくずリストはユーザーに対して、以下の2つを示すためです。

パンくずリストが示すもの
  • 閲覧中のページが所属するカテゴリ(分類)
  • 閲覧中のページの上位に位置するページ

参考に、弊社『エックスサーバー』のパンくずリストをご覧ください。

エックスサーバーのパンくずリスト

これを見れば、今閲覧しているのが「よくある質問の新規契約に関するページ」だと判断できますよね。

仮にユーザーが閲覧中のページに対して、「目的のページではない」と判断しても、「よくある質問」ないしは「サポート」のテキストリンクから、ほかを探せます。

もちろん、「ホーム(トップページ)」から、まったく異なるカテゴリのページを探すこともできるでしょう。

ここで押さえておきたいポイントは、下層ページを閲覧しているユーザーのすべてが、トップページからアクセスしてくるわけではないということ。

検索ユーザーであれば、直接下層ページにたどり着くこともあるので、パンくずリストを設置しておいたほうが、ユーザーのためになるのです。

Googleのクロールをサポートする

パンくずリストは、ユーザーだけでなく、Googleのクロールをサポートする効果も期待できます。

前述のとおり、パンくずリストには、テキストリンクを設置するのが一般的。

つまり、パンくずリストを設置することで、クローラーがたどるリンクを効果的に増やせるのです。

クローラーはパンくずリストから、ホームページの全体像を理解しようとするでしょう。

なお、Googleの「検索エンジン最適化(SEO)スターター ガイド」でも、パンくずリストの設置が推奨されていますよ。

パンくずリストを使用する

パンくずリストとは、ページの上部か下部にある内部的なリンクの行です。訪問者はパンくずリストを使って、前のセクションやルートページにすばやく戻ることができます。ほとんどのパンくずリストでは、最初の左端のリンクとして最も一般的なページ(通常はルートページ)を置き、右側に向けてより具体的なセクションを並べています。パンくずリストを表示する場合は、パンくずリストの構造化データのマークアップを使用することをおすすめします。

(引用:Google 検索セントラル「検索エンジン最適化(SEO)スターター ガイド」

パンくずリストの種類3つを紹介

パンくずリストには、主に以下の3種類があります。

種類 特徴
位置型パンくずリスト ホームページの階層構造を示す
属性型パンくずリスト 閲覧中のページの属性(性質や特徴)を示す
パス型パンくずリスト ユーザーの閲覧履歴を示す

それぞれ、種類ごとに役割が異なるので、「どんなホームページにおすすめなのか」といった点に触れながら、解説しますね。

階層構造を示す「位置型パンくずリスト」

一般的に多く用いられるのが、この「位置型パンくずリスト」です。
位置型パンくずリストは、ホームページの階層構造を示します。

弊社『エックスサーバー』のホームページでも、位置型パンくずリストを採用していますよ。

再度、例を見てみましょう。
URL(階層)とパンくずリストが同じ構造ですよね。

位置型パンくずリストの例
パンくずリストとURLの関係

ホーム( / )サポート(support)よくある質問 (faq)新規契約(faq_contract_new.php)

コーポレートサイトなどの一般的なホームページを作るなら、ひとまず「位置型パンくずリスト」を選べば問題ないでしょう。

なお、ホームページの種類については、以下の記事で解説しています。

属性(性質や特徴)を示す「属性型パンくずリスト」

属性型パンくずリストの特徴は、閲覧中のページの属性(性質や特徴)を示すことです。

ECサイトや不動産情報サイトなど、検索方法が複数あるときに用いられます。

たとえば、アパレルECサイトで「Tシャツ」を探す場合、以下のように複数の方法で検索できますよね。

ECサイトにおける検索方法の例
  1. アイテムカテゴリから探す
  2. ランキングから探す
  3. ブランドから探す

(参考:ZOZOTOWN

以下は、それらに応じて、「検索結果(一覧ページ)」に表示されるパンくずリストの例です。

ECサイトにおける検索結果のパンくずリストの例
  1. ホーム >トップス > Tシャツ/カットソー > 対象商品(性別:メンズ)
  2. ホーム > Tシャツ/カットソー>人気アイテムランキング(メンズ)
  3. ホーム >ブランド名 >トップス > Tシャツ/カットソー > 対象商品(性別:メンズ)

(参考:ZOZOTOWN

どのパンくずリストも、「どのような条件で検索したのか(属性)」を読み取れますよね。

つまり、属性型パンくずリストは、検索フィルターのような役割を果たします。

さらにここで注目したいのは、その後到達する「商品詳細ページ」では、検索方法(経路)に関わらず、一般的な属性を表示することが多い点です。

さきほどの例で言うと、「アイテム」「ランキング」「ブランド」など探し方が変わっても、たどり着いた商品詳細ページのパンくずリストは、統一して以下のように表示されます。

パンくずリストの表示

(例)ホーム >ブランド名 > Tシャツ/カットソー >アイテム詳細

(参考:ZOZOTOWN

カワウソ

これは、アパレルECないしは『ZOZOTOWN』にとって、「ブランド名」と「アイテムカテゴリ」を表示するのが、一般的な属性だと考えられるためでしょう。

これらのように、パンくずリストが都度変化する点も、属性型パンくずリストの特徴です。

閲覧履歴を示す「パス型パンくずリスト」

「パス型パンくずリスト」は、現在アクセスしているページにたどり着くまでの、ユーザーの閲覧履歴を示すものです。

つまり、ユーザーごとに、パンくずリストの内容が異なります。

たとえば、以下のとおりです。

ユーザーの閲覧履歴

トップページ → カテゴリA → ページA → カテゴリB → ページB


パンくずリスト

トップページ > カテゴリA > ページA > カテゴリB > ページB

一見すると便利に感じますが、ブラウザの「戻る」や「履歴」などの機能と大きな差がないため、現在では価値を見出すのが難しいです。

カワウソ

当メディア運営のなかで、さまざまな企業のホームページに目を通していますが、パス型パンくずリストを見かけたことは、ほぼありません。

パンくずリストを設置する方法

ここからは、WordPress(ワードプレス)でホームページを作る方向けに、パンくずリストを設置する方法を解説します。

大別すると、パンくずリストを設置する方法は、以下の2つです。

パンくずリストに対応したテーマを選ぶ

これからホームページを作る方であれば、パンくずリストに対応したテーマを選ぶのが、手っ取り早いです。

また、パンくずリストに対応したテーマであれば、UI設計(ユーザーがホームページを快適に使えるようにするための設計)が行き届いている可能性が高いでしょう。

ここでは、パンくずリストに対応したテーマとして、以下の2つを紹介しますね。

パンくずリストに対応したテーマ
  • Lightning(ライトニング)
  • Snow Monkey(スノーモンキー)

Lightning(ライトニング)

Lightning(ライトニング)

▲出典:Lightning

『Lightning』は、株式会社ベクトルが提供する、企業ホームページ向けのWordPressテーマです。

Web制作スキルがない方でも、ホームページやブログが簡単に作れるように開発されています。

2023年5月時点、有効インストール数は8万件を超えていて、信頼と実績があるテーマです。

Lightning G3 クイックスタート」を利用すれば、以下の画像と同じデモサイトを編集する形で、簡単にホームページが作れますよ。

Lightning G3 クイックスタートのデモサイト

▲出典:Lightningのデモサイト

以下のように、デフォルトでパンくずリストが表示されるようになっています。

Lightningのデモサイトのパンくずリスト

▲出典:Lightningのデモサイト

なお、当メディアでは、「Lightning G3 クイックスタート」でホームページを作る方法を連載企画で解説しています。

よろしければ参考にしてみてください。

Snow Monkey(スノーモンキー)

Snow Monkey

▲出典:Snow Monkey

『Snow Monkey』は、有料のWordPressテーマです。

ホームぺージ制作に役立つブロック(パーツ)を多く取り揃えた「Snow Monky Blocks」や、ブログ機能を充実化させる「Snow Monkey Editor」などのプラグインが用意されています。

『Snow Monkey』も、デフォルトでパンくずリストが表示されるようになっています。

Snow Monkeyのデフォルトのパンくずリスト

パンくずリストの表示位置は、簡単に変更することが可能です。

パンくずリストの表示位置
  • コンテンツの上
  • コンテンツの上(コンテンツ幅に合わせる)
  • コンテンツ下
  • コンテンツの下(コンテンツ幅に合わせる)
  • なし

(参考:Snow Monkey「基本デザイン設定」

なお、『Snow Monkey』については、以下の記事でも詳しく解説しています。

メモ

弊社『エックスサーバー』の「WordPressクイックスタート」なら、レンタルサーバーの申し込みと同時に、WordPress本体はもちろん、『Lightning』や『Snow Monkey』などのテーマを自動でインストールすることが可能です。

詳しくは以下の記事で解説しています。

パンくずリストを設置できるプラグインを使う

選んだテーマに、パンくずリストを出力する機能がない場合は、プラグインを利用しましょう。

ここでは、「Breadcrumb NavXT」というプラグインを紹介します。

Breadcrumb NavXT

Breadcrumb NavXT

▲出典:wordpress.org

「Breadcrumb NavXT」は、有効インストール数90万件を超える、パンくずリスト専用のプラグインです。

「ブロックエディタ」での挿入にも対応しているため、コードを編集することなく、初心者の方でも簡単に、パンくずリストを設置できます。

注意

ホームページ全体の共通設定として、パンくずリストを特定の位置(ヘッダーの下部など)に入れる場合は、コードの編集が必要になることが多いです。テーマを構成する重要なファイルを編集する必要があるため、初心者の方は事前にバックアップを取ることをおすすめします。また、ご自身で対応が難しい場合は、専門家に相談してください。

ここでは、固定ページそれぞれに、ブロックエディタでパンくずリストを設置する方法を解説しますね。

STEP1
プラグインの検索

まず、WordPressのメインナビゲーション「プラグイン > 新規追加」をクリックしたあと、「Breadcrumb NavXT」を検索しましょう。

Breadcrumb NavXTを検索
STEP2
プラグインのインストールと有効化

今すぐインストールをクリックしたあと、有効化しましょう。

Breadcrumb NavXTをインストールして有効化
STEP3
固定ページにブロックを挿入

次に固定ページの「+」からブロックを追加します。
Bread」と検索すれば、「Breadcrumb Trail」がヒットするので、クリックしてください。

Breadcrumb Trailブロックを追加
STEP4
ページ属性をチェック

画面右側の「ページ属性」で、親ページが選択されているかチェックしましょう。
ここで親ページを設定しておかないと、パンくずリストが正しい階層構造を示しません。

ぺージ属性をチェック
STEP5
プレビューして確認

画面右上の公開をクリックしたあと、プレビューしてみましょう。

プレビューして確認

パンくずリストが表示されます。

メモ

詳細な設定は、メインナビゲーション「設定 > Breadcrumb NavXT」からできます。

まとめ

この記事では、パンくずリストの基礎知識やメリットを解説しました。

また、パンくずリストの種類や設置方法なども解説したので、参考になったのではないでしょうか。

まとめ
  • パンくずリストは、ユーザーが迷わないようにするための道しるべ
  • パンくずリストは、検索エンジンのクロールをサポートする効果も期待できる
  • 3種類のパンくずリストのうち、「位置型パンくずリスト」がスタンダード
  • WordPressでホームページを作るなら、パンくずリスト対応のテーマがおすすめ
  • WordPressなら、プラグインで簡単にパンくずリストを設置可能

パンくずリストにメリットを感じたら、ぜひこの記事を参考に設置してみてください。

それでは、ユーザーにとって使いやすいホームページになることを願っています。

以上、最後まで読んでいただき、ありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1のレンタルサーバーであり、20万社の導入実績があります。

2024年6月5日12時まで、サーバーが実質半額で利用できる『半額キャッシュバックキャンペーン』を開催中です!

今なら実質月額495円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2024年5月時点、W3Techs調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!