レスポンシブデザインとは？メリット・デメリットについてまとめ

2017/10/12

これからのSEOは、レスポンシブデザインを導入することによってモバイルフレンドリーに対応することが重要となってきます。

ということで今回は、レスポンシブデザインについてメリット・デメリットなどをご説明したいと思います。

レスポンシブデザインとは
レスポンシブデザインのメリット・デメリットについて
1. メリットについて
2. デメリットについて
レスポンシブデザインを実装してみる
レスポンシブデザインとモバイルファーストインデックスについて
まとめ

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

まず、レスポンシブデザインとはPCやモバイル・タブレットなど、あらゆるデバイスサイズに応じてcssを切り替え、ひとつのhtmlで複数の見せ方を可能とする方法のことです。

PC・スマホそれぞれ異なるページを用意しているような「別々のURL」のサイト構成では、リンクやコンテンツに差異が生じることから、検索ランキングへの影響が懸念されてます。

こういった複数デバイス対応、サイトパフォーマンス維持・向上に貢献できる優れたサイト構成を実現できるのが、Googleも推奨する「レスポンシブデザイン」ということです。

point!!この「レスポンシブデザイン」は、Google公式のモバイルガイドに掲載されてる推奨のSEO対策です。

レスポンシブデザインは、基本的に以下のようなメリットがあります。

URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単

ページへのインデックスプロパティの割り当てが正確に行われる

同じコンテンツのページをいくつも維持管理する手間が省ける

モバイルサイトでよくある誤りに陥る可能性を抑えることができる

ページの読み込み時間を短縮できる

クロールに必要なリソースを節約できる

※引用元：レスポンシブデザインにする理由

レスポンシブデザインのメリット・デメリットについて

では、この「レスポンシブデザイン」のメリット・デメリットについてご説明したいと思います。
※参考：レスポンシブウェブデザイン – ウェブマスター向けモバイルガイド「レスポンシブデザインにする理由」

メリットについて

SEO効果が期待できる

PC、スマホ、タブレットなどのあらゆるデバイスから同じURLでアクセスできることからURLの正規化、サイト評価の統一など、SEO効果が期待できます。
もちろんURLがひとつに統一されるため、リンク効果が高まりやすいと考えられます。

サイト修正がしやすい

一般的に「レスポンシブデザイン」は、css記述のみで済み、「動的な配信」や「別個のURL」のよう複数ファイル修正するような手間が省けるため、サイト修正がしやすいというメリットが挙げられます。

リソースが節約できる

上記と重複しますが、URLが統一されることにより、クロールするために必要なリソースを節約できるという点もメリットと言えるでしょう。

リダイレクトの手間が省ける

最適なページにリダイレクトする必要がないため、「動的な配信」「別々のURL」で運用するより、読み込み時間の短縮も考えられます。

デメリットについて

フィーチャーフォン（ガラケー）に対応してない

フィーチャーフォンは、レスポンシブデザインに対応してないため、「動的な配信」か「別個のURL」を使ってフィーチャーフォン用のコンテンツを配信するようにサイトを設定する必要があります。
※参考：フィーチャーフォン – ウェブマスター向けモバイルガイド

コストがかかる

レスポンシブデザイン用のcss等、必要に応じて新たなファイルや記述が必要となり、構築時間や費用がかかる。

サイトの読み込み速度（表示速度）が遅くなる

PC用のHTMLコードやcss、画像など大きいファイルを読み込む場合もあるため、環境によってはスマホ・タブレット等でサイトの読み込み速度（表示速度）が遅くなる場合があります。

レスポンシブデザインを実装してみる

レスポンシブデザインを実装するには、対応するために必要なHTMLタグやcssの記述が必要となります。

簡単にご説明すると、PC以外のデバイスに対応したいページにビューポートと呼ばれるメタタグを設置し、メディアクエリと呼ばれるcssを切り替えるcssをブレイクポイント（デバイスの幅）ごと用意する必要があります。

下記の記事に具体的なレスポンシブデザインの作り方についてご紹介しているので、ぜひこちらも参考にしてみてください。

レスポンシブデザインとモバイルファーストインデックスについて

2016年10月17日にGoogleから公式発表された「モバイルファーストインデックス」に対応するためには、今回ご紹介したレスポンシブデザインに対応することが大切です。
このモバイルファーストインデックスはスマホに対応することが大切なので、レスポンシブデザインはスマホ対応するいくつかの方法の中のひとつというわけです。

また、検索ランキングを維持するために、レスポンシブデザインの選択をGoogleのゲイリーイリーズ氏が推奨してます。
※参考：Googleモバイルファーストインデックス後はレスポンシブが唯一の選択肢か？ #inhouseseo

これによると、モバイルファーストインデックスでは、PCとモバイルコンテンツの差異が大きな問題としてあります。
この差異を無くし、評価を保ち、検索ランキングへの影響を最小限に抑える最善策としてレスポンシブデザインを推奨しているというわけです。

point!!重要なのは、あらゆるデバイスで同等のパフォーマンス（リンクやコンテンツ内容）を維持したサイトにするということです。

まとめ

ということで、今回はレスポンシブデザインについてのメリットやデメリットなどをご紹介してきましたが、PCとモバイル向けページのパフォーマンスを同等に保つための最善策として、「常に同じHTMLソースの配信」や「1つのURLで運営」を実現できるレスポンシブデザインのサイト構成がおすすめということになります。

モバイル（スマホ）、PC、タブレットごとにユーザーが快適に閲覧できるサイトにし、順位上昇を目指すことが重要です。