19452290_m

レスポンシブウェブデザインとは何か?

スマホ対応の話になる時によく耳にするキーワードで「レスポンシブウェブデザイン」というものがあります。ときに「レスポンシブ」「レスポンシブウェブ」「レスポンシブデザイン」などと呼ばれることもあります。簡単に言うと、レスポンシブウェブデザインとは、スマホ(多デバイス)対応の手法のひとつです。今回、メリットデメリットを含め、「レスポンシブウェブデザイン」とは何かをまとめさせていただこうと思います。

一般的にスマホ対策をする場合、以下の2つの方法のどちらかでPC用サイトとスマホ用サイトの表示を切り替えます。

レスポンシブデザイン画像

上は、閲覧している端末の情報をサーバ側で読み取り、閲覧している端末によって、サーバ設定により、別々で用意してあるPC用ページとスマホ用ページを切り替える手法です。User-Agentによるページの切り替えとタイトルを入れていますが、ここではとりあえず、User-Agent=端末情報と考えておいていただいてください。

下がレスポンシブウェブデザインと呼ばれる手法で、上のようにPC用・スマホ用のデータをそれぞれ用意するのではなく、掲載情報を司るHTMLデータを基にして、レイアウトやデザインをコントロールするCSSデータ側に、閲覧される横幅によって異なるレイアウトを表示し分けることでスマホとPC両方に最適化します。


User-Agentによるページの切り替えの場合のメリットとデメリット

メリット

  • データが別なので端末毎にまったく異なる情報を提供できる
  • ページのデータ容量を最小にすることができる

デメリット

  • データが別なので更新時に端末毎のデータに対する更新が必要になる
  • スマホを縦にしてみた時と横にしてみた時の最適化がしにくい


レスポンシブウェブデザインの場合のメリットとデメリット

メリット

  • googleが推奨しているのでSEOで有効(らしい)
  • データがまとまっているので、更新時に端末毎のデータを更新する必要がない
  • ブラウザの横幅で表示を切り替えるので、PCとスマホの間のようなタブレットなどでも最適化しやすい

デメリット

  • データの情報をまとめ入れるのでページ容量が大きくなりやすい
  • PCとスマホ両方とも同じ情報を表示する必要がある(別にすることもできるが更に容量が大きくなりやすい)
  • 若干コスト高

以上、それぞれにメリットとデメリットがあるのですが、googleがレスポンシブウェブデザインを推奨しているのとWindows10が多デバイス対応されるOSなため、今後、PCとスマホだけに限らず様々なサイズの端末から閲覧される可能性を加味するとレスポンシブウェブデザインにするメリットが高まってきているというのが現状かと思います。
但し、レスポンシブウェブデザインは基本的にPCとスマホの掲載情報が同じになるので「閲覧シーンが異なるのに、同じ情報訴求で本当に良いのか?」という意見もあったりします。
正直、どちらが正しいとは言えないところがあるので、メリットとデメリットを踏まえたうえで選択する必要があります。

ちなみに、レスポンシブウェブデザインの場合、スマホにも最適化しやすいPCデザイン、またはPCにも最適化しやすいスマホデザインにする必要があるため、既存のPCサイトを更新という形でレスポンシブウェブ化するのは難しく、ほぼ作り直すことになるので、レスポンシブウェブデザインにする場合はリニューアルというくくりで考える方が良いかと思います。

今後、スマホの閲覧率はもっと上がっていくので、スマホ対応またはスマホ再対応の際には慎重に設計することをお勧めいたします。