レスポンシブWebデザイン

過去においてはリキッドデザイン（サイズ可変デザイン）と呼ばれ、主にPCの画面幅に応じて横幅が拡大・縮小するHTMLレイアウトのこと。過去のリキッドデザインとの違いは全ての横幅で同一のレイアウトではなく、CSS3 Media Queries によって横幅指定でレイアウトが変更できるようになったことです。PCサイズ、タブレットサイズ、スマートフォンサイズにCSS3 Media Queriesでスタイルを切り替えることで最適なレイアウトにすることができます。　文書構造と体裁が分離されていないと実現できません。

現在、CMS - Web Meister での標準的な制作手法です。

レスポンシブWebデザインのメリット・デメリット

メリット

1. レスポンシブWebデザインのメリットとしてはHTML+CSSで実装できるのでコンテントネゴシエーションに比べて楽に実装できます。
2. 構造がシンプルなため、CMSを導入している場合、メンテナンス性が高いものとなります。

デメリット

1. ディレクトリとページが各デバイスで完全一致となるため、デバイスごとにサイト構造を変更することができません。
2. 全てのデバイスでファイルサイズが同一の為、マシンパワーが低く、回線の遅いモバイルでは重くなります。

注意事項

レスポンシブWebデザインは重い？

スマートフォンで閲覧する場合に
○レスポンシブWebデザインは軽くつくったモバイル専用サイトと比べて重い。但し、解決方法はある。
×レスポンシブWebデザインは固定幅PCサイトと比べて重い。

レスポンシブWebデザインは費用がかかる？

○固定幅PCサイトを制作するよりは費用がかかる。
×固定幅PCサイト＋モバイル専用サイトを制作し、マルチデバイス対応するより費用がかかる。

PCサイトのリニューアル時にマルチデバイス対応を意識するのであればレスポンシブWebデザインで制作するデメリットはありません。

レスポンシブWebデザイン事例：株式会社サイズ

株式会社サイズWebサイト。スマートフォンで閲覧した場合にグローバルナビゲーションがプルダウンに変わり、左ナビゲーションがページ下部に移行し1カラムレイアウトになります。

• 株式会社サイズWebサイト

横幅を動かしてご覧ください。