レスポンシブデザインとアダプティブデザインの違いが分かる！【まとめ記事】

レスポンシブデザイン、アダプティプデザインの語句については詳しく説明された下記の記事をご覧ください。
※語句の捉え方の違う記事２つを抜粋しました。

『レスポンシブ・デザインとの違いって？アダプティブ・デザインについて考える』（参考サイト：LIG）

http://liginc.co.jp/web/design/59391

『レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみた』（参考サイト：Rriver）

http://parashuto.com/rriver/responsive-web/definitions-of-responsive-design-and-adaptive-design

次にマルチデバイス対応・レスポンシブ・デザインの普及率をデータで見てみます。

『世界主要企業サイトのレスポンシブ・デザインが1年半で3倍に』（参考サイト：Atlas21）

http://at21.jp/web/topic/topic19.html

世界でマルチデバイス対応・レスポンシブ対応の割合が増えてきていることが分かります。

普及率の増えているレスポンシブ・デザインのメリット・デメリットを下記の解説サイトで把握します。

『レスポンシブWebデザインのメリット・デメリットをわかりやすく！解説』（参考サイト：co*pro）

http://www.coprosystem.co.jp/tipsblog/2013/06/28.html

ワンソースがメリットである反面、設計・構築に手間がかかるなどデメリットであることが伺えます。

ここで、レスポンシブ・デザインとアダプティブ・デザインと比較してみます。

アダプティブ・デザインについては、「語句の説明」で述べた下記URL記事に記述されています。

『レスポンシブ・デザインとの違いって？アダプティブ・デザインについて考える』（参考サイト：LIG）

http://liginc.co.jp/web/design/59391

『レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみた』（参考サイト：Rriver）

http://parashuto.com/rriver/responsive-web/definitions-of-responsive-design-and-adaptive-design

今までの内容を踏まえ、私の主観になりますがざっくりと下記のように両手法をまとめてみました。

レスポンシブ・デザイン：１つのHTMLでCSSをデバイス毎に振り分ける流動的なデザイン。
アダプティブ・デザイン：レイアウト毎に用意したHTML及びCSSを指定した画面サイズにより『システム』で振り分けるデザイン。

それではそれぞれの手法を比較した記事をみてみます。

1.『米国EC市場でも課題のデバイス対策 「レスポンシブ・デザイン対アダプティブ・デザイン」とは？』

https://netshop.impress.co.jp/node/445

米国・日本のECサイトを例にレスポンシブ・アダプティブのそれぞれの特徴が記されています。 この記事では”アダプティブ・デザインはあらゆるすべての端末に対して最適なソースを吐き出して対応する”としていますので、結果としてシステムの限界を述べ、レスポンシブデザインを選択肢の一つとして提示して文を終えています。

2.『レスポンシブ？ アダプティブ？ デザイナーにとってのベストな選択肢とは』

http://uxmilk.jp/4268

こちらの記事ではアダプティブ・デザインは任意の画面サイズとしています。それぞれの手法の作業量の比較もしています。

3.『レスポンシブ・デザインとの違いって？アダプティブ・デザインについて考える』（参考サイト：LIG）

http://liginc.co.jp/web/design/59391

前述のこちらの記事でもお菓子屋さんの例を使った分かりやすい例が掲載されています。

デバイスごとのユーザーにあわせたコンテンツを提供できるアダプティプデザインは高いUXが予想されますがそれにかかる作業コストも予想されます。