ブログ

Blog

スマートフォン時代のレスポンシブデザインの特徴とは?

メリットとSEO効果、モバイルファーストインデックスでの評価基準をわかりやすく解説。

2021.10.12

  • コラム

WEBサイト制作のトレンドは常に変化し続けていますが、現在はレスポンシブデザインでのWEBサイト制作が主流となっています。レスポンシブデザインとは、PCやスマートフォン、タブレットといったデバイスに合わせて、ページレイアウトを自動的に切り替える技術です。
一昔前までは、WEBページを閲覧するデバイスと言えばPCが主流でしたが、近年ではPCだけでなくスマートフォンやタブレットなどのデバイスを使うユーザーも増えています。PCの大きなモニターを使って閲覧するユーザーもいれば、スマートフォンのような小さな画面で閲覧するユーザーも増えているため、サイト運営者にはどのようなデバイスからでも見やすいデザインのサイト構築が求められていますが、このニーズに応えてくれるのがレスポンシブデザインです。

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

レスポンシブデザインの特徴は、PC用のサイトとモバイル用のサイトを別々に作る必要がないことです。レスポンシブデザインでは、1つのHTMLファイルをCSS3(Media Queries)で制御することにより、デバイスの画面サイズに応じてページのレイアウトやデザインを調整することができます。デバイスを問わず、共通のURLやHTML、CSSファイルを使用できるため、特定のデバイスのみにエラーが発生するという事態を防ぐことが可能です。
なお、Googleは2018年よりモバイルファーストインデックス(MFI)という新たな施策を開始しています。



モバイルファーストインデックスとは

モバイルファーストインデックスとは、検索エンジンにおける検索順位を決定する際に、PC向けのサイトではなくモバイル向けのサイトを評価基準にするという施策です。
Googleがこのような施策を打ち出した理由としては、全世界でスマートフォンユーザーが増えたためと考えられています。
現在、スマートフォンは私たちの生活に欠かせないアイテムとなっていますが、スマートフォンの普及に伴ってスマートフォンでWEBサイトを閲覧するユーザーも増加しており、2015年にはスマートフォンからの検索数がPCからの検索数を上回りました。
今後もスマートフォンでWEBサイトを閲覧するユーザーは増えていくと予想されているため、Googleはモバイルファーストインデックスを打ち出したと言われています。


モバイルファーストインデックス


SEO効果

モバイルファーストインデックスでは、スマートフォンやタブレットなどに対応したサイト構築をしていく必要がありますが、それだけはなくPCとモバイル向けで同じ情報を提供することが重要です。PC向けとモバイル向けで別々のHTMLとCSSを使用する場合、PC向けのサイトとモバイル向けのサイトでコンテンツの内容を変えることが可能となりますが、GoogleはPC向けとモバイル向けで異なる内容のコンテンツを配信することを推奨していません。
PC向けとモバイル向けで異なる内容のコンテンツを配信している場合、Googleからの評価を下げる可能性もありますが、レスポンシブルデザインはGoogleが推奨している手法なので、SEO効果的に有利になる可能性があります。

サイト運営の手間を大幅に削減することが可能

また、レスポンシブデザインを導入するメリットは、SEO効果が得られるだけではありません。レスポンシブデザインでは、URLやHTML、CSSは基本的に1つしか存在しないため、サイト運営者が管理するHTLMファイルは1つのみで済みます。そのため、デバイスごとに異なるURLやHTML、CSSを使用する場合よりもサイト運営の手間を大幅に削減することが可能です。

SNSでシェアされやすくなる

加えて、レスポンシブデザインを導入した場合、SNSでシェアされやすくなるというメリットも得られます。PC向けとモバイル向けのサイトを別々に作成した場合、同じコンテンツを配信していてもURLが2つ発生するため、SNSで拡散されたとしても、どちらか一方のURLしか紹介されない可能性が高いです。一方で、レスポンシブルデザインであればURLが1つしか存在しないため、より高い拡散効果が期待できます。


SNSでシェアされやすくなる


ページ表示速度への影響

また、URLが1つしか存在しないため、スマートフォンやタブレットからのアクセスの際にPCサイトからモバイルサイトへのリダイレクトが発生しません。リダイレクトが発生した場合、ページの表示速度が遅くなる傾向がありますが、表示速度の低下はユーザーの満足度を大きく低下させる要因となります。そのため、Googleではページ表示速度も重要な評価指標としていますが、リダイレクトが発生しないレスポンシブルデザインであればページの表示速度が早くなるので、Googleから高い評価が得られる可能性が高まります。
一方で、レスポンシブデザインはデザインの幅に制限があるとともに、構築時の作業が煩雑になるケースも少なくありません。しかし、モバイルファーストインデックスが導入された現在において、レスポンシブデザインはWEBサイト制作に欠かせないものとなっているので、未だに導入できていないのであれば早急に導入を検討することをおすすめします。