レスポンシブの次はアダプティブ? 新・3大「Webデザイントレンド」

Rawpixel/Shutterstock
 

3.アダプティブデザイン

アダプティブデザイン? 多分まだまだ聞き慣れない目新しい言葉ではないでしょうか。

この言葉の定義はまだまだ定まっていない所があって、ネット上でも色々な意見が飛び交ってます。それだけ新しい考え方でもあり色々な可能性も秘めている考え方だと思います。

まず「アダプティブデザイン」には少なくとも2つの意味があります。

A. アダプティブWebデザイン
B. アダプティブデザイン

まことにややこしいですがこの2つの定義があり、今回このメルマガで主に書かせてもらいたいのはBの方です。

Aについては、もうひとつの意味と区別をつけやすくするため「アダプティブWebデザイン」と呼ばせてもらいます。2で書かせてもらった「レスポンシブWebデザイン」と非常に似ていて、ブラウザの横幅サイズを判断基準にして違ったレイアウトが表示されます。

ただ決定的にレスポンシブWebデザインと違うのは、レスポンシブWebデザインのように一つのHTMLソースを使うのではなく、デバイスの横幅サイズのブレークポイントごとに、最適化した別のHTMLを用意する、ということです。

こう書くと、ひとつのHTMLを更新すればPCもタブレットもスマホも更新できるレスポンシブWebデザインの方が優れているようですが、視点を変えてみればアダプティブWebデザインの方が、レイアウト調整に限界があるわけでもなく、無駄な非表示要素を読み込む必要もないので、読み込みも速くなるという利点もあります。

「あらゆるデバイスに対応」というポイントで見れば「レスポンシブWebデザイン」、「ブレークポイントに特化した最適化」というポイントで見れば、アダプティブWebデザインという感じなのではないでしょうか。

このようにレスポンシブwebデザインのように、デバイス横幅サイズに対応して表示するものを変える、というデザイン手法のことをAの「アダプティブWebデザイン」と呼んでいます。

今回主に取り上げたいBの「アダプティブデザイン」となどんなものかと言いますと「デバイスだけでなく、ユーザーがインターネットを使ってる時の環境、いつユーザーがそのコンテンツを利用するのか? どこで利用するのか? などに合わせてコンテンツを用意しよう」という考え方です。

>>次ページ ウェアラブルデバイスと連携する「アダプティブデザイン」

print
いま読まれてます

  • レスポンシブの次はアダプティブ? 新・3大「Webデザイントレンド」
    この記事が気に入ったら
    いいね!しよう
    MAG2 NEWSの最新情報をお届け