【WEB DESGIN】2014年総集編！参考になったレスポンシブ・デザイン採用の独創的なウェブサイト × 11選。

2014年ウェブデザイン総集編「Part.2」は、レスポンシブ・デザインを採用したハイクオリティなサイトの中から、特に独創的なデザインで目を引いた 11 のウェブサイトを紹介します。

スペースシャワー列伝

［スペースシャワー列伝］のウェブサイト。
ウィンドウサイズが広いときはサイドバーが左側に固定され、狭くするとヘッダー部に移動します。
全体の構成や色使いも見事ですね。

http://spaceshowertv.com/retsuden/

こころまち

こちらは京阪オーナーズクラブ［こころまち］のウェブサイト。
要素をタイル状に配置する「jQuery Masonry」を利用したデザインです。

http://cocoromachi.jp

東京日本橋

［東京日本橋］のウェブサイト。
こちらもコンテンツ部分に「Masonry」を使っているようです。
Gif画像を利用した細かなアニメーションも凝っていて、いい雰囲気を醸し出しています。

http://nihombashi-tokyo.com/jp/

WEEKEND RAVERS

シンプルなレスポンシブデザインなのですが、華やかな写真と、マウスオーバー時の大胆な挙動が印象的な［WEEKEND RAVERS］のウェブサイト。

http://weekendravers.jp

GINZA SENGA

銀座のジュエリーショップ［千雅］のウェブサイト。
こちらもシンプルなレスポンシブ・デザインですが、細部にもこだわり高級感のある演出が素敵です。

http://jw-senga.co.jp

LUNAR DREAM

ポカリスエットが贈るプロジェクト［LUNAR DREAM］のキャンペーンサイトです。
クオリティが高く、レスポンシブ・デザインのお手本のようなサイトですね。

http://lunar-dream.com

SCNR

こちらは［株式会社スキャナー］のウェブサイト。
ウィンドウサイズを広げたときの画面が９分割されるデザインが目を引きます。

http://scnr.jp

MOLD

男性用のスキンケア用品［MOLD］のウェブサイト。
レスポンシブ・デザインと共にパララックス・エフェクトも併用しています。

http://mold.jp

3MINUTE

「3分で世界を魅了するコンテンツを提供する」がコンセプトのYoutuberプロダクション［3MINUTE］のウェブサイト。
背景の動画は、ウィンドウサイズが広いとき（≒PC観覧時）はYoutubeの動画が流れ、ウィンドウサイズが狭いとき（≒スマートフォン＆タブレット観覧時）はGif画像に切り替わります。…このアイディアが見事ですね。

http://3minute-inc.com

レジェンダリーホーム茨城

茨城県にある住宅メーカー［レジェンダリーホーム茨城］のウェブサイト。
まず目を引くのがウィンドウサイズいっぱいに広がる印象的な写真。ところどころにパララックス効果を導入している点も見逃せません。

http://legendary-ibaraki.com

早稲田大学

最後になりましたが、今年、ウェブデザイナーの方々に最も注目されたのが［早稲田大学］のウェブサイトではないでしょうか。
多くのブレークポイントを効かせたレスポンシブ・デザインで、様々なデバイスで最適なサイズで観覧可能。また、背景動画などの最新技術を惜しみなく使っています。マウスオーバー時の効果も数多く使用しており、真似したいテクニックが満載です。

http://www.waseda.jp

以上、全11サイトを紹介しました。