Webサイトのフッターデザインの考え方【配布テンプレートあり】
フッターデザインは、UX / マーケティング / 見た目などの観点で非常に重要な要素です。
この記事では、フッターに何をどう載せればよいか考え中の方に向けて、ポイントと具体的な型を解説します。
各フッターデザインの型はFigmaのファイルでダウンロードできるようにしましたので、よろしければご活用ください。
目次
フッターデザインの前提
フッターのデザインを考える前提として、まずはフッターそのものの２つの特徴を整理します。
- 面積の制限があまり無い
- サイト全体に共通して設置される
面積の制限があまり無い
ページの上部ほどユーザーの離脱がまだ発生しておらず、それだけ多くのユーザーが残っている傾向があります。したがって、各ページに固有の重要情報ほど、上部に掲載されるべきです。
逆に言えば、ページの最下部は、そこに至るまでにそのページに固有の重要情報を語り終えているはずなので、比較的自由度が高い場所です。
このため、ページの最下部に設置されるセクションであるフッターは、エリアの面積をあまり気にせず広々と使うことができます。（なお、大きなサイトマップなどが入った分厚いフッターのことを「ファットフッター」といいます）
ただし、スマホにおいては配慮が必要です。PCであれば、ファットフッターであってもさすがにディスプレイの1スクロール分の面積を超えることはありませんが、スマホだと膨大なスクロールが必要になりかねず、その場合はユーザーにストレスを与えてしまいます。
その問題を解決するために、スマホでは、カテゴリごとにアコーディオンに格納するのがおすすめです。こうすることで、ユーザーがカテゴリを一望でき、希望するページに簡単に移動することができます。
サイト全体に共通して設置される
フッターは、ヘッダーと同じく、サイト内のほぼすべてのページに共通して設置されるパーツです。
なので、個々のページの内容にかかわらずそのサイトにおいて共通して伝えたい情報や案内を掲載するのにぴったりです。
具体的には、下記の項目が挙げられます。
- コピーライト
- プライバシーポリシーや利用規約などの管理的な情報
- SNSの情報
- 所在地
- 連絡先
- 言語切り替え
これらの情報や案内は、表示しているページの内容に関係無く常にユーザーに提示したいものなので、フッターを活用しましょう。
フッターデザインの型10選
これらの前提を踏まえて、具体的なフッターの型を解説していきます。
それぞれ、Figmaのオリジナルのデザインファイルをダウンロードできるようにしております。ワイヤーフレームやデザインの作成時にご活用ください。
CTA（スプリット）
[フッターデザイン–CTA（スプリット）]のFigmaファイルをダウンロード
CTA(Call To Action)を設置するパターンです。特に強調したいコンバージョンポイントが2つある場合はこの型が有効です。
フッター部分にCTAを設置することはコンバージョン数の最大化の観点で有効な手法です。ページ下部までスクロールするユーザーは比較的ページやサービスへのモチベーションが高い傾向があり、CTAをしっかりと提示することでコンバージョンに繋がる見込みが高いからです。
一方で、ページコンテンツをざっと流し読みしてページ下部に到達するケースも珍しくなく、そうした場合はそもそもページコンテンツに挟み込む形で置かれたCTAは実質的に視認されません。これに関してはUserTestingによるユーザービリティテストの結果が参考になります。
Each test participant would quickly scan the page content and then scroll to the bottom of each page. No matter how big or bright the call-to-action buttons were, they were being missed, and the task would not be completed.
To fix this problem, we simply added the call-to-action to the website footer. We then re-ran the usability tests using the same scenarios and tasks and they were all completed.
During the next two weeks, we saw a 50% increase in conversion rate for the goals that were added to the footer!
和訳：各テスト参加者は、ページコンテンツをざっと走り読みし、各ページの下部までスクロールしました。（訳者注：ページコンテンツの中に配置された）CTAのボタンはどれほど大きく明るくても見逃されてしまい、タスクは完了しませんでした。
この問題を解決するために、WebサイトのフッターにCTAを追加しました。次に、同じシナリオとタスクを設定してユーザビリティテストを再度行いました。
次の2週間で、コンバージョン率が50％増加しました。
B to Bではコンバージョンポイントが複数（問い合わせ・資料ダウンロード・無料トライアル・デモリクエスト・セミナー予約など）存在することが多いので、このスプリットのフォーマットがマッチすることが多いと思います。
ただし、この型をカスタマイズしてCTAを増やすことですべてのコンバージョンポイントを網羅しようとするのはおすすめしません。なぜなら、選択肢が多くなりすぎるとユーザーにかかる認知の負荷が重くなり、逆にコンバージョン率が下がるリスクがあるためです。
また、このパターンはCTAの面積が広いので、コンバージョンの内容に関係があるビジュアル要素を入れやすいです。例えば、デモリクエストでダッシュボードのモックアップを併置すれば、イメージが具体化しコンバージョンハードルを下げることができます。
CTA（ボタン）
[フッターデザイン–CTA（ボタン）]のFigmaファイルをダウンロード
CTAをボタンで置いたパターンです。クリッカブルな要素であることがスプリットよりもわかりやすいという利点があります。
サイトマップ
[フッターデザイン–サイトマップ]のFigmaファイルをダウンロード
サイトマップを表示したファットフッターです。ナビゲーション性が高く、サイト内の回遊性が上がる傾向があります。
ヘッダーは面積が限られるため、メニューを設置する際は、特に重要なリンクのみを掲載するか、格納式のUIを採用する必要があります。言い換えれば、ユーザーに提示できる選択肢の数が限定されてしまうか、ユーザーがナビゲーションにアクセスするためにクリックという追加アクションが必要になってしまいます。
それに対してフッターでは、前述の通り面積に制約がほとんどありません。なので、サイトコンテンツがカテゴリごとに整理されたナビゲーションをクリックの手間無しに一望できます。
検索ボックス
[フッターデザイン–検索ボックス]のFigmaファイルをダウンロード
サイト内検索ができるボックスを設置するパターンです。サイトマップに併置することでナビゲーション性がより高くなります。
ただし、ECサイトやコンテンツ数が膨大なサイトなど、検索ボックスをアクティブに使うことが前提になるサイトの場合は、フッターではなく追従ヘッダーやファーストビューなどより簡単に見つけられる場所に設置しましょう。
地図
[フッターデザイン–地図]のFigmaファイルをダウンロード
会社の所在地をGoogle マップなどを使い地図で表示するパターンです。
しっかりした印象が出るので、特にB to Bに合う表現です。会社の所在地が信頼性の獲得に繋がる場合は積極的に活用したい型です。
実装する際は、CSSの filter: saturate(0) opacity(任意の値); で無彩かつ適度に透過させ、その上で裏側にカラーリングした div を敷けば、ページ全体の色相に合わせた表現にすることができます。
SNS（ボタン）
[フッターデザイン–SNS（ボタン）]のFigmaファイルをダウンロード
SNSアカウントへのリンクを設置するパターンです。マーケティングにおけるSNSの重要性がますます高くなってきていますので、このようにWebサイトからの流入を図るのは効果的です。
SNS（アイコン）
[フッターデザイン–SNS（アイコン）]のFigmaファイルをダウンロード
SNSへのリンクをアイコンで設置したパターンです。複数のSNSを並べやすいので、アクティブに運用しているSNSが複数ある場合はこちらがおすすめです。ただし、クリッカブル感がやや弱いため誘導性の高さという点ではボタンに劣ります。
言語切り替え
[フッターデザイン–言語切り替え]のFigmaファイルをダウンロード
Webサイトを表示する言語を切り替えるための選択肢を置くパターンです。
あくまでも追従ヘッダーなどユーザーが見つけやすいところにも設置する前提で、言語切り替えの重要性が極めて高い場合は保険としてフッターにも置きましょう。
基本形（ロゴ・コピーライト・管理的なメニュー）
[フッターデザイン–基本形（ロゴ・コピーライト・管理的なメニュー）]のFigmaファイルをダウンロード
伝統的なフッターのデザインパターンです。前述した通りフッターは比較的広く面積を使えますが、掲載すべき情報が少なければ無理して大きくする必要はもちろんありません。
その場合は、上記のように最小限の要素のみに絞ってフッターにまとめましょう。
コピーライトのみ
[フッターデザイン–コピーライトのみ]のFigmaファイルをダウンロード
コピーライトだけに絞ったパターンです。ランディングページなど1枚完結のページではこの型が使いやすいです。
フォームページでは離脱を防ぐためにあえて他のページへのリンクは排除する手法があります。フッターは基本的には全ページ共通で同じものを使いますが、そういった意図がある場合は、仮にサイト全体でファットフッターを使用していても、フォームページにおいてのみ例外的にこちらのミニマムなフッターを設置するのが良いでしょう。
「見た目」という観点でのフッターデザイン
ここまでどちらかというと機能面に注目してフッターのデザインを解説してきました。
それに加えて、フッターには純粋にページ全体の見た目を調整する役割もあります。
ページの最下部にあたるセクションですので、重めのカラーリングを施すことで安定感を演出することができます。また、全体が薄めのカラースキームの場合は、メリハリをつけることにも繋がります。
下記の例を見ると、いずれも全体は薄め・明るめの配色ですが、フッターにのみ黒に近い色を使うことで単調な印象にならないよう工夫しています。
左, Mistretta Coiffure; 中央, SocialDog; 右, zero;
フッターデザインまとめ
フッターはページの最下部にあることから、ともすれば些細なものに捉えられがちなパーツです。しかし、この記事で解説したように、実際は様々な役割を持ち得る重要な要素です。
サイトの目的によって最適なフッターは変わってきますので、ぜひこの記事を参考に設計をしてみていただけると幸いです。
この記事の執筆者
