Cafi Netつながる情報技術

レスポンシブ Web デザインの作り方

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

Adobe 公式サイトの解説はこちらです。
可変グリッドレイアウト | Learn Dreamweaver CS6 | Adobe TV
Dreamweaver CS6 で作るレスポンシブWebデザイン | Adobe TV

デモサイト

デモンストレーションとして、こちらのウェブサイトを作成します。

デモサイト:Dreamweaver CS6 で作成したレスポンシブ Web デザイン

ブラウザの幅を狭めると、レイアウトが切り替わります。

レスポンシブ Web デザイン(RWD)について

レスポンシブ Web デザイン(RWD)とは、1つの HTML ソースを各デバイスに最適化したデザインで表示する制作手法です。

Media Queries(CSS3)を使って、スクリーンサイズに応じたデザインの切り替えを行うので、ユーザーエージェントに応じた振り分けは必要ありません。

それにより、ユーザーエージェントの振り分けによるトラブルや複雑な作業を避ける事ができます。

レスポンシブ Web デザインは、CSS のみで実現できるシンプルな構造です。

また、各デバイス(スマートフォン/タブレット/パソコンなど)で同じ URL を表示するので、SEO と相性の良い手法と言えます。

モバイル設定を選択する - ウェブマスター向けモバイルガイド にも記載されている通り、レスポンシブ Web デザインは Google も推奨している設定です。

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

例えば、スクリーンサイズが多少違うデバイスが登場しても、レスポンシブ Web デザインなら簡単な対応で済むか、対応の必要がない可能性が高いと言えます。

この記事がレスポンシブ Web デザインの構築にお役に立ちましたら幸いです。

Adobe Dreamweaver は Adobe Systems Incorporated(アドビシステムズ社)の米国ならびに他の国における商標または登録商標です。