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

関連記事

  1. Web関連

    web制作会社が考える更新メンテナンスのポイント

    ホームページは更新してナンボの世界作って放置ではいわゆる「死んだサ…

  2. Web関連

    1から調べてみた「SDGs」について

    皆さんは「SDGs(エスディージーズ)」という言葉を聞いたことはありま…

  3. Web関連

    モバイルページの超高速化!? AMP(Accelerated Mobile Pages)とは?

    昨年4月のモバイルフレンドリーの導入から、Webサ…

  4. Web関連

    SEOが辿ってきた激動の歴史とは? ~SEO誕生から現在までの歴史

    突然ですが、みなさん歴史はお好きですか?私は学生時代は日本史が大好…

  5. Web関連

    ついつい読みたくなるwebサイトのコラムを書くコツ ~ネタ探し 3つのコツ編 ~

    こんにちは。ティファナコラム編集部です。ちなみに、カッコよく「…

  6. Web関連

    これだけ載せておけば大丈夫!リクルートサイト必須コンテンツ!

    1人が3つの内定を持っていると囁かれるこの時代、学生さんの選択肢は…

おすすめ記事

最近の記事

  1. 持つべきなのか?運転免許証+マイナンバーカード
  2. RPAから始める業務効の自動化 働き方改革への選択肢の一つに…
  3. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  4. 約1年間のウィズコロナ生活で大きく変わったもの
  5. スマートストアにより、小売業は激変する

アーカイブ

「いいね」を押された記事

  1. Web関連

    大切なマイナンバーを守るために
  2. Web関連

    よく見るECサイト売り上げアップのまとめ
  3. Web関連

    Web広告のバナーは「つかみ」のキャッチコピーで決まる!?
  4. Web関連

    「OK Google」の便利な使い方4つ!
  5. Web関連

    javascriptの流行りの紹介
PAGE TOP