MD-Blog_Web Creative

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

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

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

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

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

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

• 福岡市公式シティガイド YOKANAVI

縦組みを入れてスペースを節約

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

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

• 神戸女子大学

透明感のある写真が空気感や奥行きを演出しています

• 農園 星ノ環

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

• 島の病院おおたに

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

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

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

• studio STORY

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

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

スマホサイトの場合は、

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

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

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

まとめ

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

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

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

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