「footer」デザイン考察

「footer」への意識が低かった私

少し前にスクールの先生にwebサイトのフィードバックを頂いた時、

「あれ、これフッターにリンク貼らないの？
あ、ヘッダーのナビゲーションが付いてくるデザインにするの？
それならありだけど。。このままだとサイト離脱しちゃうよ」

とご指摘いただき、自分のfooter意識の低さに気づいて驚愕したことがあります。

とはいえ、今回はTopへ戻るボタンはつけたくない。
（というか正直、Topへ戻るボタンって皆さん使ってますか。ワタシツカッタコトナイ・・・まぁこの話はおいといて）

ということでfooter考察です！（突然）

「footer」比較４サイト

①下北線路街

みんなでつくる新しい街 | 下北線路街

・footer　高さ：388px
　左にロゴ　右にナビゲーションメニュー フォントサイズ：16px

・メニュー上下 余白：24px

・特に見て欲しいメニュー5つだけheaderに明示
　全メニューはハンバーガーメニューもしくは、footerから見られる構造
　メニュー数が多い時は、こういう表示方法合理的でいいな。メモメモ。

・ロゴ下にSNSリンク3つまとめている
（個人的には「FOLLOW US」じゃなくて「FOLLOW ME」になっているところがツボ）

②PASMO

PASMOの公式WEBサイトです！

・headerメニューは5つで、hoverするとアコーディオン内のメニューがでてくる構造  footerでは全部メニューが可視化されている
　コーポレートサイトに多い構造　情報量が多い時はこの設計がとても親切だと感じる

・フォントサイズ　大(白)：16px　小(グレー)：13px　ジャンプ率が3pxって珍しい　右側「ご利用可能エリア」欄 ：17px

③SHIBUYA QWS

SHIBUYA QWS

・画面いっぱいfooter！！びっくり！

・フォントサイズ14px 　snsアイコン26x26px
　「サイトのご利用にあたって」欄 12px

・メニュー上下 余白30px

④＆POST

&Post

・サイトの雰囲気をそのまま表現した手紙風footer
「丁寧なサイトはfooterデザインにも力を入れている」って以前先生がおっしゃっていたなぁ　かわいい

ただ、こういうデザイン性の高いfooterが減ってきている気がする  
調べていると、以前はイラストfooter（勝手に命名）だったのに、サイトリニューアル後にはシンプル構造になっているものをいくつか目にした
機能性を重視した結果かと予測

まとめ

・メニューがいくつあるかによってfooterデザインが大きく左右される

・メニュー数によってfooter高さが変わる　高くてもそんな違和感ない

・footerでは全てのメニューが可視化できることが大切（webサイトの地図的な役割を果たす）

・hoverしたときの動きは今回の4サイトでは3種類あった
（色が変わる・下線がでる・変化無し）

・上下余白は30px前後が可読性高い
（メニュー数多い時は15-20px）

・デザインを損なわないようであれば、フォントウェイトをあげてジャンプ率をつけるのも良い（フォントウェイトの使い方は、個人的に今後得意になりたい）