Web関連

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

0

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

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

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

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

 

色々と記事を読んでみると、レスポンシブ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デザイン

0

料理レシピサイトでおなじみの「クックパッド」が結構すごかった前のページ

サイトを持つなら考えよう!UI/UXについて次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    身近なWebビジネスを考えてみた。~飲食店のタッチパネル注文~

    こんにちは。IAの中條です。最近年度末ということもあって、飲みに行くこ…

  2. Web関連

    最も身近なWEBシステム、CMSに強くなろう!

    今さら聞けない、「CMS」って何ですか?よく「ニュースリリース」など…

  3. Web関連

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

     お客様は神様!とは良く言ったもので、利用客からの苦情1つで企業の経営…

  4. Web関連

    あなたのパソコンは大丈夫?~サイバー攻撃の脅威とその対策~

    日々報告されているサイバー攻撃。皆さんの対策は万全でしょうか。昨今の事…

  5. Web関連

    綺麗だなぁ・・・夜空に浮かぶ冬の星座と流星群

    小さなころから星を見ることが大好きな管理部の川又です。みなさん、理科の…

  6. Web関連

    Webアプリに対する攻撃手法とその対策

    こんにちは。昨今、WEBセキュリティ関連の問題が浮上してきています…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    レスポンシブで見せる写真の使い方
  2. AI関連

    RPAを導入する前に、見直すべき業務について
  3. SEO関連

    SEOにも効果がある!意外な問題点!
  4. Web関連

    コピーライトに込められた思い。尾形真理子から学ぶ言葉の作り方
  5. Web関連

    マーケティングオートメーションの導入のポイント
PAGE TOP