さりげなく目立つフッターデザイン

• 作成：2017/11/20
• 更新：2017/11/20
• Webデザイン >

どうすれば一番下にあるフッターを目立たせることができるのか。ありきたりになりがちなフッターを面白くできるのか。今回は似たようなフッターデザインから脱却したいときに参考にしたいレイアウト。

エンジニア速報は Twitter の@commteで配信しています。

フッターに入れるデザイン

フッターに入れる情報は大体このあたり。

• ナビ
• ロゴ
• マップ
• 会社情報
• コンタクト
• メッセージ
• ソーシャル
• コピーライト

なのでどうしても似たり寄ったりにはなるのですが、さり気なく目立ちそうなものをピックアップしました。

整列を「ずらす」と目立つ

人間の脳は違和感に反応するようになっています。整列だけなら目立たない要素も、斜めに傾けたり、グリッド線からはみ出したり、秩序を乱すことによって視線を停止させることができます。

昔何かの本で読んだのですが、天地をひっくり返した広告はクリック率が上がったそうです。

こちらは新卒採用と中途採用のボタンを意図的にずらしているので、目立ちやすくなってます。

採用情報 | マリモグループ

透過と写真

ベタ塗りだときつく見えるし写真だと文字の視認性が低くなる、そんな時は透過をのせたレイヤースタイルがおすすめ。コントラスト差があるので電話番号もハッキリ視認できます。

小塚メタル株式会社

株式会社マイクロアド

境界線に文字を少しだけ重ねる

ありきたりな写真も斜めにトリミングすることによって、ワクワク感が出てきます。こちらは境界線に文字を少しだけ重ねてあります。ほんの少しだけレイヤーしてあるのがポイント。

ORIENS

マウスオーバーしたときだけ動画再生

動画を常に再生させるのに違和感がある場合は、ユーザーがアクションを起こしたときだけ動画を見せる方法もあります。こちらは、マウスオーバーしたときだけ背景動画が見えるようになってます。

株式会社サイバーエージェント

手書きメッセージで冷たさを中和

寒色系ベースの配色を使うと、先進的なイメージは出せるけど冷たい感じがします。こちらは手書きのメッセージを入れることによって人間味が出ています。

最後まで読まれたときに、目立たせたい箇所に視線を停止させるよう、グラデーションを取り入れてあります。

DREAM PLUS 2018 - ドリームプラス 2018

メッセージを縦書きに

フッター付近にメッセージを見せるレイアウトも多くなってきました。和のサイトなら縦書きのメッセージを取り入れてみるとしっくりきますね。

恵房　焚久味

コントラスト差を強くすると、メッセージが強く伝わります。

アソビュー株式会社

線画を動かす

線画とアニメーションを取り入れて、単調にならないように見せています。

株式会社コトノバ

斜めとグラデーション

グラデーションと動画の組み合わせ。グラデーションは、色の組み合わせや方向によって視線をコントロールすることができます。

前田製作所 採用情報

ダイナミックなタイポグラフィ

写真を使わなくても、全画面テキストだけでダイナミックな見え方になるし、わかりやすい。

Jacob Sutton