Googleは、レスポンシブWebデザイン （RWD） を常に推奨しており、実際にモバイルフレンドリーなサイトを上位に表示させる大きなアップデートを、４月21日に開始する予定です。そのアップデートの情報では、レスポンシブデザインを使用しなければならないかどうかは明確にされていませんが、サイトが優れたUXとパフォーマンスを備え、モバイルデバイス上でアクセス可能な状態にすることを推奨しています。
この点に留意して、パフォーマンスとUXに関するアダプティブデザインとレスポンシブデザインの長所と短所をそれぞれ検証していきましょう。
モバイルデバイスが台頭して以来私たちが直面している大きな論争の１つは、レスポンシブデザイン、アダプティブWebデザイン （AWD）、または （独自のURLを持つ）単独のモバイルサイトのうち、どれを開発することを選択するべきかということです。この議論の目的上、今回は単独のモバイルサイトは除外します。というのも、単独のサイトは より多くの初期費用とメンテナンス費用がかかる 独立したサイトを作成しなければならないため、デザイナーと事業にとって最も好まれない解決策であると考えられるからです。
違いは何？
ではまず、レスポンシブデザインとアダプティブデザインの大きな違いは何でしょうか？
簡潔に言うと、レスポンシブデザインは流動的で、ターゲットデバイスの種類にかかわらず、画面のサイズに応じて調節することができます。レスポンシブデザインはCSSメディアクエリを使用しており、ディスプレイの種類や幅、高さなど、ターゲットデバイスを基にスタイルを変更します。これらの要素のうち、異なる画面に応じて調節するのに必要なものはいずれか1つのみです。
一方アダプティブデザインは、最初に読み込まれた後は応答しないブレークポイントに基づいた、静的なレイアウトを利用します。アダプティブデザインは画面サイズを特定し、そのサイズに最適なレイアウトを読み込みます。一般的に、以下の６つの共通した画面幅に対応したアダプティブサイトをデザインすると思います：
１.320px
２.480px
３.760px
４.960px
５.1200px
６.1600px
表面上には、最低限この６つの幅に対応するレイアウトをデザインしなければならないので、アダプティブデザインはより多くの作業を必要とするように見えると思います。しかし、レスポンシブデザインは不適切なメディアクエリを使用する （またはメディアクエリを全く使用しない） と、表示やパフォーマンス上の問題を引き起こす可能性があるため、レスポンシブデザインのほうがより複雑である可能性があります。
特に後者は、多くのサイトがたとえモバイルデバイス上で読み込まれないとしても、読み込み速度が非常に遅いデスクトップ用のサイトを提供しているため、過去数年間にたくさんの議論がなされてきました。このような事態を回避するために、メディアクエリを使用することができます。しかし、レスポンシブサイトはモバイル専用サイトほど読み込み速度が早くないので、妥協しなければならない点もいくつかあります。
なぜアダプティブデザインを使用するのか？
アダプティブデザインは、既存のサイトをよりモバイルフレンドリーなものにするために、既存のサイトを改良するのに役立ちます。これによって、複数の特定のビューポートに対するデザインと開発をコントロールすることができます。デザインするビューポートの数は、皆さんや皆さんの会社、そして総合的な予算次第で決定することができます。しかし、レスポンシブデザインを使用した際には必要のない、（例えばコンテンツやレイアウトに対する） コントロールの作業量が多くなります。
一般的に、低解像度のビューポートに対するデザインから始めて、デザインがコンテンツによる制約を受けないように処理をするでしょう。
先ほど申し上げましたように、６つの解像度に対応したデザインを行うことが標準となっています。しかし、最も頻繁に使用されているデバイスのWebのアナリティクスを閲覧することによって、より多くの情報に基づいた判断を行い、そしてこれらのビューポートのデザインを開始することもできます。
一からアダプティブサイトをデザインするのも、もちろん大丈夫です。繰り返しになりますが、最低解像度のビューポートのデザインから始めて、その後は自由に仕事を進めましょう。より高い解像度のビューポートに対応したレイアウトに発展させるために、メディアクエリを使用することもできます。しかしながら、複数の解像度に対応したデザインを行う場合は、ウィンドウのサイズを調整する際にレイアウトが「跳び出して」しまう恐れがあります。
複数のビューポートに対応したサイトをアダプティブデザインを用いてデザインおよび構築するのは、余計な労力や作業を要する可能性があるので、一般的にアダプティブデザインは既存のサイトの改良に用いられます。
なぜレスポンシブデザインを使用するのか？
新規のサイトの大部分はレスポンシブデザインを使用しており、WordPressやJoomla、DrupalといったCMSシステムを通してアクセスできるテーマを利用できるため、経験の浅いデザイナーやディベロッパーでも簡単にサイトを構築することができます。
レスポンシブデザインはアダプティブデザインほどコントロールの余地を提供していませんが、サイトの構築と維持に必要な作業はアダプティブデザインに比べてはるかに少ないです。レスポンシブデザインのレイアウトは流動的であり、アダプティブデザインのレイアウトもスケーリングする際により流動性を感じさせるためにパーセンテージを使用していますが、繰り返しになりますが、ウィンドウのサイズが調節される時に跳び出してしまう可能性があります。例えば、流動的なレイアウトを表示している下の画像において、デザイナーはパーセント表記のwidthを使用することによって、各ユーザーごとにビューが調節されるようになっています。
写真クレジット：Smashing Magazine
レスポンシブデザインを使用すると、全てのレイアウトを念頭に置いたデザインを行い、そしてもちろん、これはプロセスを混乱させ、非常に複雑なものにしてしまう恐れがあります。これはつまり、中程度の解像度に対応したビューポートを作成することに集中し、そうすることで後でメディアクエリを使用して低・高解像度に対応するように調節することができます。
よって、本質的に、レスポンシブデザインは新しいプロジェクトや改良したサイトに適応するのに一般的に適しています。
先ほど述べたように、レスポンシブサイトは （もし適切に実行されない場合は） ページ読み込み速度に関して苦戦する可能性があります。
また、レスポンシブデザインはサイトが全ての画面にフィットするように、より多くのコード化の作業が必要となります。しかしながら、アダプティブデザインは各レイアウトに対応した別々のHTMLとCSSコードを開発し、維持する必要があるため、（アダプティブデザインと比較すると） 余分な作業が多いかどうかは議論の余地がります。アダプティブサイトを変更するのもまた、複雑な作業を要します。というのも、実際に稼働する時に、（SEOやコンテンツ、リンクなど） 全ての要素がサイトの共通部分にきちんと配置されて、正常に機能していることを確認しなければならないからです。
もちろん、UXについても検討しなければなりません。レスポンシブデザインはデバイスのウィンドウに流動的に合わせるために、本質的にコンテンツの配置を変えるのですが、配置が変わる際にデザインの視覚的階層に注意を払う必要があります。
Amy Schade氏によると、「レスポンシブデザインは、パズルを解くようなものです。つまり、細長いページや反対に横長のページに合わせるために、大きなページ上の要素を再配置する方法を考えるのです。しかし、全ての要素がページ内に綺麗に収まるだけでは、十分ではありません。レスポンシブデザインを成功させるためには、全ての画像解像度とサイズ上でデザインが利用可能となる必要があります。」
したがって、どのようなテクニックを使用しようと近道は存在せず、レスポンシブ・アダプティブどちらの場合も、本質的に１つのサイズで全てのデバイスに適用するサイトの作成に伴う作業が必要となるのです。レスポンシブデザインのほうがわずかに優勢であり、サイトのメンテナンスに膨大な時間を費やす必要がありません。
決断
結論に関しては、どのデザイン技術を利用するかどうかにかかわらず、ユーザーを一番に考えることが重要となります。ユーザーが誰であるか、そして彼らがサイトにアクセスする際に頻繁に使用するデバイスが何かを特定すると、それらを心に留めてレイアウトやコンテンツなどのデザインに取りかかりやすくなります。
写真クレジット：Jeremy Keith
また、皆さんが既存のサイトを持っているか、または一から新しいサイトを構築するのかどうかにも大きく左右されます。レスポンシブデザインは頼りになるデザイン技術となっており、（アダプティブデザインを使用しているサイトの数に関するデータはほとんどありませんが）、 現在８分の１のWebサイトがレスポンシブデザインを使用していると考えられています。レスポンシブデザインの採用率は急激に上昇しており、スタンドアローンのモバイルサイト数とほぼ同じくらいに到達しています。
以上のことを考慮に入れると、アダプティブデザインが求めている進行中の作業だけだとしても、レスポンシブデザインは一般的により好まれている技術であるということができるでしょう。
しかしながら、Catchpointが実施したテストによると、クライアントや企業の予算が限られている場合、アダプティブデザインのほうがより良い選択肢となる可能性もあります。同社はWordPressで２つのサイトを構築し、１つは標準の WP TwentyFourteenのレスポンシブテーマを使用し、もう１つはWiziappと呼ばれるプラグインを使用しています。
プラグインは、ユーザーがサイトにアクセスする際に使用しているデバイスに応じて、ユーザーに適したモバイルテーマを提供し、かつ詳細な配置オプションを提供することによってプロセスをはるかに合理化することができます。
ページ読み込み速度に関する結果は明白です：
最適化は為されていませんでしたが、レスポンシブサイトはデスクトップに必要な要素をすべてダウンロードしていることを示していることを、指摘しておきます。よって正直に言うと、テーマはあまり優れたパフォーマンスを提供していません。
繰り返しになりますが、これはメディアクエリを使用すれば克服することができますが、上記は人気の選択肢であるレスポンシブデザインが、なぜ必ずしもモバイルデバイスに最適ではないかを示す良い例となっています。より優れた成果が現れるまでは、適切なコード化と優れたレスポンシブサイトの実行の仕方を学ぶ以外に何ができるかを知ることは困難です。
では、結論は何でしょうか？
レスポンシブデザインは依然として人気ですが、それはアダプティブデザインが必要とする大きな負担となるメンテナンスに対する良い解決策が、まだ発明されていないことが理由かもしれません。アダプティブデザインは消滅してはいませんが、Webの明確なレスポンシブデザインへの傾倒にもかかわらず、少なくとも論理上は、レスポンシブWebデザインに勝る改良がなされる可能性もあります。
