レスポンシブWebデザイン

当サイトについて

このサイトは Adobe Dreamweaver CS6 の可変グリッドレイアウトを使用して作成した、レスポンシブ Web デザイン(RWD)です。

ブラウザの幅を狭めると、パソコン用、タブレット用、スマートフォン用のデザインに切り替わります。作り方は Cafi Net で解説しております。

RWD とは

Media Queries(CSS3)を使って、1つの HTML ソースを、各デバイス(スマートフォン、タブレット、パソコンなど)に最適化したデザインで表示する制作手法です。

RWD のメリット

  1. 1つの HTML ソースなので、各デバイスごとの更新作業は必要なく、更新が簡単です。
  2. 画面サイズでデザインを切り替える仕組みなので、デバイスごとの振り分けが必要ありません。CSS のみで、画面サイズに応じてデザインを切り替えることができます。
  3. 各デバイスで同じ URL を表示するので、SEO と相性の良い手法と言えます。
  4. 今後新しいデバイスが登場しても、対応の必要がないか、簡単に対応できる可能性が高い手法です。

RWD の注意点

  1. パソコン用と同じコンテンツをスマートフォンでも読み込むので、ファイルサイズに注意が必要です。(コンテンツを非表示にすることはできますが、読み込みは実行されます)
  2. サイトの目的によっては、レスポンシブ Web デザインではなく、デバイスごとにコンテンツを用意した方が成果が高いケースも考えられます。

今後改善する問題点もあると思いますが、レスポンシブ Web デザインが唯一の正解とは限りません。

しかし、今後も様々なデバイスの登場が予想される中で、対応力の高いレスポンシブ Web デザインはとても魅力的な制作手法だと思います。

Copyright(C)2013 Cafi Net All Rights Reserved.