ブログBLOG

【最新版】手抜き厳禁！パンくずリスト・フッターのデザイン参考まとめ

更新日：2022/01/12

たかがパンくずリスト。たかがフッター。
そう思ってはいませんか？
どちらもユーザビリティを考慮して見やすくデザインする必要のある、
シンプルだからこそ、プロのセンスが問われるパーツデザインなのです。

パンくずリストってそもそもどこに設置したらいいの…？
フッターも手抜きしたくないけど、メインコンテンツのデザインに時間を掛けたいし…

そんなお悩みを持つデザイナーの方々のために
それぞれ参考になりそうなデザインをタイプごとにまとめました。

1 パンくずリストとは…？
2 パンくずリストのデザイン例
3 フッターとは…？
4 フッターのデザイン例
5 まとめ

パンくずリストとは…？

Webページのサイト内の位置をナビゲーションしてくれるツリー構造のリストのことです。
かっこよく（？）トピックパスとも呼びます。

主にページ上部または下部に配置され、
童話「ヘンゼルとグレーテル」の二人が撒いたパンくずのように
ユーザーがサイト内で迷子にならないようサポート。
また検索エンジンのクローリングに有利になりSEO対策になるとも言われています。

参考：パンくずリストとは？設置メリットやSEO効果、スマホ表示について解説

パンくずリストのデザイン例

Webページ上部にパンくずリストを配置したサイト

Panasonic Design

ページ上部に大胆な余白を取りメインのキャッチコピーと写真をどーん！と魅せるこちらのサイト。
ひっそり、邪魔しないように、でもここに何もないとぽっかり穴が開いたように感じませんか？
様々なサイトを観察すると、パンくずリストはなんとも絶妙な場所に設置されていることがわかってきます。

Webページ下部にパンくずリストを配置したサイト

アドビ

下層ページが多く複雑な階層のWebサイトでは、フッターがサイトマップ的な役割をしているので、
フッターにパンくずリストを配置したほうが、よりユーザーにわかりやすいものになります。

下層ページ共通フッターパーツの上にパンくずリストを設置したサイト

AMANO パーキング事業サイト

下層ページ共通のお問合せエリアがある場合はその上にページトップボタンとセットで配置されていることが多いです。
デザインもスッキリまとまってユーザーの使い勝手も良い筆者おすすめのタイプです。

パンくずリストを設置しない例

ランディングページ

脳にいいアプリ

コンバージョンボタン（CTA）によりお問い合わせ・商品購入につなげるため他のページに遷移するリンクは極力設置しません。
1ページ完結型なのでそもそもパンくずリストは必要ないですね。

ブランドサイト

コカ･コーラ（Coca-Cola）

ブランドのイメージを認知してもらうためのサイトなので、LPとはちょっと違う役割。
ビジュアル重視のサイトが多いのでパンくずリストは設置しない傾向です。

スマホサイトのパンくずリストデザイン例

スマホサイトの場合、パンくずリストのデザインはどうしたらいいの？
そんなお悩みに、タイプごとにまとめました。

スマホサイトでは非表示？

スマホサイトだと邪魔だからって非表示にしちゃうタイプ。
Googleのモバイルファーストインデックス（PCではなくスマホサイトを基準に評価を行う方針）の観点から、あまり推奨はされません。

参考：2021年3月末に強制移行！モバイルファーストインデックスとは？

ノーマルタイプ

株式会社GA technologies -ジーエーテクノロジーズ

PCのデザインのまま。大多数がこちらです。成り行きで改行されています。
テキストカラーを薄いグレーにして、閲覧ページがわかりやすいのがいいですね。

ノーマル・横スライドタイプ

株式会社シンシエイト

PCのデザインのままですが、長いタイトルの場合左右にスライドできるようになっているタイプ。
また、こちらのブログ記事ではスマホサイトで横スクロールで見られるようにするCSSも紹介されています。

ノーマル・アイコン付きタイプ

日本郵便

ピンのアイコンを一緒に配置して今閲覧しているページがすぐわかるのが◎。

五角形タイプ

価格.com

モバイルフレンドリー重視なのがこの右向き矢印がボタンに変形した五角形タイプ。
とにかく見やすく、タップしやすい。

スマホサイトのパンくずリストデザインはテキストサイズやタップのしやすさが大事になってきます。
誤って隣のリンクをタップしないように、余白をきちんと取るのを忘れずに。

フッターとは…？

簡単に言うと、Webページ下部にサイトの情報を掲載する領域。
サイトマップを配置しているサイトが多いです。
また、ページを閲覧し終えたユーザーが次のアクション（問い合わせをしたい・ほかの製品のページが見たい）を起こすための重要な役割を持っています。

サイトの目的によってフッターにサイトマップが必要かどうかは分かれますが
フッターの情報を整理してデザインする必要があり、デザイナーはここをおろそかにしてはいけません。

フッターのデザイン例

カッチリデザインのコーポレートサイトタイプ

ナカ工業株式会社｜建材製品の開発・製造・販売・施工

取り扱う製品やサービスが多数ある場合、フッターにすべて記載はできないので、
製品・サービスの一覧ページへのリンクのみ配置し、
「〇〇から探す」など、閲覧者がすぐに目的にたどり着けるような表記にしています。

株式会社保安サプライ

矢印アイコンやラインアイコンを駆使してとにかく階層がわかりやすく、
閲覧者が次のアクションを起こしやすいフッターです。

メガフッタータイプ

Oculus | VR用ヘッドセット、ゲーム、機器

最近よく見かける、画面いっぱい使った贅沢なフッター。
主要メニューのテキストサイズもメガなところにトレンドを感じます。

学校法人安達文化学園専門学校ビジョナリーアーツ | 製菓カフェペット専門学校

こちらもメガフッタータイプ。
コンバージョンボタンの配置も無駄なく、情報が多いのにスッキリとしたフッターです。

「フルスクリーンナビゲーション」採用でフリーフッタータイプ

国産産業用ドローンのACSL | 株式会社ＡＣＳＬ

メガフッターと対になる、フルスクリーンナビゲーション。
「メガメニュー」とはちょっと違うので、混乱してしまいますが…
「フルスクリーンナビゲーション」とは、メニューボタンを押すと現れる画面いっぱいのメニューのことです。
スマホサイトだけでなく、若者向けのPCサイトデザインで採用されています。
このメニューのおかげで、フッターにサイトマップを配置しなくてもよくなりました。
思いっきりコンバージョンボタンを設置できますね。