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

レスポンシブWebデザインとは、PC、スマートフォンやタブレットといったあらゆるデバイスに最適化されたホームページを簡単に実装できる技術のことです。

PC用サイトとスマートフォン用サイトを別々に用意する場合、サイトにアクセスしているユーザーが閲覧しているOSやブラウザを判別して、サーバー側で表示するHTMLを振り分けるというのが一般的になっています。 パソコンで閲覧しているユーザーには、パソコン用のHTMLを表示し、スマートフォンで閲覧しているユーザーにはスマートフォン用のHTMLを表示するというように割り振っています。

しかし、レスポンシブWebデザインの考え方でいくと、OSやブラウザを判断基準にするのではなく、ブラウザの横幅サイズを判定基準にして、CSSを切り替えていく方式となります。そのため、使うHTMLは一つになります。

2 振り分け型処理の課題

サイトにアクセスしているユーザーが閲覧しているOSやブラウザを判別して、デバイスに応じたHTMLを表示する場合、デバイスごとに最適なWebサイトをユーザーに提供できますが、以下の問題点があります。

• 開発コストが増える
  現在日本国内で発売されているスマートフォンのOSにはiOS、Android、Windows Phoneの3つがあり、それぞれ搭載しているブラウザが異なります。それに加えて、解像度やスクリーンサイズは端末ごとに異なります。また、スマートフォンには縦置きと横置きがあるので、単純にいえば100種類の端末があれば200種類のスクリーンサイズに対応しなければなりません。OSや端末が頻繁にバージョンアップされる現状では、調査するためのコスト、それらを反映するためのコストも決して安いものではありません
• ファイルの更新が煩雑になる
  画面のレイアウトを変更する場合、振り分けに使っているHTMLファイルすべてを修正する必要があります。 たとえば、HTMLファイルが端末ごとの振り分けのために5種類あった場合、画像を1つ更新するたびに5つのHTMLファイルを更新しなければなりません。また、画像サイズや解像度などの細かい指定がそれぞれのファイルで必要であれば、更新作業はさらに煩雑になります。
• コンテンツマネジメントシステム（CMS）の対応待ちが発生
  コンテンツマネジメントシステム（CMS）の機能を使って、ページを振り分けている場合、コンテンツマネジメントシステムが新しい端末に対応するまで待つ必要があります。
• URLが異なることによる弊害
  スマートフォン用のWebサイトのURLとパソコン用のURLが違っている場合があるため、パソコンからスマートフォン用のURLにアクセスした場合、適切に開くことができない可能性があります。また、アクセス解析ツールでは、URLによってレポートが分かれてしまい、解析に時間や人数が必要になります。

3 レスポンシブWebデザインを採用することで得られるメリット

レスポンシブWebデザインでは、１つのHTMLファイルを管理します。スクリーンサイズを基準にして、レイアウトを変更するため、新しいOSやデバイスが登場してもHTMLファイルを変更する必要はありません。 また、スマートフォン用のWebサイトのURLとパソコン用のURLといった違いがないため、ユーザーにとってシェアやリンクが安易になります。アクセス解析ツールでも、ページによってURLが分かれることがないため、解析しやすくなります。

4 レスポンシブWebデザインの課題

レスポンシブWebデザインの課題については、以下の課題が挙げられます。

• スマートフォンだと重くなる場合がある
• 従来より費用が増えてしまう可能性がある

そのほかにも、スマホ等でPCサイトを見たい場合に見ることができなかったり、CSS３だけだとフィーチャーフォンに対応できない等が上げられます。

5 まとめ

以上のことから、レスポンシブWebデザインが万能というわけでもありません。案件の規模や内容によって、レスポンシブWebデザインを使うメリットを考えていく必要があると思います。