レスポンシブウェブデザイン

レスポンシブウェブデザイン（RWD）またはレスポンシブデザインは、ウェブページが最小から最大の表示サイズまでさまざまなデバイスやウィンドウまたは画面サイズで適切にレンダリングされ、使いやすさと満足度を確保することを目的としたウェブデザインのアプローチです。^{[1] [2]}

レスポンシブデザインは、流動的な比率に基づくグリッド^{[3] 、 [4]、}柔軟な画像^{[5] 、 [6]}、CSS3メディアクエリ^[7]、^[8]、[9]ルールの拡張[ ^10]などの技術を使用して、 Webページのレイアウトを表示環境^[1]に適応させます。 @media

• 流動的なグリッドのコンセプトでは、ページ要素のサイズをピクセルやポイントなどの絶対単位ではなく、パーセンテージなどの相対単位で指定する必要があります。^[4]
• フレキシブル画像は相対的な単位でサイズが設定されるため、画像が含まれる要素の外側に表示されないようになっています。^[5]
• メディア クエリを使用すると、レンダリング サーフェスの幅 (ブラウザー ウィンドウの幅や物理的な表示サイズ) など、サイトが表示されるデバイスの特性に基づいて、ページで異なる CSS スタイル ルールを使用できます。
• レスポンシブ レイアウトは、デスクトップ、ラップトップ、タブレット、携帯電話など、あらゆるデバイスの画面サイズに合わせて自動的に調整および適応します。

モバイルデバイスのユーザーがウェブサイト訪問者の大半を占めるようになったため、レスポンシブウェブデザインの重要性が増しました。^{[11] [12]}たとえば、2015年にGoogleはモバイルゲドンを発表し、モバイルデバイスから検索する際にモバイルフレンドリーなサイトのページランキングを上げ始めました。 ^[13]

レスポンシブウェブデザインはユーザーインターフェースの可塑性の一例です。^[14]

Luke Wroblewski は、RWD とモバイル デザインの課題の一部をまとめ、マルチデバイス レイアウト パターンのカタログを作成しました。^{[15] [16] [17]}彼は、単純な HWD アプローチと比較して、デバイス エクスペリエンスまたは RESS (サーバー側コンポーネントを使用したレスポンシブ Web デザイン) アプローチの方が、モバイル デバイスに最適化されたユーザー エクスペリエンスを提供できると示唆しました。^{[18] [19] [20]} Sassなどのスタイルシート言語のサーバー側 CSS ジェネレータ実装は、このようなアプローチの一部になります。Google は、スマートフォンの Web サイトには他のアプローチよりもレスポンシブ デザインを推奨しています。^[21]

多くのパブリッシャーがレスポンシブデザインを実装していますが、RWD採用の課題の1つは、一部のバナー広告と動画が流動的ではないことでした。^[22]しかし、検索広告と（バナー）ディスプレイ広告は、特定のデバイスプラットフォームのターゲティングと、デスクトップ、スマートフォン、基本的なモバイルデバイス向けのさまざまな広告サイズの形式をサポートするようになりました。異なるプラットフォームには異なるランディングページ URLが使用され、^[23]またはAjaxを使用してページにさまざまな広告バリアントを表示しました。^{[24] [16] [25]} CSSテーブルにより、固定レイアウトと流動レイアウトのハイブリッドが可能になりました。^[26]

RWDデザインの検証とテストには、モバイルサイト検証ツールやモバイルエミュレーターからAdobe Edge Inspectのような同時テストツールまで、さまざまな方法があります。 [ ^{27 ]} Chrome、Firefox、Safariブラウザと開発者ツールは、サードパーティと同様に、レスポンシブデザインのビューポートサイズ変更ツールを提供しています。^{[29] [30]}

HTML+のW3C仕様では、ウェブサイトはユーザーの好みに応じてレンダリングされなければならないと規定されています。^[31]しかし、ウェブページのレイアウトのカスタマイズは不十分でした。多くのウェブ開発者は、レイアウトをカスタマイズし、同時にウェブサイトに基本的な応答性をもたらす方法として、通常のHTMLテーブルに頼っていました。

ブラウザのビューポート幅に適応するレイアウトを採用した最初の主要サイトは、2001年後半に立ち上げられたAudi.comでした。[ ^{32]これは、Jürgen SpanglとJim Kalbach（情報アーキテクチャ）、Ken Olling（デザイン）、Jan Hoffmann（インターフェイス開発）からなる}razorfish のチームによって作成されました。ブラウザの機能が限られていたため、Internet Explorerではレイアウトがブラウザ内で動的に適応できましたが、Netscapeではサイズを変更するとページをサーバーから再読み込みする必要がありました。

キャメロン・アダムスは2004年にデモを作成しました。^{[ 33]} 2008年までに、「フレキシブル」、「リキッド」、「流動的」、「エラスティック」などの関連用語がレイアウトの説明に使用されました。CSS3メディアクエリは、2008年後半から2009年初頭にかけて、ほぼ準備が整いました。^[35]イーサン・マルコットは、2010年5月のA List Apartの記事で、レスポンシブWebデザイン^[36]という用語を作り出し、流動的なグリッド/柔軟な画像/メディアクエリを意味すると定義しました。^{[1]彼は、2011年に出版した短い本}「レスポンシブWebデザイン」で、レスポンシブWebデザインの理論と実践について説明しました。レスポンシブデザインは、.netマガジンの2012年のトップWebデザイントレンドで、プログレッシブエンハンスメントの1位に続いて2位にランクされました。^[37]

Mashableは2013年をレスポンシブウェブデザインの年と呼んだ。^[38]

モバイルファースト設計とプログレッシブエンハンスメントは、RWDより前から存在する関連概念です。^{[39]基本的な携帯電話のブラウザはJavaScriptや}メディアクエリを理解しないため、複雑で画像を多用するサイトを携帯電話で動作させるためにグレースフルデグラデーションに頼るのではなく、基本的なウェブサイトを作成してスマートフォンやパソコン向けに拡張することが推奨されていました。 ^{[40] [41] [42] [43]}