1. 「ページの上の『トップ > …』って、要るんですか」

中小企業の経営者の方とお話していて、こんな言葉を聞くことがあります。

「同業のサイトを見ていたら、ページのいちばん上に小さく『トップ > 施工事例 > 外壁塗装』と出ていたんです。うちのサイトには無いんですが、あれは付けたほうがいいものなんでしょうか。正直、誰か見ているのかなと思って」

あの小さな表示は「パンくずリスト」と呼ばれています。目立たないので、無くても気づかれにくい部品です。そして実際、サイトによっては無くても困りません。

一方で、ページが多く、段が深いサイトでは、無いことで読む人が迷います。要るかどうかは、部品の良し悪しではなく、貴社のサイトの形で決まります。この記事では、その見分け方と、付けるときの気をつけ方を書きます。

この記事の役割

近い話を書いた記事がいくつかあるので、役割を先に分けておきます。

この記事で書くこと

  • パンくずリストとは何か。見た目と、押すと何が起きるか
  • 役に立つサイトと、なくてもよいサイト
  • 検索エンジンにとっての意味
  • スマートフォンでの見せ方
  • よくある失敗と、制作会社への伝え方

2. パンくずリストとは何か

名前は、童話から来ています。森で迷わないように、通った道にパンくずを落としていく話です。ホームページでも同じで、トップから、いま見ているページまでの道筋を1行で示します。

見た目は、小さな1行

多くのサイトでは、上のメニューのすぐ下、ページの題名の上に出ます。文字は本文より小さめで、項目の間を「>」や「/」で区切ります。

図:パンくずリストの1行と、それぞれの部分の意味(例は架空の塗装会社)
表示の例:トップ > 施工事例 > 外壁塗装 > 北区・木造2階建ての塗り替え
▼
① トップ

いちばん左は、サイトの入口です。押すとトップページへ戻ります。どのページでも同じ言葉にします。

▼
② 施工事例

上のメニューにある項目です。押すと、事例の一覧のページが開きます。名前はメニューと同じにします。

▼
③ 外壁塗装

一覧の中の分類です。押すと、外壁塗装の事例だけが並ぶページが開きます。分類が無いサイトでは、この段はありません。

▼
④ 北区・木造2階建ての塗り替え

いま見ているページです。ここだけは押せない文字にして、少し色を変えます。

この1行で「いまは施工事例の、外壁塗装の中の1件を見ている」と分かります

読み方は左から右です。左へ行くほど広く、右へ行くほど細かいページになります。押せるのは、いま見ているページより左の項目だけです。

押すと、1段上に戻れる

この1行の役目は2つです。1つは、いまどこにいるかを示すこと。もう1つは、1段上、2段上のページへ、1回で戻れることです。

事例を1件読んだ人が、ほかの外壁塗装の事例も見たいと思ったとき、「外壁塗装」を押せば一覧に戻れます。メニューを開いて探し直す必要がありません。

「戻る」のボタンとは、役目が違う

「ブラウザの戻るボタンがあれば十分では」と思われるかもしれません。ただ、検索から直接そのページに来た人が戻るボタンを押すと、検索結果に戻ってしまいます。

検索から来た人は、トップを通っていません。いきなり事例の1件目に着地しています。その人にとってパンくずリストは、いまどこにいて、近くにほかに何があるかを知る手がかりになります。メニューはサイト全体を示しますが、いまの位置までは教えてくれません。

メニューとフッターとの違い

上のメニューは、サイト全体の案内板です。どのページでも同じ項目が並びます。フッターも、どのページでもほぼ同じです。パンくずリストだけは、ページごとに中身が変わります。いま見ているページの位置を示すものだからです。

3. 役に立つサイトと、なくてもよいサイト

ここが判断のところです。目安は、ページの数と、段の深さです。

役に立つサイト

  • ページの数が多い ― サービスや事例のページが何十もあり、メニューだけでは全部に届かない
  • 段がある ― 「サービス」の下に種類があり、その下に詳しいページがある。3段目まであるなら、ほぼ付けたほうがよい形です
  • 商品や事例が多い ― 一覧から1件を開き、また一覧に戻って次を開く、という見られ方をする
  • お知らせやコラムを積み上げている ― 記事の1本に検索から直接着地する人が多い

共通しているのは、トップを通らずに、奥のページにいきなり着地する人がいることです。こういうサイトでは、パンくずリストが「ほかのページへの入口」として働きます。一覧と1件のページを行き来させる形なら、この1行があるだけで、読む人はずっと楽になります。

なくてもよいサイト

  • 1ページだけのサイト ― 段がないので、示す道筋もありません
  • 数ページの会社案内 ― トップ、サービス、会社概要、問い合わせ。どのページもメニューから1回で行ける形です

数ページのサイトに付けると、どのページでも「トップ > 会社概要」の1行になります。害はありませんが、メニューを見れば分かることを繰り返しているだけです。無くても、読む人は迷いません。

何ページで始めるかの考え方は ホームページは、何ページあればいいのか にまとめました。最初は数ページで始めて、事例やお知らせが増えてきたら付ける、という順番でも構いません。

迷ったときは、段の数を数える

迷ったら、紙にサイトのページを書き出して、トップから線でつないでみてください。トップから2回押さないと着かないページがあるか。あるなら付ける、なければ急がなくてよい。この目安で、たいていは決まります。

4. 検索エンジンにとっての意味

「パンくずリストを付けると検索に強くなる」と聞いたことがあるかもしれません。ここは少し慎重に書きます。

ページ同士の関係の、手がかりの1つ

検索エンジンは、サイトの中のリンクをたどって、ページ同士の関係を読み取っています。パンくずリストは、どのページの下にどのページがあるかを、同じ形で全ページに書いたリンクです。そのため、サイトの形を伝える手がかりの1つになると言われています。

ただし、付ければ順位が上がる、というものではありません。検索の順位は、ページの中身を含めた多くのことで決まります。パンくずリストは、あくまで読む人の道案内として付けるものです。

検索結果の見え方は、検索エンジン側で変わる

検索結果に、URLの代わりに「サイト名 > 施工事例 > …」のような階層が表示されることがあります。ページの裏側に、検索エンジン向けの決まった書き方で階層を書き添えておくと、その手がかりになるとされています(構造化データと呼ばれるものです)。

ただ、検索結果にどう出すかは、検索エンジン側が決めます。これまでにも、パソコンとスマートフォンで出し方が変わったり、表示が簡素になったりしてきました。書き添えておいても、そのとおりに出るとは限りません。

大事なのは、URLや見出しと食い違わないこと

検索エンジンにとっても読む人にとっても、困るのは情報が食い違っていることです。パンくずリストでは「施工事例 > 外壁塗装」なのに、URLは「/news/123」、ページの題名は「お知らせ」。これでは、どこに属するページなのかが分かりにくくなります。

URLの付け方は ホームページの各ページのURLを、どう付けるか に書きました。パンくずリストの段と、URLの段と、ページの題名がそろっていると、サイトの形が素直に伝わります。

5. スマートフォンでの見せ方

パソコンでは1行に収まるパンくずリストも、スマートフォンでは長すぎることがあります。ここで、作り方の違いが出ます。

折り返すと、本文が下に押し出される

画面の幅が狭いので、項目が多いと2行、3行と折り返します。すると、開いた最初の画面に、ページの題名や本文が入らなくなります。読みたいものの前に、小さな文字の行が積み重なる形です。

収め方は、3つのどれか

  • 横に流して1行に収める ― はみ出した部分は、指で横に動かせば見える形です。行は増えません
  • 途中の段を省く ― 「トップ > … > 外壁塗装」のように、間を詰めて見せます
  • いま見ているページの名前を省く ― すぐ下にページの題名が大きく出ているなら、同じ言葉を2回見せる必要はありません

どれが合うかは、段の数とページの名前の長さで決まります。開いた最初の画面に、題名と本文の書き出しが入っているかを確かめて選んでください。

押しやすさと、文字の大きさ

パンくずリストの文字は小さめです。そのうえ項目が近いと、指で押したときに隣の項目を押してしまいます。項目の間に、指で押し分けられる余白があるかを確かめてください。文字を小さくしすぎて読めない、色が薄すぎて見えない、というのもよくある形です。

スマートフォンで人が離れる原因は、ほかにもあります。全体の確かめ方は スマートフォンで見たときに、人が離れる7つのこと にまとめました。

下にも置く、という形

ページの上には置かず、本文を読み終えたところ(フッターの手前)に置くサイトもあります。読み終えた人が「同じ分類のほかのページ」へ移るときに使う、という考え方です。上に置くか下に置くかは、どちらが正解ということはありません。どちらかに決めて、全ページでそろえることが大事です。

6. よくある失敗

付けたのに役に立っていないパンくずリストには、いくつかの決まった形があります。

表:パンくずリストのよくある失敗と、直し方(例はすべて架空)
よくある失敗たとえば直し方
いまのページ名が長すぎるトップ > コラム > 「冬の結露を防ぐために、今日からできる5つの工夫と、業者に頼むべきタイミング」ページの題名を短くした名前を別に決める。スマートフォンでは省く
メニューと名前が違うメニューは「施工事例」、パンくずは「Works」、フッターは「実績紹介」3か所とも同じ言葉にそろえる。違うと別のページがあるように見える
押すとページが無い「サービス」を押すと、一覧のページが作られておらず「ページが見つかりません」が出る段の一覧ページを作る。作らないなら、その段を押せる形にしない
作り直しのあとに古いままページの住所を変えたのに、パンくずの中のリンクだけ古い住所を指している作り直しのあと、各段を1回ずつ押して確かめる
段がURLや中身と合っていない事例のページなのに「トップ > お知らせ > …」と出るページを置く段を決め直し、URLとそろえる
いまのページも押せるいちばん右の項目を押すと、同じページが開き直すだけいちばん右は押せない文字にして、色を変える

どれも、作った直後は気づきにくい失敗です。ページを足したとき、名前を変えたとき、作り直したときに起きやすいので、その都度、何ページかを開いて確かめてください。

ページの名前は、短い呼び名を別に持つ

いちばん多いのが、1つ目の「長すぎる」です。コラムや事例の題名は、内容が分かるように長めに付けることが多くあります。それをそのままパンくずリストに入れると、1行に収まりません。

ページの題名とは別に、パンくずリスト用の短い呼び名を決めておくと収まります。題名の付け方そのものは ホームページの「見出し」を、どう付けるか に書きました。

「トップ」と「ホーム」も、どちらかに

小さなことですが、いちばん左の言葉も揺れやすいところです。あるページでは「トップ」、別のページでは「ホーム」。英語で「HOME」になっているページもある。どれでも構わないので、1つに決めます。

7. 制作会社に頼むときの伝え方

付けると決めたら、制作会社に伝えます。「パンくずリストを付けてください」の一言でも通じますが、それだけだと、細かいところは作る人の判断になります。

伝えておくこと

  • ページの一覧と、段の分け方 ― どのページの下に、どのページがあるか。紙に書いた図で構いません
  • 各段の名前 ― メニューと同じ言葉にすること。長いページには短い呼び名を
  • 一覧ページが無い段の扱い ― その段を押せる形にするか、文字だけにするか
  • スマートフォンでの見せ方 ― 横に流すか、省くか。開いた最初の画面に題名が入ること
  • 新しいページを足したとき ― 自動で正しく付くか、毎回手で直すのか
  • 検索エンジン向けの書き添え ― ページの裏側に階層を書き添えるかどうか

伝え方の一例を置いておきます。

「事例とコラムのページにパンくずリストを付けてください。名前は上のメニューと同じにして、長い題名のページは短い呼び名を使ってください。スマートフォンでは1行に収めて、開いたときに題名が見えるようにしてほしいです。あとから事例を足したときに、自動で付くかどうかも教えてください」

公開前に、自分で確かめる

公開前に、パソコンとスマートフォンで、段のいちばん深いページを3つ開き、パンくずリストの項目を全部押してみてください。押した先が正しいページか、名前がメニューと同じか、スマートフォンで題名が見えるか。10分ほどで終わります。

Step 1(今週):ページを書き出し、段を数える

ここからはやる順番です。まず、いまのサイトのページを紙に書き出し、トップから線でつないでください。2回押さないと着かないページがあるかを数えます。

Step 2(今月):付けるなら、名前と見せ方を決めて伝える

付けると決めたら、各段の名前をメニューにそろえ、長いページの短い呼び名を決めます。上に挙げた6つを、制作会社に伝えます。

Step 3(ページを足すたび):何ページか開いて押してみる

事例やお知らせを足したとき、名前を変えたとき、作り直したときに、深いページを数ページ開いて押してみます。失敗の多くは、変えたあとに起きます。

8. 雄喜晃の伴走:ページの段を決めるところから、一緒に組みます

私たち雄喜晃がホームページを作るときは、パンくずリストを付けるかどうかを、ページの一覧と段の数を見てから決めます。数ページの会社案内なら、無理に付けることはしません。

私たちがやること

  • ページの一覧と段を、図にして決める ― どのページの下に何を置くかを、公開前に貴社と一緒に決めます
  • 名前をメニュー・URL・題名とそろえる ― 長いページには短い呼び名を決めて、1行に収まる形にします
  • スマートフォンでの見せ方を決める ― 開いた最初の画面に、題名と本文の書き出しが入るように組みます
  • 公開前に、各段を押して確かめる ― 押した先が正しいか、名前が食い違っていないかを確かめてからお渡しします

料金と条件

料金は制作費0円、月額8,800円(税別)です。6ページ構成のプランは月額13,800円(税別)です。サーバー、独自ドメイン、SSL、保守は月額に含まれます。月5回までの更新代行も同じ月額の中なので、事例やお知らせを足したときの確認や、名前の直しもこの回数の中でお受けします。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトを譲渡します。

私たちがやらないこと

  • パンくずリストで検索の順位が上がる、とはお約束しません。読む人の道案内として付けるものだからです
  • 要らないサイトに、部品として付け足すことはしません。数ページのサイトなら、メニューとフッターを整えるほうが先です
  • ページ数を多く見せるために、段を深くすることもしません。段が増えるほど、読む人は迷いやすくなります

実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月6日に設立した会社です。

「事例やお知らせが増えてきて、読む人が奥のページで迷っていそうだ」という方は、一度ご相談ください。

9. まとめ:段があるサイトの、帰り道

ページの上の「いまどこにいるか」の表示で、押さえることは5つです。

  • 役目は、いまの位置と、1段上への戻り道 ― 検索から奥のページに着いた人が、サイトの中で迷わないための手がかりになる
  • 要るかどうかは、段の数で決まる ― 2回押さないと着かないページがあるなら付ける。数ページの会社案内なら、なくてもよい
  • 検索エンジンには、手がかりの1つ ― 付ければ順位が上がるものではない。URLや題名と食い違わないことが大事
  • スマートフォンでは1行に収める ― 開いた最初の画面に、題名と本文の書き出しが入るように
  • 名前はメニューと同じに、押した先は全部確かめる ― 失敗の多くは、ページを足したり作り直したりしたあとに起きる

パンくずリストは、目立つ部品ではありません。迷った人だけが見る、帰り道の目印です。迷う人がいないサイトには要りませんし、迷う人がいるサイトでは、静かに役に立ちます。

まず、今日できること

貴社のサイトを、検索から来た人のつもりで開いてみてください。トップではなく、いちばん奥にある事例やお知らせのページを直接開きます。そこから、同じ種類のほかのページへ、迷わずに移れるか。移れなかったら、それが付けるかどうかを考える合図です。

ぜひ一度、お話を聞かせてください。貴社のサイトの段を数えるところから、ご一緒します。