レスポンスデザインとは?

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

現在はPCやスマートフォンなど、デバイス毎に各HTMLファイルを複数用意し最適化することが、一般的な制作方法となっています。
「レスポンシブWebデザイン」では、1つのHTMLファイルを、CSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。

レスポンスデザインイメージ

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

メリット

  • 1つのHTMLファイルで複数デバイスに対応できるので、制作後はメンテナンス等が容易になり、作業工数の軽減になります。
  • 全てのデバイスの情報が同一の為、各デバイスによる設計がバラバラにならず、情報整理が行いやすくなります。さらに、情報整理が行いやすくなることによって、本当に必要なコンテンツが見えてきます。
    (お客様の視点からみても、1つのワイヤーの中から情報を選抜するということで、気持ちよく情報整理が行えます。
  • PCとスマートフォンなど異なったデザインとして考えず、決められたデザインやUIで制作が行えます。
  • 各デバイスのURL統一化

デメリット

  • 大きく分けて、モバイルとPCは利用シーンが異なるため、絶対的なものだとは言えません。
  • 制作後の作業工数の軽減にはなるが、多くのデバイスに対応させるため、設計やデザインを行う際にはとても慎重に行う必要があります。
  • 1つのHTMLファイルを使用するため、PCとモバイルを異なるレイアウトにした場合、見えない部分に必要のない要素が読み込まれてしまい、ページの読み込みが重くなる可能性があります。
  • デバイスごとに細かい配慮をすることが難しい。
    特に新しい解像度のデバイスが登場することにより、標準規格が変更され、サイト全体の仕組みを変更しなければならない可能性があります。

 

レスポンシブWebデザインとは具体的にどのようなものか

1つのHTMLファイルを、CSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整されます。

レスポンシブWebデザインイメージ




お問い合わせ