レスポンシブWeb デザインとは
今やWebはパソコンの前にだけ座って見るものではありません。いつでも、どこでも、誰とでも見る時代。朝起きたらiPhoneで見て、通勤中にタブレットで見て、会社や学校ではパソコンで見て。デバイスはますます多様化し、Webは私達の日常の至る所で使われる「インフラ」となりました。
一方で、デバイス側（クライアント側）が多様化するというのは、Webデザインもパソコンだけに合わせていればいいというわけではなくなりました。そこで、あらゆるデバイスにレスポンシブな（responsive : 反応してくれる）Webデザインをすることが求められるようになりました。
最適化サイトを作ることではない
これは、「スマホにはスマホサイトを、タブレットにはタブレットのサイトを用意する」ということとは趣が違います。ソースコードをそれぞれ別途用意するのではなく、デバイス（ウィンドウ）の大きさにしたがって臨機応変に表示を変えてあげるということです。（「臨機応変に」というのは、僕のレスポンシブに対する解釈です。いい線いっていると自分では思っています。）
レスポンシブWeb デザインの例
説明だけではよく分からないと思うので、実際の例を見てもらった方が早いでしょう。
26個の例が載っています。英語のサイトですが、例を見るだけなので何も問題はありません。
サンプルのサイトに行ってみてから、ブラウザの横幅を縮めてみてください。ほら、途中でサイトがガラっと変わったでしょう？
例）HARPETH VARREYの場合（三段階に分かれています）
↓ブラウザの横幅を狭くすると
↓更に狭くして
国内の例では、パナソニックの採用サイトが挙げられます。
↓
↓
就職活動においてスマートフォンが必須というのは今や常識のようです。
企業がその時流に乗るというのは必然といえるでしょう。
参考サイト
レスポンシブWebデザインの考え方はそれほど新しいものではなく、実は2010年ほどから色々な形で紹介されています。
参考となるサイトもいくつもあるので、ここで少し紹介します。
WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン-EC studio 企画デザインブログ 2011年3月30日
- レスポンシブ・ウェブデザインって
- スタイル（CSS）の振り分け
- ページ構造をデバイスで切り替える
- 各ブロックや要素のサイズを調整する
- まとめ
- レスポンシブ・ウェブデザイン 参考サイト
レスポンシブWebデザインの導入方法が書かれています。How toとしてわかりやすいのでは。
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ASCII.jp 2011年6月17日
- ウィンドウサイズを基準にデザインを調整
- 一般企業でも進む レスポンシブWebデザイン
- レスポンシブWebデザインを選択する4つの理由
- レスポンシブWebデザインを作る3つのステップ
- レスポンシブWebデザインの導入場面
導入方法に並んで、導入するメリットもわかりやすく書かれています。
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやティップスいろいろ 2011年8月2日
- Media Queries
- CSSフレームワーク
- WordPressテーマ
- 便利なツール
こちらは主にリンク集。役立ちそうなツールやフレームワークなどのサイトを紹介しています。よくこれだけ集めたという印象です。
2012年に流行りそうなWebデザイントレンド厳選10個まとめ 2011年12月23日
「1.レスポンシブWebデザイン」の項で、役立ちそうなサイトが多数紹介されています。
導入方法などはまた今度
実際の導入方法などは、また今度まとめて紹介したいと思います。
それでは。
