当サイトについて

このサイトは 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 デザインはとても魅力的な制作手法だと思います。