レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。
モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。
そのようなデバイス間の差を埋めようとするデザイナーには、２つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。
レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にとっては、２つの違いは曖昧に思えるかもしれません。しかし、より詳しく見ると明確な違いがあります。
レスポンシブデザイン
レスポンシブデザインという用語は、WebデザイナーであるEthan Marcotte氏の著書『Responsive Web Design』で初めて定義されました。レスポンシブデザインとは、用意されたスペースに収まるようにデザイン要素の配置を調整することで、ブラウザの幅の変化に対応するものです。
レスポンシブなWebサイトは、利用できるブラウザ空間に基づいてコンテンツを表示します。デスクトップ上でレスポンシブなサイトを開いてブラウザウィンドウのサイズを変更すると、コンテンツは、（少なくとも理論上は）そのブラウザウィンドウにおいて最適な配置に自ら移動します。スマートフォンでは、このプロセスは自動的に行われます。サイトは用意されたスペースを確認して、コンテンツを理想的な配置で提示します。
レスポンシブデザインは単純です。デザインが流動的なので、ユーザーは手のひらサイズのデバイスでも、大型モニターと同じようにオンラインにアクセスし、多くのものを楽しむことができます。これを実現するために、レスポンシブデザインではサイトをとても上手に概念化し、エンドユーザーのニーズや要望を深く理解する必要があるのです。
アダプティブWebデザイン
アダプティブWebデザインは、2011年にWebデザイナーのAaron Gustafson氏の著書『Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement』で紹介されました。アダプティブWebデザインは、Webサイトのプログレッシブエンハンスメント（Progressive Enhancement）としても知られています。
レスポンシブデザインでは利用できるスクリーンサイズに合わせてデザインパターンが変わりますが、アダプティブデザインでは固定されたレイアウトサイズが複数あります。利用できるスペースを検知すると、サイトは画面にもっとも適したレイアウトを選択します。つまり、あるデスクトップ上でブラウザを開くと、サイトはそのデスクトップ画面にとって最適なレイアウトを選択するのです。ブラウザのサイズを変更してもデザインに影響はありません。
一部のサイトでは、アダプティブデザインが迅速に採用されました。AmazonやUSA Today、Apple、About.comは、モバイル向けに最適化されたWebサイトを設定しています。これらのWebサイトを見てみてください。アダプティブデザインが使われているモバイルWebサイトのレイアウトは、デスクトップのと異なる場合があります。これはデザインが自動で配置し直されたのではなく、デザイナーがスマートフォンの画面用に別のレイアウトを選択したためです。
アダプティブデザインでは、320、480、760、960、1200、1600ピクセルという６つのもっとも一般的なスクリーンの幅のために、６つデザインを開発するのが一般的です。
モバイル専用デザイン
モバイル専用Webサイトを作成するという選択肢もあります。これらは通常、先頭に「m」をつけてブラウザのURL欄に表示されます。この選択肢は、かつては優れたアプローチでした。デザイナーは、モバイルデバイス向けのサイトを作成し、要素とレイアウトを調整して専用のフォーマットを作成します。Googleはモバイルサイト向けの検索エンジンのランキングを配信していましたが、現在はアダプティブサイトとレスポンシブサイトにも同じ優先度が与えられています。
複数のデザインや変動するデザインを使わず、個別にサイトを作成することの大きな欠点は、２つのWebサイトの一貫性を保つために、非常に多くのメンテナンスが必要になることです。一方でこの選択肢を採る特別なインセンティブはなく、モバイル専用のデザインは近年人気を失っています。近い将来人気を取り戻す可能性も低いでしょう。
レスポンシブデザインとアダプティブデザインの選択
レスポンシブデザインの長所と短所
レスポンシブデザインは簡単で、実装に必要な労力が少なくて済みます。画面サイズごとのデザインはあまりコントロールできませんが、現時点では新しくサイトを作成する際にもっとも好まれている方法です。またこの人気は、WordPress、Joomlaといった有名なコンテンツ管理システム（CMS）で利用できる多数の安価なテンプレートと関係しているでしょう。わざわざ土台からサイトを作り直したい人は誰もいません。
レスポンシブデザインでは、すべての画面で使用する単一のデザインを作成します。そして一般的に中程度の解像度で作り始め、メディアクエリを使用してより高解像度と低解像度の場合はどのような調整をするのかを決定します。これによって、使い慣れたデザインがあらゆるデバイスの画面に変換されているように見えるため、ユーザーが満足しやすくなります。統一されていることとシームレスであることは、優れたユーザー体験を提供する上で決定的に重要な観点です。
レスポンシブデザインのプロジェクトでは、ビジュアルヒエラルキーから目を離さないことが重要です。なぜなら、要素がスクリーンの中で入れ替わるからです。つまり、多種多様なデバイスでたくさんのテストを行い、製品が届いているかを確認しなければなりません。サイトのデザインが比較的シンプルであれば、入れ物から違う入れ物に液体が流れるように、デバイス間でうまく変換されるでしょう。
SEOはレスポンシブデザインにおいてもう１つ大きな議題です。レスポンシブデザインを使用しているサイトは、１つのURLですべてのデバイスに対応するので、現在のところ検索エンジンにとって扱いやすいものです。
レスポンシブデザインには強い裏付けがあるようです。確かに使用するべきかもしれませんが、次の点に注意してください。
- Webサイトがデバイスの画面サイズに合わせて「流れる」ため、広告を組み込むとスペースに収まらない場合があります。レスポンシブデザインを採用して作業を軽減化したつもりでも、きちんと設計していないとあとから考え直したり、作業したり、かえって負担が増えることもあるかもしれません。
- ダウンロード時間は、デスクトップとモバイルデバイスによって異なります。このとき、画像の柔軟性が大きな懸念事項となります。大規模なデザインは、自宅やオフィスの大画面では素早く表示されても、モバイルデバイスで表示するにはより時間とデータが必要です。モバイル版ではより小さなプレビューのほうが良いかもしれません。
アダプティブデザインの長所と短所
アダプティブデザインは、ユーザーがインターフェイスを使用しているデバイスに応じて、（理論的には）最良のユーザー体験を保証します。スクリーンがデスクトップデザインからより小さいデバイスに「流れる」レスポンシブデザインとは異なり、アダプティブデザインはぴったりの解決策を提供します。「アダプティブ」という名前が示すように、ユーザーの状況に沿ったニーズや機能に適応するのです。
一方でデザイナーは、タッチ操作しやすくするなど、 モバイルデバイスでのニーズに対応していることをユーザーに示せるでしょう。同様のことがデスクトップユーザーにもできます。私たちは最低の解像度のサイトから始めて、最高のものまで作業します。 ６つのデザインが現在の標準ですが、ユーザーのデータに応じてデザインの数を減らすことができます。
アダプティブデザインの強みは、現代のユーザー体験により適していると感じられる点です。一方、レスポンシブデザインはデスクトップ向きのアプローチで、ほかのデバイスは副次的、もっと言えばほとんど受動的な位置づけにあると言えます。私たちユーザーはいつでもスマートデバイスと共にいます。そのため、私たちが体験していることをデバイスに認識してほしいと感じているのです。
言葉通りの例を見てみましょう。長いトンネルを走っているとき、環境に適応して明るさを調整するGPS画面を持っていたいと思いませんか。状況に応じたパフォーマンスとユーザビリティが提供されると、ユーザーは安心できるだけでなく、スマートデバイスが環境に十分適応し、十分に使いやすいことを認識できます。
またアダプティブデザインでは、関連するUI広告を最適化するようにデザインすることもできます。さまざまな画面の解像度に向けてデザインするため、ユーザーの特定のニーズに対応できます。スマートフォンなどが敏感にユーザーを感知できるだけで、企業やデザイナーは、これまで以上にユーザーを知ることができるでしょう。ユーザーが好きな店、レストランやジムなどにユーザーが訪れると、プロフィールが作成されます。行動ターゲティング、またはパーソナライゼーションと呼ばれるこれらの方法によって、きめ細かく調節された広告をデザインできます。
もう１つの利点として、アダプティブWebサイトを持つ企業はスピードテストにおいて、レスポンシブWebサイトを持つ企業よりも優れているという調査が多くあります。この差は小さくありません。多くのアダプティブサイトは、レスポンシブサイトよりも２〜３倍も高速であり、ユーザー体験を提供するためにユーザーにデータを送る量もかなり少ないです。
アダプティブデザインにはいくつかの大きな利点があります。しかし、最高のユーザー体験をデザインし、最高のソリューションを提供するためには、自身の選択肢とユーザーの実情を検証する時間が必要なことを覚えておかなければいけません。
アダプティブデザインには欠点があります。まず、普通レスポンシブデザインを作成するよりも、多くの作業が必要です。そのため、大多数のアダプティブデザインは、既存のサイトを複数のデバイスで使用できるよう改築する目的で使用されてきました。そのため、最優先の仕事は、従来のサイトを、より多くのデバイスで使用できるようにアップデートすることになります。
第２に、アダプティブデザインは、中間サイズのディスプレイを排除してしまうことがあります。デザイナーがデスクトップとスマートフォンのユーザーのみに供給している場合、タブレットやネットブックのユーザーがどっちつかずになってしまうかもしれません。そのため、ユーザーがバージョンを切り替えられるリンクを提供することが重要です。
最後に、現在検索エンジンボットは、 「.com」サイトと 「m .com」サイトを区別してソートできるようになり始めてはいますが、現状を受け入れることが賢明です。ほとんどの検索エンジンは、複数のURLにまたがった同一のコンテンツを、等しく順位付けできていません。つまり、アダプティブデザインはSEO効果を抑制する可能性があることに注意してください。
以上のことから、現時点ではレスポンシブデザインのほうが確実に優勢ですが、予算があるならアダプティブデザインを検討してみましょう。Googleは、ユーザーと同様に、読み込みが速いWebサイトを好んでいます。
まとめ
現代のWebデザインでは、レスポンシブ、アダプティブ、モバイル専用デザインの３つの選択肢がありますが、モバイル専用は使われなくなっています。
レスポンシブデザイン
レスポンシブデザインでは、デザイナーは利用できるブラウザスペースに基づいてコンテンツを表示できます。これにより、デスクトップで表示されるサイトの内容と、手のひらサイズのデバイスで表示される内容に一貫性が生まれます。レスポンシブデザインは「従来的な」選択肢であり、現在でも人気のあるアプローチです。
長所
- シームレスで統一された、良いUXを提供できる
- 豊富なテンプレートを利用できる
- SEOに優れている
- 一般的に実装しやすい
短所
- 画面サイズごとのデザインの自由度が低い
- 要素が入れ替わる可能性がある
- 広告が画面に収まりきらない可能性がある
- モバイルではダウンロードに時間がかかる
アダプティブデザイン
2011年に開発されたアダプティブデザインは、デザイナーが複数の固定されたレイアウトサイズを持っているという点でより複雑です。これは、「１つのサイズが形を変えてすべてに適応する」アプローチに代わるものです。
長所
- デザイナーが適切なデバイス向けに、最適なUXを構築できる
- モバイルデバイスにおいて、ユーザーの環境を認識できる
- スマートデバイスのユーザーデータに基づいて広告を最適化できる
短所
- 多大な労力が必要になる。多くのアダプティブデザインは、従来のものをアクセスしやすいように改築したものである
- スマートフォンやデスクトップ向けのサイト構成のため、タブレットやネットブックでは問題が起きる可能性がある
- SEOには不向き。検索エンジンは、複数のサイトで同一のコンテンツを扱えない
レスポンシブデザインとアダプティブデザインのどちらを選択するかについては、注意深く検討しましょう。費用を節約し、SEOを向上させ、デバイス間のシームレスな体験でユーザーを満足させ続けるという都合を優先して、レスポンシブデザインに固執するのは賢明かもしれません。それでも、両方のデザインの長所と短所をすべて確かめることは重要です。アダプティブデザインは、ユーザーの多種多様なニーズに適応することができます。そのため、ニーズ変化の動向を知ることが不可欠です。
これらの変化は「進化」に例えるのが最適かもしれません。 Charles Darwin氏は、生存している種の個体は、もっとも強いものでももっとも賢いものでもなく、もっとも変化に適応できたものだと主張しました。この主張は、恐竜だけに当てはまるものではないでしょう。
自身の製品やサービスについて考えてみてください。それは特定の設定でユーザーと繋がるものですか？ ユーザーに情報を提供し、注意を引くために利用できるユーザーの行動は何ですか？ 賢くなったのはモバイルデバイスだけではないことを覚えておいてください。私たちの家やオフィスには、従来のデスクトップ以外にもモノがあります。時計やヒーターから「Internet of Things（IoT）」を構成するデバイスのホストまで、現在ではさまざまなスマートデバイスが環境を感知して反応します。賢いオブジェクトであふれた時代です。私たちはその賢さをもっと重視してデザインしなければなりません。
