Share to: share facebook share twitter share wa share telegram print page

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

アプリのレイアウトが画面のサイズによって変わる
コンテンツは水のごとしは、レスポンシブウェブデザインの原則を説明した格言。

レスポンシブウェブデザイン (英: responsive web design、 RWD) はウェブデザインの手法のひとつで、デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることも、そのタスクに含まれる点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部として閲覧者の「近さ」をRWDの延長部分と見なしている[1]。ニールセン・ノーマン・グループは、「コンテンツ、デザインそしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた[2][3][4][5]。

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

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

今やモバイルトラフィックがインターネットトラフィック全体の半分以上を占めるため、RWDはますます重要になっている[16]。そのためGoogleは2015年にモバイルゲドンを発表し、モバイル機器から検索した場合、モバイル機器に優しいサイトの評価を引き上げ始めた[17]。これには、モバイル機器に優しくないサイトが最終的に不利になる効果がある[17]。RWDは、ユーザーインターフェースプラスティシティの一例である[18]。

関連概念

モバイルファースト、控えめなJavaScript、プログレッシブな拡張（英語）

いずれもRWDに先立つ関連概念である[要出典]。基本的な携帯電話のブラウザは、JavaScriptやメディアクエリを理解しない。そのため推奨される方法は、グレイスフル・デグラデーション（英語）に依存して複雑で画像を多用したサイトを携帯電話で動作させるのではなく、基本のウェブサイトを制作してからスマートフォンやパソコン用に拡張することである[19][20][21][22]。

ブラウザ、デバイス、モバイル機器推定に基づくプログレッシブな拡張

ウェブサイトでJavaScript非対応の基本的なモバイル機器のサポートが必須の場合、ブラウザ (ユーザーエージェント) 判定 (別称「ブラウザ・スニッフィング」（英語）) とモバイル機器判定（英語）[20][23] の2つの方法により、(プログレッシブな拡張の基礎として) HTMLやCSSの特定の機能がサポートされているかどうか推定される。ただし、こうした方法の信頼性はデバイス能力データベースを併用しない限り完全ではない。

より高機能な携帯電話やパソコンに対しては、Modernizr（英語版）、jQuery、jQuery MobileといったJavaScriptフレームワーク（英語）を使用して、ブラウザがHTMLやCSSの機能をサポートしているかを直接調べる (あるいはデバイスやユーザーエージェントを判定する) 方法が一般的である。ポリフィル（英語版）を使用して追加機能をサポートすることもでき—たとえばRWDに必要なメディアクエリのサポート、Internet ExplorerでのHTML5サポートの改善といったことが可能である。

機能判定（英語）の信頼性も完全ではない可能性がある。判定項目によっては、ある機能が実装されていないか、もしくは利用可能であると報告されながら実装が実質的に利用不可能なほど不十分である場合もあり得る[24][25]。

課題とその他のアプローチ

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

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

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

歴史

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

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

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

脚注

  1. ^ Tafreshi, Amir E. Sarabadani; Marbach, Kim; Norrie, Moira C. (5 June 2017). “Proximity-Based Adaptation of Web Content on Public Displays” (英語). International Conference on Web Engineering (ICWE):Web Engineering (Springer, Cham): 282–301. doi:10.1007/978-3-319-60131-1_16. https://link.springer.com/chapter/10.1007/978-3-319-60131-1_16. 
  2. ^ a b c Marcotte, Ethan (May 25, 2010). “Responsive Web design”. A List Apart. 2017年7月27日閲覧。
  3. ^ “Ethan Marcotte's 20 favourite responsive sites”. .net magazine (October 11, 2011). 2017年7月27日閲覧。
  4. ^ a b Gillenwater, Zoe Mickley (December 15, 2010). “Examples of flexible layouts with CSS3 media queries”. pp. 320. 2015年11月5日閲覧。
  5. ^ Schade, Amy (2017年3月2日). “Responsive Web Design (RWD) and User Experience”. www.nngroup.com. Nielson Norman Group. 2017年7月27日閲覧。
  6. ^ Pettit, Nick (August 8, 2012). “Beginner’s Guide to Responsive Web Design”. TeamTreehouse.com blog. 2015年11月5日閲覧。
  7. ^ “Core concepts of Responsive Web design” (September 8, 2014). 2015年11月5日閲覧。
  8. ^ a b c Marcotte, Ethan (March 3, 2009). “Fluid Grids”. A List Apart. 2015年11月5日閲覧。
  9. ^ “Core concepts of Responsive Web design” (September 8, 2014). 2015年11月5日閲覧。
  10. ^ a b Marcotte, Ethan (June 7, 2011). “Fluid images”. A List Apart. 2015年11月5日閲覧。
  11. ^ Hannemann, Anselm (September 7, 2012). “The road to responsive images”. net Magazine. 2015年11月5日閲覧。
  12. ^ Jacobs, Denise (April 24, 2012). “50 fantastic tools for responsive web design”. .net Magazine. 2015年11月5日閲覧。
  13. ^ Gillenwater, Zoe Mickley (October 21, 2011). “Crafting quality media queries”. 2015年11月5日閲覧。
  14. ^ “Responsive design—harnessing the power of media queries”. Google Webmaster Central (April 30, 2012). 2015年11月5日閲覧。
  15. ^ W3C @media rule
  16. ^ “Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper”. Cisco (January 30, 2015). August 4, 2015閲覧。
  17. ^ a b “Official Google Webmaster Central Blog: Rolling out the mobile-friendly update”. Official Google Webmaster Central Blog. August 4, 2015閲覧。
  18. ^ Thevenin, D.; Coutaz, J. (2002). "Plasticity of User Interfaces: Framework and Research Agenda". Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press. Edinburgh. pp. 110–117.
  19. ^ Wroblewski, Luke (November 3, 2009). “Mobile First”. 2015年11月5日閲覧。
  20. ^ a b Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. p. 512. ISBN 978-0-596-80778-8. http://www.mobilexweb.com/book 
  21. ^ “Graceful degradation versus progressive enhancement” (February 3, 2009). 2015年11月5日閲覧。
  22. ^ Designing with Progressive Enhancement. (March 1, 2010). pp. 456. ISBN 978-0-321-65888-3. http://filamentgroup.com/dwpe/ 
  23. ^ a b “Server-Side Device Detection: History, Benefits And How-To”. Smashing magazine (September 24, 2012). 2015年11月5日閲覧。
  24. ^ “BlackBerry Torch: The HTML5 Developer Scorecard | Blog”. Sencha (August 18, 2010). September 11, 2012閲覧。
  25. ^ “Motorola Xoom: The HTML5 Developer Scorecard | Blog”. Sencha (February 24, 2011). September 11, 2012閲覧。
  26. ^ Wroblewski, Luke (2011年5月17日). Mobilism: jQuery Mobile
  27. ^ a b Wroblewski, Luke (2012年2月6日). Rolling Up Our Responsive Sleeves
  28. ^ Wroblewski, Luke (2012年3月14日). Multi-Device Layout Patterns
  29. ^ Wroblewski, Luke (2012年2月29日). Responsive Design ... or RESS
  30. ^ Wroblewski, Luke (2011年9月12日). RESS: Responsive Design + Server Side Components
  31. ^ Andersen, Anders (May 9, 2012). Getting Started with RESS
  32. ^ "Responsive but not completely mobile optimised | Blog". Incentivated.
  33. ^ "Building Smartphone-Optimized Websites". Google.
  34. ^ "Google:The Evolution of Responsive Websites".
  35. ^ Snyder, Matthew; Koren, Etai. “The state of responsive advertising: the publishers' perspective”. .net Magazine (April 30, 2012). 2020年8月11日閲覧。
  36. ^ “Google Partners Help”. google.com. May 21, 2015閲覧。
  37. ^ JavaScript and Responsive Web Design Google Developers
  38. ^ “The Role of Table Layouts in Responsive Web Design”. Web Design Tuts+. May 21, 2015閲覧。
  39. ^ Young, James (2012年8月13日). Top responsive web design problems... testing. .net Magazine.
  40. ^ Best mobile emulators and RWD testing tools. The Mobile Web Design Blog. (November 26, 2011)
  41. ^ Rinaldi, Brian (2012年9月26日).Browser testing... with Adobe Edge Inspect.
  42. ^ “Responsive Design View”. Mozilla Developer Network. May 21, 2015閲覧。
  43. ^ Malte Wassermann. “Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar”. maltewassermann.com. May 21, 2015閲覧。
  44. ^ Kalbach, Jim (July 22, 2012). "The First Responsive Design Website: Audi (circa 2002)." [自主公表?]
  45. ^ Adams, Cameron (September 21, 2004). Resolution dependent layout: Varying layout according to browser width. The Man in Blue.
  46. ^ “G146: Using liquid layout”. w3.org. May 21, 2015閲覧。
  47. ^ “Media Queries”. w3.org. May 21, 2015閲覧。
  48. ^ 15 top web design and development trends for 2012. .net magazine. January 9, 2012
  49. ^ Cashmore, Pete (2012年12月11日). Why 2013 Is the Year of Responsive Web Design

関連項目
Kembali kehalaman sebelumnya