マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」。ところが日本では「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」との誤解が広がっているようです。
レスポンシブWebデザインとよく似た手法である「アダプティブデザイン」との違いをみながら、レスポンシブWebデザインの本当の意味を考えてみましょう。
「デバイスに依存しない」レスポンシブWebデザイン
レスポンシブWebデザインは、イーサン・マルコッテ（Ethan Marcotte）氏が2010年5月にテックブログ「A List Apart」の記事で発表したマルチデバイスへの対応方法です（日本語訳記事）。発表から3年が経ち、日本でもよく知られる手法となりました。
マルコッテ氏が唱えるレスポンシブWebデザインは、「メディアクエリー」「フルードイメージ」「フルードグリッド」という3つの技術を柱にしています。そのため、「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」は、レスポンシブWebデザインの定義としてあながち間違いではないと思うかもしれません。
しかし、レスポンシブWebデザインの本質は、デバイスに依存せず、あらゆるスクリーンサイズでコンテンツを利用したり閲覧したりできることにあります。単にメディアクエリーを使っただけでは、必ずしもレスポンシブWebデザインとはいえないのです。
「デバイスに依存しない」ことの意味
「レスポンシブWebデザイン」とGoogle検索すると表示される「Responsive Web Design JP」という著名なギャラリーサイトがあります。国内のレスポンシブWebデザインの事例を集めたすばらしいギャラリーサイトです。
Responsive Web Design JPは、3つのブレイクポイントの画面キャプチャーを掲載していますが、中には真ん中（タブレットを想定したブレイクポイント）の画面キャプチャーがないサイトがあります。これは、タブレットを想定したブレイクポイントが設定されていないため、コンテンツが横にはみ出したり、縮小して表示されたりすることがあることを意味しています。
実は、こうした「ブレイクポイントありき」のサイトは、厳密には「レスポンシブWebデザイン」ではありません。ブレイクポイント（つまりデバイスを想定したスクリーン幅）ごとにレイアウトを調整する手法は「アダプティブデザイン」（Adaptive：適応性のある）と呼ぶのが正解です。
「ブレイクポイント最適化」がアダプティブデザイン
アダプティブデザインはレスポンシブWebデザインよりも古く、2006年頃から存在をしていました。当時は「Adaptive Layout」と呼ばれ、Marc Van Den Dobblesteen氏がA List Apartで2006年に記事にしています。ほかにも、Google WaveのUIを設計したキャメロン・アダムス（Cameron Adams）氏なども同様の手法を実装しています。
http://alistapart.com/article/switchymclayout
アダプティブデザインの特徴は、スクリーンサイズに応じて細かくピクセルベースでデザインを定義し、ブレイクポイントごとにレイアウトを変更していくことです。当時はメディアクエリーを実装したブラウザーがなかったので、JavaScriptでスクリーンサイズを検知してレイアウトを変更していました。
アダプティブデザインはブレイクポイントごとにレイアウトを調整する
たとえば、小さなスクリーンのスマートフォン、大きなスマートフォン、小さなタブレット、大きなタブレット……と、アダプティブデザインはスクリーンサイズごとに固定幅で最適なデザインを用意するアプローチです。
レスポンシブWebデザインとアダプティブデザインの技術的な大きな違いは、「フルード（リキッド）か」「固定幅か」にあります。レスポンシブWebデザインでは、body要素の幅をパーセントで指定しますが、アダプティブデザインにおいてはbody幅をピクセルで指定することが多いです。
アダプティブデザインではブレイクポイントを細かく指定することが多い
レスポンシブかアダプティブか？
レスポンシブか？ アダプティブか？ 制作手法としてどちらを選択するかは、好みの問題でしょう。しかし、個人的にはレスポンシブWebデザインをオススメします。
フルード（リキッド）でデザインされるレスポンシブWebデザインでは、ブレイクポイント間のデザインも常に画面サイズにフィットして表示されます。画面サイズに大きな差があるときにブレイクポイントでレイアウトを調整し、ブレイクポイント間はフルードでカバーするのがレスポンシブWebデザインです。
一方、アダプティブの場合は、ブレイクポイントごとに細かく作り込んでいきます。アプローチとしては、専用サイトをCSSで作っていくのに似ています。ブレイクポイント間での表示は考慮されていないため、ブレイクポイントが必要以上に多くなる傾向もあります。また、将来、未知のデバイスが出るたびに修正していく手間が必要です。
「レスポンシブWebデザイン」も「アダプティブデザイン」も、マルチデバイスの普及によって注目を浴びた言葉です。言葉としては似ていて、使われている技術も共通しているので、混合しやすい概念ではあります。しかし、技術だけではなく、その裏側のコンセプトも理解することによって、手法を適切に取り入れ、正しく設計できようになるのです。
レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック
| Image from Amazon.co.jp |
 |
|---|
| レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL) |
『レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック』（菊池 崇著）は、レスポンシブWebデザイン（RWD）の提唱者であるイーサン・マルコッテ氏が定義するRWDの3大要素「フルードイメージ」「フルードグリッド」「メディアクエリー」に準拠し、レスポンシブWebデザインの基礎から実践までを解説した本です。
基礎編では、簡単なサンプルサイトを作りながらチュートリアル形式でRWDの3大要素をしっかり解説。流行に流されないベーシックなスキルを習得できまるように構成しました。
実践編では、国内でいち早くRWDに取り組んできた著者のノウハウを多数紹介。解像度に応じて複数の画像を切り替える「レスポンシブイメージ」、表組みを見やすくする「レスポンシブテーブル」など、現場のテクニックを惜しみなく盛り込みました。
さらに応用編では、RWDの課題であるパフォーマンス改善のアイデアや、解像度に依存しない新しいRWDの考え方など、最新トレンドを踏まえた高度な内容も収録しています。
- 定価：2,625円 (本体2,500円)
- 発売日：2013年7月31日
- 形態：B5変 (232ページ)
- ISBN：978-4-04-886323-0
- 発行：アスキー・メディアワークス
- 発売：KADOKAWA
目次
- 第1章［導入編］マルチデバイス時代とレスポンシブWebデザインの誕生
- ［1-1］レスポンシブWebデザインとは
- ［Follow up1］レスポンシブWebデザインを支える「モバイルファースト」のコンセプト
- 第2章［基礎編］サンプルで学ぶレスポンシブWebデザインの基本
- ［2-1］レスポンシブWebデザインのワークフローと画面設計
- ［2-2］HTMLの用意とリセットCSSの作成
- ［2-3］フルードイメージの導入とタイポグラフィの基本設定
- ［2-4］ヘッダー／フッターとコンテンツ領域のスタイリング
- ［2-5］メディアクエリーの設定とグリッドデザインの導入
- ［2-6］フルードグリッドへの変換
- ［2-7］レスポンシブタイプセッティング
- ［Follow up2］Viewportを理解しよう
- ［Follow up3］メディアクエリーを使いこなす
- ［Follow up4］フルードグリッドの必要性
- ［Follow up5］次の新しい単位「rem」
- ［Follow up6］スマートフォンで文字を見やすくするテクニック
- 第3章［実践編］商用サイトで通じるプロのテクニック
- ［3-1］リセットCSSの最適化
- ［3-2］Less Frameworkを利用したグリッドレイアウト
- ［3-3］レスポンシブイメージの実装
- ［3-4］高解像度ディスプレイへの対応
- ［3-5］ナビゲーションパターンとレイアウト設計
- ［3-6］テーブルとビデオのレスポンシブ化
- ［Follow up7］srcset属性によるレスポンシブイメージの標準化
- ［Follow up8］デザイニングインブラウザーを助けるツール
- 第4章［応用編］高度なレスポンシブWebデザインの実践
- ［4-1］文字数をベースにしたブレイクポイントの設定
- ［4-2］パフォーマンス改善の基本
- ［4-3］Data URIとアイコンフォントによるHTTPリクエストの削減
- ［4-4］画像の最適化によるパフォーマンスの改善
- ［4-5］ソーシャルメディアボタンの最適化
- ［4-6］これからのレスポンシブWebデザイン
- ［Follow up9］パフォーマンス計測ツールの利用
- ［Follow up10］スマートテレビとレスポンシブWebデザイン
