さりげなく目立つフッターデザイン
どうすれば一番下にあるフッターを目立たせることができるのか。ありきたりになりがちなフッターを面白くできるのか。今回は似たようなフッターデザインから脱却したいときに参考にしたいレイアウト。
PR
Sponsored Link
フッターに入れるデザイン
フッターに入れる情報は大体このあたり。
- ナビ
- ロゴ
- マップ
- 会社情報
- コンタクト
- メッセージ
- ソーシャル
- コピーライト
なのでどうしても似たり寄ったりにはなるのですが、さり気なく目立ちそうなものをピックアップしました。
整列を「ずらす」と目立つ
人間の脳は違和感に反応するようになっています。整列だけなら目立たない要素も、斜めに傾けたり、グリッド線からはみ出したり、秩序を乱すことによって視線を停止させることができます。
昔何かの本で読んだのですが、天地をひっくり返した広告はクリック率が上がったそうです。
こちらは新卒採用と中途採用のボタンを意図的にずらしているので、目立ちやすくなってます。
透過と写真
ベタ塗りだときつく見えるし写真だと文字の視認性が低くなる、そんな時は透過をのせたレイヤースタイルがおすすめ。コントラスト差があるので電話番号もハッキリ視認できます。
境界線に文字を少しだけ重ねる
ありきたりな写真も斜めにトリミングすることによって、ワクワク感が出てきます。こちらは境界線に文字を少しだけ重ねてあります。ほんの少しだけレイヤーしてあるのがポイント。
マウスオーバーしたときだけ動画再生
動画を常に再生させるのに違和感がある場合は、ユーザーがアクションを起こしたときだけ動画を見せる方法もあります。こちらは、マウスオーバーしたときだけ背景動画が見えるようになってます。
手書きメッセージで冷たさを中和
寒色系ベースの配色を使うと、先進的なイメージは出せるけど冷たい感じがします。こちらは手書きのメッセージを入れることによって人間味が出ています。
最後まで読まれたときに、目立たせたい箇所に視線を停止させるよう、グラデーションを取り入れてあります。
DREAM PLUS 2018 - ドリームプラス 2018
メッセージを縦書きに
フッター付近にメッセージを見せるレイアウトも多くなってきました。和のサイトなら縦書きのメッセージを取り入れてみるとしっくりきますね。
コントラスト差を強くすると、メッセージが強く伝わります。
線画を動かす
線画とアニメーションを取り入れて、単調にならないように見せています。
斜めとグラデーション
グラデーションと動画の組み合わせ。グラデーションは、色の組み合わせや方向によって視線をコントロールすることができます。
ダイナミックなタイポグラフィ
写真を使わなくても、全画面テキストだけでダイナミックな見え方になるし、わかりやすい。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Leave a Comment