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

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動先: 案内検索
コンテンツは水のごとしは、レスポンシブウェブデザインの原則を説明した格言。

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。[1][2][3]

RWDでデザインしたサイト[1][4]は、比率ベースのフルードグリッド、[5][6] フレキシブルイメージ[7][8][9] @mediaルールの拡張であるCSS3メディアクエリ[3][10][11] を以下のように使用することで、レイアウトを表示環境に適応させる。[12]

  • フルードグリッドは、ページ要素にピクセルポイント等の絶対単位ではなく、百分率等の相対単位を使用する。[6]
  • 可変サイズの画像も、コンテナ要素の外にはみ出て表示されるのを防ぐため、相対単位を使用する。[7]
  • メディアクエリにより、サイトを表示しているデバイスの特徴 (ブラウザの幅が最も一般的) に基づいて、ページに異なるCSSスタイルを使用することができる。

今やモバイルトラフィックがインターネットトラフィック全体の半分以上を占めているため、レスポンシブウェブデザインはますます重要になっている。[13] この傾向はかなり定着しており、Googleは、モバイル機器から検索した場合、モバイル機器に優しいサイトの評価を引き上げ始めた。[14] これは、モバイル機器に優しくないサイトが最終的に不利になる効果がある。

関連概念[編集]

モバイルファースト、控えめなJavaScript, プログレッシブエンハンスメント

モバイルファースト、控えめなJavaScript, プログレッシブエンハンスメントは、RWDに先立つ関連概念である。基本的な携帯電話のブラウザは、JavaScriptやメディアクエリを理解しない。そのため、推奨される方法は、複雑で画像を多用したサイトを携帯電話で動作させるためにグレイスフルデグラデーションに依存するのではなく、基本のウェブサイトを制作してからスマートフォンやパソコン用に拡張することである。[15][16][17][18]

ブラウザ、デバイス、フィーチャーディテクションに基づくプログレッシブエンハンスメント

ウェブサイトでJavaScript非対応の基本的なモバイル機器のサポートが必須の場合、ブラウザ (ユーザーエージェント) 判定 (ブラウザスニッフィングとも呼ばれる) とモバイル機器判定[16][19]の2つの方法により、HTMLやCSSの特定の機能がサポートされているかが推定される。ただし、こうした方法の信頼性は、デバイス能力データベースを併用しない限り完全ではない。

より高機能な携帯電話やパソコンに対しては、Modernizr, jQuery, jQuery MobileといったJavaScriptフレームワークを使用して、ブラウザがHTMLやCSSの機能をサポートしているかを直接調べる (あるいはデバイスやユーザーエージェントを判定する) 方法が一般的である。ポリフィルを使用して追加機能をサポートすることもできる。たとえば、RWDに必要なメディアクエリのサポート、Internet ExplorerでのHTML5サポートの改善といったことが可能である。フィーチャーディテクションの信頼性も完全ではない可能性がある。判定項目によっては、ある機能が実装されていないか、もしくは実質的に利用不可能なほど実装が不十分であるのに利用可能であると報告される可能性がある。[20][21]

課題とその他のアプローチ[編集]

ルーク・ウロブルスキーは、RWDとモバイル設計課題の一部を要約し、マルチデバイスのレイアウトパターンのカタログを作成した。[22][23][24] ウロブルスキーによると、単純なRWDによるアプローチと比べて、デバイスエクスペリエンスやRESS (REsponsive web design with Server-Side components, サーバサイドコンポーネントを使用したレスポンシブウェブデザイン) によるアプローチは、モバイル機器にさらに最適化された体験をユーザに提供できるという。[25][26][27] SassやIncentivatedのMMLといったサーバサイドのダイナミックCSS実装は、使い勝手向上のためデバイス能力データベースと連動してデバイス (一般的には携帯電話) の差異を処理するサーバベースのAPIにアクセスすることで、こうしたアプローチの不可欠な要素となり得る。[28] RESSは開発がさらに高価で、単なるクライアントサイドのロジック以上の費用が必要となり、そのためより予算の大きい組織に使用が限られる傾向にある。Googleは、スマートフォンのウェブサイトに対して他のアプローチよりレスポンシブウェブデザインを推奨している。[29]

多くのサイト運営者がレスポンシブデザインを実装し始めたが、RWDにとって現在の課題は、一部のバナー広告やビデオがフルードではないことである。[30] ただし、検索連動型広告やディスプレイ広告は、特定のデバイスプラットフォームターゲットと、デスクトップ、スマートフォン、基本的なモバイル機器用の様々な広告サイズのフォーマットをサポートしている。異なるプラットフォームには異なるランディングページURLが使用できるが、[31] あるいはAjaxを使用して1つのページ上で様々なプラットフォーム用の広告を表示できる。[19][23][32] CSSテーブルにより、固定とフルードのハイブリッドレイアウトが実現可能となる。[33]

現在RWDデザインをバリデーションし、テストする方法は多くあり、[34] モバイルサイトバリデータとモバイルエミュレータ[35] からAdobe Edge Inspectのような同期型テストツールまで存在する。[36] FirefoxブラウザとChromeコンソールは、レスポンシブデザインのビューポートリサイズツールを提供している (サードパーティも提供している)。[37][38]

歴史[編集]

ブラウザのビューポート幅に適応するレイアウトを特色とした最初のサイトは、2001年後半にローンチしたAudi.comで、[39] レイザーフィッシュ社のユルゲン・シュパングル、ジム・カルバッハ (インフォメーションアーキテクチャ)、ケン・オリング (デザイン)、ヤン・ホフマン (インターフェース開発) から成るチームが作成した。ブラウザの能力が限られていたので、Internet Explorerではレイアウトがブラウザ内で動的に適応できたが、Netscapeではリサイズ時にページをサーバから再読み込みしなければならなかった。

キャメロン・アダムスは2004年にデモを作成した (現在も閲覧可能)。[40] 2008年までに、「フレキシブル」、「リキッド」、[41] 「フルード」、「エラスティック」といった多くの関連用語がレイアウトを説明するのに使用されていた。CSS3メディアクエリは、2008年後半と2009年前半のプライムタイムにほぼ間に合った。[42] イーサン・マルコッテは、A List Apartの2010年5月の記事で、[1] レスポンシブウェブデザイン (Responsive Web Design, RWD) という用語 (フルードグリッド、フレキシブルイメージ、メディアクエリを意味すると定義) を新造した。[43] マルコッテは、2011年にレスポンシブウェブデザインの理論と実践をResponsive Web Designという題の短い本で説明した。レスポンシブデザインは、.net誌のTop Design Trends for 2012で、第1位のプログレッシブエンハンスメントに続き、第2位にランクインした[44]

Mashableは、2013年をレスポンシブウェブデザインの年と呼んだ[45]。他の多くのメディアは、モバイルアプリケーションの費用効果が高い代替案としてレスポンシブデザインを推奨している。

関連記事[編集]

参考文献[編集]

  1. ^ a b c Marcotte, Ethan (May 25, 2010).
  2. ^ "Ethan Marcotte's 20 favourite responsive sites". .net magazine.
  3. ^ a b Gillenwater, Zoe Mickley (December 15, 2010).
  4. ^ Pettit, Nick (August 8, 2012).
  5. ^ "Core concepts of Responsive Web design".
  6. ^ a b Marcotte, Ethan (March 3, 2009).
  7. ^ a b Marcotte, Ethan (June 7, 2011).
  8. ^ Hannemann, Anselm (September 7, 2012).
  9. ^ Jacobs, Denise (April 24, 2012). "50 fantastic tools for responsive web design". .net Magazine. 
  10. ^ Gillenwater, Zoe Mickley (October 21, 2011).
  11. ^ "Responsive design—harnessing the power of media queries".
  12. ^ W3C @media rule
  13. ^ "Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper".
  14. ^ "Official Google Webmaster Central Blog: Rolling out the mobile-friendly update".
  15. ^ Wroblewski, Luke (November 3, 2009).
  16. ^ a b Firtman, Maximiliano (July 30, 2010).
  17. ^ "Graceful degradation versus progressive enhancement".
  18. ^ Designing with Progressive Enhancement[1].
  19. ^ a b "Server-Side Device Detection: History, Benefits And How-To". Smashing magazine. September 24, 2012. 
  20. ^ "BlackBerry Torch: The HTML5 Developer Scorecard | Blog".
  21. ^ "Motorola Xoom: The HTML5 Developer Scorecard | Blog".
  22. ^ Wroblewski, Luke (May 17, 2011).
  23. ^ a b Wroblewski, Luke (February 6, 2012).
  24. ^ Wroblewski, Luke (March 14, 2012).
  25. ^ Wroblewski, Luke (February 29, 2012).
  26. ^ Wroblewski, Luke (September 12, 2011).
  27. ^ Andersen, Anders (May 9, 2012).
  28. ^ "Responsive but not completely mobile optimised | Blog".
  29. ^ "Building Smartphone-Optimized Websites".
  30. ^ "Google:The Evolution of Responsive Websites".
  31. ^ Snyder, Matthew; Koren, Etai (April 30, 2012).
  32. ^ "Google Partners Help". google.com.
  33. ^ JavaScript and Responsive Web Design Google Developers
  34. ^ "The Role of Table Layouts in Responsive Web Design".
  35. ^ Young, James (August 13, 2012).
  36. ^ "Best mobile emulators and RWD testing tools".
  37. ^ Rinaldi, Brian (September 26, 2012).
  38. ^ "Responsive Design View".
  39. ^ Malte Wassermann.
  40. ^ https://experiencinginformation.wordpress.com/2012/07/22/the-first-responsive-design-website-audi-circa-2002/ [self-published source?
  41. ^ Adams, Cameron (September 21, 2004).
  42. ^ "G146: Using liquid layout". w3.org.
  43. ^ "Media Queries". w3.org.
  44. ^ "15 top web design and development trends for 2012". .net magazine. January 9, 2012. 
  45. ^ Cashmore, Pete (December 11, 2012). "Why 2013 Is the Year of Responsive Web Design".