1. 「ページの上の『トップ > …』って、要るんですか」
中小企業の経営者の方とお話していて、こんな言葉を聞くことがあります。
「同業のサイトを見ていたら、ページのいちばん上に小さく『トップ > 施工事例 > 外壁塗装』と出ていたんです。うちのサイトには無いんですが、あれは付けたほうがいいものなんでしょうか。正直、誰か見ているのかなと思って」
あの小さな表示は「パンくずリスト」と呼ばれています。目立たないので、無くても気づかれにくい部品です。そして実際、サイトによっては無くても困りません。
一方で、ページが多く、段が深いサイトでは、無いことで読む人が迷います。要るかどうかは、部品の良し悪しではなく、貴社のサイトの形で決まります。この記事では、その見分け方と、付けるときの気をつけ方を書きます。
この記事の役割
近い話を書いた記事がいくつかあるので、役割を先に分けておきます。
- 上に並ぶメニュー ― 何をどの順で並べるかは ホームページのメニューに、何をどの順で並べるか に書きました
- いちばん下のフッター ― 連絡先やページの一覧の置き方は ホームページのいちばん下(フッター)に、何を置くか に書きました
- この記事 ― メニューとフッターの間で、いま見ているページが、サイトのどこにあるかを示す表示だけを扱います
この記事で書くこと
- パンくずリストとは何か。見た目と、押すと何が起きるか
- 役に立つサイトと、なくてもよいサイト
- 検索エンジンにとっての意味
- スマートフォンでの見せ方
- よくある失敗と、制作会社への伝え方
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行に収める ― 開いた最初の画面に、題名と本文の書き出しが入るように
- 名前はメニューと同じに、押した先は全部確かめる ― 失敗の多くは、ページを足したり作り直したりしたあとに起きる
パンくずリストは、目立つ部品ではありません。迷った人だけが見る、帰り道の目印です。迷う人がいないサイトには要りませんし、迷う人がいるサイトでは、静かに役に立ちます。
まず、今日できること
貴社のサイトを、検索から来た人のつもりで開いてみてください。トップではなく、いちばん奥にある事例やお知らせのページを直接開きます。そこから、同じ種類のほかのページへ、迷わずに移れるか。移れなかったら、それが付けるかどうかを考える合図です。
ぜひ一度、お話を聞かせてください。貴社のサイトの段を数えるところから、ご一緒します。