「レスポンシブ・ウェブデザイン」とは

アクセス者の閲覧環境(画面サイズ)によってレイアウトを自動的に変更するデザインのことを「レスポンシブ・ウェブデザイン」(Responsive Web Design)と呼びます。

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

「レスポンシブ・ウェブデザイン」を活用しているサイト:SONYの例

SONYが運営しているいくつかのウェブサイトは、レスポンシブ・ウェブデザインをうまく活用しています。下図は、SONYの個人向け製品紹介サイトを、幅の広いウインドウと幅の狭いウインドウで閲覧した例です。

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

端末の種類に関係なく単一のURLを案内できる
閲覧者の画面サイズを考慮してページを分ける必要が無いので、どんな場合でも(閲覧者の使用環境がPCでもタブレットでもスマートフォンでも)単一のURLを案内するだけで済みます。

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

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

※本記事は、2012年8月10日に初版を公開し、2014年9月・2016年9月に改訂したものです。記事中の一部の画像や画面イメージは、2012年8月時点のものです。