アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。
UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます。それはそれでいいのですが、現場の人々の中にはアダプティブデザインというものがあることを知らない人もいます。
では、早速本題に入りましょう。
レスポンシブデザイン
レスポンシブデザインでは、ブラウザのビューポート（表示領域）に基づいてWebサイトの見え方が変わります。通常、開発者はブラウザの幅によってページ上の要素を動的に変化させます。
レスポンシブなWebサイトは完全に流動的で、スクリーンサイズではなくビューポートに対応します。なぜならレスポンシブなWebサイトは、パーセンテージに基づいたCSSの指定を用いることで、デバイスのサイズに基づいてレイアウトスタイルを変えているからです。
ブラウザの幅が400ピクセルであっても45,000ピクセルであっても、ページ内の要素は常に美しく見えるよう指定された比率に合わせて調整されます。
このアプローチの恩恵は数え切れません。最大の利点は、モバイルとデスクトップ、あるいはそれ以外のデバイスであっても、デバイスのサイズ毎にコードを変更する必要がないということです。
ほとんど無限に近い数のスクリーンサイズのためにデザインしなくてはならないため、レスポンシブデザインのほうが難しいと考えるデザイナーは大勢います。この意見は部分的には正しいのですが、レスポンシブデザインのほうがコードが整理され、適応力が高くなります。
アダプティブデザイン
レスポンシブなWebサイトと同じように、アダプティブなWebサイトはブラウザの幅に応じてページのレイアウトを調整しますが、その方法が異なっています。
アダプティブデザインは、同じデザインをそれぞれのサイズ毎に最適化させたものです。
それぞれのデザインのバージョンは、「アンカーポイント」と呼ばれる特定のブラウザの幅に割り当てられます。アンカーポイントは、次のレイアウトに切り替える正確な数値をブラウザに伝えます。
ビューポートのサイズが指定した幅を超えると、ページのコンテンツと要素が各場所にはめ込まれると考えるとわかりやすいでしょう。
通常デザイナーは、もっとも一般的な６種類のビューポートの幅に合うレイアウトデザインを準備します。最小のモバイルデバイスと最大のデスクトップパネルを含む６種のビューポートの幅は、320px、480px、760px、960px、1200px、1600pxです。
アダプティブデザインでは、パーセンテージではなく、各アンカーポイントごとに固定レイアウトを用いています。指定したアンカーポイントに応じて、スクリーンサイズに合わせて調整されます。
デザイナーは同じページを能動的に６回以上デザインしなければならないため、アダプティブデザインも、レスポンシブデザインと同じように複雑な作業になる可能性があります。膨大なページから成るサイトでは、どれだけのレイアウトが必要になるか想像してください。
Webサイトにどちらを採用するか
アダプティブデザイン
予算上の問題であれ、スケジュール上の制約であれ、プロジェクトにかける十分な時間がない場合、サイトのユーザー分析データがあるならアダプティブデザインのほうが圧倒的に有利です。
ユーザー分析データを見れば、どのプラットフォームとデバイスが自分のWebサイトでもっとも使われているかがわかるので、各ビューポートに優先順位をつけることができます。したがって、よく使われるスクリーンサイズに対応することで、時間を節約できます。
以下に示したスクリーンショットでは、明らかにほとんどの人がAppleのiPhoneかiPadで閲覧しています。このデータを活用すれば、特定のビューポートのサイズを優先することが正しいと確信できるでしょう。
Webサイトに若干の手直しが必要な場合、アダプティブデザインは最適です。一方で、もしWebサイトを全面的に見直すならば、レスポンシブデザインに目を向けるべきです。
レスポンシブデザイン
Webサイトを１からデザインするなら、すべてのユーザーが確実に優れたユーザー体験を得られるように、レスポンシブデザインを採用すべきです。
レスポンシブデザインではコーディングの量が増えますが、現在新しくデザインされたWebサイトの大多数は、レスポンシブにデザインされています。なぜなら、単純に得られる結果が優れているからです。
Codalでは、どのようなデザイナーや開発者がプロジェクトにいようと、Webサイトはすべてレスポンシブにデザインされます。
アダプティブデザインとレスポンシブデザインのどちらにするか決めるときは、ページを構成している要素の正しい比率を割り出すのにかかる時間を考慮しなければなりません。
レスポンシブデザインは、画面サイズに合うようにWebサイトの要素を配置し直します。つまり、デザイナーや開発者は、どんなに奇妙なスクリーンサイズであってもデザインの一貫性が保たれるように、試行錯誤を繰り返さなくてはなりません。
結論：どちらを選ぶかはあなた次第
UXデザイナーの方へ：どちらを選ぼうとも忘れてはならないのが、あなたの選択は、Webサイト全体のユーザビリティに何かしらの影響を与えるということです。
発売されるモバイルデバイスの種類が増えるにつれ、レスボンシブであることの重要性は高まるでしょう。コンピューターや多くのスマートフォンの画面のアスペクト比は16:9がもっとも多いですが、今後登場するモバイルデバイスのアスペクト比が同じとは限りません。
たとえば、現在ではスマートウォッチは単体でWebを閲覧する機能はありませんが、遠くない将来にその機能が備わる可能性は高いでしょう。直径３インチあまりのデバイス上において、アダプティブデザインはどのように見えるでしょうか？
