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

はじめに

スマートフォンやタブレットが急速に普及し、パソコンよりもスマートフォンからの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の表示速度が遅くなる場合があります。デバイス毎の画像最適化を忘れて開発しないように注意が必要でしょう。

おわりに

メリット・デメリットといっても運営する場面や利用する状況によって逆転することがあります。

Webサイト自体がシンプルで画像などが少ない場合や、デザイン変更が少ないWebサイト、デバイス毎の最適化が必要ないWebサイトの場合、レスポンシブWebデザインは有効な方法といえます。

逆に複雑な構造でデバイス毎にデザインを変更するようなWebサイトの場合は、レスポンシブWebデザインを使わないほうがよい場合もあります。

レスポンシブWebデザインはあくまでマルチデバイスに対応するひとつの方法として捉え、運営コストやWebサイトの目的、ターゲットユーザー、ユーザーの需要などを分析したうえ、他の方法と比較し導入するか検討することをお勧めします。

2021年 最新版 SEOセルフチェックリスト 無料プレゼント！

年間何百ものWebサイトを確認している当社でも、内部施策SEOが完璧にできているというサイトを見たことがありません。内部施策SEOに漏れがあるということは、自分でできることをやっていないということであり、それだけで機会損失を発生させている可能性があります。本書では、ご自身でセルフチェックと修正ができるよう、Googleが推奨する内部施策SEOのうち、重要なポイントをかいつまんでご紹介しております。

無料で資料をダウンロードする

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。

>最新記事 by digital-marketing (全て見る)

• ディスプレイ広告とは？リスティング広告との違いと活用法 - 2021年4月8日
• 初心者でも簡単！Webライティングの基本とポイントを解説 - 2021年4月1日
• Googleにサイト登録をする方法とメリットを解説 - 2021年3月25日