レスポンシブ・デザインとの違いって？アダプティブ・デザインについて考える

YUKI

2014.01.15

お久しぶりです、ライターのYUKIです！

モービル・ファーストやレスポンシブ・デザイン、リーンUXやアジャイルなど、デザイナーとして押さえておきたいトピックはたくさんあります。私自身がまだまだ勉強不足なこともあり、今回はここに挙げたもののうちおそらく皆さんもよくご存知のレスポンシブ・デザインと同意味で使われることがある、アダプティブ・デザインについての個人的な見解をシェアさせて頂こうと思います。

「レスポンシブ・デザインて何？」という方は、まずLIGの過去記事をどうぞ。
必読！5分でわかる流行のレスポンシブWebデザインまとめ
 必読！5分でわかる流行のレスポンシブWebデザインまとめその2
必読！5分でわかる流行のレスポンシブWebデザインまとめ制作編

はじめに

レスポンシブ・デザインとアダプティブ・デザインが混同される理由

スマートフォンやタブレット、スマートテレビなどの普及により、レスポンシブ・デザインは、ユーザビリティやアクセサビリティと並び、IT業界やデザインに携わる人間が理解しておきたい基本事項の一つとなりつつあります。そのレスポンシブ・デザインとよく混合されるのがアダプティブ・デザインです。混同される理由の一つにはアダプティブ・レイアウトというテクニックのみをアダプティブ・デザインと呼ぶ人と、それ以外のいろいろなメソッドや手法を含んだものをアダプティブ・デザインと呼ぶ人の両方がいるからのようです。

アダプティブ・レイアウトとは

レスポンシブ・デザインとアダプティブ・デザインが比較される時、必ずと言っていいほど最初に指摘されるのがメディアクエリの設定方法です。ここで登場するのがアダプティブ・レイアウトです。違いをまとめると、

レスポンシブ・デザイン・・・フルード（リキッド）でデザインされ、デスクトップ、タブレットそしてスマートフォンという３つのブレイクポイントでレイアウトを変更。
アダプティブ・レイアウト・・・コンテクストに応じて、最適化された固定値のブレイクポイントでレイアウトを変更。

という感じですが、アダプティブ・レイアウトは、あくまでもアダプティブ・デザインの一部分に過ぎないのではないかというのがここでの主張です。

定義

で、結局レスポンシブ・デザインとアダプティブ・デザインの違いって何よ？という質問に対し、私個人が出した答えはこれです。

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

つまり、言い換えれば、「どのデバイスを使っても、同じ経験と機能を提供してくれる（デバイス中心）」のがレスポンシブ・デザインとすれば、「どこで、どのデバイスを使っても、それに応じた経験と機能を提供してくれる（ユーザー中心）」のが、アダプティブ・デザインと言えるのではないでしょうか。そこにある決定的な違いは、最優先しているのがデバイスか、ユーザーかということです。

実装編

それでは、更に掘り下げて、実際にはどのように実装されるのかを比較してみます。

レスポンシブ・デザイン・・・CSS3のメディアクエリやフルード（リキッド）レイアウトなどを使用して、ユーザーが使用する機器、画面サイズや解像度などに対応したレイアウト、文字のサイズ、画像、コンテンツの表示方法を変更する。
＊クライアント側のみ
アダプティブ・デザイン・・・PEを使用して、ユーザーが使用する環境や状況、目的、画面サイズや解像度なども考慮して最適化したブレイクポイントに基づいたレイアウト、文字のサイズ、画像、コンテンツの表示方法を変更する。
＊クライアント側とサーバー側

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

コンテンツ = セマンティクス（意味づけ）されたHTML
プレゼンテーション（表示） = CSS やスタイル
クライアント側のスクリプト = JavaScript や jQuery の動作

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

結論

【レスポンシブ・デザイン】主役：デバイス
異なるデバイスやブラウザに適応したコンテンツと機能を利用できる。

【アダプティブ・デザイン】主役：ユーザー
異なる環境・状況・使用目的に適応したコンテンツと機能を利用できる。

ここでちょっとトリッキーなのは、アダプティブ・デザインの中に、レスポンシブ・デザインの要素が含まれる場合でしょう。デバイスを含め、ユーザーの目的・環境・状況に応じた内容を提供するアダプティブ・デザインで作られたものには、「どのようなデバイスやブラウザでも同じコンテンツと機能を利用できる」というレスポンシブ・デザインの要素が含まれるものもあるからです。その場合、「デバイスに依存しない」という意味の「デバイス・アグノスティック」という言葉がよく使われます。

つまり、デバイスを最優先させたレスポンシブ・デザインは、既にデバイス・アグノスティックですが、ユーザーを最優先させたアダプティブ・デザインは、必ずしもデバイス・アグノスティックである必要はないということですね。

それにしても、レスポンシブ・デザイン、アダプティブ・デザイン、そしてデバイス・アグノスティックなアダプティブ・デザイン・・・と書いているだけで頭の中がぐるぐるになりそうなので、「もっと何か別の簡単な呼び方ないの！？ (╮・ω・╭) ｵｰﾏｲｶﾞｰ」と言いたくなります（笑）。

まとめ

最後にやや強引に、お客さんが各自テイクアウト用の器を持って買いに来るお菓子屋さんの例を使って、まとめてみます（レアすぎるケースですが・・w）。

一般的なサイズでパッケージしたお菓子セットを売るのが、レスポンシブでもアダプティブでもない普通のデザインだとすると、

お客さんが持ってくる、全ての器に応じた大きさに合わせてパッケージしたお菓子セットを売る・・・レスポンシブ・デザイン

お客さんが持ってくることが多い器の幾つかの大きさに合わせてパッケージし、お客さんの好みや都合に応じて盛り合わせたお菓子セットを売る・・・アダプティブ・デザイン
お客さんが持って来る、全ての器に応じた大きさに合わせてパッケージし、お客さんの好みや都合に応じて盛り合わせたお菓子セットを売る・・・デバイス・アグノスティックなアダプティブ・デザイン

という感じです。こうやって見ると、おもてなし度が一番高いのは、デバイス・アグノスティックなアダプティブ・デザインということになりますが、私自身は「機種のスペックこれからも変わり続けるだろうし、あんまりやり過ぎない方がいいのではないか。(・ω・)」と思っています（笑）。

既にレスポンシブ・デザインはテンプレート化したものが多く出回っているし、そのうち条件に応じて表示するコンテンツも管理出来るようなアダプティブ・デザインが適用できるツールも出て来るかもしれませんね。（私が知らないだけで、もう出ているのかも）

尚、アダプティブ・デザインに関してはいろいろな意見があるようで、この記事の内容は、あくまでも私個人の見解によるものであり、こういう考え方もあるのだと思って頂ければ幸いです。また、「それは違う！」「俺・私はこう思う！」というようなご意見をお持ちの方があれば、是非お伺いしたく、ご遠慮なく、フィードバックなり、お叱り頂ければ幸いです。お互い切磋琢磨いたしましょう。(・∀・)

＊実際、私とは全く逆の意見のお持ちの方もおられますので、その方の記事のリンクも下に貼ってあります。