わずか数年前までは、単に1つのウェブサイトを構築すればよかったものの、現在ではそうもいきません。スマートフォン、ウェアラブル端末、タブレット端末など、さまざまなスマートデバイスでサイトが閲覧されることを考慮する必要があります。
EC事業であればなおのこと。買い物客は、さまざまなデバイスからECサイトにアクセスします。インターネットトラフィックの58%以上はモバイル、40%がPCからであり、EC市場の売上の60%近くは、モバイル端末から生まれています。
モバイルトラフィックは、今後も増加することから、ユーザーのさまざまな目的やブラウジングスタイルを配慮したウェブデザインが欠かせません。例えば、モバイルユーザーはせっかちで、サイトのコンテンツは一口サイズですぐに理解できるものを望む傾向が。一方、PCユーザーには、特定の商品の購入をじっくりと時間をかけて検討する傾向があります。
では、どのデバイスの画面でも見栄えがよく、どんなユーザーの要望にも応えられるデザインは、どのように作成できるのでしょうか。果たして、レスポンシブデザインが唯一の答えなのか。それとも、アダプティブデザインが最適解となり得るのか。そもそも、レスポンシブデザインとアダプティブデザインの具体的な違いとは。
この記事を読んで、そんな疑問を解決しましょう。
レスポンシブデザインとアダプティブデザインの違い
本題に入る前に、これから扱う用語の定義を確認しておきましょう。
レスポンシブデザインとは、ユーザーが使用するデバイスの画面サイズに合わせてコンテンツが調整されるというもの。レイアウトは1つで、そこに表示される各要素に柔軟性を与えることで、様々な画面でもきれいに表示されるようになります。
レスポンシブデザインは、コンテンツの動作を決める一種のルールと考えてみてください。CSSメディアクエリで対象となるデバイスの種類を指定し、画面の最大・最小幅に合わせてデザインの表示を切り替えるブレイクポイントを設定することができます。
一方、アダプティブデザインとは、コンテンツがユーザーのデバイスに適応することを意味しますが、その挙動はあらかじめ決められています。さまざまな画面サイズや向きに対応するために、レイアウトを複数用意しておき、デバイスの種類に応じて利用するレイアウトが決まります。
つまり、レスポンシブデザインでは、訪問者のデバイスに応じてコンテンツの表示方法が決まり、アダプティブデザインは、訪問者のデバイスを想定し事前にコンテンツの表示方法が決められます。いずれの手法でも、スマートフォンとPCの両方で、シームレスなブラウジング体験を実現、ひいては検索エンジンの表示順位を向上させることができます。
以下、レスポンシブデザインとアダプティブデザインの主な違いを表で見てみます。
| レスポンシブデザイン | アダプティブデザイン |
| 1つのレイアウトであらゆる画面サイズに対応 | 様々な画面サイズを想定し、複数のレイアウトを用意 |
| 相対単位と相性が良い | 絶対単位と相性が良い |
| 柔軟なレイアウト | 固定レイアウト |
| すべてのデバイスに対応 | 広く普及しているデバイスに対応 |
| 全体のバランスに特化 | 細部の精度に特化 |
どちらの手法も効果的で、一般的なウェブデザインの基本に従って、ユーザー体験に優れたサイト作りに使えます。レスポンシブデザインとアダプティブデザインの主な違いは、その導入方法にあります。
レスポンシブウェブデザインの長所と短所
まずは、レスポンシブデザインの長所を見てみましょう。
- 高度なプログラミングスキルは不要。 Squarespaceのようなドラッグ＆ドロップ式のウェブサイトビルダーを使用すれば、デフォルトでレスポンシブウェブサイトが作れます。また、軽量で編集可能なレスポンシブ対応のWordPressテーマも多数。
- 間違いないデザイン手法。レスポンシブデザインはすでに定番であり、あらゆるUXデザイナーがこれに精通しています。非常に人気の高いCSSフレームワークであるBootstrapは、主にレスポンシブでモバイルファーストなウェブサイトのデザインに使用されています。
- 画面を最大限に活用可能。レスポンシブレイアウトでは、あらゆる管理が可能になり、画面の余白を効率的に活用することができます。デザインがごちゃごちゃしてしまったり、隙間だらけになったりすることはありません。
- 手頃な価格で作成できる。先にも触れましたが、基本的なレスポンシブサイトであれば、無料ツールを使って自分で構築することができます。予算が限られていても、フリーランサーやWeb制作会社に依頼することができます。信頼できるパートナーをお探しなら、Kinstaの代行業者ディレクトリをご覧ください。
- メンテナンスに手間がかからない。今後新たなデバイスが発表され、瞬く間に普及しても、レスポンシブサイトなら心配ご無用。多少の変更は求められるかもしれませんが、レイアウト全体を作り直す必要はありません。
- すぐに納品可能。1つのレイアウトをデザインするのにかかる時間は、6つのレイアウトをデザインする時間よりも短いのは当然のこと。そのため、数日でサイトを立ち上げることが可能です。
一方で、以下のような短所も挙げられます。
- ターゲット層に特化したユーザー体験の提供が難しくなる。すべてのデバイスに対応するということは、必然的にパーソナライゼーションの程度が低下することを意味します。
- 計画と実験の積み重ねが必要。レスポンシブサイトの公開前には、さまざまなビューポートサイズでデザインをテストしなければなりません。細かな修正は必ず出てくるため、ある程度の時間は要します。
レスポンシブデザインの使用事例
レスポンシブデザインは汎用性が高く、親しみやすいため、その可能性は無限大です。個人・法人を問わず、レスポンシブデザインを採用したウェブサイトには、多くの魅力があります。
例えば、テキーラブランド「Los Sundays」のレスポンシブデザインは、PCでもモバイルでも美しく表示されます。ビューポートごとにコンテンツの優先順位が設定され、タイポグラフィはやりすぎない程度に大胆に扱い、訪問者の目を引きます。
PCなどの大きな画面では、立体感や遠近感の効果を与えるパララックスデザインが導入されており、一方でスマートフォンからは、美しいサイトコンテンツをサクサク高速で閲覧することができるようになっています。
アパレルショップ「Slam Jam」のサイトも同様です。小さな画面のデバイスでは、スムーズにサイトを操作できるよう、商品は4列ではなく2列で表示され、メニューは画面下部に移動し、検索バーが使いやすくなります。また、カルーセル（画像などの複数のコンテンツを左右にスライドできるコンテンツ）で、拡大・縮小することなく、別の商品を閲覧することができます。
「Here Design」のウェブサイトは、コンテンツや特殊効果を惜しげなく盛り込んだレスポンシブページで構成されています。高速で処理され、どのデバイスでも見栄え良く表示されます。小さな画面になっても、魅力的な雰囲気はそのままで、アニメーション要素が低速になったり、エラーが発生したりすることはありません。
アダプティブデザインの長所と短所
アダプティブデザインを採用して成功している企業ウェブサイトも多数存在しています。
アダプティブデザインには、以下のような長所があります。
- 一般的に高速。 サイトの表示速度は、SEO、ユーザー体験、コンバージョン率に大きく影響し、1つの洗練された専用ページの読み込みにかかる時間も短くなります。アダプティブデザインと高速マネージドホスティングを組み合わせれば、超高速ウェブサイトが構築できます。
- 高精度で柔軟性の高いデザインが実現可能。静的なデザインのため、サイトの雰囲気を思いのままに管理することができます。対象とするデバイスを選んでデザインすることができるため、ユーザーの用途を考慮し、よりパーソナライズされた体験を提供することができます。
- 広告の統合が簡単。広告を囲む要素の正確なサイズと比率がわかっていれば、広告の設定も簡単です。
- 既存のウェブサイトのリニューアルにも効果的。モバイル版とタブレット版を別々に作成して、メインサイトはそのまま残しておくことができます。
- サイトやページ全体のコードを記述し直すことなく、個々のテンプレートを調整。特に小さなエラーを修正したい場合は、サイトが個別の静的レイアウトで構成されていれば、デザイン変更の負担が軽減されます。
一方、アダプティブデザインの短所は以下の通り。
- デザインが思い通りに表示されるとは限らない。当然ながら、訪問者が想定していないデバイスでアクセスした場合、デザインが適切に表示されないことがあります。
- 費用がかさむ。ウェブデザイナーと開発者の協力が必要になるため、その分費用がかかります。ウェブデザイナーの平均年収は、約5万7,000ドル（約835万円）で、中には11万4,000ドル（約1,670万円）稼いでいる人もいます。
- あまり普及していない。アダプティブデザインに関するわかりやすい学習リソースや最新の解説記事はあまり出回っていません。現在は、レスポンシブデザインが主流であり、ほとんどのウェブデザインコースでは、レスポンシブデザインが取り上げられています。
- 複数のユーザー体験を提供する場合は面倒で手間がかかる。各レイアウトはピクセル単位で整合性を確保しなければいけないため、デザイナーはその作業とテストに多くの時間を費やすことになります。
- 初心者には難易度が高い。大体のウェブサイトビルダーには、標準的なレスポンシブデザインの作成機能は搭載されていますが、モバイル、PC、タブレット版を別々に構築できるシンプルなツールはほとんどありません。アダプティブデザインの作成には専門知識が必要になります。
アダプティブデザインの使用事例
アダプティブデザインは、モバイルアプリでの買い物を好む顧客層を抱えるECサイトにとって、魅力的な選択肢かもしれません。顧客の購買習慣や好みを把握するために必要なデータを収集しながら、パーソナライズされたユーザー体験を提供し、アプリのダウンロードを促進するのに効果的です。
世界で最もアクセス数の多いアダプティブサイトは、Amazonです。PCでのユーザー体験は非常に高いレベルに仕上がっています。トップページはやや情報量が多めですが、嫌になるほどではなく、お目当ての商品をすぐに検索することができます。
とは言え、ブラウザのウィンドウサイズを変更すると、以下のようになってしまいます。
このような極端なブラウザ幅は想定されていないため、コンテンツがブラウザに適応せず、ページのほんの一部しか表示されません。
しかし、これがAmazonにとって損になっているかと言えば、そうでもありません。その理由は、操作性の高いモバイルサイトとモバイルアプリで、高速かつ快適な買い物体験を実現できているためです。
Amazonのような大企業には、「使用デバイスに合わせて変化する柔軟なデザイン」を捨て、やや保守的とも見える外観をあえて採用する余裕があります。高齢者や視力に問題のある人をはじめとした、世界中の何百万人ものユーザーが利用でき、瞬時に操作できる画面が意識されています。
また、よく見ると、ビューポートに応じて要素が表示されたり非表示になったりと、部分的にレスポンシブデザインが取り入れられています。
ヨーロッパの格安航空会社「Ryanair」のウェブサイトでも、航空券の予約が簡単に行えるよう、アダプティブデザインが採用されています。インターフェースからは地味な印象を受けますが、決して時代遅れというわけではなく、Pingdom（速度テストツール）では、100点中82点という好成績を記録しています。
ほとんどのユーザーが、PCまたは専用のモバイルアプリから航空券を購入するため、洗練されたデザインでないウェブサイトであっても、アクセス数に影響を与えることはありません。
逆に、あまり多くの変更を加えてしまうと、現在の外観に慣れ親しんでいるユーザーを混乱させてしまうことになります。Ryanairは、流行りのレスポンシブデザインに切り替える代わりに、従来のデザインをそのまま残し、航空券の価格をできる限り抑えることに重点を置いています。
レスポンシブとアダプティブのどちらを採用すべきか
最も広く使われているデザイン手法を取り入れなければならない、というわけではありません。大切なのは、直感的で閲覧しやすく、魅力的で、視覚的に統一感のあるウェブサイトを作ること。そのためには、ウェブデザインのベストプラクティスに基づく包括的なアプローチが必要です。
以下の項目を順に検討し、採用するデザイン戦略を決めてみてください。
- ターゲット層の目的は何か。ユーザーの興味や目的は、使用しているデバイスとは無関係です。ユーザー調査を行って、実際にユーザーがどのようにインターフェースを操作しているかを確認し、特定のデバイスに向けてサイトを最適化する必要があるかどうかを検討してください。
- 特定のユースケースに焦点を当てる。例えば、現代美術の作品を販売するなら、ユーザーは購入前に作品を大きな画面でじっくりと見たいはず。したがって、PCでのユーザー体験の向上に集中するべきです。
- モバイルファーストにこだわりすぎない。モバイル向けレイアウトを簡素化しすぎて、閲覧の妨げになるものをすべて取り除いてしまい、それをPC向けのレイアウトにも適用してしまう、というパターンがよく見られます。しかし、ハンバーガーメニュー（3本線のアイコン）を伴うシンプルな1カラムデザインは、PCでは間伸びしてしまう傾向にあります。
- 自分のリソースと制約を把握する。アダプティブデザインへの投資を検討する前に、予算、必要性、長期的な目標をまとめておきましょう。超大型のスマートテレビでも美しく閲覧できる最先端のサイトが必要なのか。それとも、サイトの見た目に関係なく商品を購入してくれる、信頼関係のある顧客のために、安定したプラットフォームを構築するべきなのか。よく検討しましょう。
- サイトの速度を優先する。装飾的要素があっても問題はありませんが、直帰率を下げるためにサイトの表示速度を高速に保つことを忘れずに。読み込みに6秒以上かかると、ユーザーの半数以上がサイトを離れてしまうと言われています。
- 競合他社のサイトを分析する。競合他社は、すでにユーザー調査を実施して、すべてを把握している可能性があります。ただ真似をするのではなく、他社がどのようなユーザーセグメントを対象としているか、そしてその理由を分析してみてください。
レスポンシブデザインは、もはやトレンドではなく、ウェブデザインの定番になりつつあり、現在挙げられる懸念点もすぐに解消されるでしょう。
例えば、ウェブサイトビルダーのWebflowは、アップロードされた画像を自動的に最適化することで、レスポンシブページを最大10倍高速化し、レスポンシブデザインの主な問題の1つである、表示速度の懸念を解消してくれます。
また、さまざまな検索行動に対応するために、レスポンシブとアダプティブのいいとこ取りをするのも手です。アダプティブサイトにはメディアクエリを、レスポンシブサイトにはアダプティブ要素を加えることができます。理想的なウェブデザインは、この2つを巧みに融合させたもの。レスポンシブとアダプティブのどちらを選ぶべきかと悩む必要はもうありません。
レスポンシブサイトとアダプティブサイトの見分け方
まずは、PCでブラウザのウィンドウサイズを変更した際の見え方を確認してみてください。レスポンシブサイトは、ビューポートのサイズに合わせてコンテンツがシームレスに調整されるため、すぐにわかります。
アダプティブサイトは、設定されたブレイクポイントに達するか、他のデバイスに切り替えるまでは、見え方に変化はありません。それまでは、コンテンツのサイズが変更されずに一部が見えなくなったり、水平スクロールバーを使わなければならなくなります。
また、Windowsでは「CTRL + U」、Macでは「Option + Command + U」で、トップページのソースコードからメディアクエリを探すことができます（または、ページ上で右クリックし、ドロップダウンメニューから「ページのソースを表示」からも確認可能）。
ウェブサイトが画面サイズに応じてどのように動作するかを簡単に確認するには、Google Chromeのデバイスモードでモバイル端末での見え方をテストするという方法もあります。該当のウェブサイトを開き、Windowsの場合は「CTRL + Shift + I」、Macの場合は「Command + Option + I」でデベロッパーツールを起動します。
まとめ
検索エンジンでは、レスポンシブなサイトが優先的に表示されるという話は聞いたことがある方も多いはず。しかし、アダプティブデザインも、レスポンシブデザインと同じようにSEOに強いサイト作りに貢献可能です。Googleは、優れたユーザー体験を提供するモバイルフレンドリーなウェブサイトを推奨していますが、そんなウェブサイトを実現する方法は1つではありません。
モバイルでシームレスに動作するウェブサイトを作成する方法はいくつもあります。例えば、WordPressモバイル化/最適化プラグインの中には、コードの記述なしで使用できるものがあります。開発の専門知識があれば、WordPressのステージング環境で公開前に変更内容をテストすることをお勧めします。
また、WordPressサイトをアプリに変換できるプラグインもあります。これを使えば、膨大な費用をかけてアダプティブサイトをイチから作成することなく、必要に応じたユーザー体験を効率よく実現することができます。すでにモバイルサイトをお持ちであれば、WP Mobile Menuのようなプラグインで、見た目や使い勝手を劇的に改善することも可能です。
どのようなデザイン手法を採用するにせよ、クロスプラットフォームデザインでは、訪問者がいつ、どのようなデバイスでアクセスするかにかかわらず、サイトの高速化が肝心であることをお忘れなく。速度は、サーバー選びにかかっています。デフォルトでサイトを高速化し、安全性を高め、予期せぬサイトのダウンや低帯域幅を心配する必要のない、信頼できるサーバーを選びましょう。
コメントを残す