レスポンシブWEBデザインとは何か？-メリット・デメリットをしっかりおさえよう-

2022.03.25 2014.12.14 Web制作

1 はじめに
2 レスポンシブWebデザインの概要
3 レスポンシブWebデザインのメリット
4 レスポンシブWebデザインのデメリット
5 レスポンシブWebデザインに関するよくある質問
6 おわりに

はじめに

スマートフォンやタブレットが急速に普及し、パソコンよりもスマートフォンからのWebサイト利用が多くなっています。

パソコンに比べはるかに画面の小さいスマートフォンでパソコン用のWebサイトを閲覧すると、画面内にページの幅が収まらず横にスクロールしないとすべての情報を見ることができないことや、表示される文字が小さく読みづらいといった煩わしさを感じます。それが、Webサイトの利用者を減らす要因になってしまうことがあります。

この煩わしさを解消するためには、スマートフォンのサイズに合うデザインをもったWebサイトを作成する必要があります。特に個人利用者の多いスマートフォンへの対応はWebサイトを運営するうえで必須事項といえます。

ユーザーの利用する環境がパソコン、スマートフォン、タブレットと多様化しているため、それぞれの環境で適切にWebサイトを表示するためにはデバイス毎に複数のデザインを用意しなくてはなりません。3種類のデバイスに対応する場合は、基本的に3通りのWebサイトのデータを作成する必要があります。

一方で、複数のWebサイトのデータを作成せずに、ワンソース（ひとつのWebサイトのデータ）でさまざまなデバイスに対応する「レスポンシブWebデザイン」という手法があります。

ここでは、レスポンシブWebデザインの概要と、導入するメリット・デメリットについて紹介します。

レスポンシブWebデザインの概要

レスポンシブWebデザインとは、使用しているデバイスの画面サイズに合わせたデザインを行い、画面サイズに応じて用意したページを表示させる手法のことを言います。パソコンやスマートフォンのデバイス画面は様々ですが、画面サイズに合ったレイアウトで柔軟に表示させることが可能です。

また、レスポンシブ手法によって複数の画面サイズのデザインを用意させることができますが、実際は1つのhtmlデータ（ワンソース）で複数のデバイスに対応することが可能です。

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

複数のデバイスにワンソースで対応できるレスポンシブWebデザインには、さまざまなメリットがあります。ワンソースでWebサイトを作成できるメリットを、いくつか紹介します。

URLをPCとSPで分ける必要がない

レスポンシブ開発の場合、PCとSPように画面を要しても1つのhtmlデータ（ワンソース）のため、URLはひとつになります。

TwitterやFacebookなどでWebサイトのURLが共有されることが多くなってきていますが、ひとつのWebサイトに複数のURLがあると効率的に共有してもらうことができません。URLがひとつであれば、ユーザー側も共有しやすくなり、発信しようとしている情報も拡散しやすくなるというメリットがあります。

SEO観点の管理がしやすい

レスポンシブWebデザインは、Googleがスマートフォンに最適化されたWebサイトの構築方法として推奨している手法の1つです。

PCとSPでURLが2つになる場合、SEO効果を毀損しないための設定が不可欠ですが、レスポンシブはURLが必要なため多くの設定を必要としません。そうした意味で、SEO観点の管理がしやすいことが特徴です。ただし、レスポンシブであれば他の手法よりSEO効果が得られるわけではないので、その点に注意が必要です。サイト特性によって異なりますがレスポンシブ開発しない方が、ユーザビリティが良くCVRが高いこともあります。

情報の統一が保てる

パソコン用、スマートフォン用、タブレット用と3種類のWebサイトのデータを作ると、それぞれのWebサイトで載せている情報が異なってきてしまう場合があります。レスポンシブWebデザインで作成するとワンソースで済みますので、同じ情報をパソコン、スマートフォン、タブレットなどで閲覧することができます。ユーザーの閲覧環境に関わらず、常に同じ内容の情報を発信したい場合には、レスポンシブWebデザインの導入は有効な手段になります。

CSSフレームワークが豊富

フレームワークとは汎用的な機能をまとめた土台となる雛型のことで、Web用（HTML用）にさまざまなCSSフレームワークが配布されています。

CSSフレームワークに合わせてHTMLを記述することで、フレームワークに実装された機能を容易に組み込むことができます。

レスポンシブWebデザインにも、多くのCSSフレームワークが提供されていますので、さまざまな機能を手軽に組み込むことができます。小規模なWebサイトや構造が複雑でないWebサイトであれば、CSSフレームワークを利用することで、比較的簡単にレスポンシブWebデザインを導入することができます。

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

レスポンシブWebデザインを導入することで発生するデメリットもあります。

場合によってはメリットとしてあげた内容が、デメリットになってしまうということもあるのです。

レスポンシブWebデザインにどういったデメリットがあるか紹介します。

デザインの自由度が低い

ワンソースで扱うことをメリットとしてあげましたが、一方でデザインやレイアウトをスマートフォン用とパソコン用で大きく変えたい場合はレスポンシブ開発では難しいケースが多くなります。
デバイス毎のデザイン変更が頻繁に発生するようなWebサイトには、レスポンシブWebデザインは適さない場合もあります。

PCとSPで画面の操作性が違う傾向が見られた場合は、レスポンシブ開発を選択しない方が良いでしょう。

Webサイトの閲覧状況・環境に応じた最適化が難しい

ユーザーが欲しい情報は、ユーザーがWebサイトを閲覧している状況によって変わってきます。

例えば旅行で電車を利用する場合、出発前に自宅のパソコンから調べることは、利用する路線や時刻表、出発～到着までの時間などかもしれません。しかし、旅行当日に駅でスマートフォンから調べることは、路線の運行状況や乗り換えは何番線か？といった情報であることが考えられます。つまり、Webサイトで提供する情報の種類によっては、デバイス毎に内容が変わっていたほうがユーザーに親切である場合もあるのです。

このように、利用する状況に合わせてデバイス毎に異なった情報を提供したい時などには、レスポンシブWebデザインは不向きといえます。

スマートフォンの表示速度が重くなる開発をしてしまうこともある

スマートフォン専用のWebサイトに比べるとレスポンシブWebデザインは表示速度が遅くなってしまう開発をしてしまうことがあります。PC向けの容量が重い画像をSPでそのまま表示してしまう場合、ページのファイルサイズが大きくなり、ページの読み込みに時間がかかるため、SPの表示速度が遅くなる場合があります。デバイス毎の画像最適化を忘れて開発しないように注意が必要でしょう。