2012年を代表する国内の秀逸なレスポンシブWebデザインのサイトまとめ25個

2012122501

今年は国内でもレスポンシブWebデザインがブレイクし、秀逸なサイトが数多く生まれました。

今回は私が半年間「Responsive Web Design JP」を運営してきた中でも、特にすごいと思ったサイトを一挙紹介します

Caaaaat

Canvas&3Dなサイト。これを最初に見たときはホント鼻血が出そうでした。ちなみにサイトタイトルも画面幅に応じてaの数が変化するんですね。

Caaaaat

IMJ

大手制作会社のサイトです。Ajaxや動的なURLの書き換えなど、技術モリモリのすごいサイトです。デザインもきれいですね。

IMJ

Baby-G

Baby-Gの製品サイトです。カシオは積極的にレスポンシブWebデザインを取り入れていますね。大きなビジュアルを使い、凝ったデザインのサイトになっています。

Baby-G

G-SHOCK

こちらはG-SHOCKの製品サイトです。このサイトもレスポンシブとは思えない、かなり凝ったデザインのサイトですね。

G-SHOCK

NTTデータ

SI最大手企業のサイトです。調整が大変なレスポンシブWebデザインを、膨大な情報量を持つ大手企業のコーポレートサイトで制作したことに驚きです。

NTTデータ

NHKスタジオパーク

ブラウザの幅を変化させた時にグリッドが動く可変グリッドレイアウトなんですが、リキッドレイアウトをうまく組み合わせてスマートフォンでもきれいに表示されます。

NHKスタジオパーク

チャンピオン | ゴールドウイン オフィシャルサイト

スポーツブランド、チャンピオンのオフィシャルサイトです。こちらもグリッドが動く可変グリッドレイアウトとリキッドレイアウトをうまく組み合わせています。背景も工夫されていて、レスポンシブっぽくない凝ったサイトとなっています。

チャンピオン | ゴールドウイン オフィシャルサイト

肌研(ハダラボ) | ロート製薬株式会社

美容液の製品サイトです。可変グリッドレイアウトとリキッドレイアウトをうまく組み合わせ、きれいに作られています。

肌研(ハダラボ) | ロート製薬株式会社

ソニー製品情報

ソニーの製品サイトがフルリニューアルされていました。見た目はリニューアル前とほとんど変わっていないにもかかわらず、下層も含めてしっかりレスポンシブ化されています。

ソニー製品情報

My Life with My Speaker|アクティブスピーカー|ソニー

ソニーも積極的にレスポンシブWebデザインを取り入れてますね。こちらはスクロールに合わせてコンテンツがアニメーションします。スマートフォンではアコーディオン式に開閉します。

My Life with My Speaker|アクティブスピーカー|ソニー

NTT西日本新卒採用ウェブ2014

NTT西日本の採用サイトです。グリッドレイアウトを採用しつつもレスポンシブWebデザインに見えない凝ったデザインとなっています。

NTT西日本新卒採用ウェブ2014

ミンネ

ハンドメイド作品を販売できるサイトです。設計の難しいECサイトでここまでできるとは思いませんでした。レスポンシブWebデザインに見えないのに、しっかりレスポンシブしています。

ミンネ

LADER

キッチン用品のECサイトです。PC用画面では画像を画面いっぱいに使った横スクロール、スマートフォン用画面では縦スクロールと、ECサイトにもかかわらずかなり凝った造りをしています。

LADER

03 ENTERTAINMENT

制作会社のサイトです。大きく美しいビジュアルを使って、レスポンシブっぽくないきれいなサイトに仕上がっています。

03 ENTERTAINMENT

クリエイティブサーベイ

Webのデザイン調査を行う会社のサイトです。固定のサイドバーを使い、広いモニターからスマートフォンまで違和感なく見られるサイトになっています。

クリエイティブサーベイ

テンプル大学ジャパンキャンパス

大学のサイトです。日本のサイトでMedia Queriesに紹介された唯一のサイトではないでしょうか。膨大な情報量ですが、レスポンシブとは思えない仕上りとなっています。

テンプル大学ジャパンキャンパス

シットバックチル工房

レスポンシブWebデザインのデモサイトなんですが、作りこみがすごいです。レスポンシブとは思えない凝ったデザインになっています。

シットバックチル工房

朝日新聞社 マウリッツハイス美術館展 オランダ・フランドル絵画の至宝

美術展のサイトです。変則的なグリッドレイアウトを採用し、レスポンシブWebデザインとは思えない美しいサイトです。

朝日新聞社 マウリッツハイス美術館展 オランダ・フランドル絵画の至宝

大分健生病院

地方の病院のサイトです。ブラウザの幅を変えたときのメインビジュアルの見せ方が絶妙です。

大分健生病院

2012 LOFT CHRISTMAS

LOFTのキャンペーンサイトです。マウスホイール操作でコンテンツが3Dに動きます。スマホでもちゃんと動きます。こちらも鼻血でそうなサイトです。

2012 LOFT CHRISTMAS

レオパレス21

大手不動産会社のコーポレートサイトです。ユーザービリティにも配慮され、情報量が多いにもかかわらず、レスポンシブっぽく見えないところがすごいです。

レオパレス21

C.A.MOBILE

レスポンシブWebデザインの他、バララックススクロールやjQuery Mobileを使った技術テンコ盛りのサイトです。スマートフォンでもちゃんとパララックスするところがすごいです。

C.A.MOBILE

インフォバーン

制作会社のサイトです。こちらもレスポンシブWebデザインとパララックススクロールを組み合わせたサイトとなっています。

インフォバーン

グローバル ブレイン スクエア

すみません…拙作です…。コンサルティング会社のサイトです。テクスチャや立体的なボタンを使った質感のあるサイトになっています。

グローバル ブレイン スクエア

KATOSHUN.com

こちらも拙作です…。私のポートフォリオサイトです。パララックススクロールと横スライダーを組み合わせています。

KATOSHUN.com

いかがでしたか?
レスポンシブWebデザインは、まだまだ試行錯誤の面はあるものの、業種・ジャンル・規模を問わずさまざまなサイトで採用されるようになり、一過性の流行ではない波に乗ってきた感があります。
来年はどんなレスポンシブWebデザインが出てくるのか楽しみです。

コメント

  • Twitterをフォロー
  • Facebookページを見る
  • RSSを登録

KATOSHUN.com | 加藤俊司作品集