Web関連

レスポンシブとは少し違う、アダプティブWebデザイン

0

この記事を読んでいる方は「レスポンシブWebデザイン」というワードを耳にしたことはあるかと思いますが、

では「アダプティブWebデザイン」はいかがでしょう?

「アダプティブWebデザイン」は、Webデザインにも「アダプティブデザイン」の考えを取り込もうという新しい考え方です。

今回はレスポンシブWebデザインとアダプティブWebデザインの特徴を、合わせて紹介していきます。

 

アダプティブWebデザインの可能性

レスポンシブWebデザインは、1つのHTMLをブラウザの横幅に合わせて、CSSで表示を変えています。

注目したいのは「1つのHTMLを」というところ。

HTMLが1つなので、更新などがラクにできるなどのメリットがあります。

一方、アダプティブWebデザインは、対応させたいデバイスの数だけHTMLを用意します。

更新の際は、その数だけHTMLを修正する必要があります。

今までのように「レスポンシブWebデザインのほうが優れている」

…とは、限らないのです。

レスポンシブWebデザインの場合、PCでもスマートフォン(以下スマホ)でも見られる内容は同じです。

では、PCでもスマホでも同じ情報量を載せたらどうなるでしょう?

画面サイズを考えてみてください。

レスポンシブWebデザインは1つのHTMLしか持っていません。そのため、PCでもスマホでも載っている情報量は同じです。

その時、PCの画面サイズを基準にして情報を載せると、スマホで見た時にはその情報で画面が埋めつくされてしまうのは明白です。

レスポンシブWebデザインの場合、載せる情報の量は、スマホで見た時に見づらくない程度まで抑える必要があります。

では、アダプティブWebデザインはどうでしょうか。

アダプティブWebデザインは、対応させたいデバイスの数だけHTMLを持っています。

それが意味するところは「デバイスに合わせて、情報量を変えることができる」です。

複数のHTMLを持つことで、それぞれのデバイスに合わせたレイアウトをつくることが可能です。

たとえば、PCではテキストの情報を多く載せ、スマホでは必要最低限の情報を載せる、といったことが可能になります。

また、複数のHTMLを持つことのメリットがもう一つあります。それは「デバイスによって最適なデザインを変えられる」ということです。

デバイスによってそれぞれ使いやすいところ・使いにくいところがあります。

たとえば、操作の面で言えばPCはマウスとキーボードで操作しますよね。一方、スマホやタブレットはタッチで操作しますよね。

レスポンシブとアダプティブ それぞれの特徴まとめ

最後に、レスポンシブWebデザインとアダプティブWebデザインの特徴を簡単にまとめました。

「自社のサイトには、どちらがあっているのか?」といった時の参考になればと思います。

■共通の特徴

レスポンシブWebデザインもアダプティブWebデザインも、画面の幅で表示を切り替えます。

どちらもPC+スマホ(+タブレット)の構成・デザインをするので、その分の費用がかかります。

■更新・修正のしやすさ

・レスポンシブWebデザインはHTMLが1つ。

更新・修正の際には、1つのHTMLを変えるだけでOK。

・アダプティブWebデザインはHTMLが複数。

更新・修正の際には、その数だけ修正の手間がかかります。

■デザインの自由度

・レスポンシブWebデザインは、1つのHTMLしか持っていないため、ある程度デザインに制限がかかります。

・アダプティブWebデザインは、複数のHTMLを持っているので、デバイスに合わせたデザインを作ることができます。

■画面の情報量

・レスポンシブWebデザインは、PCでもスマホでも載せる情報量は変わりません。

スマホで見ても見づらくならないように、情報を精査する必要があります。

・アダプティブWebデザインは、PCとスマホで載せる情報量を変えることができます。

PCでは載せたいものすべてを、スマホでは必要な情報だけを載せることができます。

まとめ

いかがでしたでしょうか?

どんなデバイスでも表示できるようにするための「レスポンシブWebデザイン」。

ユーザーの環境に合わせた表示をできるようにするための「アダプティブWebデザイン」。

似ているようですこし違う、そんな両者ですが、PCでもスマホでも見られるように、というところは変わりません。

「しばらくはレスポンシブWebデザインとフラットデザインの流れかな。」とおもっていたところに登場した、アダプティブWebデザインという概念。ほんとにWebのトレンドの流れはあっという間…。

ますます毎日の勉強が必要だと思いました。

以上、デザイナーの岡村でした!

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

0

ホームページ制作会社がまとめるカスタマーサポートに必要なポイント!前のページ

単語の覚え方から実際の利用シーンまで。個人的オススメ英語学習サイト3選次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    究極のパーソナルサービス「コンシェルジュ」

    今、コンシェルジュが存在するのはホテル業界だけではありません。世の…

  2. Web関連

    ホームページ制作会社が教えるインフォグラフィックの基礎、ピクトグラムの作り方

    デザイナーに限らず、インフォグラフィック好き!という方、多いのではない…

  3. Web関連

    競合よりも顧客満足度を上げるには「顧客の期待値を変える」こと

    顧客満足度向上について全三回でお送りしていますが、今回が最終回です。…

  4. Web関連

    情報をうまく活かしてサービスレベルUP!デジタルマーケティングで変わる企業と顧客との距離

    インターネット元年といわれている1995年から20年がたち、私たちの生…

  5. Web関連

    アンノウンマーケティングで顧客行動をマーケティング利用する

    以前、アンノウンマーケティング™についての概要を説明しましたが、今回は…

  6. Web関連

    コンテンツマーケティングの魅力とは?

    最近Web業界では「コンテンツマーケティング」というものが注目を集めて…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. AI関連

    飲食店に人工知能(AI)の導入で人手不足の解消!
  2. Web関連

    ECサイトの売上を向上させたい 第3回目
  3. Web関連

    【Web担当者必見】Web制作にも必要なアクセスログ解析って?
  4. Web関連

    通販サイトでプレゼントを買おうと思ったけど、プレゼントって何を贈ったら良いの?
  5. Web関連

    SiriとOK Googleはどっちが優秀か、Web制作会社がやってみた。(Si…
PAGE TOP