1. まとめトップ

この記事は私がまとめました

osaboriさん

レスポンシブデザインとアダプティブデザイン

レスポンシブデザインとは、デスクトップからスマートフォンやタブレットまで、Webのコンテンツをデバイスのスクリーンサイズに最適化して表示する手法です。端末ごとにHTMLを作成するのではなく、一つのHTMLデータをディスプレイの解像度に合わせCSSを切り替えて表示します。

一方、アダプティブデザインではユーザーのコンテキストに合わせて表示する内容を切り替えます。
例えば、性別、年齢、職業などのユーザー属性の他に、外出するときは車に乗るのか、バスに乗るのか、電車を使うのか、どこに行くのかというユーザーの行動を分析します。
ショッピングの場合は、スーパーに行くのかショッピングモールに行くのか、いつ、誰と何を買いに行くのによってユーザーの行動は異なります。

GPS、カメラ、マイク、温度計、加速度計などのセンサーがユーザーの置かれている環境を感知し、Wifiで渋滞情報、気象情報、SNSなどの情報を取得、データを集積し、またユーザーの行動パターンを学習することで、ユーザーが特定の時間に何の情報を必要としているかを予測します。

定義の違い

レスポンシブ・デザイン・・・デバイスに関わらず、どんな画面サイズでも同じコンテンツを利用できるように、レイアウトならびに画像や文字のサイズなどを変更する手法。

アダプティブ・デザイン・・・ユーザーの使用目的や状況、環境などに応じたコンテンツを、ユーザーの使用するデバイスや画面サイズに関係なく同じコンテンツを利用できるように、レイアウトならびに画像や文字のサイズ、並びに必要に応じてコンテンツや機能を変更する手法。


つまり、言い換えれば、
「どのデバイスを使っても、同じ経験と機能を提供してくれる(デバイス中心)」のがレスポンシブ・デザインとすれば、

「どこで、どのデバイスを使っても、それに応じた経験と機能を提供してくれる(ユーザー中心)」のが、アダプティブ・デザイン。

そこにある決定的な違いは、最優先しているのがデバイスか、ユーザーかということです。

Google NowというAndroidのアプリは、キーワードや位置情報を入力して検索することなく、ユーザーが必要としている情報を表示します。

例えば、毎朝、ユーザーの現在地を特定して気象情報を送信します。通勤時には、家を出発する前に交通の混雑状況と目的地までのルートを知らせます。
電車やバスを利用するときは、駅やバス停に着いた時に次の電車やバスがいつ来るかを教えてくれます。
スポーツのお気に入りのチームを登録しておけば、試合が始まったときにスコアの情報が届きます。

アダプティブデザインがユーザーの行動を変える

Aisle Phoneは、スーパーマーケットのどこの棚に何があるかを知らせることでショッピングをサポートするアプリです。
ショッピングリストのアプリと組み合わせて使うと、リスト内の商品が陳列されている棚の前を通ったときにアラートがでます。

Google Indoor Mapsは、空港、ショッピングモール、大型スーパー、駅の中のマップを表示します。GPSに対しIPS(indoor positioning system)と呼ばれます。
位置情報だけではなく、どのフロアにいるかという情報も表示することができます。

店内に設置されたセンサーは、誰と買い物をしているのか、どのくらい買い物に時間をかけているのかという情報を集め、また表情から感情を読み取ります。
IPSのサービスと連動することで新たなショッピング体験を提供するでしょう。例えば、二人以上で買い物に行ったときに、パートナーが店内のどこにいて何を買っているかという情報を互いにシェアすることで、広い店内で効率よく分担して買い物をすることも可能になるのです。

実装の違い

レスポンシブ・デザイン・・・CSS3のメディアクエリやフルード(リキッド)レイアウトなどを使用して、ユーザーが使用する機器、画面サイズや解像度などに対応したレイアウト、文字のサイズ、画像、コンテンツの表示方法を変更する。
*クライアント側のみ

アダプティブ・デザイン・・・PEを使用して、ユーザーが使用する環境や状況、目的、画面サイズや解像度なども考慮して最適化したブレイクポイントに基づいたレイアウト、文字のサイズ、画像、コンテンツの表示方法を変更する。
*クライアント側とサーバー側

【補足】PEとは

PE=プログレッシブ・エンハンスメントと呼ばれるもので、デバイスやブラウザなどではなく、ユーザーに焦点をあてた以下の3つのレイヤーによって形成されています。

コンテンツ = セマンティクス(意味づけ)されたHTML

プレゼンテーション(表示) = CSS やスタイル

クライアント側のスクリプト = JavaScript や jQuery の動作

見た目だけが変更するレスポンス・デザインと違い、
アダプティブ・デザインは、中身も変更してしまう訳ですね。

1