最新のトレンド?!│Web制作会社のアダプティブWebデザイン関連コラム

Columnコラム

Webデザイン

最新のトレンド?!アダプティブWebデザインについてあれこれ

最新のトレンド?!アダプティブWebデザインについてあれこれ

2015/11/13
このエントリーをはてなブックマークに追加

こんにちは!すっかり寒くなりましたね。デザイナーの角田です。

さて、そろそろ2015年も終わりに近づいてきましたが、
皆さんはこちらの言葉を聞いたことがありますか?
最近知名度を上げてきた「アダプティブWebデザイン」です。
「アダプティブWebデザインとは何ぞや?」という方はさっくりとこちらの
コラムに書かれていますので、是非ご覧ください。

とはいえ、私も名前は聞いたことはあれど、
恥ずかしながら詳しくは知らなかったので色々と調べてみました。

まだまだ謎の多い?アダプティブwebデザイン

kakuta_Adaptive01.jpg

色々と記事を読んでみると、レスポンシブwebデザインとアダプティブwebデザイン、
この双方の定義の仕方について未だにネット上では議論されているようですね・・・。
似て非なるものではありますが、レスポンシブwebデザインもアダプティブwebデザインも
一緒くたにして「レスポンシブwebデザイン」と表現されているのが現状です。
ちなみに私のアダプティブWebデザインについての解釈は、
「画面の幅や端末・ユーザーの環境ごとに最適化されたHTML・CSSが用意されている」
です。
レスポンシブWebデザインは、「1つのソースで画面の幅に合わせてレイアウトを最適化する」ものですが
大きな違いとしては「複数のソースを用意する必要がある」という所でしょうか。

「じゃあ実際アダプティブwebデザインってどんなものなのよ?」
っていう人が多いのではないでしょうか。私もです。
まずそもそもの話をしましょうか。

そもそもアダプティブデザインとは

まずレスポンシブwebデザインとアダプティブwebデザインより上位の概念に、
「アダプティブデザイン」というものが存在します。
この概念の中に、レスポンシブwebデザインとアダプティブwebデザインが属されている、と考えた方が良さそうです。

「アダプティブwebデザイン」は、前述の通り
「画面の幅や端末・ユーザーの環境ごとに最適化されたHTML・CSSが用意されている」webサイトのことですね。
「アダプティブデザイン」の場合は、「web以外のコンテンツ」も関連してくるわけです。

実際の例を挙げると、「GoogleNow」というアプリが一番わかりやすそうです。
このアプリは名前の通り、GoogleからAndroidに向けて配信されているアプリです。
どういうアプリかというと、
「ユーザーの毎日、毎時間の行動を学習して、自動的にユーザーが欲しいと思われる情報を提供する」ものなのです。
ユーザーの起床時間には現在地の天気を知らせ、通勤時にはルートや混雑状況・次の電車がいつ来るのかを知らせ、
次の予定はどこで何をするのか、を知らせてくれる。
まさに「ユーザーの行動・環境ごとに最適化されたコンテンツを提供」しているわけです。
す、すごいなこのアプリ・・・!iOSに向けて配信はされないのでしょうか・・・待ってます、Googleさん。

具体的に

ということで、レスポンシブwebデザインもアダプティブwebデザインも、
ユーザーや環境に合わせてwebのコンテンツを提供する手法の1つなのです。
結論としては、「ユーザーの画面の幅」を優先するか、「ユーザーの環境」を優先するか、でしょうか。
奥が深そうです・・・。

今は圧倒的にレスポンシブwebデザインの方が認知度も高く、理解している人も多いですが
今後アダプティブwebデザインの理解が広まっていけば、用途によって使い分ける場合も増えるのでしょうね~。

例えば、「制限を設けないレイアウトにしたい」「1ページの情報量が多くなりそう」「更新頻度が少ない」等といった場合はアダプティブwebデザイン。
「色んなデバイスでキレイに見せたい」「更新頻度が多い」「管理を楽にしたい」等といった場合はレスポンシブwebデザイン。

ですね。

まとめ

いかがでしょうか。私もまだ探り探りのアダプティブwebデザイン、
これからもっと調べていく必要がありそうだなとひしひしと感じています・・・。

小さな脳みそをフル回転させて書き上げた角田がお送りいたしました。

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

text_totop