WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

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

2021.02.172014.12.14Web制作
このエントリーをはてなブックマークに追加

what-is-responsive-web-design

はじめに

スマートフォンやタブレットが急速に普及し、パソコンよりもスマートフォンからの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デザインとスマホ対応ページの違いはなに?

PC表示用とスマホ表示用に用意するhtmlファイル数が違います。レスポンシブWebデザインはワンソースで複数のデバイスに対応させることができるため、PCでもSPでもhtmlファイルやURLは同じになります。

レスポンシブWebデザインはどんなWebサイトにも向いているか?

管理や更新費用が安くなるメリットもありますが、PCとSPで表示内容を大きく変えづらいデメリットがあります。そのため、ユーザーの操作がPCとSPで違うのであれば、レスポンシブサイトが向いているとは言えません。

PC・スマホのみに対応するのではだめなの?

弊社の制作事例では、PCとSP対応として2画面分のデザイン制作をすることが多いと言えます。開発コストに余裕があるのであればパソコン、スマートフォン、タブレットなどあらゆるデバイス画面に対応するデザインを用意するとよいでしょう。

LPにも適応できるの?

レスポンシブWebデザインはLPにも適応させることは可能ですが、デザインやレイアウトによって最適化が難しい場合もあります。レスポンシブWebデザインとスマホ対応のページにするのと、どちらが向いているのかをしっかり検討しましょう。

レスポンシブWebデザインをどう作ればいいか分からない場合はどうすればいいの?

レスポンシブWebデザインは、シンプルなサイトやあまりデザインの変更をしないサイトにとても有効な手法です。レスポンシブWebデザインでお困りの場合はレスポンシブ対応やサイトの構築について提案してくれるサービス会社に相談しましょう。当社の「サイト制作サービス」では、最適な方法を提案いたします。

おわりに

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

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

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

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

このエントリーをはてなブックマークに追加
The following two tabs change content below.
digital-marketing

digital-marketing

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

お役立ち資料ダウンロード

セルマーケ

SNSでフォロー

Contact

Webマーケティングに関わる施策全般をワンストップでご提供します。
お気軽にご相談ください。

Webマーケティング最新情報をお届け
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6374-1393 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2021 DM SOLUTIONS Co.,Ltd. All rights reserved.