2014.12.14Web制作

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

はじめに

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

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

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

 

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

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

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

 

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

レスポンシブWebデザインとは、使用しているデバイスの画面サイズを判別して、柔軟にデザインの調整を行う手法のことです。

パソコンで表示させればパソコンの画面に合ったレイアウトで、スマートフォンで表示させればスマートフォンの画面に合ったレイアウトでWebサイトを表示する仕組みになっています。

このためレスポンシブWebデザインはワンソースで複数のデバイスに対応することができるのです。

 

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

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

 

接続するURLがひとつ

デバイス毎に複数のデザインを作成するとURLも複数必要になりますが、レスポンシブWebデザインはワンソースのため、URLもひとつになります。

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

 

SEOとしても効果がある

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

URLがひとつであることや、ワンソースでWebサイトのデータの構造が分かりやすいことでGoogleの検索エンジンにも発見されやすくなります。

レスポンシブWebデザインを導入すれば、複数デバイスに対応できるだけでなくSEOの対策にも効果があるのです。競合するWebサイトがある場合などには、導入を検討してみるとよいでしょう。

 

情報の統一が保てる

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

 

CSSフレームワークが豊富

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

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

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

 

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

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

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

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

 

ワンソースのため自由度が低い

ワンソースで扱うことをメリットとしてあげましたが、デザインやレイアウトをスマートフォン用とパソコン用で変えたい場合はワンソースであることがデメリットになります。

Webサイトのデータをパソコン用に修正するとスマートフォンでの表示にも影響がでてしまい、些細な変更に多くの作業が発生し、コストもかかってしまいます。

デバイス毎のデザイン変更が頻繁に発生するようなWebサイトには、レスポンシブWebデザインは適さない場合もあります。

 

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

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

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

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

 

スマートフォンでの表示が重くなる

スマートフォン専用のWebサイトに比べるとレスポンシブWebデザインは表示が遅くなります。

特に画像が多いWebサイトや高画質の画像を配置しているWebサイトは、ファイルが大きくなり読み込みに時間がかかるため、表示が遅くなる可能性が高まります。

ショッピングサイトのような画像やアイコンを多用するWebサイトは表示の遅さが利用者のストレスに繋がり、利用者を減らしてしまう要因になってしまいます。

 

おわりに

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

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

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

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