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

関連記事

  1. SEO関連

    SEOの基礎の基礎!

    SEOって、難しいと思っていませんか?Webサイトをもっと良くした…

  2. Web関連

    どんな良い内容でも「キャッチコピー」がダメならダメコラム

    こんにちは!IAの中條です!「本は心のごはんです。」私が学生時…

  3. Web関連

    One to Oneマーケティングへの道(3)~データマイニング~

    そろそろ恒例(?)になってきたOne to Oneマーケティングへの…

  4. Web関連

    納期が短いWebデザイン制作の時って何を考えますか?

    納期が短ければ短いほどスケジュールはパツパツで、人によっては大慌てする…

  5. Web関連

    デジタルファブリケーションで創る!

    皆さん、デジタルファブリケーションという言葉ご存知でしょうか?…

  6. Web関連

    リッチスニペットの新しい手法 schema.orgとは?

    アマガエル、可愛いですよね。どことなく愛嬌が感じら…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    業務を効率化できるサービス 第2回
  2. Web関連

    ポジティブでいることは成功への近道?! Web制作会社だからこそ求められる理由と…
  3. AI関連

    デジタルシフトの波に乗れ!AIが人材不足の悩みを解決!
  4. Web関連

    【画像が…小さい…】ファッションECに旋風を巻き起こす!…
  5. Web関連

    世界の「美しい女性」の基準
PAGE TOP