この記事は2016年3月27日の記事を再編集しています

多くのホームページに導入されているレスポンシブデザインですが、レスポンシブ化することによってどのようなメリット、またはデメリットが発生するか把握できていますか？

「Googleが推奨しているから」、「流行しているから」、という単純な理由でレスポンシブデザインを導入するのではなく、長所短所を見極めたうえで、自社のホームページに最適だと判断したうえで利用するのが良いでしょう。

今回は、レスポンシブデザインのメリットとデメリットを解説します。

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

そもそもレスポンシブデザインとは何を指すのでしょう。

Googleは、

ユーザーの デバイス（パソコン、 タブレット、モバイル、非視覚的 ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）表示を変えることができます。
引用元：モバイル SEO の概要  |  検索  |  Google Developers

と定義しています。

Google検索エンジンは以下の3種類のモバイルサイトを認識しています。

1.レスポンシブデザイン
2.動的な配信（PHPなどによって吐き出されるページ。実際のHTMLファイルは存在しない）
3.別々の URL（PC向けのHTMLとモバイル向けのHTMLを別々に用意し、URLも分けられている状態）

この3種類のなかで、Googleはレスポンシブデザインの使用を推奨しています。
レスポンシブデザインの場合、どのデバイスに対しても共通のURL・HTML・CSSファイルを使用しているため、例えばスマホでは通常に表示されているのにタブレットでは表示エラーが起きる、という事象を避けることができます。

表示エラーが少ないとユーザビリティが向上するという点や、Google検索エンジンのクローラーの巡回の手間が少なくなるという利点もあるため、Googleはレスポンシブデザインの使用を推奨しているのです。

ただ、レスポンシブデザインの使用を推奨しているものの、検索順位には特に影響は無いとGoogleは明言しています。
具体的にはどのようなメリットがあり、どのようなデメリットがあるのでしょうか。

レスポンシブデザインのメリット

先にも記載したとおり、レスポンシブデザインのメリットとしては、どのデバイスでも同一のファイルを利用できるため、管理が非常に簡単になることと、デバイス毎の表示エラーを減らせることにあります。

主なメリット

・現在多くのブラウザによってサポートされているCSS3を使用しているため、汎用的である。より多くの人に見てもらえる。
・カラムや画像が、スクリーンサイズに合わせて自動的に適切なサイズになる。そのため、サイト上の情報を適切に得ることができる。
・HTMLを分けるモバイルサイトでは、デバイスの数だけHTMLを増やしていかなければならないが、レスポンシブで制作すればHTMLファイルは同一なので管理がしやすい。修正も1つのHTMLだけでよいので、モバイルサイトは古いままといった事態を防げる。