(原文) Responsive Design vs. Adaptive Design: What’s the Best Choice for Designers?
本記事はLink等少々内容が古いです。読み物としてご理解頂けますと幸いです
Googleは常にレスポンシブウェブデザイン（RWD）を推奨してきましたが、特に2015/4/21にモバイルフレンドリーなサイトが上位にランクされるようになった大型アップデートを展開してからは、特にその傾向が強くなっています。
アップデートでは、レスポンシブデザインを使用しなければならないとは明記されていませんが、モバイルでアクセスでき、優れたUXとパフォーマンスを備えたサイトであることが求められています。
それを念頭に置いて、パフォーマンスとUXに関して、アダプティブデザインとレスポンシブデザインの長所と短所を検討してみましょう。
モバイルの台頭以来、私たちが目にしてきた最大の議論の一つは、レスポンシブでアダプティブなウェブデザイン（AWD）を開発するか、スタンドアロンのモバイルサイト（独自のm.URLを持つ）を開発するかということです。この議論の目的のために、スタンドアロンのm.サイトは別個に作成しなければならず、デザイナーやビジネスにとって最も好まれないソリューションであるように思われるので、ここでは省くことにします（これはより多くの先行費用とメンテナンスコストを発生させてしまいます）。
アダプティブデザインとレスポンシブデザインの違いは？
ではまず最初に、レスポンシブデザインとアダプティブデザインの主な違いは何でしょうか？
簡単に言うと、レスポンシブは流動的で、ターゲットデバイスがどのようなものであっても画面の大きさに適応します。レスポンシブはCSSのメディアクエリを使用して、表示タイプや幅、高さなどのターゲットデバイスに応じてスタイルを変更し、そのうちの1つだけでサイトが異なるスクリーンに適応するようにしています。
一方、アダプティブデザインは、最初に読み込まれると反応しないブレイクポイントに基づいた静的レイアウトを使用します。アダプティブは画面サイズを検出し、それに適したレイアウトをロードするように動作します。
- 320
- 480
- 760
- 960
- 1200
- 1600
表面的には、アダプティブは最低でも6つの幅のレイアウトを設計しなければならないため、より多くの作業を必要としているように見えます。しかし、レスポンシブは、メディアクエリを不適切に使用すると（実際には全く使用しないと）、表示やパフォーマンスの問題を引き起こす可能性があるため、より複雑になる可能性があります。
編集部注： UXPinでは、様々なブレークポイントを使うことができます。これらを使って遊びたい場合は、無料トライアルを初めてみてください。
特に後者については、多くのサイトがフルデスクトップモデルを提供しているため、ここ数年で多くの議論が巻き起こっています。これを回避するには、メディアクエリを使用することができますが、レスポンシブサイトは専用のモバイルサイトほど速くなることはないので、いくつかのトレードオフがあります。
なぜアダプティブデザインを使うのか？
アダプティブは、既存のサイトをよりモバイルフレンドリーに改造するのに便利です。これにより、デザインをコントロールし、特定の複数のビューポート用に開発することができます。デザインするビューポートの数は、あなた、あなたの会社、そして全体的な予算次第です。しかし、レスポンシブデザインでは必ずしも得られない一定のコントロール（コンテンツやレイアウトなど）が可能になります。
一般的には、低解像度のビューポートのデザインから始めて、コンテンツによってデザインが制約されないようにしていきます。
前述したように、6つの解像度に合わせてデザインするのが標準です。しかし、最も一般的に使用されているデバイスのウェブ解析を見て、それらのビューポート用にデザインすることで、より多くの情報に基づいた決定を下すことができます。
一から順応性のあるサイトをデザインしたいのであれば、それもOKです。低解像度のデザインからやり直して、徐々に解像度を上げていきましょう。その後、メディアクエリを使用して、より高い解像度のビューポート用にレイアウトを拡張することができます。しかし、複数の解像度でデザインすると、ウィンドウのサイズを変更するときにレイアウトが「ジャンプ」することに気づくかもしれません。
複数のビューポートに適応したサイトを設計・開発するのは余計な作業になりますので、通常は後付けで使用します。
なぜレスポンシブデザインを使うのか？
新しいサイトの大半は、WordPress、Joomla、DrupalなどのCMSシステムからアクセス可能なテーマのおかげで、経験の浅いデザイナーや開発者にも簡単に利用できるようになったレスポンシブを使用しています。
レスポンシブは、アダプティブほどのコントロールはできませんが、構築と維持の両方にかかる労力ははるかに少なくて済みます。レスポンシブレイアウトもまた流動的で、アダプティブでは拡大縮小時により流動的な感じを与えるためにパーセンテージを使用することができますが、ウィンドウのサイズを変更したときにジャンプが発生する可能性があります。例えば、流動的なレイアウトを示す下の画像では、デザイナーがパーセンテージの幅を使用しているので、ユーザーごとにビューが調整されます。
画像提供: Smashing Magazine
レスポンシブでは、すべてのレイアウトを念頭に置いてデザインすることになるので、当然のことながら、プロセスが混乱し、非常に複雑になります。つまり、中解像度用のビューポートを作成することに集中し、後からメディアクエリを使用して低解像度と高解像度の調整を行うことができます。
つまり、本質的には、新しいプロジェクトにはレスポンシブを、後付けにはアダプティブを使った方が良いのが普通です。
考慮すべきポイント
前述したように、レスポンシブサイトは（適切に実装されていないと）サイトの速度に影響を与える可能性があります。
レスポンシブはまた、サイトがアクセスする各画面にフィットするように、コーディングの方法でより多くのことを必要とします。しかし、アダプティブデザインでは、レイアウトごとに別々のHTMLコードとCSSコードを開発して管理する必要があるため、（アダプティブデザインと比較して）余分な作業は議論の余地があります。また、アダプティブサイトの修正は、実装の時期になったときに、サイト全体で（SEO、コンテンツ、リンクなど）すべてがまだ機能していることを確認しなければならない可能性が高いため、より複雑になります。
もちろん、ユーザーエクスペリエンスも考慮する必要があります。レスポンシブは、基本的にはデバイスのウィンドウに流動的にフィットするようにコンテンツをシャッフルするので、デザインが移動する際には、デザインの視覚的な階層構造に特に注意を払う必要があります。
エイミー・シェイド氏によると、「レスポンシブデザインはしばしばパズルを解くことになります。しかし、要素がページ内に収まるようにするだけでは十分ではありません。レスポンシブデザインを成功させるためには、デザインはまた、すべての画面解像度とサイズで使用可能でなければなりません。」
どちらの手法を使用するにしても、近道はありません。基本的にはワンサイズフィットのサイトを作成するための作業が必要です。レスポンシブの方が若干有利な点は、今後、サイトのメンテナンスに多くの時間を費やす必要がないことです。
決断 - アダプティブデザインとレスポンシブデザイン
結局のところ、どのようなデザイン手法を採用するにしても、オーディエンスのことを第一に考えることが重要です。オーディエンスが誰で、どのようなデバイスでサイトにアクセスする傾向があるのかを正確に把握しておけば、レイアウトやコンテンツなど、オーディエンスを意識したデザインをすることが容易になります。
画像提供: Jeremy Keith
それはまた、あなたが既存のサイトを持っているか、またはゼロから始めるのかに大きく依存します。レスポンシブデザインは、ゴー・ツー・デザイン・テクニックとなっており、約1/8のウェブサイトが現在レスポンシブを使用していると考えられています（アダプティブを使用している人がどのくらいいるかについてのデータはほとんどありませんが）。レスポンシブの採用率も急速に高まっており、ほぼスタンドアロンのモバイルサイトと同じレベルに達しています。
これらのことを考慮すると、アダプティブデザインには継続的な作業が求められるため、通常はレスポンシブが好まれる手法であると言ってもいいでしょう。
しかし、クライアントや会社が予算を持っている場合は、キャッチポイントが実施したテストによると、アダプティブの方が良い選択かもしれません。彼らはWordPressで2つのサイトを構築し、1つは標準のWP TwentyFourteenレスポンシブテーマを使用し、もう1つはWiziappと呼ばれるプラグインを使用しています。
このプラグインは、彼らがサイトにアクセスしているデバイスに応じてユーザーにモバイルテーマを提供し、また、プロセスをさらに合理化できるように、高度な設定オプションを提供しています。
ロードタイムの結果が物語っています。
| Metric (Default) | Adaptive | Responsive |
|---|---|---|
| Response | 568ms | 1,202 ms |
| Document Complete | 1,536 ms | 4,086 ms |
| Webpage Response | 2,889 ms | 4,860 ms |
| Bytes Downloaded | 2,474,326 kb | 4,229,362 kb |
| Objects Downloaded | 20 | 61 |
最適化が全く行われていないことを指摘しておきますが、レスポンシブサイトはデスクトップに必要なものをすべてダウンロードしていることがわかります。だから、箱から出してすぐに、テーマは良いパフォーマンスを全く提供していません。
繰り返しになりますが、これはメディアクエリを使用して克服することができますが、上記の例は、レスポンシブデザインが人気のある選択肢であるとはいえ、必ずしもモバイルに最適とは限らない理由を示す良い例です。しかし、より良いものが出てくるまでは、レスポンシブサイトを適切にコーディングして実装する方法を学ぶ以外に何ができるのかを知ることは困難です。
結論は？
レスポンシブデザインは今後も人気があるでしょうが、それはアダプティブデザインが要求する重度のメンテナンスに対する適切な解決策がまだ見つかっていないからかもしれません。ウェブが明らかにレスポンシブを愛しているにもかかわらず、アダプティブデザインは衰退していないので、少なくとも理論的には、レスポンシブウェブデザインを吹き飛ばすような改善点がまだ出てくる可能性があります。
次のステップ
独自のアダプティブデザインのモックアップを始めたい場合は、UXPinを使用してください。コラボレーションプラットフォームには、あらかじめ設定されたブレークポイントとカスタムブレークポイントが用意されています。終わったら、Spec Modeを有効にして開発者へのハンドオフを自動化しましょう。
本記事は2015/4/17投稿を翻訳したものです