本文へジャンプ

フッターのデザインについて考察する

Posted by Mizue Yokouchi

blog_180728_img01_1.png フッターは、時にはサイトマップの役割やSEOのために、そしてストーリーの最後を締めくくるために必要な要素になります。
映画でいうとクレジレット。最後は、綺麗に締めくくりたい。しかし、企業によっては分厚くなってしまい、ごちゃごちゃしたフッターになってしまいます。

そこで影武者デザイナーの出番です。

最後は綺麗に締めくくれるのか。

ということで、フッターに焦点を当てて参考にあるサイトを紹介しつつフッターデザインについて考察していきたいと思います。

階層に強弱をつけてわかりやすく

明度やフォントサイズを変えたり、矢印やラインをつけて階層を分けます。また、CSSで縦組みができるようになり縦組みを入れてスペースの節約もできます。

福岡市公式シティガイドYOKANAVI blog_180728_img02.png 縦組みを入れてスペースを節約

最後まで世界観を演出する

写真を背景にしたりイラストで、ブランドイメージを訴求しています。
カッチリしたサイト(法人向け)では写真を背景に使っていることが多く、イラストを取り入れたフッターはあまり見かけなくなりました。

神戸女子大学 blog_180728_img03.png 透明感のある写真が空気感や奥行きを演出しています

農園 星ノ環 blog_180728_img04.png 野菜のイラストが親近感やワクワクした気持ちにさせてブランドのもつイメージが伝わります

島の病院おおたに blog_180728_img05.png 島にある病院のイメージが伝わり奥行き感があります

コンバージョンのため、お問い合わせを強調

ナビゲーションよりも上に背景色やラインで区切りをつけてお問い合わせボタンを配置しています。

studio STORY blog_180728_img06.png 他のリンクボタンよりも大きくして強調していることが多いです。

スマホサイトの場合は最小限にする

スマホサイトの場合は、
・ロゴ
・お問い合わせや個人情報保護、サイトマップといったエクストラナビゲーション
・コピーライト
・SNSアイコン

といった、できるだけ最小限の情報を載せる傾向がみられます。グローバルナビゲーションはヘッダーにまとめられています。

小さい画面のスマホサイトは、見やすさを考えるとできるだけ情報を少なめにする必要があると考えます。そのため、フッターは最小限の情報のみを掲載していることが多いのだと思います。

まとめ

コピーライトは右側かセンター配置、ロゴは左側かセンター配置が多いのは視線誘導を考えると自然なことだと思いました。また、コピーライトのエリアに背景色をつけて締めのアクセントとしている場合が多かったです。

CSSで縦組みができるようになり、縦組みを使用してスペースを有効活用できるようになっていますが、横組みの文化があるWEBは左から右へ視線が流れていきますので、縦組みを取り入れる時には注意が必要です。

最近ではレスポンシブのサイトが多いため、情報の優劣が必要になりフッターはシンプルなデザインになっています。
また、フォントサイズはヘッダーと同じまたは1、2pxくらい小さくするサイトが多かったです。
分厚いフッターほど高さがでてしまいますので、余白やフォントでの調整が必要になります。

最後になりますが、見やすさや引き算を考えたフッターのデザインを心がけていきたいと思います。

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
すべてのコンテンツ/プラットフォームを、ひとつのコンテンツ管理システムで。
Share this on
Facebook Twitter Google+