レスポンシブWebデザインとは?今さら聞けないメリットとデメリットまとめ



レスポンシブWebデザインとは?今さら聞けないメリットとデメリットまとめ
目次
  1. レスポンシブWebデザインの2つの特徴
  2. 【メリット1】デバイスの種類ごとに別サイトを用意しなくても、ただ大きさの判別だけで最適なコンテンツを表示できる
  3. 【メリット2】PC、スマートフォン、タブレットの各デバイスに最適化されたページを1つのHTMLファイルで実装できる
  4. 【デメリット1】最大公約数的なデザインになる
  5. 【デメリット2】その分1ファイルは重たくなる傾向にある
  6. レスポンシブWebデザインはグーグル推奨の手法
  7. ユーザーエージェントでバラバラなURLを振り分けずに同一サイトにするメリット
  8. 「Googlebotごとにページをクロールする必要がない」
  9. まとめ

レスポンシブWebデザインという言葉は、2010年に登場しました。特に2012年にグーグルが公式にレスポンシブWebデザインを推奨したこともあって、レスポンシブWebデザインは急速に広まりました。グーグルのアナウンスからさらに3年がたち、デザインの現場ではレスポンシブWebデザインが当たり前になりつつあります。メリットもデメリットもかなり議論されてきているので、この辺でしっかりと整理しておきましょう。

レスポンシブWebデザインの2つの特徴

ではレスポンシブWebデザインのメリット・デメリットを整理する前に簡単にその特徴をおさらいしておきましょう。レスポンシブWebデザインの特徴は簡単にまとめるとこうなります。

◇デバイスの種類ごとに別サイトを用意しなくても、ただ大きさの判別だけで最適なコンテンツを表示できる◇PC、スマートフォン、タブレットの各デバイスに最適化されたページを1つのHTMLファイルで実装できる

この特徴ごとにメリットとデメリットが出てきます。それでは以下それぞれのメリットとデメリットを見てみす。

【メリット1】デバイスの種類ごとに別サイトを用意しなくても、ただ大きさの判別だけで最適なコンテンツを表示できる

レスポンシブWebデザイン以前のサイト構成では、例えば仕事場で使う最適なコンテンツ(PC)、外出先で最適なコンテンツ(スマホ)、家でゆっくりくつろぐときに最適なコンテンツ(タブレット)と別々のコンテンツを用意しました。

【PC用サイト】http://hogehoge/pc/index.html【スマートフォン用サイト】http://hogehoge/sf/index.html【タブレット用サイト】http://hogehoge/tb/index.html

そして「ユーザーエージェント」という判別方法を使い、デバイスを個別に認識して別々なサイトに振り分けていたのです。

【メリット2】PC、スマートフォン、タブレットの各デバイスに最適化されたページを1つのHTMLファイルで実装できる

Webサイトを公開した後もサイトは進化していきます。コンテンツ更新やユーザビリティの向上、ランディングページの最適化など、Webサイトの改良はリニューアルの時にだけ考えればよいと言うものではなく、日々の運用で日常的にやっていくことが必要になります。

バラバラなデバイスごとに膨大なソースを管理し、的確でスピーディーなサイト改良作業をしていくことはかなり大変です。レスポンシブWebデザインならばたったひとつのファイルのみ改変すればよいので、シンプルで修正漏れのリスクが極めて少ない改良作業が可能になります。

【デメリット1】最大公約数的なデザインになる

サイト管理をシンプルにしてくれるレスポンシブWebデザインですが、デメリットもあります。デバイスごとのサイトでコンテンツを用意した場合には、よりきめ細かなデザインが可能になりますが、レスポンシブWebデザインではどうしても各デバイスの最大公約数的なデザインになってしまいます。したがってそれぞれのデバイスらしさを最大限引き出した先進的なデザインはしにくくなってしまいます。

【デメリット2】その分1ファイルは重たくなる傾向にある

一方ファイルを集約にすることによるデメリットも出てきます。例えばスマホだけに必要で、PCやタブレットには必要ない部分はCSSで「display:none;(非表示)」と書いておきますが、非表示部分のコードも当然1ファイルの中に含まれています。レスポンシブWebデザインでは、サーバサイドで動的に最適なページを出力するわけではありません。1つのファイルの中に各種デバイスごとのに最適化されたパターンをすべて埋め込んでおきますので、サイズ的にはその分重たくなります。

レスポンシブWebデザインはグーグル推奨の手法

res3

冒頭にも書いたとおり、レスポンシブWebデザインはグーグルが公式に推奨しているデザイン手法です。ではグーグルはレスポンシブWebデザインのメリットをどのように評価しているのでしょうか。

レスポンシブ・ウェブデザインを使用すると、次のような利点があります。◇PC用のページとモバイル用のページを単一の(同一の)URLとすることができるため、ユーザーにとってはシェアやリンクが容易であり、Googleのアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。◇ユーザーエージェントの異なるGooglebotごとにページをクロールする必要がないためGoogleがより効率的にコンテンツを発見することができます。

Googleウェブマスター向け公式ブログ「Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法」

ユーザーエージェントでバラバラなURLを振り分けずに同一サイトにするメリット

「シェアやリンクが容易」というのは、例えばこんなシーンを思い浮かべてみましょう。

「Googlebotごとにページをクロールする必要がない」

「ユーザーエージェント振り分けをやめてくれると、Googlebotごとにページをクロールする必要がないので、検索エンジンにより正確なデータが反映できます」という意味です。

まとめ

以上、レスポンシブデザインWebのメリットとデメリットを整理してみました。多少のデメリットはあるものの、グーグルのアナウンスも含め、時代の流れはレスポンシブデザインWebの方向に向いています。

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp