レスポンシブWebデザインとは

アクセス者の閲覧環境(=ブラウザのウインドウサイズや端末の画面サイズ)によってウェブページのデザインやレイアウトを自動的に切り替えるデザインのことを、レスポンシブWebデザイン(Responsive Web Design)と呼びます。

このレスポンシブWebデザインを使うと、複数の閲覧環境(デバイス)に対応させる目的で、端末の種類ごとに別個の専用サイトを用意する必要はなくなります。「PC用サイト」や「スマートフォン用サイト」など、閲覧環境に合わせた専用サイトを用意することなく、単一のウェブページだけであらゆる端末での表示に対応できます。

レスポンシブWebデザインを活用しているサイト:SONYの例

近頃はレスポンシブWebデザインを採用しているウェブサイトもたくさん増えました。例えば、SONYが運営している下記のウェブサイトでは、レスポンシブWebデザインがうまく活用されています。下図は、SONYの個人向け製品紹介サイトを、幅の広いウインドウと幅の狭いウインドウで閲覧した例です。

ウインドウを狭めると、ヘッダがシンプルになり、縦横に整列していたアイテムが縦方向だけに並ぶ

ウインドウを狭めると、ヘッダがシンプルになり、縦横に整列していたアイテムが縦方向だけに並ぶ (2012年時点のキャプチャ)


上記のサイトを幅の広いウインドウで閲覧すると、以下のように見えます。

  1. ヘッダ部分にはメニューが横並びに表示され、
  2. 各製品が縦横にタイル状に並んで表示される。

しかし、幅の狭いウインドウで閲覧すると、以下のように見えます。

  1. ヘッダ部分はシンプルになり、メニューはプルダウンメニューで提供され、
  2. 各製品は縦方向にのみ並べて表示される。

上記のようにデザインすることで、大画面のPCでは画面の横幅を最大限に活用してたくさんの情報を掲載でき、画面の小さなスマートフォンなどでは画面構成をシンプルにして閲覧しやすくできます。閲覧者の画面サイズに応じて適切にレイアウトを変化させるデザインが、レスポンシブWebデザインです。

また、下図はSONY USAのウェブサイトです。ここでもレスポンシブWebデザインがうまく活用されています。

ウインドウを狭めると、タブで表現されていた箇所が、プルダウンメニューに変わる

ウインドウを狭めると、タブで表現されていた箇所が、プルダウンメニューに変わる (2012年時点のキャプチャ)


上記サイトでは、「SHOP THE SONY STORE」・「GAMING」・「ENTERTAINMENT」の3項目が、広い画面ではタブ型で表示され、狭い画面ではプルダウン型で表示されています。その下に続く製品紹介も、広い画面では縦横に並べられていますが、狭い画面では縦方向にのみ並べられています。

レスポンシブWebデザインを使うメリット

上記のように、ウェブサイトのデザインをレスポンシブにすると、例えば以下のようなメリットが得られます。

サイト構造がシンプルになり、把握しやすくなる
端末(デバイス)ごとにウェブページを分ける必要がありません。その分、サイト構造はシンプルになります。

コンテンツの修正が1度の作業で済む
端末の種類ごとにページを分けないということは、同じ内容のページを複数用意する必要がないということです。同じ内容のページが複数は存在しないため、修正作業は1度で済みます。

端末の種類に関係なく単一のURLを案内できる
閲覧者の画面サイズを考慮してページを分ける必要が無いので、どんな場合でも(閲覧者の使用環境がPCでもタブレットでもスマートフォンでも)単一のURLを案内するだけで済みます。PC版とモバイル版とでブックマークを同期する機能のあるブラウザを使っている場合は、単一のURLを登録しておくだけでPCでもモバイルでもアクセスできます。

検索サイトからも推奨されている
同一の情報が複数のURLに散らばらないという点で、検索エンジンのクローラーがウェブサイトの情報を収集しやすくなるため、Googleでも推奨されています。

将来に登場する新しい端末にもそのまま対応できる
様々な画面サイズで閲覧されることを想定した作りになっているため、将来的に登場する未知の端末でも(画面サイズが想定の範囲内なら)問題なく表示できることが期待できます。

レスポンシブWebデザインを使うデメリット

一方、レスポンシブWebデザインにデメリットがないわけではありません。例えば以下のようなデメリットは考えられます。

CSSの記述が長くなりがち
閲覧者の画面サイズに応じてデザインを切り替える以上、CSSソースの中には「小型画面だった場合はこう、中型画面だった場合はこう……」のように、様々な場合のスタイルを記述しておく必要があります。そのため、(複数ページに分割する際と比較すればトータルでは少なくなるとはいえ)CSSファイル1つの分量は大きくなってしまいます。

固定幅レイアウトは採用しにくい
ウェブページの横幅を固定(例えば980pxに固定)してデザインすると、様々な幅で表示される可能性を考慮する必要がなくなるためレイアウトが楽です。しかし、レスポンシブにするということは様々な画面幅を考慮するということなので、固定幅でのデザインは採用しにくいでしょう。

掲載分量の調整が必要
PCでの閲覧を前提にして作成すると、モバイル端末では文章量が多くなりがちです。モバイル端末での閲覧を前提にして作成すると、PCでは文章量が少なすぎるかも知れません。画面サイズに応じて表示する文章量が調整されるように記述するのには、やや手間がかかります。

レスポンシブWebデザインの採用はおすすめ

以上のように、レスポンシブWebデザインにはメリットもデメリットもあります。しかし、デメリットを補って余りあるメリットがあるケースも多々あります。

特に個人サイトや、ウェブ担当者が少ない企業サイトでは、何よりも更新作業やメンテナンス作業にかかる労力を削減することが重要です。同じコンテンツが複数箇所に分散していると、更新漏れが発生しやすくなりますし、作業の手間も増えます。 一度作ったら終わりではなく、継続的に更新していくウェブサイトを作りたいなら、更新にかかる労力をできるだけ少なく抑えておく必要があるでしょう。 そのような場合には特に、レスポンシブWebデザインが便利です。

今回は、このようなレスポンシブWebデザインを作成する方法について、簡単にご紹介いたします。まずは次のページから、レスポンシブWebデザインを使ってウェブページを作成する概要を見ていきましょう。