「レスポンシブルデザイン」とは|テクスタ辞書


「レスポンシブルデザイン(レスポンシブルWebデザイン)」とは、PC・タブレット・スマートフォンといった様々な画面サイズに応じて、ページのレイアウトやデザインを柔軟に変更することができる技術です。Googleも推奨するこの画期的な技術は多くのWebサイトで採用されています。

レスポンシブルデザインの特徴
Webデザインにおいて、画面サイズが異なるデバイスに対して同じレイアウトを適用すると、PCでは見やすくても、スマートフォンでは字が小さく、拡大したら全体が見えなくなるなどの問題が生じます。この問題に対処するため、従来の手法では、1つのWebページでも画面サイズの異なるデバイスごとにそれぞれHTMLファイルを用意していました。ですが、レスポンシブルデザインでは、CSS3で画面サイズごとに使用するレイアウトを制御することにより、1つのHTMLファイルでWebページのレイアウトを切り替えることが可能となります。これにより、PCとスマホで同じURLを参照してもレイアウトはそれぞれの画面にあったものが表示されます。

レスポンシブルデザインのメリット・デメリット
レスポンシブルデザインを利用することによるメリットとしては、Webページのコンテンツに対して修正があった場合に、従来の方法ではデバイスごとのHTMLの修正が必要でしたが、HTMLを1つ修正すれば済むようになるため、改修にかかるコストが軽減できます。また、前述のとおり各デバイスで同じURLを参照してもレイアウトが自動調整されるため、SNSなどでURLのリンクをシェアした場合に、デバイスが異なってもストレスなくページの閲覧ができます。一方、デメリットとしては、PCでは表示する画像でも、画面の小さいスマホでは表示しない場合に、スマホでは表示しないにもかかわらず画像の読み込みは行ってしまうため、処理が重たくなることがあります。また、メリットにも挙げた、URL参照時に画面サイズによってレイアウトを自動調整するという点について、スマホであえて情報の多いPCサイトを見たいという場合があってもスマホ向けページしか閲覧できないというデメリットもあります。レスポンシブルデザインを採用するかどうかは、制作するWebサイトのデバイスごとの利用目的を確認したうえで決定する必要があるでしょう。