コンテンツにスキップ

「レスポンシブウェブデザイン」の版間の差分

出典: フリー百科事典『ウィキペディア（Wikipedia）』
履歴の双方向閲覧
← 古い編集新しい編集 →
削除された内容 追加された内容
ビジュアルウィキテキスト
AllWeb (会話 | 投稿記録)
1 回編集
m よみがなの違い
w:en:Responsive_web_design (11:25, 10 July 2017‎) までの差分を反映
1行目: 1行目:
[[ファイル:Content-is-like-water-1980.jpg|thumb|
[[ファイル:Content-is-like-water-1980.jpg|thumb|
'''コンテンツは水のごとし'''は、レスポンシブウェブデザインの原則を説明した格言。]]
'''コンテンツは水のごとし'''は、レスポンシブウェブデザインの原則を説明した格言。]]
'''レスポンシブウェブデザイン''' ('''Responsive Web Design, RWD''') は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指した[[ウェブデザイン]]の手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部としての閲覧者の近さがRWDの延長部分として見なされている<ref>{{cite journal|last1=Tafreshi|first1=Amir E. Sarabadani|last2=Marbach|first2=Kim|last3=Norrie|first3=Moira C.|title=Proximity-Based Adaptation of Web Content on Public Displays|journal=International Conference on Web Engineering (ICWE):Web Engineering|date=5 June 2017|pages=282–301|doi=10.1007/978-3-319-60131-1_16|url=https://link.springer.com/chapter/10.1007/978-3-319-60131-1_16|publisher=Springer, Cham|language=en}}</ref>。ニールセンノルマングループは、「コンテンツ、デザイン、そしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた。<ref name="fluid_grid">{{cite web |last=Marcotte |first=Ethan|title=Responsive Web design|date=May 25, 2010|accessdate=2017-07-27|work = A List Apart |url=http://www.alistapart.com/articles/responsive-web-design/}}</ref><ref name="RWD_Exs">{{cite web|title=Ethan Marcotte's 20 favourite responsive sites| publisher = .net magazine | date=October 11, 2011|url=http://www.creativebloq.com/css3/ethan-marcottes-20-favourite-responsive-sites-10112931|accessdate=2017-07-27}}</ref><ref name="ZMGflexEx" /><ref>{{Cite web|url=Schade, Amy. "Responsive Web Design (RWD) and User Experience." Responsive Web Design (RWD) and User Experience. Nielson Norman Group, 04 May 2014. Web. 02 Mar. 2017. https://www.nngroup.com/articles/responsive-web-design-definition/|title=Responsive Web Design (RWD) and User Experience|last=|first=|date=|website=www.nngroup.com|archive-url=|archive-date=|dead-url=|date=2017-03-02|accessdate=2017-07-27}}</ref>
'''レスポンシブウェブデザイン''' ('''Responsive Web Design''', '''RWD''')''' '''は、デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するための[[ウェブデザイン]]の手法。'''<ref name="fluid_grid"><cite class="citation web" contenteditable="false">Marcotte, Ethan (May 25, 2010). </cite></ref><ref name="RWD_Exs"><cite class="citation web" contenteditable="false">[http://www.creativebloq.com/css3/ethan-marcottes-20-favourite-responsive-sites-10112931 "Ethan Marcotte's 20 favourite responsive sites"]. .net magazine. </cite></ref><ref name="ZMGflexEx" /><br>
'''


RWDでデザインしたサイト<ref name="fluid_grid" /><ref><cite class="citation web" contenteditable="false">Pettit, Nick (August 8, 2012). </cite></ref>は、比率ベースのフルードグリッド、<ref><cite class="citation web" contenteditable="false">[http://msdn.microsoft.com/en-us/magazine/hh653584.aspx "Core concepts of Responsive Web design"]. </cite></ref><ref name="EM_FG"><cite class="citation web" contenteditable="false">Marcotte, Ethan (March 3, 2009). </cite></ref> フレキシブルイメージ<ref name="EM_FI"><cite class="citation web" contenteditable="false">Marcotte, Ethan (June 7, 2011). </cite></ref><ref><cite class="citation web" contenteditable="false">Hannemann, Anselm (September 7, 2012). </cite></ref><ref name="EM"><cite class="citation web" contenteditable="false">Jacobs, Denise (April 24, 2012). [http://www.creativebloq.com/css3/tools-responsive-web-design-5132770 "50 fantastic tools for responsive web design"]. .net Magazine.</cite><span class="Z3988" title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fen.wikipedia.org%3AResponsive+web+design&rft.aufirst=Denise&rft.aulast=Jacobs&rft.btitle=50+fantastic+tools+for+responsive+web+design&rft.date=April+24%2C+2012&rft.genre=book&rft_id=http%3A%2F%2Fwww.creativebloq.com%2Fcss3%2Ftools-responsive-web-design-5132770&rft.pub=.net+Magazine&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook" contenteditable="false">&nbsp;</span></ref> <code>@media</code>ルールの拡張である[[CSS3]]メディアクエリ<ref name="ZMGflexEx"><cite class="citation web" contenteditable="false">Gillenwater, Zoe Mickley (December 15, 2010). </cite></ref><ref name="ZMGmediaQ"><cite class="citation web" contenteditable="false">Gillenwater, Zoe Mickley (October 21, 2011). </cite></ref><ref><cite class="citation web" contenteditable="false">[http://googlewebmastercentral.blogspot.jp/2012/04/responsive-design-harnessing-power-of.html "Responsive design—harnessing the power of media queries"]. </cite></ref> を以下のように使用することで、レイアウトを表示環境に適応させる。<ref>[[World Wide Web Consortium|W3C]] [http://www.w3.org/TR/CSS2/media.html#at-media-rule @media rule]</ref>
RWDでデザインしたサイト<ref name="fluid_grid" /><ref><cite class="citation web" contenteditable="false">Pettit, Nick (August 8, 2012). </cite></ref>は、比率ベースのフルードグリッド、<ref><cite class="citation web" contenteditable="false">[http://msdn.microsoft.com/en-us/magazine/hh653584.aspx "Core concepts of Responsive Web design"]. </cite></ref><ref name="EM_FG"><cite class="citation web" contenteditable="false">Marcotte, Ethan (March 3, 2009). </cite></ref> フレキシブルイメージ<ref name="EM_FI"><cite class="citation web" contenteditable="false">Marcotte, Ethan (June 7, 2011). </cite></ref><ref><cite class="citation web" contenteditable="false">Hannemann, Anselm (September 7, 2012). </cite></ref><ref name="EM"><cite class="citation web" contenteditable="false">Jacobs, Denise (April 24, 2012). [http://www.creativebloq.com/css3/tools-responsive-web-design-5132770 "50 fantastic tools for responsive web design"]. .net Magazine.</cite><span class="Z3988" title="ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fen.wikipedia.org%3AResponsive+web+design&rft.aufirst=Denise&rft.aulast=Jacobs&rft.btitle=50+fantastic+tools+for+responsive+web+design&rft.date=April+24%2C+2012&rft.genre=book&rft_id=http%3A%2F%2Fwww.creativebloq.com%2Fcss3%2Ftools-responsive-web-design-5132770&rft.pub=.net+Magazine&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook" contenteditable="false">&nbsp;</span></ref> <code>@media</code>ルールの拡張である[[CSS3]]メディアクエリ<ref name="ZMGflexEx"><cite class="citation web" contenteditable="false">Gillenwater, Zoe Mickley (December 15, 2010). </cite></ref><ref name="ZMGmediaQ"><cite class="citation web" contenteditable="false">Gillenwater, Zoe Mickley (October 21, 2011). </cite></ref><ref><cite class="citation web" contenteditable="false">[http://googlewebmastercentral.blogspot.jp/2012/04/responsive-design-harnessing-power-of.html "Responsive design—harnessing the power of media queries"]. </cite></ref> を以下のように使用することで、レイアウトを表示環境に適応させる。<ref>[[World Wide Web Consortium|W3C]] [http://www.w3.org/TR/CSS2/media.html#at-media-rule @media rule]</ref>
8行目: 7行目:
* 可変サイズの画像も、コンテナ[[HTML要素|要素]]の外にはみ出て表示されるのを防ぐため、相対単位を使用する。<ref name="EM_FI"><cite class="citation web" contenteditable="false">Marcotte, Ethan (June 7, 2011). </cite></ref>
* 可変サイズの画像も、コンテナ[[HTML要素|要素]]の外にはみ出て表示されるのを防ぐため、相対単位を使用する。<ref name="EM_FI"><cite class="citation web" contenteditable="false">Marcotte, Ethan (June 7, 2011). </cite></ref>
* メディアクエリにより、サイトを表示しているデバイスの特徴 (ブラウザの幅が最も一般的) に基づいて、ページに異なるCSSスタイルを使用することができる。
* メディアクエリにより、サイトを表示しているデバイスの特徴 (ブラウザの幅が最も一般的) に基づいて、ページに異なるCSSスタイルを使用することができる。
今やモバイルトラフィックがインターネットトラフィック全体の半分以上を占めているため、レスポンシブウェブデザインはますます重要になっている。<ref><cite class="citation web" contenteditable="false">[http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html "Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper"]. </cite></ref> この傾向はかなり定着しており、Googleは、モバイル機器から検索した場合、モバイル機器に優しいサイトの評価を引き上げ始めた。<ref><cite class="citation web" contenteditable="false">[http://googlewebmastercentral.blogspot.com/2015/04/rolling-out-mobile-friendly-update.html "Official Google Webmaster Central Blog: Rolling out the mobile-friendly update"]. </cite></ref> これは、モバイル機器に優しくないサイトが最終的に不利になる効果がある。
今やモバイルトラフィックがインターネットトラフィック全体の半分以上を占めているため、レスポンシブウェブデザインはますます重要になっている。<ref>{{cite web|url=http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html|title=Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper|date=January 30, 2015|work=Cisco|accessdate=August 4, 2015}}</ref> そのためGoogleは、2015年に[[モバイルゲドン]]を発表し、モバイル機器から検索した場合、モバイル機器に優しいサイトの評価を引き上げ始めた。[14] これは、モバイル機器に優しくないサイトが最終的に不利になる効果がある。<ref>{{cite web|url=http://googlewebmastercentral.blogspot.com/2015/04/rolling-out-mobile-friendly-update.html|title=Official Google Webmaster Central Blog: Rolling out the mobile-friendly update|work=Official Google Webmaster Central Blog|accessdate=August 4, 2015}}</ref> レスポンシブウェブデザインは、[[ユーザーインターフェースプラスティシティ]]の一例である。<ref>{{cite conference| first = D. | last = Thevenin | first2 = J. | last2 = Coutaz | title = Plasticity of User Interfaces: Framework and Research Agenda | book-title = Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press | place = Edinburgh | pages = 110–117 | year = 2002 }}</ref>


== 関連概念 ==
== 関連概念 ==

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

モバイルファースト、控えめなJavaScript, プログレッシブエンハンスメントは、RWDに先立つ関連概念である。基本的な携帯電話のブラウザは、JavaScriptやメディアクエリを理解しない。そのため、推奨される方法は、複雑で画像を多用したサイトを携帯電話で動作させるためにグレイスフルデグラデーションに依存するのではなく、基本のウェブサイトを制作してから[[Wikipedia:「要出典」をクリックされた方へ|<nowiki/>]]スマートフォンやパソコン用に拡張することである。<ref><cite class="citation web" contenteditable="false">Wroblewski, Luke (November 3, 2009). </cite></ref><ref name="Firtman"><cite class="citation book" contenteditable="false">Firtman, Maximiliano (July 30, 2010). </cite></ref><ref><cite class="citation web" contenteditable="false">[http://docs.webplatform.org/wiki/tutorials/graceful_degradation_versus_progressive_enhancement "Graceful degradation versus progressive enhancement"]. </cite></ref><ref><cite class="citation book" contenteditable="false">[http://filamentgroup.com/dwpe/ ''Designing with Progressive Enhancement''][http://filamentgroup.com/dwpe/]. </cite></ref>
モバイルファースト、控えめなJavaScript, プログレッシブエンハンスメントは、RWDに先立つ関連概念である。基本的な携帯電話のブラウザは、JavaScriptやメディアクエリを理解しない。そのため、推奨される方法は、複雑で画像を多用したサイトを携帯電話で動作させるためにグレイスフルデグラデーションに依存するのではなく、基本のウェブサイトを制作してから[[Wikipedia:「要出典」をクリックされた方へ|<nowiki/>]]スマートフォンやパソコン用に拡張することである。<ref><cite class="citation web" contenteditable="false">Wroblewski, Luke (November 3, 2009). </cite></ref><ref name="Firtman"><cite class="citation book" contenteditable="false">Firtman, Maximiliano (July 30, 2010). </cite></ref><ref><cite class="citation web" contenteditable="false">[http://docs.webplatform.org/wiki/tutorials/graceful_degradation_versus_progressive_enhancement "Graceful degradation versus progressive enhancement"]. </cite></ref><ref><cite class="citation book" contenteditable="false">[http://filamentgroup.com/dwpe/ ''Designing with Progressive Enhancement''][http://filamentgroup.com/dwpe/]. </cite></ref>

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

ウェブサイトでJavaScript非対応の基本的なモバイル機器のサポートが必須の場合、[[ユーザーエージェント|ブラウザ (ユーザーエージェント) 判定]] (ブラウザスニッフィングとも呼ばれる) とモバイル機器判定<ref name="Firtman" /><ref name="SSDD">{{cite web2|last=|first=|publisher = Smashing magazine |title=Server-Side Device Detection: History, Benefits And How-To|date=September 24, 2012 |url=http://mobile.smashingmagazine.com/2012/09/24/server-side-device-detection-history-benefits-how-to/}}</ref>の2つの方法により、HTMLやCSSの特定の機能がサポートされているかが推定される。ただし、こうした方法の信頼性は、デバイス能力データベースを併用しない限り完全ではない。
ウェブサイトでJavaScript非対応の基本的なモバイル機器のサポートが必須の場合、[[ユーザーエージェント|ブラウザ (ユーザーエージェント) 判定]] (ブラウザスニッフィングとも呼ばれる) とモバイル機器判定<ref name="Firtman" /><ref name="SSDD">{{cite web2|last=|first=|publisher = Smashing magazine |title=Server-Side Device Detection: History, Benefits And How-To|date=September 24, 2012 |url=http://mobile.smashingmagazine.com/2012/09/24/server-side-device-detection-history-benefits-how-to/}}</ref>の2つの方法により、HTMLやCSSの特定の機能がサポートされているかが推定される。ただし、こうした方法の信頼性は、デバイス能力データベースを併用しない限り完全ではない。


23行目: 26行目:
多くのサイト運営者がレスポンシブデザインを実装し始めたが、RWDにとって現在の課題は、一部の[[バナー広告]]やビデオがフルードではないことである。<ref><cite class="citation web" contenteditable="false">[http://www.notiontechnologies.com/blog/google-the-evolution-of-responsive-websites/ "Google:The Evolution of Responsive Websites"]<span class="reference-accessdate">. </span></cite></ref> ただし、[[検索連動型広告]]やディスプレイ広告は、特定のデバイスプラットフォームターゲットと、デスクトップ、スマートフォン、基本的なモバイル機器用の様々な広告サイズのフォーマットをサポートしている。異なるプラットフォームには異なるランディングページURLが使用できるが、<ref><cite class="citation web" contenteditable="false">Snyder, Matthew; Koren, Etai (April 30, 2012). </cite></ref> あるいは[[Ajax]]を使用して1つのページ上で様々なプラットフォーム用の広告を表示できる。<ref name="SSDD" /><ref name="RWD" /><ref><cite class="citation web" contenteditable="false">[http://support.google.com/adwords/certification/bin/static.py?hl=en&page=guide.cs&guide=23292 "Google Partners Help"]. ''google.com''<span class="reference-accessdate">. </span></cite></ref> CSSテーブルにより、固定とフルードのハイブリッドレイアウトが実現可能となる。<ref>[https://developers.google.com/webmasters/smartphone-sites/javascript JavaScript and Responsive Web Design] Google Developers</ref>
多くのサイト運営者がレスポンシブデザインを実装し始めたが、RWDにとって現在の課題は、一部の[[バナー広告]]やビデオがフルードではないことである。<ref><cite class="citation web" contenteditable="false">[http://www.notiontechnologies.com/blog/google-the-evolution-of-responsive-websites/ "Google:The Evolution of Responsive Websites"]<span class="reference-accessdate">. </span></cite></ref> ただし、[[検索連動型広告]]やディスプレイ広告は、特定のデバイスプラットフォームターゲットと、デスクトップ、スマートフォン、基本的なモバイル機器用の様々な広告サイズのフォーマットをサポートしている。異なるプラットフォームには異なるランディングページURLが使用できるが、<ref><cite class="citation web" contenteditable="false">Snyder, Matthew; Koren, Etai (April 30, 2012). </cite></ref> あるいは[[Ajax]]を使用して1つのページ上で様々なプラットフォーム用の広告を表示できる。<ref name="SSDD" /><ref name="RWD" /><ref><cite class="citation web" contenteditable="false">[http://support.google.com/adwords/certification/bin/static.py?hl=en&page=guide.cs&guide=23292 "Google Partners Help"]. ''google.com''<span class="reference-accessdate">. </span></cite></ref> CSSテーブルにより、固定とフルードのハイブリッドレイアウトが実現可能となる。<ref>[https://developers.google.com/webmasters/smartphone-sites/javascript JavaScript and Responsive Web Design] Google Developers</ref>


現在RWDデザインをバリデーションし、テストする方法は多くあり、<ref><cite class="citation web" contenteditable="false">[http://webdesign.tutsplus.com/tutorials/the-role-of-table-layouts-in-responsive-web-design--webdesign-10294 "The Role of Table Layouts in Responsive Web Design"]. </cite></ref> モバイルサイトバリデータとモバイルエミュレータ<ref><cite class="citation web" contenteditable="false">Young, James (August 13, 2012). </cite></ref> からAdobe Edge Inspectのような同期型テストツールまで存在する。<ref><cite class="citation web" contenteditable="false">[http://www.themobilewebdesignblog.com/2011/11/26/best-mobile-emulators-responsive-design-testing-tools/ "Best mobile emulators and RWD testing tools"]. </cite></ref> FirefoxブラウザとChromeコンソールは、レスポンシブデザインのビューポートリサイズツールを提供している (サードパーティも提供している)。<ref><cite class="citation web" contenteditable="false">Rinaldi, Brian (September 26, 2012). </cite></ref><ref><cite class="citation web" contenteditable="false">[https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View "Responsive Design View"]. </cite></ref>
現在RWDデザインをバリデーションし、テストする方法は多くあり、<ref><cite class="citation web" contenteditable="false">[http://webdesign.tutsplus.com/tutorials/the-role-of-table-layouts-in-responsive-web-design--webdesign-10294 "The Role of Table Layouts in Responsive Web Design"]. </cite></ref> モバイルサイトバリデータとモバイルエミュレータ<ref><cite class="citation web" contenteditable="false">Young, James (August 13, 2012). </cite></ref> からAdobe Edge Inspectのような同期型テストツールまで存在する。<ref><cite class="citation web" contenteditable="false">[http://www.themobilewebdesignblog.com/2011/11/26/best-mobile-emulators-responsive-design-testing-tools/ "Best mobile emulators and RWD testing tools"]. </cite></ref> Chrome、Firefox、そしてSafariの各ブラウザとChromeコンソールは、レスポンシブデザインのビューポートリサイズツールを提供している (サードパーティも提供している)。<ref><cite class="citation web" contenteditable="false">Rinaldi, Brian (September 26, 2012). </cite></ref><ref><cite class="citation web" contenteditable="false">[https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View "Responsive Design View"]. </cite></ref>


== 歴史 ==
== 歴史 ==

2017年7月26日 (水) 15:07時点における版

ファイル:Content-is-like-water-1980.jpg
コンテンツは水のごとしは、レスポンシブウェブデザインの原則を説明した格言。

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

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

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

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

関連概念

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

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

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

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

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

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

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

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

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

歴史

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

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

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

関連記事

参考文献

  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 (2010年5月25日). “Responsive Web design”. A List Apart. 2017年7月27日閲覧。
  3. ^ “Ethan Marcotte's 20 favourite responsive sites”. .net magazine (2011年10月11日). 2017年7月27日閲覧。
  4. ^ a b Gillenwater, Zoe Mickley (December 15, 2010).
  5. ^ “[Schade, Amy. "Responsive Web Design (RWD) and User Experience." Responsive Web Design (RWD) and User Experience. Nielson Norman Group, 04 May 2014. Web. 02 Mar. 2017. https://www.nngroup.com/articles/responsive-web-design-definition/ Responsive Web Design (RWD) and User Experience]”. www.nngroup.com (2017年3月2日). 2017年7月27日閲覧。
  6. ^ Pettit, Nick (August 8, 2012).
  7. ^ "Core concepts of Responsive Web design".
  8. ^ a b Marcotte, Ethan (March 3, 2009).
  9. ^ a b Marcotte, Ethan (June 7, 2011).
  10. ^ Hannemann, Anselm (September 7, 2012).
  11. ^ Jacobs, Denise (April 24, 2012). "50 fantastic tools for responsive web design". .net Magazine. 
  12. ^ Gillenwater, Zoe Mickley (October 21, 2011).
  13. ^ "Responsive design—harnessing the power of media queries".
  14. ^ W3C @media rule
  15. ^ “Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper”. Cisco (2015年1月30日). 2015年8月4日閲覧。
  16. ^ “Official Google Webmaster Central Blog: Rolling out the mobile-friendly update”. Official Google Webmaster Central Blog. 2015年8月4日閲覧。
  17. ^ 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.
  18. ^ Wroblewski, Luke (November 3, 2009).
  19. ^ a b Firtman, Maximiliano (July 30, 2010).
  20. ^ "Graceful degradation versus progressive enhancement".
  21. ^ Designing with Progressive Enhancement[1].
  22. ^ a b "Server-Side Device Detection: History, Benefits And How-To". Smashing magazine. 24 September 2012. {{cite web}}: Cite webテンプレートでは|access-date=引数が必須です。 (説明)
  23. ^ "BlackBerry Torch: The HTML5 Developer Scorecard | Blog".
  24. ^ "Motorola Xoom: The HTML5 Developer Scorecard | Blog".
  25. ^ Wroblewski, Luke (May 17, 2011).
  26. ^ a b Wroblewski, Luke (February 6, 2012).
  27. ^ Wroblewski, Luke (March 14, 2012).
  28. ^ Wroblewski, Luke (February 29, 2012).
  29. ^ Wroblewski, Luke (September 12, 2011).
  30. ^ Andersen, Anders (May 9, 2012).
  31. ^ "Responsive but not completely mobile optimised | Blog".
  32. ^ "Building Smartphone-Optimized Websites".
  33. ^ "Google:The Evolution of Responsive Websites".
  34. ^ Snyder, Matthew; Koren, Etai (April 30, 2012).
  35. ^ "Google Partners Help". google.com.
  36. ^ JavaScript and Responsive Web Design Google Developers
  37. ^ "The Role of Table Layouts in Responsive Web Design".
  38. ^ Young, James (August 13, 2012).
  39. ^ "Best mobile emulators and RWD testing tools".
  40. ^ Rinaldi, Brian (September 26, 2012).
  41. ^ "Responsive Design View".
  42. ^ Malte Wassermann.
  43. ^ https://experiencinginformation.wordpress.com/2012/07/22/the-first-responsive-design-website-audi-circa-2002/ [self-published source?
  44. ^ Adams, Cameron (September 21, 2004).
  45. ^ "G146: Using liquid layout". w3.org.
  46. ^ "Media Queries". w3.org.
  47. ^ "15 top web design and development trends for 2012". .net magazine. 9 January 2012. {{cite web}}: Cite webテンプレートでは|access-date=引数が必須です。 (説明)
  48. ^ Cashmore, Pete (11 December 2012). "Why 2013 Is the Year of Responsive Web Design". {{cite web}}: Cite webテンプレートでは|access-date=引数が必須です。 (説明)
「https://ja.wikipedia.org/w/index.php?title=レスポンシブウェブデザイン&oldid=64913567」から取得