KOBITブログ

レスポンシブデザインとアダプティブデザイン、使い分けはどうやってやる?

この記事は約 6分 で読めます。

Responsive design icon

アダプティブデザインが新たなWebデザインのトレンドとして取り上げられるようになりました。画面サイズによって自動的にレイアウトを調整する「レスポンシブデザイン」と混同されるケースも多く見られますが、アダプティブデザインはユーザー視点に立ってサービス設計を行う考え方です。これらの異なる設計思想は、どのように使い分ければよいのでしょうか?アダプティブデザインの事例を交えて、その使い分けについて解説します。

端末ではなくユーザー視点でサイト最適化を施すアダプティブデザイン

レスポンシブデザインは「モバイルファースト」の流れと共に、一般的なWebデザインの手法となってきました。レスポンシブデザインでは、どんな画面サイズであっても問題なく表示されるよう、自動的に文字サイズやレイアウトを変更します。利用者にとって利便性が高まるのはもちろん、サイト運営者にとっても複数のレイアウトに対して重複したコンテンツを管理する必要がないため、運用が簡素化されるメリットがあります。また、検索エンジンもレスポンシブデザインを高く評価する傾向があると言われています。

どの端末でも同じような見栄えを提供するのがレスポンシブデザインであるのに対して、ユーザー視点にたって、使用目的や環境に応じて画面デザインを最適化する手法として「アダプティブデザイン」が提案されました。実際、パソコンからサイト閲覧する場合とスマートフォンから閲覧する場合では、使用目的が異なるのではないでしょうか。最近ではスマートウォッチからネット検索も可能です。スマートウォッチで文字入力が要求されるサイトを利用したいと考える人はいないでしょう。画面サイズやレイアウトに限らず、コンテキストに合致したユーザー体験を提供するのがアダプティブデザインの考え方です。

アダプティブデザインでは文字サイズやレイアウト以外の要素も状況に応じて変化させるのが特徴です。例えば、モバイル端末では、パソコンとは異なり、加速度センサーやGPSの利用が可能です。同じサイトにアクセスしたとしても、モバイル端末から閲覧した場合だけ位置情報サービスを利用可能にする、といった活用方法が考えられます。さらに、性別・年齢などのユーザー情報を取得して、パーソナライズしたユーザー体験を提供するのもアダプティブデザインの一種と言えるでしょう。

アダプティブデザインの事例3選

パソコンで選んでモバイルで経路案内するOpenTable

アメリカのレストラン予約サービス「OpenTable」はアダプティブデザインを採用しました。PCサイトではレストランを選ぶ際に役立つレビューや口コミが閲覧しやすいようデザインされているのに対し、モバイルサイトではレストランに行くために便利な情報を中心に掲載しています。お店の電話番号、Google Mapでの経路案内、近所の駐車場、簡潔な予約プロセスなどがモバイルサイトの目玉です。画面サイズに限らず、ユーザーの使用目的を強く意識したサービス設計になっています。

店舗での買い物を支援するモバイルサイトIKEA

格安インテリアで人気のIKEA(イケア)はサイト設計に定評があります。PCサイトでは画像を使った製品紹介などが利用できますが、モバイルサイトでは「買い物リスト」などの機能が追加されます。広大な店舗で買い回りを楽しむIKEAならではのユーザー体験であり、店舗に訪れているユーザーがモバイルサイトを見ながら買い物する状況を想定しているのでしょう。

軽い画像と簡素化された購入プロセスを提供するアディダス

スポーツ用品ブランドのアディダスでは、技術的なモバイル最適化が見られます。モバイル端末からサイトを閲覧する場合、通信回線が貧弱だったり、細かい情報入力が難しかったりといった課題があります。そのため、アディダスのモバイルサイトでは容量の小さな画像を使用し、また、購入プロセスも簡素化されています。PCサイトでは高解像度の画像や高機能の購入プロセスが用意されているのとは対照的です。

ランディングページはアダプティブデザインが効果的

レスポンシブデザインとアダプティブデザインは、どのように使い分ければよいのでしょうか。その決定を下す前に、それぞれのメリット・デメリットについて考えてみましょう。

  • レスポンシブデザイン
    • メリット
      • 運用コスト削減。SEO対策
    • デメリット
      • レイアウトの柔軟性に制限。サイト表示速度低下
    • アダプティブデザイン
      • メリット
        • PC・モバイルで異なるサービス設計が可能
      • デメリット
        • 運用コスト増加。同様のコンテンツで異なるURL。

それぞれに異なる利点があるため、どちらが良いという問題ではなく、どのようなユーザー体験を提供するかという思想の問題と言えるでしょう。前章で紹介した事例のように、店舗を持った業態であれば、モバイルサイト特有の使用目的があるため、アダプティブデザインを採用する利点が大きくなります。

一般的なサイト運営であれば、ランディングページ(LP)のみにアダプティブデザインを採用し、その他のページはレスポンシブデザインを採るという考え方もあるでしょう。LPはユーザー体験を大きく左右するため、使用目的に応じて最大限の最適化を施します。一方で、その他のページでは一つのコンテンツを再利用し、運用コストの削減を目指すのです。ユーザー体験の最大化を目指しながら、ブランドイメージの一貫性を保つ方法として有効なのではないでしょうか。

アダプティブデザインを考える上では、Webサイトに留まる必要はありません。モバイルアプリやPCにインストールするソフトウェアの方が、ユーザー体験にとって望ましいのであれば、Web以外の技術を活用するのがアダプティブデザインの考え方です。開発や運用に関わるコストが増加する恐れはありますが、ユーザー体験の向上によって得られる利益の方が大きければ、挑戦する価値があります。

まとめ

画面サイズごとのレイアウトを最適化するレスポンシブデザインに対し、ユーザーの使用目的に応じてサービスを最適化するのがアダプティブデザインです。ランディングページのようなユーザー体験が重要視される場合はアダプティブデザインを、一方で、その他のページでは運用コスト削減が可能なレスポンシブデザインを使用する方法が提案されました。


さあ、KOBITをスタートしよう。