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

アダプティブ?

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

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

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

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

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

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

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

Related Posts

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

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

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

パソコンから簡単にスマホ表示を確認

パソコンから簡単にスマホ表示を確認

調べ方 スマートフォンからサイトを表示すればスマートフォン対応されているかどうか一発で分かりますが、パソコンで作業を行っている時にスマートフォンを触るのも手間です。そんな時、パソコンからでも疑似的にスマートフォン時の表示を確認することができます。 Googleクロームの場合は下記です。※MicrosoftEdgeの場合も同様 1、キーボード上部のF12を押す。 2、デバイスサイズの切り替えボタン。 3、念のためページの再読み Ctrl+F5 4、上記でデザインが変わった場合はスマートフォン対応されたサイトです。...

事業再構築補助金 第2回公募~7月2日まで

事業再構築補助金 第2回公募~7月2日まで

事業再構築補助金の第2回公募が現在受付中です。 残り3回予定とのことですので5回中の2回目となるかもしれません。 事業再構築補助金という名前を初めて聞く方は下記をご覧ください。 事業再構築補助金(公式) 事業再構築補助金 事業計画書 具体的取組内容 事業再構築補助金を簡単にお伝えするとコロナにより売上が減少した企業に対して事業再構築の計画を立ててもらいその資金を最大1億円補助してもらえる制度です。(募集の多い主な枠では6000万円上限)...