株式会社コプロシステム

お問い合わせ

2013年10月29日

アダプティブWebデザインとは?

  • このエントリーをはてなブックマークに追加

こんにちは、コプロシステムWebデザイングループのディレクターの石川です。

先日、世界中のインフォグラフィックを検索・閲覧・共有・作成までもができるインフォグラフィックのポータルサイト「visual.ly」を見ていたところ、↓こんなインフォグラフィックを見つけました。

Adaptive Web Design vs. Responsive Web Design

内容は「AWD(Adaptive Web Design)とRWD(Responsive Web Design)の比較」というものでした。

「レスポンシブWebデザイン」については、このTips*Blogでも何回か取り上げていますし、弊社サイトでも使っている技術なので重々承知している内容だったのですが、「アダプティブWebデザイン」は耳にしたことがあるくらいの知識レベルだったので、これを機に調べてみました!

「Adaptive」ってどういう意味?

まずは...ということで英和辞典や大辞林で調べてみると、

Adaptive
【形容詞】適応性の(ある)

英和辞典 Weblio辞書より
http://ejje.weblio.jp/content/adaptive


てきおうせい【適応性】
外的な刺激や環境の変化に応じて,それにふさわしいように自分を変えていく性質・能力。「 -に富む」

コトバンク - 大辞林 第三版より
http://kotobank.jp/word/適応性

共通テーマは"変化への適応"!使用するシーンによって異なる複数の意味を持つ「アダプティブデザイン」とは?

調べを進めていくと、Web関係の言葉だけではなく、もっと広く且つ複数の意味がありました。
どの意味も"変化に対して適応する"という部分では共通しているのですが、使用するシーンというか現場が異なるので理解して使い分ける必要があります。


  1. Webサイトを、ある特定の画面サイズでのみレイアウトの切り替えを"適応"する「アダプティブデザイン」
  2. 環境を感知し、その環境にいるユーザに"適応"したコンテンツを提供する「アダプティブデザイン」
  3. 臨床試験などで、解析結果に"適応"して計画を変更する「アダプティブデザイン」

シーン①:Webサイトを、ある特定の画面サイズでのみレイアウトの切り替えを"適応"する「アダプティブデザイン」

まずは、私の業務領域でもあるWebから。
このアダプティブデザインは、他の2つの意味と区別をつけやすくするため「アダプティブWebデザイン」と呼ぶことにします(一般的にもそうなのかもしれません)。

<特定の画面サイズでレイアウトを切り替える>と書くと、レスポンシブWebデザインと混同しそうです。確かに似ているのですが、レスポンシブWebデザインとは似て非なるモノで、<特定の画面サイズでのみの「のみ」というのがポイントになります。
どういうことか下記に詳細を書きます。


※この後の文章で頻繁に出てくる専門用語※
ブレークポイント:ある特定の画面サイズでレイアウトを切り替える時の、その画面サイズのこと。
例えば、画面サイズが768pxの時にレイアウトを切り替えるなら、「ブレークポイント」は768です。


レスポンシブWebデザインの場合

レスポンシブWebデザインは、特定の画面サイズ(ブレークポイント)でレイアウトが切り替わります。
また、リキッドレイアウト(フルードレイアウト)になっているので、ブレークポイント間でもレイアウトが変化します。
つまり、「あらゆる画面サイズに対応する」という考え方がベースになっている手法ということです。


アダプティブWebデザインの場合

一方のアダプティブWebデザインも、特定の画面サイズ(ブレークポイント)でレイアウトが切り替わります。
ただ、幅は固定で、ブレークポイント間ではレイアウトは変化せず、テキストやボタンなどのコンテンツ要素が見切れてしまうことがあります。
つまり、「ブレークポイントごとに最適化する」という考え方がベースになっている手法ということです。


こう比較すると、アダプティブWebデザインは「ブレークポイント間での柔軟性」という意味では劣っているように見えてしまいます。私も最初はそう思いました。
ただ、比較するポイントを変えてみるとどうでしょう?

レスポンシブWebデザインは、1つのHTMLファイル(1ソース)に対してCSSのメディアクエリという機能を使い装飾を切り替え、あらゆる画面サイズに柔軟に対応する手法ですので、どうしてもレイアウトの調整に限界がありますし、装飾具合によっては非表示にするだけでソース上には存在する要素もあります。

それに対し、アダプティブWebデザインは「ブレークポイントに特化した最適化」という手法なので、基本的にはブレークポイントごとに別のHTMLを作りこみます。そのため、レイアウト調整に限界があるわけでもなく、無駄な非表示要素を読み込む必要もないので、読み込みも速くなります。

「あらゆるデバイスに対応」というポイントで見れば → レスポンシブWebデザイン
「パフォーマンス」や「ブレークポイントに特化した最適化」というポイントで見れば → アダプティブWebデザイン
という感じなのではないでしょうか。


シーン②:環境を感知し、その環境にいるユーザに"適応"したコンテンツを提供する「アダプティブデザイン」

これの意味については、国内・海外のWebマーケティング、テクノロジー、デザインを解説されているDX.univさんの「レスポンシブからアダプティブへ - 必要な情報を、必要なときに、必要としている人へ」という記事が参考になりました。

年齢/性別などのユーザ属性に加えて、カメラ/マイク/温度計/加速度計などを感知するセンサーやGPSなどの位置情報システムを駆使して、ユーザがいる環境を感知。また、渋滞情報、気象情報、SNSなどからデータを取得~解析したり、ユーザの行動パターンを学習するなどして、ユーザがいま欲しているコンテンツを提供してくれる仕組みや体験のことを「アダプティブデザイン」というようです。


Google Now

Google Nowは、「あなたにピッタリの情報をちょうどいいタイミングでお知らせする。 - 指先ひとつで、現在地の天気予報や通勤路の交通情報など、その時に欲しい情報が手に入ります。」というコンセプトのアプリ。


Google Glass

これはGoogle Glassを使った研究プロジェクト「Project Glass」の動画です。

前述の記事内にアプリ以外にもたくさんの事例が掲載されていましたので、興味がある方は是非ご覧になってみてください。


シーン③:臨床試験などで、解析結果に"適応"して計画を変更する「アダプティブデザイン」

私は医療業界の知識は全くないのですが、「アダプティブデザイン」で調べているとコレに当たりました。

どうやら、「臨床試験などの試験途中に、その解析結果や途中経過を受けて(適応して)、それ以降のデザインや計画を変更するデザインの総称のこと」のようです。
詳しくは、「アダプティブデザイン 臨床試験」などで検索してみてください。

まとめ

いろいろな記事ページを読み、けっこう考え方に差がありましたが、私の理解としては下図のような感じです。

  • 広い意味での「アダプティブデザイン」には、WebやWeb以外のコンテンツ(上記シーン②)が含まれる。
  • Webに限っていうと、特定の画面サイズでレイアウトを切り替える「アダプティブWebデザイン」が初めに誕生。
  • その後レスポンシブWebデザインに進化したが全く別物というわけではなく、考え方は同じで、特定の画面サイズ以外に対応するか・そうでないか が違いとなる。

という理解をしたので、このような図にしてみました。

※どちらにもメリット・デメリットがあり優劣をつけるのも変だなと思いつつ「進化」と書いたのは、まずアダプティブWebデザインの方が先に誕生していたこと。
さらに、ブレークポイントに特化するという考え方のアダプティブWebデザインに対し、ブレークポイント間のことも考慮=あらゆる画面サイズに対応するという考え方のレスポンシブWebデザインの方が、今後に向かって進化している感じがするな と思ったので、そのように表現しました。

冒頭にも書きましたが、どの意味も"変化に対して適応する"という部分では共通していますが、使用するシーンが異なるので使い分ける必要がありますね。
ご参考になれば幸いです。

参照したサイト


  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP