BLOGフッターデザインを極めたい!参考になる事例をまとめてみた

ヤマダ
  1. HOME
  2. ブログ
  3. デザイン
  4. フッターデザインを極めたい!参考になる事例をまとめてみた

はじめまして。Webデザイナーのヤマダです。

静岡生まれの25歳、現在は神戸に住んでいます。
普段はとある企業にて、サイトのデザインやコーディングをやっています。
どうぞよろしくお願いいたします。

さて、「!DOCTYPE」第1回目の記事ですが、サイトデザインで苦労しがちな『フッター』のデザインについて事例を集めてきましたので、ご紹介したいと思います。

云わばサイトの「締め」となるフッター。これがイケてるかそうでないかで、サイト全体のクオリティに支障が出てくる、大切なものですよね。

僕個人もまだまだ引き出しが足りないなと考えていたので、今回の記事では同じような悩みを抱えた人のお役に立てればよいなと考えてます。

目次

  1. フッターの役割について
  2. 基本はfont-size小さめ、メインorサブカラーでまとめる
  3. お問い合わせ・資料請求など、コンバージョン要素を配置する
  4. エントリーや募集要項への導線を引く
  5. あしらいを施す・アニメーションを設置する
  6. 要素を簡略化する
  7. SPで表示形式を変える
  8. おわりに

フッターの役割について

そもそも、サイトにおいてフッターはどんな機能を果たしているのでしょうか。

  • ナビゲーション・サイトマップ
  • 関連サイトなどへの導線設置
  • コンバージョン(お問い合わせ・エントリーフォーム)
  • デザイン・あしらいとして

参考記事

https://web-kanji.com/posts/footer-design

もちろん、サイトによって目的は異なりますので、必要な機能は変わってきます。

フッターは、「デザインとしての」・「ビジネスとしての」、2つのコンセプトを加味して構築しなければいけません。

ではいよいよ、フッターデザインの具体的な手法について、紹介していきます。

基本はfont-size小さめ、メインorサブカラーでまとめる

参考:『株式会社GIG』様

https://giginc.co.jp/

オーソドックスだろうなと感じたのはこのパターンでした。

font-sizeは本文より小さめだとまとまりが良く、だいたい「12~13px」くらいで調整されているサイトが目立った印象です。

また、下層ページの階層ごとにフォントの色やサイズを変えて、情報の違いを可視化している様子が見て取れました。

メニューだけでなく、copyright表記や各種SNSアイコン、関連会社情報、ページトップへのスムーススクロールボタンなども、フッター配置に適していると思います。

お問い合わせ・資料請求など、コンバージョン要素を配置する

参考:『PLATFORM』様

https://pltfrm.jp/

LPやプロモーションサイト、BtoB企業などでは、サイトを通じてユーザーに商品を買ってもらったり、集客することが目的です。

よって、「お問い合わせ」や「資料ダウンロード」などのリンク・ボタンを配置するために、フッターを活用するケースは多いです。

また、上記の「PLATFORM」様のサイトでは、コンバージョンボタンにカーソルを合わせると、ユニークなエフェクトでユーザーの視線を集めます。

さりげないですが、こういった細部にもこだわりたいですよね。

エントリーや募集要項への導線を引く

参考:『任意保険のアクサダイレクト』様 – 採用情報ページ

https://www.axa-direct.co.jp/company/recruitment/

採用サイトでよく見られる手法です。こちらもある種テンプレ的ではありますが、「クロージング」として重要な働きをします。

求職者は、気になる会社ほど、「福利厚生の一覧」や「社員のインタビュー」など、サイト内をくまなく移動し、情報収集するはずです。

あるページをスクロールで読み終わり情報に満足したタイミングで、エントリーフォームが在れば、自然とカーソルを合わせてしまうもの。

このように、フッターのデザインはユーザー心理やサイトの目的に合わせて、単なる情報の羅列として終わらせないようにする必要があると思います。

あしらいを施す・アニメーションを設置する

「このサイト、世界観がいいな。」と感じるサイトには、フッターのデザインへのこだわりを気づかされることがあります。

参考:『たかしま農園』様

https://www.takashima-nouen.com/

「たかしま農園」様のサイトでは、可愛らしいトマトのイラストが散りばめられ、ポップで賑やかな雰囲気を作り出しています。

参考:『THEO「テオ」』様

https://theo.blue/

「THEO」様のフッターでは、イラストで描かれた人々が画面左から右へ歩く様子をCSSアニメーションで表現しています。サイトを訪れたユーザーに、強い印象を与えることができるでしょう。

たとえフッターでも、サービスの特徴やコンセプトに合わせた、ちょっとしたデザインの一工夫を加えることで、サイト全体のクオリティにとても効果的だと思います。

あくまでフッターはフッターだと思う。

とはいっても、個人的には「無理してでも」フッターに特別なことをする必要はないかなと思ったりします。

なんというか、こういった事例って、フッターで「奇をてらった」というよりも、それ以前の、全体のデザインコンセプトに寄せた結果、「こうなった」って感じがするので。

手段を目的としないよう、日々心がけていきたいです。

要素を簡略化する

参考:『できるーと』様

https://dekiroute.com/

参考:『ROOV様』

https://roov.jp/

ナビゲーション(サイトマップ)を配置するのが、フッターのセオリーではありますが、いっそ簡略化するのも一つの手だと思います。

「できるーと」様、「ROOV」様のサイトでは、主要なナビゲーションは全てドロワー・ヘッダーメニュー内とし、利用規約などは、フッターに配置しています。

公共系などのサイトでは厳しいかもしれませんが、スタイリッシュに魅せたい場面であれば、選択肢のひとつに入るかと思います。

SPで表示形式を変える

SP時のフッターデザインで気をつけたい点は、要素が多すぎるとユーザーに煩雑な印象を与えてしまうことです。

なのでその場合、画面幅に合わせて表示の切り替えを施す必要があります。

参考:『株式会社マネーフォワード』様

https://corp.moneyforward.com/

「株式会社マネーフォワード」様のサイトでは、PC時では、ナビゲーションが一覧表示されているのに対して、SPではトグルで収納されるようになっています。

おわりに

たとえフッターでも、多種多様なデザインの手法があることを再認識できました。

「デザインは細部に宿る」。何も考えずにデザインを組むのではなく、確固たる意図をもって取り組んでいきたいです。