細部まで気を抜かない!フッターにもこだわったWebサイトまとめ

細部まで気を抜かない!フッターにもこだわったWebサイトまとめ
細部まで気を抜かない!フッターにもこだわったWebサイトまとめ

気がつけば今年もあと2カ月ですね…(呆然)なんだか放置気味なので、ひさびさ更新してみました。

話を本題に戻して、以前はフッターというと住所だったりコピーライトの表記をしてるだけのものが多かったですが、徐々にフッターに大きくスペースをとったサイトをよく見かけるようになって、使い方もサイトによって工夫されているのを感じています。一番下のフッターにも気を配ったサイトだと、こだわりを感じますよね。ということで、いくつか参考になりそうなサイトをまとめてみました。では、どうぞー。

フジドリームエアラインズ

フジドリームエアラインズ

http://www.fujidream.co.jp/

さりげなくフッターメニューの背景に飛行機の写真(シルエット)がデザインされてます。べた塗だったり、テクスチャはよく見かけますがこういったデザインはあまり見ないので紹介してみました。

ルアーナ

LUANA-ルアーナ-

http://c.cocacola.co.jp/luana/

ハンドメイドの雰囲気がただよう楽しげなサイトですが、フッターにも目を引くような動きのあるイラストが配置されています。右下にあるFacebookページのレイアウトも面白いなーと思いました(マウスホバーするとlike boxが出てきます)

100万人の手洗いプロジェクト

100万人の手洗いプロジェクト

http://tearai.jp/

上で紹介したルアーナと同じようにイラストを中心にデザインされたサイトですが、フッターにも大きくイラストが使われています。サイト全体に一体感があってオリジナル性がありますね。

アパレルウェブ

アパレルウェブ

http://www.apparel-marketing.com/

近年では良く見かけるようになった、会社情報をフッターに載せた例です。フッターに配置しておけば、どのページでも表示されるという利点がありますね。メインコンテンツの背景が白で、フッター部分が黒なのでメリハリも出ています。

smart4me

smart4me

http://smart4me.net/business/

こちらはフッターにニュース一覧を掲載している例。ニュースは日ごろチェックされるものなので、フッターまで見てもらうための工夫なのかな、と思いました。青のグラデーションで雰囲気が出てますね。

ダノンジャパン

ダノンジャパン

http://www.danone.co.jp/

乳製品を扱っているので、フッターの一番下までスクロールすると、写真部分にちょうど牛がいる写真が出てくるようになっています。写真を使うとぱっと目につきますし、面白いフッターの使い方だなと思いました。

グレコ

グレコ

http://www.gracobaby.jp/

会社情報から商品のことまでフッターに情報を網羅しています。フッターまで下がっても、すぐに行きたいページにジャンプできるので離脱率の低下につながるように思えました。

神戸神奈川アイクリニック

神戸神奈川アイクリニック

http://www.kobe-kanagawa.jp/

このサイトはフッターのすぐ上に、サポートナビというものが付いていて切り替えをすることでそれぞれのメニューが出てきます。慣れた人じゃないとちょっと扱いにくいかも?と思いましたが、フッターまで下がった時点でも探している情報にアクセスできるという利点もありますね。

茶舗木蔭

茶舗木蔭

http://chaho-kokage.com/

背景イラストと調和したテクスチャをフッター背景に使用している例。イラストとの一体感も出ているように感じました。お茶を扱っているので、和の雰囲気も感じるシックな色遣いです。

浦和つくし幼稚園 採用サイト

学校法人秋本学園

http://urawa-tsukushi.com/recruit/

最近はこういったあまり区切りを感じさせない自由なデザインを良く見かけます。フッター部分に幼稚園の写真を持ってくることで安定感を感じました。

関西外大

関西外大

http://www.kansaigaidai.ac.jp/

関西外大のサイトは、フッター部分にタブメニューが付いているという面白い作りになってます(マウスホバーで内容が切り替わります)。こういうフッターの使い方はあまり見ないので面白いなと思いました。タブを使うと限られたスペースでも、複数の情報を載せることができる利点がありますね。

ハピスタ

ハピスタ

http://happy-photo-studio.jp/

手書き風のイラストを使ったほんわかした雰囲気のサイト。フッターすぐ上のイラストがあるかないかで、雰囲気もずいぶんと変わってくるように感じました。黒や灰色をメインに使った色味の少ないサイトですが、イラストを多く使っているため楽しい雰囲気が出ています。

大阪経済法科大学

大阪経済法科大学

http://www.keiho-u.ac.jp/

大学のサイトはページ数が多いですが、各グループごとに綺麗にまとめて配置されています。アイコンもついているので、何のグループなのかもわかりやすいですね。特設サイトのバナーも配置されているため、見てほしいページもさりげなくアピールされています。

大阪経済法科大学 入試情報サイト

大阪経済法科大学

http://keihonavi.jp/

上で紹介した大学の入試情報のサイト。フッター部分は細々とした情報が入りがちですが、ちゃんとグループ分けをしてごちゃごちゃした印象にならないようにレイアウトされています。

サラダホーム

サラダホーム

http://www.saladhome.com/

写真をうまく取り入れてデザインされているサイトですが、フッターにもグリーンがメインの写真を使うことで優しい雰囲気が良く出ていると思いました。カリフラワーが家になっててユニークですね。トップページのメイン画像もすごくインパクトがあって、オリジナル性の高いサイトだなと思いました。

福岡県立城南高等学校

福岡県立城南高等学校

http://jonan.fku.ed.jp/

フッターだけを見ても学校のサイトだと分かるようなイラストが、大きくフッター下に配置されています。コンテンツの多いものを左に、単独ページを右側にあつめたサイトマップのレイアウトも綺麗で見やすいです。

旅モニ

旅モニ

http://tabi-moni.com/

ゆるーい雰囲気のイラストがフッターに使われていますが、右側にコピーライトやテキストリンクが配置されていて、左側にイラストを多めに配置しているため左右のバランスがうまくとれているなと思いました。

おわりに

というわけで、いくつか気になったものを紹介してみました。こうやってみるとやはりフッターだけ見ても、いろんな工夫や使い方がありますね。ディスプレイが大きいものが増えた分、横幅が大きくなったのは良く言われていますが、フッターは縦幅も大きくスペースをとったものが多いようです。ヘッダーとフッターは前ページ共通に表示されるものなので、何を載せるか、どういう構成にするかでサイトの使いやすさもぐっと向上しそうです。というわけで、以上フッターに関するまとめでした。それではー!

関連記事を読む

細部まで気を抜かない!フッターにもこだわったWebサイトまとめ

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]