非同期スニペット

アダプティブデザイン

無料 ご相談承ってます!

電話 078-955-7461(平日 -)お気軽にご連絡ください!
打合せなどで電話に出れない場合がございます。その場合は、フォームもしくは 070-5503-3830までお手数をおかけしますがご連絡ください。

私たちの実績
(→ 実績一覧へ

Webデザインやグラフィックデザインの実績をご紹介しております。

お知らせ

ブログ最新の10件
(→ 記事一覧へ

事務所案内

  • ワサビ株式会社
  • マーケティング部(東京オフィス)
  • 〒142-0041
    東京都品川区戸越1-21-15 創建ビル4F
  • 本社
  • 〒658-0065
    兵庫県神戸市東灘区御影山手4-10-21
  •    
  • マーケティング部・デザイン室・開発室
  • 〒657-0864
    兵庫県神戸市灘区新在家南町1-1
  • TEL. 078-955-7461
  • 受付時間: 平日 -
  • マーケティング部(福岡オフィス)
  • 〒812-0053
    福岡県福岡市東区箱崎2-10
会社の詳細情報は、こちら

Work with us!

私たちのビジネスの成功は、社会に貢献できると確信してます。

ワサビは、才能や情熱を持った方との出会いを待ってます。

インターネットで出来る事、その可能性を仕事にしたい方は、ご連絡ください!

採用の詳細は、こちら

ソーシャルメディア

アダプティブデザイン

更新日

blog l_094

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

アダプティブ?

まず疑問の一つ。「アダプティブ」という言葉の意味ですが、「適応性、適応性のある」といった訳になり、レスポンシブデザインと同じく画面の幅に合わせて最適化できるといったイメージが浮かんできます。
ただ、ここで違いが一つあります。レスポンシブデザインは基本的に画面サイズに対応したウェブのレイアウト手法のことのみを指しますがアダプティブデザインの場合はウェブや画面サイズだけに限らないということです。

アダプティブデザインはユーザー情報、属性に応じて表示する内容を切り替えます。ウェブの画面の幅はその中の一情報に過ぎません。
レスポンシブデザインとの比較を明確にし混乱を避けるため以後、「アダプティブウェブデザイン」と「アダプティブデザイン」で分けてご紹介します。

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

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

こうして比較してみるとレスポンシブデザインの方が見た目上は優れているかのように思いますが、アダプティブウェブデザインにもメリットはあります。というのは見た目上には現れないようにしている非表示要素なども読み込んでしまうレスポンシブデザインに対して特定サイズに最適化して作ったHTMLのみを読み込むアダプティブウェブデザインの方が表示速度が速くなります。

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

では次にアダプティブデザインとは何か?を確認する前に少し原点に帰って何故、レスポンシブデザインやアダプティブウェブデザインが出てきたかを考えてみます。その理由としてはスマートフォンの普及があります。
日経BPコンサルティングの調査によると

参考:日経BPコンサルティング

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

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

ここで本題アダプティブデザインですが、アダプティブデザインはアダプティブウェブデザインのように単に画面を見やすくするためにデザインを変えるだけに留まらず、スマートフォン等のモバイル端末から得られる情報を元にその状況に合わせて最適なコンテンツや情報を表示させる仕組みを言います。仕組みを紹介するとモバイル端末に搭載されているGPSやマイク、カメラ、加速度計、温度計などのセンサーや位置情報で周辺環境を知り、端末のログデータや普段の使い方からユーザーの行動パターンを知りその状況に合わせて最適なコンテンツを表示させる形です。

具体例としてはショッピングアプリ等があります。ショップ専用のアプリを立ち上げるとアプリ内でネットショッピングが出来るのですが、仮にリアル店舗でアプリを起ち上げた場合はネットショップの情報は不要なので変わって購入アシスタント情報が表示され、どこの棚にどんな商品があるといった案内が出たり、購入予定の商品をリストアップしておけば棚の近くに来たときに知らせてくれます。

少しウェブデザインからは離れてしまいましたがアダプティブウェブデザインもアダプティブデザインも共通にある考えとしてはモバイルファーストであることだと思います。ウェブという視点ではレスポンシブデザインの方がスマートフォンに対して柔軟性があるかもしれませんが、表示速度などモバイルファーストを突き詰めて設計するのであればアダプティブデザイン、アダプティブウェブデザインを選択肢に入れるのも良いかもしれません。

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

参考:レスポンシブの次はアダプティブ?

ページトップへ

nakagawa