ホームページのフッターは、見られていないと感じられるかもしれませんが、実は意外と閲覧されています。
ページを一通り確認した上で、1番最後のフッターが分かりやすい設計になっていると、ユーザーは次のページに遷移してもらえるでしょう。
このように、サイト回遊率の向上をはじめ、さまざまな役割がフッターにあります。では、どのようなフッターデザインにすれば良いのでしょうか。
そこで本記事では、フッターデザインの参考事例15選と作成ポイントを紹介します。
【無料お役立ち資料】
お問い合わせを増やすWEBサイトの作成方法
資料内容
- WEBサイト作成の流れと説明
- 各フェーズでの重要ポイント
- 問い合わせを増やすための最終チェックリスト
- 制作後の運用方法
- 制作の進め方と注意すべき点
サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。
この記事の内容
フッターが担う3つの役割
まず、フッターが担う3つの役割についてみていきましょう。
- ホームページの回遊率を向上させる
- ヘッダーに掲載しきれない情報を保管する
- ユーザーの次のアクションへの選択肢を提供する
ホームページの回遊率を向上させる
ヘッダーにおける最大の役割は、ホームページの回遊率を向上させることです。
ヘッダーが分かりやすく設定されていなければ、一通りスクロールした後にそのまま離脱されかねません。ヘッダーがあることで「次はどのページを見ようか」「このページも気になる」といったように行動の道標となります。
すると、サイト内のさまざまなページが閲覧され、直帰率を減らして回遊率を高められます。
ヘッダーに掲載し切れない情報を補完する
ヘッダーには、よく見てもらいたい重要ページをメニュー化しますが、すべてのページを掲載できません。
そこで掲載できない分は、フッターに掲載されます。
例えば、詳細なサイトのカテゴリやプライバシーポリシーなどが挙げられます。
掲載するのとしないのとでは、閲覧されやすさはグッと変わるので、必ず情報を補完しましょう。
ユーザーの次のアクションへの選択肢を提供する
フッターがあることで、ユーザーが次に何をすべきか選択肢を提供できます。
そもそも、フッターがなければ閲覧し終えたユーザーが「次に何をすれば良いのか」「どのようなページがあるのか」が分かりません。
フッターの掲載をすることで、サービスを見た後に会社の事業方針や問い合わせページなど、さまざまなページへスムーズに遷移できます。
パソコンサイトのサイトマップ型フッターデザイン4選
サイトマップ型のフッターは、ページ全体の構造を一覧で見せて、ユーザーが目的のページへスムーズに移動できる設計です。
以下のような情報量の多いサイトに適しています。
- 株式会社エイブル
- ZOZOTOWN（ゾゾタウン）
- BOTANIST
- Backlog
株式会社エイブル
出典： 株式会社エイブル
株式会社エイブルのフッターは、地域別・目的別に整理されたリンク設計が特徴です。
首都圏・近畿圏といったエリアごとの分類に加え「主要都市」「海外」など細かく分けることで、ユーザーが探したい地域にすぐアクセスできる構造になっています。
「カテゴリごとに整理する」「粒度を揃える」と、大規模サイトでも使いやすいフッターに仕上がるでしょう。
ZOZOTOWN（ゾゾタウン）
出典：ZOZOTOWN
ZOZOTOWNのフッターは、ユーザーの目的に応じた多様な探し方を提供しています。
「カテゴリー」「ブランド」「ランキング」「セール」など、複数の切り口で導線が設計され、ユーザーが自分に合った方法で商品を探せる構造が特徴。関連サービスやアプリ、サポート情報も整理されて配置され、情報量が多くても迷わず回遊できるUIになっています。
BOTANIST
出典：BOTANIST
BOTANISTのフッターは、情報を厳選しシンプルに整理されたデザインです。
「商品」「特集」「店舗一覧」など必要な情報だけをカテゴリごとに分かりやすく配置し、直感的に目的のページへアクセスできます。
また「ヘアケア」「ボディーケア」など商品カテゴリも整理されているため、迷わず回遊できるUIも特徴。情報量をあえて絞ることで視認性と使いやすさを高めており、ブランドイメージを重視するサイトに適したデザインです。
Backlog
出典：Backlog
Backlogのフッターは、情報を体系的に整理したBtoB向けのサイトマップ型デザインです。
「機能」「活用シーン」「料金」「サポート」など、ユーザーの検討フェーズごとに情報が分類されており、必要な情報へスムーズにアクセスできる構造が特徴。導入事例やセミナーなどのコンテンツも整理されており、比較検討を後押しする導線設計も優れています。
パソコンサイトのCTA強化型フッターデザイン3選
CTA強化型のフッターは「問い合わせ」「資料請求」などの行動を促すことを目的としたデザインです。コンバージョンを意識したデザイン例を、3つ紹介します。
- あかつき証券株式会社
- 株式会社リガーマリンエンジニアリング
- コクヨマーケティング株式会社
あかつき証券株式会社
出典：あかつき証券株式会社
あかつき証券株式会社のフッターは「お問い合わせ」や「口座開設」などのCTAを明確に配置しつつ、企業としての信頼性を高める情報が充実しています。
電話番号や受付時間が分かりやすく表示され、ユーザーがすぐに行動できる設計。また、金融庁や各種協会への登録情報、各種方針なども網羅されており、安心感を与える構成です。
このように「行動導線」と「信頼情報」を両立させた構成は、コンバージョンにつながるフッターデザインとして参考になります。
株式会社リガーマリンエンジニアリング
株式会社リガーマリンエンジニアリングのフッターは「ONLINE SHOP」や「CONTACT」といった主要な導線を配置したCTA強化型デザインが特徴です。
ユーザーが迷わず行動できる構成で、製品情報や会社情報、SNSなども整理されており、最低限の情報で回遊性も確保されています。
コクヨマーケティング株式会社
コクヨマーケティング株式会社のフッターは、資料請求やお問い合わせといったCTAをフッター直前に強く配置しています。
「資料ダウンロード」「ご相談・お見積り」などのボタンを目立つ位置に設置し、ユーザーの行動を自然に誘導している点が特徴。その下のフッターでは、サービスや事例、コラムなどの情報を体系的に整理し、回遊性も確保されています。
パソコンサイトの予約につなげるフッターデザイン3選
予約導線に特化したフッターは、ユーザーがスムーズに予約や来店につながる設計が特徴です。参考になるデザイン例を3つ紹介します。
- 幕張ベイパーク耳鼻咽喉科
- SINAE シナエ
- グランアップル神戸三田
幕張ベイパーク耳鼻咽喉科
出典：幕張ベイパーク耳鼻咽喉科
幕張ベイパーク耳鼻咽喉科のフッターは、電話番号や受付時間、住所などの基本情報が分かりやすく整理され、ユーザーがすぐに行動できる構成です。
「Web予約」「電話予約」「LINE予約」など複数の予約手段を提示することで、ユーザーの状況に応じた選択が可能です。
このような「複数の連絡手段の配置」は、来院につながる導線を強化したフッターデザインの好例といえるでしょう。
SINAE シナエ
出典：SINAE
SINAEのフッターは、予約導線に特化したシンプルな構成が特徴です。
「電話・メール・オンライン予約・Instagram」と複数の予約手段をコンパクトにまとめており、ユーザーが迷わず行動できる設計が特徴。席数や営業時間もあわせて掲載することで、来店前に必要な情報を一度に確認できる点も優れています。
このように、必要な情報と予約手段を最短で提示したデザインは、スムーズな来店につなげる好例といえるでしょう。
グランアップル神戸三田
出典：グランアップル神戸三田
グランアップル神戸三田のフッターは、予約導線を中心に必要な情報がシンプルにまとめられています。
特徴的なのは「RESERVE」ボタンを明確に配置しつつ、電話番号や住所、チェックイン・アウト時間など来訪に必要な情報がコンパクトに整理されている点。コンセプトや施設情報への導線も用意されており、回遊性も確保されています。
スマホサイトのフッターデザイン例5選
続いて、スマホサイトのフッターデザイン例を5選紹介します。
- ChatWork
- 山下フルーツ農園
- エスケイ住宅販売株式会社
- ビズコンフォート
- サイバーステーション株式会社
ぜひスマホで確認してみてください。
Chatwork
ChatWorkは、ビジネスチャットサービスを提供する会社です。
ChatWorkのフッターは、それぞれのメニューに対してアコーディオンの形式を採用しているのが特徴的。見たい項目のプラスをタップすると下に伸びて細分化されます。
見たいページのみ詳細表示できるので、煩わしさもありません。
山下フルーツ農園
山下フルーツ農園は、フッターにGoogleマップを埋め込み、アクセス情報を提供しています。
アクセス情報をトップページ内に入れることで、ページを移動せずとも実際にその場所まで行けます。フッターに配置しているため、邪魔にも感じません。
必要な情報のみを掲載したいシンプルな作りが見られます。
エスケイ住宅販売株式会社
エスケイ住宅販売株式会社は、コンセプトを大事にしたフッターが特徴的です。
中でも、FacebookやTwitter、YouTubeなど、さまざまなSNSをボタン形式で掲載しており、チェックしやすいデザインが施されています。
堅い印象のある住宅ですが、サイト全体を見るとイメージが大きく変わるでしょう。
ビズコンフォート
ビズコンフォートでは、全国に展開するコワーキングスペースサービスを提供しています。
ビズコンフォートのフッターは、内覧の予約や問い合わせ、Web申し込みといったCVにつながる導線を目出させていること。スマホでは、中央に縦3つが並んでおり、タップしやすい設計がされています。
電話番号も記載されているので、Webだけでなく、電話からも問い合わせしやすいでしょう。
サイバーステーション株式会社
サイバーステーション株式会社は、デジタルサイネージやペーパーレスサービスを展開する企業です。
フッターに見られる特徴として、問い合わせフォームの設置がされています。フッターで問い合わせができてしまうので、ユーザーのページ移動に手間はかかりません。
LPのように、トップページや事業内容を見た上でスクロールした延長線上で問い合わせできるので、スムーズな操作ができるでしょう。
フッターデザインを作成する4つのポイント
では最後に、フッターデザインを作成する4つのポイントを紹介します。
- ホームページ全体のデザインを調和させる
- サイトマップを入れるなら階層分けをする
- スマホとパソコンそれぞれの表示を意識する
- コピーライトを正確に記載する
ホームページ全体のデザインを調和させる
まず、ホームページ全体のデザインを調和させましょう。
フッターだけ浮いた色合いだと、ユーザーは統一感がないと判断し、ごちゃついた印象を覚えます。
全体的に赤色を基調としている中で、フッターだけ黄色が緑色だと違和感を与えかねません。
サイトの全体的な色合いは統一しましょう。
サイトマップを入れるなら階層分けをする
サイトマップを入れるなら、階層分けをしてください。
階層分けをさせることで、よりユーザーにわかりやすく、見たいページにそのまま遷移できてニーズにも的確に応えられます。
階層分けで、親切なフッターを心がけましょう。
スマホとパソコンそれぞれの表示を意識する
スマホとパソコンで、フッターのデザインも最適化してください。
例えば、パソコンでは情報量を増やしてクリックしやすくする一方、スマホでは項目数を減らして各ページを大きく、かつボタンのような見せ方をすることで、指でタップしやすくなります。
このようにパソコンとスマホでは、使用感や一度に表示できる範囲が異なるため、使いやすさを意識して改良しましょう。
コピーライトを正確に記載する
コピーライトの正確な記載も重要です。
コピーライトとは、著作権マークのこと。ユーザーに対して著作権の保護をアピールできます。
本記事で取り上げた事例の中にも、コピーライトを記載した企業は多かったでしょう。著作権を保護したい内容があれば、フッターにコピーライトをつけましょう。
フッターデザインを意識したホームページ制作ならワンページ
ワンページでは、見た目の美しさだけでなく「お問い合わせ」や「資料請求」につながる導線設計まで考慮したホームページ制作を行っています。
専属チームによる戦略設計からデザイン、公開後の解析・改善まで一貫してサポートし、成果につながるサイト制作が得意です。
集客につながる、戦略的で見やすいホームページ制作をご検討の方は、ぜひご相談ください。
まとめ：魅力的なフッターデザインでユーザビリティの高いサイトを制作しよう
魅力的なフッターは、ホームページの品質や使いやすさをグッと高めます。
細部までこだわる企業として、ユーザーに対して好印象も与えられるでしょう。
特に見てもらいたいページの導線としてもフッターは役立てられるので、こだわって作成してください。
【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法
資料内容
- WEBサイト作成の流れと説明
- 各フェーズでの重要ポイント
- 問い合わせを増やすための最終チェックリスト
- 制作後の運用方法
- 制作の進め方と注意すべき点
サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。
