blog l_094
こちらのブログでも何度かレスポンシブデザインについては取り上げたのでご存知の方も多いかと思いますが、アダプティブデザインというのはご存知でしょうか。
誤解を承知で簡単にいうとレスポンシブデザインと同じく、スマホなどデバイスの幅に合わせてデザインを変える手法です。ではレスポンシブデザインとどう違うのでしょうか。社内でも話題になったので一度まとめてみます。

アダプティブ?

まず疑問の一つ。「アダプティブ」という言葉の意味ですが、「適応性、適応性のある」といった訳になり、レスポンシブデザインと同じく画面の幅に合わせて最適化できるといったイメージが浮かんできます。
ただ、ここで違いが一つあります。レスポンシブデザインは基本的に画面サイズに対応したウェブのレイアウト手法のことのみを指しますがアダプティブデザインの場合はウェブや画面サイズだけに限らないということです。
アダプティブデザインはユーザー情報、属性に応じて表示する内容を切り替えます。ウェブの画面の幅はその中の一情報に過ぎません。
レスポンシブデザインとの比較を明確にし混乱を避けるため以後、「アダプティブウェブデザイン」と「アダプティブデザイン」で分けてご紹介します。

アダプティブウェブデザイン(レイアウト)とは

アダプティブウェブデザイン(アダプティブレイアウトと呼ぶ場合もあります)、こちらがレスポンシブデザインとの比較であげられるレイアウト手法です。
レスポンシブデザインは「あらゆる画面サイズに対応する」という考えをベースに1つのHTMLを画面の幅に合わせてCSSを切り替えて表示を変化させています。
またリキッドレイアウトになっているのでスマホサイズ、タブレットサイズといったデザイン切り替えポイント(ブレークポイント)間でも柔軟に可変します。
対してアダプティブウェブデザインは特定のブレークポイントに合わせた別のHTMLを用意することでそのポイントでのみデザインが変化します。見た目の違いはブレークポイント間でも変化するかしないかです。
よってアダプティブウェブデザインの場合は画面サイズやデザインによってはコンテンツが全て表示されずに切れてしまうことも考えられます。
こうして比較してみるとレスポンシブデザインの方が見た目上は優れているかのように思いますが、アダプティブウェブデザインにもメリットはあります。というのは見た目上には現れないようにしている非表示要素なども読み込んでしまうレスポンシブデザインに対して特定サイズに最適化して作ったHTMLのみを読み込むアダプティブウェブデザインの方が表示速度が速くなります。

スマートフォンの普及とモバイルファースト

では次にアダプティブデザインとは何か?を確認する前に少し原点に帰って何故、レスポンシブデザインやアダプティブウェブデザインが出てきたかを考えてみます。その理由としてはスマートフォンの普及があります。
日経BPコンサルティングの調査によると
参考:日経BPコンサルティング
2010年ではわずか5%未満だった普及率が15年では50%に届く勢いで伸びてきています。以前であれば移動中にウェブサイトに接続するということは一部のノートパソコンで仕事をする人以外はあまりありませんでした。
携帯電話(ガラケー)で接続する際には携帯専用のホームページでしたのでPC用ホームページと携帯用ホームページは完全に切り分けても良かったのですが、スマートフォンの普及によりスマートフォンからでもPC用サイトを見れるようになるとスマートフォンで見ているシーンも考慮に入れる必要が出てきました。
その流れからスマートフォンで見ても見やすいようにということでレスポンシブデザインやアダプティブウェブデザインは出てきたのですが、後からモバイルデザイン(スマートフォン等のデザイン)を設計するよりもむしろ先にモバイルデザインを想定した上でPCデザインを想定するというモバイルファーストの考えも大切になってきています。
※ここでいうモバイルはスマートフォンに限らずAppleWatchなども入ってきます。

アダプティブデザインと事例

ここで本題アダプティブデザインですが、アダプティブデザインはアダプティブウェブデザインのように単に画面を見やすくするためにデザインを変えるだけに留まらず、スマートフォン等のモバイル端末から得られる情報を元にその状況に合わせて最適なコンテンツや情報を表示させる仕組みを言います。仕組みを紹介するとモバイル端末に搭載されているGPSやマイク、カメラ、加速度計、温度計などのセンサーや位置情報で周辺環境を知り、端末のログデータや普段の使い方からユーザーの行動パターンを知りその状況に合わせて最適なコンテンツを表示させる形です。
具体例としてはショッピングアプリ等があります。ショップ専用のアプリを立ち上げるとアプリ内でネットショッピングが出来るのですが、仮にリアル店舗でアプリを起ち上げた場合はネットショップの情報は不要なので変わって購入アシスタント情報が表示され、どこの棚にどんな商品があるといった案内が出たり、購入予定の商品をリストアップしておけば棚の近くに来たときに知らせてくれます。
少しウェブデザインからは離れてしまいましたがアダプティブウェブデザインもアダプティブデザインも共通にある考えとしてはモバイルファーストであることだと思います。ウェブという視点ではレスポンシブデザインの方がスマートフォンに対して柔軟性があるかもしれませんが、表示速度などモバイルファーストを突き詰めて設計するのであればアダプティブデザイン、アダプティブウェブデザインを選択肢に入れるのも良いかもしれません。
参考:アダプティブWebデザインとは?
参考:レスポンシブの次はアダプティブ?

Related Posts

Gmail接続エラー「メールを今すぐ確認する」が消えてできない時

Gmail接続エラー「メールを今すぐ確認する」が消えてできない時

先日Gmailで接続エラーの障害が長時間発生し、メールの受信が遅延することがありました。 一時的な受信遅延や障害は今までもあったものの1日以上連続して起きたことはほとんどありません。 こういった障害の発生は原因によって対処法も異なり、いつも同じ方法で解決できるとは限りませんが、今後の参考に今回のケースと対処法をご紹介します。 Gmail接続エラー発生状況 ・メールサーバー:KDDI系のCPIを使用 ・Gmail管理画面経由で独自ドメインのメール送受信ができるように設定...

2021年7月2日にGoogleのコアアップデートが実施されました

2021年7月2日にGoogleのコアアップデートが実施されました

2か月ほど前になりますが、Googleからコアアップデートの実施がアナウンスされ、SEO会社などからの変動分析などもあがってきているのでご紹介します。 なお、7月以前には6月3日にもアップデートが実施されており、7月のアップデートは6月の残りとして一連のものと公式では発表されています。 コアアップデートとは? まず前提としてコアアップデートとはなんでしょうか。...

Windows 11登場。何が変わる?ポイント

Windows 11登場。何が変わる?ポイント

先日マイクロソフトからWindows11のリリース予定が発表されました。 正式には2021年の後半登場予定のようです。 windows10が2015年に登場してから6年ぶりのメジャーバージョンアップです。 Windows10が出た当時はWindows10が最終バージョンと言っていたようなので掟破り感はありますが、Windows7のサポートが昨年終了したり、IE11のサポートが来年切れたりと技術は日々進歩しているのかもしれません。 参考:IE11(Internet Explorer)サポート終了が2022年6月16日...