「パンくずリスト」とは、Webページ内で、ユーザーが現在、どこのページを閲覧しているのかを可視化したリストです。Webページの上部に設置されていることが多いので、見たことがある方が多いでしょう。調べものをしている時や、さかのぼって他の記事を閲覧したい時に、何気なく利用しているかもしれません。
そんなパンくずリストですが、自分でWebページを作った時に実装するのは難しそう、と感じる方もいらっしゃるのではないでしょうか。
実は、特別なプラグインを使わなくても、HTMLとCSSを活用すれば設置できます。
また、背景を着色したり、図形で囲ったり、バリエーションを豊かにすることで、個性をアピールすることも可能です。
今回は、HTMLとCSSの基礎的な知識さえあれば、簡単に利用できるデザイン例をご紹介します。
加えて、「そもそも、パンくずリストはなぜ設置したほうがいいのか？」「設置するにあたって、気を付けたほうがいいことは？」といった疑問も、併せて解決していきます。
目次
実例つき！ パンくずリストデザイン例
シンプルなデザイン例と、見た目を工夫したデザイン例をご紹介します。作りたいWebページのコンセプトやイメージに合わせて、デザインを選んでください。
シンプルなデザイン
- 「>」を使ったデザイン
- 「≫」を使ったデザイン
- 「▶」を使ったデザイン
- 「／」を使ったデザイン
- 「ー」を使ったデザイン
- 「・」を使ったデザイン
「>」を使ったデザイン
」を使ったデザイン” width=”594″ height=”51″ class=”aligncenter size-full wp-image-51061″ />
定番のデザインです。オーソドックスなため、ユーザーも親しみやすく、わかりやすいですね。
「≫」を使ったデザイン
先ほどの「>」と同じく、シンプルで親しみやすいデザインです。
「▶」を使ったデザイン
親しみやすくありながら、ちょっとひとひねり加えたい時にピッタリなデザインです。
「／」を使ったデザイン
シンプルかつ見やすいデザイン。階層ごとの区分けが伝わりやすいですね。
「ー」を使ったデザイン
ちょっと珍しいながらもシンプルなデザイン。スタイリッシュさを出したいときに便利です。
こちらも珍しさとシンプルさが両立しているデザインです。
見た目が楽しいデザイン
続いて、「せっかくなら見た目をひとひねりしたい！」という方におすすめのデザインをご紹介します。
- ボタンみたいなデザイン
- 先頭をアイコン付きにしたデザイン
- フローチャートのようなデザイン
- 背景に色をつけたデザイン
ボタンみたいなデザイン
曲線を使うことで、やわらかいイメージのあるデザイン。クリックして他のページにも遷移してもらいたいことをさりげなくアピールできます。
フローチャートのようなデザイン
流れが分かりやすく、着色もしやすいデザインです。Webページにテーマカラーがあって統一感を出したい場合や、スタイリッシュさを押し出したい時に有効です。
平行四辺形のようなデザイン
四角形を用いつつも、流れのあるデザイン。
背景に色をつけたデザイン
ページ内の配色に合わせて、パンくずリストに背景色をつけることもできます。上手く利用すれば、ページ全体のアクセントとして活かせそうです。
パンくずリストを設置するメリットは？
そもそも、「パンくずリスト」はどうして必要なのでしょうか？
設置するメリットは2つあります。
ユーザーが他のページに遷移しやすくなる
Webページを閲覧しているユーザーが、Webページ内を自由に行き来しやすくなります。ユーザーが記事を読み終え、「同じカテゴリの中にある、他の記事を読みたい」「このWebページには、他にどんなカテゴリがあるのだろう」と思ったとき、パンくずリストを辿って、他のページも訪れやすくなります。つまり、自分が作成した他のページを、さらに閲覧してもらえるチャンスにつながるのです。
加えて、パンくずリストによって、カテゴリの構造を明確化できます。
Webページ全体の構造が整っていると、ユーザーにとって「わかりやすい」「利用しやすい」サイトだと感じてもらいやすくなります。
SEO対策になる
パンくずリストでWebページ全体の構造を明確に把握できて嬉しいのは、ユーザーだけではありません。検索エンジンの情報収集ロボットである「クローラー」からしても、パンくずリストはWebページの構造を把握するのに大切な要素の一つです。
クローラーにサイトの構造や内部リンクといった情報を正しく把握してもらえば、「しっかりと構成できているサイト」と認識され、評価が上がります。そうすれば、検索結果で上位に表示される可能性が高くなり、より多くの人の目に止まりやすいWebページになることも夢ではありません。
ちなみに、パンくずリストは、Webページのどこに設置しても、SEOの観点では特に影響はありません。
ただ、多くのサイトにおいて、パンくずリストはページ上部に設置してあります。ユーザーからすると、ページ上部に設置されている方が、使いやすいと感じる人が多いでしょう。
設置する際は、Webページ全体のデザインと、ユーザーの使いやすさの両方を考慮しましょう。構造がわかりやすいと、ユーザーにも検索エンジンにも良い評価をもらえるため、Webページを多くの人に見てもらえるようブラッシュアップできます。
パンくずリストを設置する際の注意点
さっそく自分のWebページにパンくずリストを設置しよう！ と意気込む前に、以下の注意点を気にしてみましょう。
注意点
- サイト構造をシンプルに設計する
- リストのテキストにキーワードを盛り込む
- 目立たせすぎない
- スマートフォンでの表示にも配慮する
サイト構造をシンプルに設計する
パンくずリストを設置する前に、Webページの構造を階層ごとにわかりやすく並べましょう。カテゴリがわかりにくい場合や、分類の基準が不明瞭だと、ユーザーもクローラーもサイト構造を理解しにくくなってしまいます。
特に、ページ数が多いWebページの場合は、分類基準を明確にして構造設計をしましょう。
リストのテキストにキーワードを盛り込む
パンくずリストのテキストにキーワードを盛り込むと、クローラーにサイト構造を把握してもらいやすくなります。しかし、Webページの内容とパンくずリストのテキストの関連性が薄いと、「関係ないテキストを見出しに使用している」と判断されてしまい、評価が下がる危険性があります。Webページの内容を把握したうえで、パンくずリストのテキストを設定しましょう。
目立たせすぎない
パンくずリストは、あくまで補助的な要素です。あまり目立たせすぎると、かえってメインの内容がユーザーに注目されにくくなってしまいます。また、ページごとにパンくずリストのデザインが違うと、統一感がなくなり、悪目立ちしてしまいます。
Webページ全体の雰囲気に合わせて、目立ちすぎないようなデザインや配色を心がけましょう。
小さな画面での表示にも配慮する
近年、ユーザーはパソコンだけでなくスマートフォンやタブレット端末でWebページを閲覧することも多くなっています。スマートフォンやタブレット端末は、パソコンよりも画面が小さいため、カテゴリ数や記事のタイトルの長さによっては、パンくずリストが画面を占有してしまう場合があります。これでは、せっかくのメインコンテンツが目に入りにくくなり、本末転倒ですよね。
パンくずリストが長くなってしまう際には、レスポンシブ対応として、「横スクロールに設定して、1行に収まるようにする」「余白を確保しつつフォントサイズを調整する」など、小さな画面で見たときにも邪魔にならないように工夫しましょう。
サイト全体の構造や、PC以外のデバイスで見たときの見栄えにも十分注意しつつ、HTMLやCSSを駆使して、Webページ全体に統一感を出すようなデザインや配色になるよう心がけてみてください。きっと、デザイン面でも機能面でも、ワンランク上の仕上がりになるはずです。
まとめ
HTMLとCSSを使えば、簡単にパンくずリストを設置することができます。ページ上部のささやかな要素ですが、工夫すればユーザーにとって利用しやすいWebページだと思ってもらえるうえに、検索エンジンからも良い評価をもらいやすくなります。
Webページ全体のイメージや構造、ユーザー目線での使いやすさを考慮しつつ、パンくずリストを設置してみましょう。
参考サイト
パンくずリストのCSSデザイン9選（コピペOK）
![[2023年最新版] おしゃれなおすすめ CSSワークフレーム特集](https://onepoint.softcampus.co.jp/wp-content/uploads/2024/01/image2-150x150.jpg)
