2012年を代表する国内の秀逸なレスポンシブWebデザインのサイトまとめ25個
2012年12月25日
今年は国内でもレスポンシブWebデザインがブレイクし、秀逸なサイトが数多く生まれました。
今回は私が半年間「Responsive Web Design JP」を運営してきた中でも、特にすごいと思ったサイトを一挙紹介します。
Canvas&3Dなサイト。これを最初に見たときはホント鼻血が出そうでした。ちなみにサイトタイトルも画面幅に応じてaの数が変化するんですね。
大手制作会社のサイトです。Ajaxや動的なURLの書き換えなど、技術モリモリのすごいサイトです。デザインもきれいですね。
Baby-Gの製品サイトです。カシオは積極的にレスポンシブWebデザインを取り入れていますね。大きなビジュアルを使い、凝ったデザインのサイトになっています。
こちらはG-SHOCKの製品サイトです。このサイトもレスポンシブとは思えない、かなり凝ったデザインのサイトですね。
SI最大手企業のサイトです。調整が大変なレスポンシブWebデザインを、膨大な情報量を持つ大手企業のコーポレートサイトで制作したことに驚きです。
ブラウザの幅を変化させた時にグリッドが動く可変グリッドレイアウトなんですが、リキッドレイアウトをうまく組み合わせてスマートフォンでもきれいに表示されます。
スポーツブランド、チャンピオンのオフィシャルサイトです。こちらもグリッドが動く可変グリッドレイアウトとリキッドレイアウトをうまく組み合わせています。背景も工夫されていて、レスポンシブっぽくない凝ったサイトとなっています。
美容液の製品サイトです。可変グリッドレイアウトとリキッドレイアウトをうまく組み合わせ、きれいに作られています。
ソニーの製品サイトがフルリニューアルされていました。見た目はリニューアル前とほとんど変わっていないにもかかわらず、下層も含めてしっかりレスポンシブ化されています。
ソニーも積極的にレスポンシブWebデザインを取り入れてますね。こちらはスクロールに合わせてコンテンツがアニメーションします。スマートフォンではアコーディオン式に開閉します。
NTT西日本の採用サイトです。グリッドレイアウトを採用しつつもレスポンシブWebデザインに見えない凝ったデザインとなっています。
ハンドメイド作品を販売できるサイトです。設計の難しいECサイトでここまでできるとは思いませんでした。レスポンシブWebデザインに見えないのに、しっかりレスポンシブしています。
キッチン用品のECサイトです。PC用画面では画像を画面いっぱいに使った横スクロール、スマートフォン用画面では縦スクロールと、ECサイトにもかかわらずかなり凝った造りをしています。
制作会社のサイトです。大きく美しいビジュアルを使って、レスポンシブっぽくないきれいなサイトに仕上がっています。
Webのデザイン調査を行う会社のサイトです。固定のサイドバーを使い、広いモニターからスマートフォンまで違和感なく見られるサイトになっています。
大学のサイトです。日本のサイトでMedia Queriesに紹介された唯一のサイトではないでしょうか。膨大な情報量ですが、レスポンシブとは思えない仕上りとなっています。
レスポンシブWebデザインのデモサイトなんですが、作りこみがすごいです。レスポンシブとは思えない凝ったデザインになっています。
美術展のサイトです。変則的なグリッドレイアウトを採用し、レスポンシブWebデザインとは思えない美しいサイトです。
地方の病院のサイトです。ブラウザの幅を変えたときのメインビジュアルの見せ方が絶妙です。
LOFTのキャンペーンサイトです。マウスホイール操作でコンテンツが3Dに動きます。スマホでもちゃんと動きます。こちらも鼻血でそうなサイトです。
大手不動産会社のコーポレートサイトです。ユーザービリティにも配慮され、情報量が多いにもかかわらず、レスポンシブっぽく見えないところがすごいです。
レスポンシブWebデザインの他、バララックススクロールやjQuery Mobileを使った技術テンコ盛りのサイトです。スマートフォンでもちゃんとパララックスするところがすごいです。
制作会社のサイトです。こちらもレスポンシブWebデザインとパララックススクロールを組み合わせたサイトとなっています。
すみません…拙作です…。コンサルティング会社のサイトです。テクスチャや立体的なボタンを使った質感のあるサイトになっています。
こちらも拙作です…。私のポートフォリオサイトです。パララックススクロールと横スライダーを組み合わせています。
いかがでしたか?
レスポンシブWebデザインは、まだまだ試行錯誤の面はあるものの、業種・ジャンル・規模を問わずさまざまなサイトで採用されるようになり、一過性の流行ではない波に乗ってきた感があります。
来年はどんなレスポンシブWebデザインが出てくるのか楽しみです。