ブログ

フッターにも個性を。印象に残るフッターデザインアイデア

Nanako Okamachi
Designer

Webサイトの最下部にあるフッターエリア。
最近では、単にリンクや動線をまとめるだけの場所としてではなく、「サイトの最後にいかに印象を残すか」という点にこだわって作られているサイトをよく見かけます。

ユーザーが最後に目にする場所だからこそ、フッターにまで力を入れて作られていると、企業の世界観やメッセージを強く印象づけることができます。

そこで今回は、思わず記憶に残る個性的なフッターデザインをタイプ別にご紹介します!

1. ロゴを大きく配置する

ロゴを大きく配置することで企業の認知を高めながら、サイト全体を印象的に締めくくる役割を持たせることができます。
シンプルでありながら、もっともインパクトを出しやすい王道パターンでもあります。

QuatreCentQuatre

https://quatrecentquatre.com/en/

ロゴの形状そのものが主役になったフッターです。
シンプルなデザインながら、最後にロゴのシェイプが画面いっぱいに広がるアニメーションが他にない個性とインパクトを生み出しています。
サイト全体においてもユーモアのある動きが散りばめられていて、そんなサイトの最後を締めくくるユニークなアクセントになっています。

HOME/WORK VILLAGE

https://homeworkvillage.com/

情報を削ぎ落とした余白あるフッターの中で個性的なロゴが際立ちます。
トップページ全体で動線が整理されているからこそ、フッターはアクセスとコンタクトのみに絞る設計になっており、ロゴを一番最後に大きく置くことでサイト全体に締まりがでます。

LQVE

https://lqve.jp/

大胆なロゴがとにかく目を惹くデザイン。
トップページでは、フッターのロゴをクリックするとファーストビューのロゴへ戻る仕掛けもあり、ロゴが単なる装飾としてだけではなくページ全体を回遊させる役割としても機能しています。
このロゴが持つインパクトを、最大限に引き出し活用した印象的なフッターです。

Elva

https://www.helloelva.com/

デザイン自体はとてもミニマルですが、真ん中あたりから現れるロゴのリピートアニメーションが印象的。
ただロゴ大きく置くのではなく、印象的な動きをつけるだけで一気に記憶に残るようなフッターになります。
つい目で追ってしまいたくなるような視覚的効果をもたらしています。

2. 一面にビジュアルを置く

エリアを広く使い、印象的なビジュアルを最後に配置することで、企業の世界観を表現するパターン。
広いエリアを活用して、ブランドイメージとコンバージョンへの導線を自然につなぐ効果も期待できます。

sola kobe

https://www.sola-resort.com/

結婚式の風景を切り取ったスライドショーを背景全面に配置したフッターです。
ユーザーに結婚式の具体的なイメージを想起させながら、「ウエディングご相談」リンクへと自然に誘導しています。
写真一枚一枚のクオリティも高く、結婚式場の美しさを最大限に引き出しています。

Goodpatch Anywhere

https://anywhere.goodpatch.com/

ファーストビューに使用しているのイメージをそのままフッターにも再度使用。
企業の世界観を繰り返し見せることで、記憶への定着を高めています。
ファーストビューがこだわりのあるオリジナルなものだからこそできるフッターです。

つまりちゃまめ

https://tsumari-chamame.com/

縦長の豆のビジュアルを大胆に全面配置。
根っこまで写した豆全体の写真から、豊かな土壌で育った豆の美味しさが自然と伝わってきます。
また、お豆のキャラクターのイラストがスクロール追従してくる仕様もついついスクロールしたくなります。
ブランドへの親しみやすさが感じられるフッターです。

年に一度しか買えない希少な出雲そば「神在月」

https://sobahonda.com/kamiarizuki/

パッケージのイラストがこれでもかというほどダイナミックに配置されています。
パッケージイラストが商品ページリンクへの流れをしっかりと作ってくれており、世界観を伝えながらも、導線もしっかりと意識したフッターになっています。
サイト全体では写真がメインに使用されていますが、最後を一面イラストにする事で印象がガラッと変わり、よりインパクトのあるフッターになっています。

3. メッセージで想いを伝える

商品LP等で見かけるのがフッター(もしくはフッター手前)にメッセージを配置するパターンです。 
よりユーザーの感情に働きかけ、購買意欲やブランド好意度を高める事が出来ます。

YURUMARU(ゆるまる)

https://yurumaru.life/

最後にブランドメッセージを再度持ってくることで、商品のイメージを言葉で印象付けています。
商品がシンプルな分、最後に丁寧に想いを伝えるフッターになっています。

元祖大阪みたらし団子

https://ganso.osaka/

サイト全体はイラストやかわいらしい仕掛けを多用したまるで絵本のようなデザイン。
その締めくくりに、フッターでは団子の大きな写真とともにお客様への想いが添えられています。
最後にほっこりとした気持ちにさせてくれる、あたたかみのあるフッターです。

50th Anniversary|株式会社シップス

https://www.shipsltd.co.jp/pages/sp_50th_anniversary.aspx

ブランドユーザーからのコメントが大量に流れるという今までに見たことのないフッター演出。
ブランドからのメッセージではなくユーザーからのメッセージを載せることで、「愛されているブランド」であることがよりダイレクトに伝わり、信頼感とブランド価値を高めています。

4. ギミックを加える

ユニークなアニメーションやインタラクションを加えることで、自然とサイト滞在時間の向上にもつながる効果をもたらしてくれるフッターです。
つい目で追ってしまうような動きや色々と触ってみたくなるようなインタラクションが印象的なものをご紹介します。

UPVEGE

https://www.upvege.com/

ロゴの矢印を活かしたダイナミックなアニメーションと共に、色んな野菜が次々と出てくるのでついつい眺めていたくなるギミックです。
「up」のボタンをクリックすると矢印の動きと連動してファーストビューへ戻る演出も印象的。サイト全体の世界観とうまく統一感を持たせたアニメーションになっています。

NASU

https://nasu.design/

フッターに到達すると、ロゴのナスが上から降ってくるという、思わず何度もリロードしたくなるかわいらしい演出です🍆
さらにドラッグすると、ナスが画面内をぴょんぴょん飛び跳ねます。ユニークな動きを取り入れることで、ロゴの印象をしっかりと記憶に残しています。

JY-CONTENTS

https://jy-contents.com/

SNSリンクと記事のハッシュタグエリアを大胆に広く取った、メディアサイトらしい個性的なフッターです。
ホバーしたくなる大胆なXリンクのデザインや、自由に動かせるハッシュタグなど、遊び心のあるインタラクションが印象的です。

さいごに

いかがでしたでしょうか?
どれも工夫を凝らして上手く企業の個性を反映させた、記憶に残るフッターだったのではないでしょうか。

さらに多くの事例を見たい方には、海外のフッター事例を集めたサイトもおすすめです!
https://www.footer.design/

最後までご覧いただき、ありがとうございました!