MEMOPATCH

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

  • このエントリーをはてなブックマークに追加
thumb

こんにちは、だいきです。
前回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


http://seedspot.org/

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

WEBKNIT


http://www.webknit.co.uk/

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

RED ANTLER


http://redantler.com/

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

FHOKE


http://www.fhoke.com/

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

I SHOT HIM


http://ishothim.com/

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



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

  • このエントリーをはてなブックマークに追加

RECRUIT

Goodpatchで一緒に働きませんか?

弊社ではエンジニア、ディレクター、デザイナーを随時募集しています。インターネットが大好きで、UIデザインを愛し、新しいことにチャレンジしたい、という方なら大歓迎!皆様からのご応募をお待ちしております!

Goodpatchに今すぐエントリー


RELATED ENTRY

Twitter and RSS

ブログの更新情報はTwitterやRSSで流します。UIに関する記事を投稿します。