ビジネスコラム

レスポンシブデザイン ×
アダプティブデザイン

更新日:2017/03/31
レスポンシブ・デザインとアダプティブ・デザインの比較

コンテンツ(情報)をユーザーに最適な形で届ける手法として注目されているレスポンシブデザインとアダプティブデザイン。同じような手法に見えますが、使われるシーンによって違った意味を持っています。

レスポンシブデザインは、Webコンテンツをパソコン、スマホ、タブレット、スマートテレビなど様々なデバイスのスクリーンサイズに最適化して表示する手法として普及してきました。 1つのHTMLをCSSによって変化させ表示するため、コンテンツの一元管理やSEO対策に有効とされています。
アダプティブデザイン(アダプティブWebデザイン)は、パソコン用のHTML、スマホ用HTMLとデバイスごとに複数のHTMLを用意して表示を切り替えます。ユーザーの使用する環境や状況、目的やデバイスに応じて内容を変えることができ、読み込み速度が早いなどのメリットがあります。

「レスポンシブデザイン」
1つのコンテンツ(HTML)をスクリーンサイズに応じて表示を変える

「アダプティブデザイン」
スクリーンサイズに応じて、コンテンツ(HTML)を切り替える

共に長所・短所があるため、コンテンツの目的や利用するユーザーを一番に考えて決定することが大切になります。

ユーザーのコンテキスト(状況)に対応する「アダプティブデザイン」

ユーザーのコンテキストとは、ユーザーが置かれている状況(日時、場所、天気、交通情報など)に属性(年齢、性別、国籍、職業など)を加えたものです。 スマホなどのデバイスからユーザーのコンテキストを取得し、ユーザーにとって最適なコンテンツを表示します。 つまり、ユーザーが今必要としている情報を、検索や選択といったアクションをすることなく予測して表示します。

当社も「ITP PON!」というBeaconの位置情報を用いた、店舗・工場ナビゲーションアプリを提供しています。スマホを持ち歩くだけで、Beaconの設置された場所の関連情報をタイムリーに表示します。

多言語コンテンツを準備しておけば、ユーザーのデバイスの言語設定に応じた言語を自動で判断し表示してくれます。(「ITP PON!」の詳細はこちらでご覧いただけます。)「ITP PON!」もアダプティブデザインを取り入れていますが、さらに、Beaconの無い場所でもイベントが開催される場所や時間を配信し、様々な情報をタイムリーに配信できるようになると思います。 ユーザーのコンテキストに対応するアダプティブデザインは、今後さらに進化していくでしょう。 コンテキストを無視したコンテンツは「使いにくいWebサイトだな!」なんて思われる時代も始まっているのかもしれません。