Webサイトのフッター、どのくらい意識してデザインしていますか？
ついデザインが後回しになりがちなWebサイトのフッターですが、デザイン次第でサイトの印象を大きく左右する重要なエリアです。ユーザーがサイトをスクロールし終えたとき、フッターの印象が良ければ、ブランドの信頼度や使いやすさが向上し、回遊率の向上にもつながります。
今回は、そんなフッターデザインを5つのタイプに分類し、それぞれの特徴を紹介します。美しく、使いやすいフッターを作るためのポイントを押さえて、あなたのサイトをワンランク上のデザインに仕上げましょう！
シンプル＆ミニマルタイプ
必要最低限の情報だけを配置し、余白を活かした洗練されたデザインが特徴です。主にモノクロや単色を用いることが多く、視認性を損なわずにブランドの高級感や信頼性を演出できます。
参考：NEWPEACE｜未来を左右する経営課題にクリエイティビティで解を出す
こちらの参考サイトは、全体として動きも色も賑やかなサイトですが、フッターだけはアクセントカラーである黄色と黒の単色でまとめられています。
フォントサイズを大きめに設定した会社名もインパクトが強く、シンプルゆえに印象的なフッターとなっています。
グリッドレイアウトタイプ
複数のカラムを使って情報を整理し、ナビゲーションの役割を強化したフッターです。企業情報、サービスメニュー、SNSリンク、利用規約などをカテゴリごとに整理し、分かりやすく配置することで、ユーザーが求める情報にすぐアクセスできるようになります。
参考：株式会社マツザキ | 酒・食・人々を通じ、豊かな未来を創造する企業
こちらの参考サイトは、ロゴとキャッチコピー、サイトマップと利用規約をそれぞれのカラムに分けることで、情報が整理され、視認性の高いレイアウトになっています。
フッター上のコンテンツ欄にはバナーも設置されており、必要な情報へスムーズに回遊しやすい構成になっています。
参考：STUDY IN SHIZUOKA
こちらの参考サイトも、フッターが上下2段に分かれており、上段にはSNSコンテンツを2カラムに分割して配置し、下段にサイトマップを配置することで、イラストに情報が埋もれないように設計されています。
ビジュアル（リッチコンテンツ）タイプ
フッターにもブランドの個性を反映させ、視覚的なインパクトを持たせたデザインです。背景に大きな画像を使用したり、ブランドカラーを効果的に取り入れることで、サイト全体のデザインに統一感を持たせることができます。また、イラストやアニメーションを加えることで、よりクリエイティブな雰囲気を演出できます。
参考：TOSACO | おいしい高知の、おいしいビール。
こちらの参考サイトでは、フッターの下から高知の雄大な自然の写真がブラックインし、高知県のご当地クラフトビールらしい地域の魅力を印象的に演出しています。
参考：グランアップル神戸三田｜兵庫でグランピング・日帰り・バーベキュー
こちらの参考サイトでは、「グランアップル」という施設名にちなみ、フッターに大きなリンゴのイラストとスライドする文字を配置することで、施設名の印象を強めています。また、リンゴのモチーフをフッターのみに用いることで、より際立ち、強い印象を残します。
ダークモードタイプ
黒やダークグレーを基調としたデザインで、スタイリッシュでモダンな印象を与えるフッターです。シンプルなレイアウトながらも、明るいアクセントカラーやアイコンを効果的に取り入れることで、視認性を確保しつつ、洗練された雰囲気を演出します。
参考：株式会社SmartHR｜労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。
こちらの参考サイトでは、ボタンや重要な要素に黒を用いながら、ヘッダーを真っ黒に塗りつぶすことで、明確なコントラストを生み出し、スタイリッシュな印象を演出しています。また、SNSアイコンには、それぞれのブランドカラーを採用し、黒背景の上でも視認性が高く、識別しやすいデザインになっています。
インタラクティブ（アニメーション）タイプ
ユーザーのアクションに応じて変化する、インタラクティブな要素を取り入れたフッターです。ホバーエフェクトでアイコンが変化したり、スクロールに応じてアニメーションが再生されたりすることで、サイトにより魅力的な印象を与えます。
参考：SOU GROUP
こちらの参考サイトでは、最下部までスクロールすると、サイト内で登場したキャラクターたちがフッターの下からバウンドしながら現れます。サイト全体が賑やかで楽しい雰囲気の中、キャラクターたちが最後に順番に登場する様子は、まるでショーのフィナーレで挨拶しているようで、とても愛らしい演出になっています。
まとめ
いかがでしたか？
多くの人は「フッターはただの補足情報」と考えがちですが、実は、サイト全体のデザインを締めくくる重要な役割を担っています。
近年では、ミニマルデザインやダークモード、インタラクティブなアニメーションを取り入れたおしゃれなフッターが増えています。機能性とデザイン性を兼ね備えた、美しく使いやすいフッターを目指し、ぜひ参考にしてみてください！
