「footer」デザイン考察
「footer」への意識が低かった私
少し前にスクールの先生にwebサイトのフィードバックを頂いた時、
「あれ、これフッターにリンク貼らないの?
あ、ヘッダーのナビゲーションが付いてくるデザインにするの?
それならありだけど。。このままだとサイト離脱しちゃうよ」
とご指摘いただき、自分のfooter意識の低さに気づいて驚愕したことがあります。
とはいえ、今回はTopへ戻るボタンはつけたくない。
(というか正直、Topへ戻るボタンって皆さん使ってますか。ワタシツカッタコトナイ・・・まぁこの話はおいといて)
ということでfooter考察です!(突然)
「footer」比較4サイト
①下北線路街
・footer 高さ:388px
左にロゴ 右にナビゲーションメニュー フォントサイズ:16px
・メニュー上下 余白:24px
・特に見て欲しいメニュー5つだけheaderに明示
全メニューはハンバーガーメニューもしくは、footerから見られる構造
メニュー数が多い時は、こういう表示方法合理的でいいな。メモメモ。
・ロゴ下にSNSリンク3つまとめている
(個人的には「FOLLOW US」じゃなくて「FOLLOW ME」になっているところがツボ)
②PASMO
・headerメニューは5つで、hoverするとアコーディオン内のメニューがでてくる構造 footerでは全部メニューが可視化されている
コーポレートサイトに多い構造 情報量が多い時はこの設計がとても親切だと感じる
・フォントサイズ 大(白):16px 小(グレー):13px ジャンプ率が3pxって珍しい 右側「ご利用可能エリア」欄 :17px
③SHIBUYA QWS
・画面いっぱいfooter!!びっくり!
・フォントサイズ14px snsアイコン26x26px
「サイトのご利用にあたって」欄 12px
・メニュー上下 余白30px
④&POST
・サイトの雰囲気をそのまま表現した手紙風footer
「丁寧なサイトはfooterデザインにも力を入れている」って以前先生がおっしゃっていたなぁ かわいい
ただ、こういうデザイン性の高いfooterが減ってきている気がする
調べていると、以前はイラストfooter(勝手に命名)だったのに、サイトリニューアル後にはシンプル構造になっているものをいくつか目にした
機能性を重視した結果かと予測
まとめ
・メニューがいくつあるかによってfooterデザインが大きく左右される
・メニュー数によってfooter高さが変わる 高くてもそんな違和感ない
・footerでは全てのメニューが可視化できることが大切(webサイトの地図的な役割を果たす)
・hoverしたときの動きは今回の4サイトでは3種類あった
(色が変わる・下線がでる・変化無し)
・上下余白は30px前後が可読性高い
(メニュー数多い時は15-20px)
・デザインを損なわないようであれば、フォントウェイトをあげてジャンプ率をつけるのも良い(フォントウェイトの使い方は、個人的に今後得意になりたい)
この記事が気に入ったらサポートをしてみませんか?