この記事を読んでいる方は「レスポンシブ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のトレンドの流れはあっという間…。
ますます毎日の勉強が必要だと思いました。
以上、デザイナーの岡村でした！
