参考にしたい!固定ヘッダーが美しいWebサイト11個まとめ

こんにちは、だいきです。
前回MEMOPATCHで書いた【2013年度版】今年流行る!7つのUIデザイントレンドまとめ では取り上げませんでしたが、2013年のWebトレンドの一つに「固定ヘッダー」が上げられているブログをいくつか見かけました。
固定ヘッダーが2013年のトレンドになる理由として、海外のブログで下記のような意見があります。

固定ヘッダーのメリットとして、
そのページを見終わった後、別ページに行きたい時、先頭までスクロールする必要がないことがあげられる。
私たちはユーザーがスクロールしたり、検索する手間を省き、いつでも関連情報に簡単にアクセスしてもらう必要があります。
このような固定ヘッダーを準備することでUX向上にもつながります。
Fixed Headers – 2013 Web Trend –

 

今回のブログでは固定ヘッダーが使われている、優れたデザインのWebサイトをまとめてみました。

Karma


https://yourkarma.com/

Wi-Fiルーター販売会社のWebサイト

Spotify


http://www.spotify.com/

音楽ストリーミングサービスです。スクロールすると次々に出てくる写真が印象的です。

MANOS


http://manoscrafted.com/

テキサス州にあるデザイン会社のWebサイト

iconmonstr


http://iconmonstr.com/

数多くのクオリティの高い、商用可能なアイコン(png, svg)を配布しているサイトです。
スクロールするとアイコンとサイト名の部分が消え、検索エリアなどがヘッダーにずっと残ります。

GRAND


http://www.wearegrand.com/

こちらもデザイン会社のWebサイトです

GRAIN & MORTAR


http://grainandmortar.com/

同様にデザイン会社
メインビジュアルに写っている男性陣の表情がなぜか無表情です。

SEED SPOT

Home

インキュベーター集団のWebサイトのようです。

WEBKNIT

Home

イギリスのWebデザイナーの方のポートフォリオサイト
情報が整理されていてとても見やすいポートフォリオです。

RED ANTLER


http://redantler.com/

デザイン会社兼、コンサルタント会社のWebサイトです。
上のスクショではメインビジュアルの文字の色が水色ですが、時間とともに色が変化していきます。

FHOKE


http://www.fhoke.com/

デザイン会社兼、コンサルタント会社のWebサイトです。
くすんだ赤のような色が印象的です。

I SHOT HIM


http://ishothim.com/

全体的にレトロな雰囲気のあるのデザイン会社のWebサイトです。
このサイトのフッターの右下にある「IE Mode」を押すとおもしろいことになります笑
(※食事前後にはみない方がいいかもです)

以上がまとめ11個でした!
今回のまとめの中では企業のWebサイトで固定ヘッダーが使われている例が多かったです。
みなさんのデザインの参考になれば幸いです!

ABOUTこの記事をかいた人

小川大樹

プロジェクトマネージャー/ UXデザイナー 受託事業を担当し、新規事業案件やリニューアル案件、数値改善プロジェクトなど様々な案件に携わる。
  • Goodpatch Blog