レスポンシブデザインとは｜今更きけない基礎知識とメリット・デメリット

更新日: 2019年01月22日

この記事は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だけでよいので、モバイルサイトは古いままといった事態を防げる。

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

レスポンシブデザインを導入した際のデメリットは、スマホサイト上で起こるものが多くあります。
パソコン用の情報をスマホで読み込むというのは、パソコンよりもスペックが劣るスマホにとっては、データ読み込みなど負荷のかかる作業になります。

スマホでの読み込み時間の遅さは、ユーザビリティに大きく影響するため、掲載する情報はシンプルにしてできるだけ読み込みに時間がかからないようにすることが重要です。

主なデメリット

・PC用のHTMLコードやCSSも読み込むため、表示に時間がかかる。CSSで画面に表示しないようにしても、読み込みは行われるため、ユーザーが待ちきれなくなる恐れがある。
・画像も同様。PC用の大きい画像では携帯用の3G/4G回線で読み込むのに時間がかかる。
・シンプルなページであればよいが、レスポンシブサイトの制作は通常より工数がかかる場合が多い。
・PCサイトのテキストや画像が多すぎる場合、スマホページでは文字が溢れてしまうなどレスポンシブ化は難しくなる。

あくまでデザイン選択肢の一つ

Googleが推奨しているとはいえ、レスポンシブデザインが最も正しいということはありません。
上記で紹介したようにデメリットも存在するため、あくまでデザインの選択肢の一つとして捉え、自社のターゲットユーザーがどのようなデバイスを使い、どのようなシーンで自社ホームページを利用するかを考え、最適なデザインを選択しましょう。

また、タブレットやスマホの新商品が次々と発売され、ディスプレイサイズもまだまだ多様化していくことは明らかです。
どのような表示サイズ、表示方法がトレンドなのか、ではそれに合った見せ方は何なのかも常に模索する必要があります。