レスポンシブウェブデザイン (英: responsive web design、 RWD) はウェブデザインの手法のひとつで、デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることも、そのタスクに含まれる点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部として閲覧者の「近さ」をRWDの延長部分と見なしている。ニールセン・ノーマン・グループは、「コンテンツ、デザインそしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた。
RWDでデザインしたサイトは、比率ベースのフルードグリッド（英語）、フレキシブルイメージ@mediaルールの拡張であるCSS3メディアクエリを以下のように使用することで、レイアウトを表示環境に適応させる。
- フルードグリッドは、ページ要素にピクセルやポイント等の絶対単位ではなく、百分率等の相対単位を使用する。
- 可変サイズの画像もコンテナ要素の外にはみ出さないように、相対単位を使用して表示する。
- メディアクエリにより、サイトを表示しているデバイスの特徴 (ブラウザの幅が最も一般的) に基づいて、ページに異なるCSSスタイルを使用できる。
今やモバイルトラフィックがインターネットトラフィック全体の半分以上を占めるため、RWDはますます重要になっている。そのためGoogleは2015年にモバイルゲドンを発表し、モバイル機器から検索した場合、モバイル機器に優しいサイトの評価を引き上げ始めた。これには、モバイル機器に優しくないサイトが最終的に不利になる効果がある。RWDは、ユーザーインターフェースプラスティシティの一例である。
関連概念
モバイルファースト、控えめなJavaScript、プログレッシブな拡張（英語）
- いずれもRWDに先立つ関連概念である。基本的な携帯電話のブラウザは、JavaScriptやメディアクエリを理解しない。そのため推奨される方法は、グレイスフル・デグラデーション（英語）に依存して複雑で画像を多用したサイトを携帯電話で動作させるのではなく、基本のウェブサイトを制作してからスマートフォンやパソコン用に拡張することである。
ブラウザ、デバイス、モバイル機器推定に基づくプログレッシブな拡張
- ウェブサイトでJavaScript非対応の基本的なモバイル機器のサポートが必須の場合、ブラウザ (ユーザーエージェント) 判定 (別称「ブラウザ・スニッフィング」（英語）) とモバイル機器判定（英語） の2つの方法により、(プログレッシブな拡張の基礎として) HTMLやCSSの特定の機能がサポートされているかどうか推定される。ただし、こうした方法の信頼性はデバイス能力データベースを併用しない限り完全ではない。
より高機能な携帯電話やパソコンに対しては、Modernizr、jQuery、jQuery MobileといったJavaScriptフレームワーク（英語）を使用して、ブラウザがHTMLやCSSの機能をサポートしているかを直接調べる (あるいはデバイスやユーザーエージェントを判定する) 方法が一般的である。ポリフィルを使用して追加機能をサポートすることもでき—たとえばRWDに必要なメディアクエリのサポート、Internet ExplorerでのHTML5サポートの改善といったことが可能である。
機能判定（英語）の信頼性も完全ではない可能性がある。判定項目によっては、ある機能が実装されていないか、もしくは利用可能であると報告されながら実装が実質的に利用不可能なほど不十分である場合もあり得る。
課題とその他のアプローチ
ルーク・ウロブルスキーは、RWDとモバイル設計課題の一部を要約し、マルチデバイスのレイアウトパターンのカタログを作成した。ウロブルスキーによると、単純なRWDによるアプローチと比べて、デバイスエクスペリエンスやRESS (REsponsive web design with Server-Side components, サーバサイドコンポーネントを使用したレスポンシブウェブデザイン) によるアプローチは、モバイル機器にさらに最適化された体験をユーザに提供できるという。SassやIncentivatedのMMLといったサーバサイドのダイナミックCSS実装は、使い勝手向上のためデバイス能力データベースと連動してデバイス (一般的には携帯電話) の差異を処理するサーバベースのAPIにアクセスすることで、こうしたアプローチの不可欠な要素となり得る。RESSは開発がさらに高価で、単なるクライアントサイドのロジック以上の費用が必要となり、そのためより予算の大きい組織に使用が限られる傾向にある。Googleは、スマートフォンのウェブサイトに対して他のアプローチよりレスポンシブウェブデザインを推奨している。
多くのサイト運営者がレスポンシブデザインを実装し始めたが、RWDにとって現在の課題は、一部のバナー広告やビデオがフルードではないことである。ただし、検索連動型広告やディスプレイ広告は、特定のデバイスプラットフォームターゲットと、デスクトップ、スマートフォン、基本的なモバイル機器用の様々な広告サイズのフォーマットをサポートしている。異なるプラットフォームには異なるランディングページURLが使用できるが、あるいはAjaxを使用して1つのページ上で様々なプラットフォーム用の広告を表示できる。CSSテーブルにより、固定とフルードのハイブリッドレイアウトが実現可能となる。
現在RWDデザインをバリデーションし、テストする方法は多くあり、モバイルサイトバリデータとモバイルエミュレータからAdobe Edge Inspectのような同期型テストツールまで存在する。Chrome、FirefoxとSafariの各ブラウザとChromeコンソールは、レスポンシブデザインのビューポートリサイズツールを提供している (サードパーティも提供している)。。
歴史
ブラウザのビューポート幅に適応するレイアウトを特色とした最初のサイトは、2001年後半にローンチしたAudi.comで、レイザーフィッシュ社のユルゲン・シュパングル、ジム・カルバッハ (インフォメーションアーキテクチャ)、ケン・オリング (デザイン)、ヤン・ホフマン (インターフェース開発) から成るチームが作成した。ブラウザの能力が限られていたので、Internet Explorerではレイアウトがブラウザ内で動的に適応できたが、Netscapeではリサイズ時にページをサーバから再読み込みしなければならなかった。
キャメロン・アダムスは2004年にデモを作成した (現在も閲覧可能)。2008年には「フレキシブル」、「リキッド」、「フルード」、「エラスティック」といった多くの関連用語がレイアウトを説明するのに使用されていた。CSS3メディアクエリは、2008年後半と2009年前半のプライムタイムにほぼ間に合った。イーサン・マルコッテは、A List Apartの2010年5月の記事で、レスポンシブウェブデザイン (Responsive Web Design, RWD) という造語 (フルードグリッド、フレキシブルイメージ、メディアクエリを意味すると定義) を新しく提唱した。マルコッテは、2011年にレスポンシブウェブデザインの理論と実践を『Responsive Web Design』という題の短い本で説明した。レスポンシブデザインは、『.net』誌の「Top Design Trends for 2012」で、第1位のプログレッシブエンハンスメントに続き、第2位にランクインした。
Mashableは、2013年をレスポンシブウェブデザインの年と呼んだ。他の多くのメディアは、モバイルアプリケーションの費用効果が高い代替案としてレスポンシブデザインを推奨している。
脚注
関連項目
外部リンク
- 薔薇の描き方（英語）