(Translated by https://www.hiragana.jp/)
レスポンシブウェブデザイン - Wikipedia コンテンツにスキップ

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

出典しゅってん: フリー百科ひゃっか事典じてん『ウィキペディア（Wikipedia）』
（レスポンシブデザインから転送てんそう）
アプリのレイアウトが画面がめんのサイズによって変かわる
コンテンツは水みずのごとしは、レスポンシブウェブデザインの原則げんそくを説明せつめいした格言かくげん。

レスポンシブウェブデザイン (英えい: 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

関連かんれん項目こうもく

[編集へんしゅう]
「https://ja.wikipedia.org/w/index.php?title=レスポンシブウェブデザイン&oldid=99769395」から取得しゅとく