レスポンシブWebデザインとは？そのメリットデメリットとは！？

こんにちは、デザイナーの山砥です。入社して2ヶ月、少しずつデザインやWebについての知識も少し増えたところで、今日は“レスポンシブデザイン”について書いてみたいと思います！

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

レスポンシブデザインとは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウトやデザインを調整することを指します。

PCサイトやスマートフォンサイトを作る場合、端末毎にHTMLファイルを複数用意し最適化することが一般的な制作方法となっています。 しかし、レスポンシブデザインでは、1つのHTMLファイルをCSS3（Media Queries:メディアクエリ／機会があればご紹介します）で制御し、異なる画面サイズに応じてページのレイアウトやデザインを調整します。

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

レスポンシブデザインにはどんな長所と短所があるの？ということで個人的にまとめてみました。

メリット

• Googleが推奨している制作方法で、SEO対策にも有効です。 詳しくはこちらをご覧ください
• 1つのHTMLファイルで複数の端末に対応できるので、制作工数の軽減になります。 また、1つのHTMLファイルしか用意する必要がないため、その後のメンテナンスも容易になります。
• 全ての端末の情報が同一の為、各端末による設計がバラバラにならず、情報整理が行いやすくなります。 さらに、情報整理が行いやすくなることによって、本当に必要なコンテンツが見えてきます。
• 1つめのメリットにもありますが、全ての端末でURLを統一できるので、WebサイトやSNSでシェアされた際、複数端末からスムーズに閲覧が可能になります。

デメリット

• 1つのHTMLファイルを使用するため、各端末で異なるレイアウトにした場合、見えない部分に不要な要素が読み込まれてしまい、ページの読み込みが重くなる可能性があります。
• 上記の理由により、情報整理は行いやすくなりますが、レイアウトやデザインの制限をしてしまうこともあります。
• 新しい解像度の端末が登場するため、端末ごとに細かい配慮をすることが難しくなることもあります。

最後に

いかがでしょうか。 今回はレスポンシブデザインの基本とメリット・デメリットに触れてみました。 今後も新しい端末が登場すると思われますので、Web制作において主流になっていく制作方法だと考えられます。 レスポンシブデザインを制作する際のお役に立てればと思います。

なお、ウミのWebサイトは途中の画像にもあるようにレスポンシブ対応となっております！ もしよろしければ画面サイズを変えてご覧になってみてください。