レスポンシブwebデザインとは？スマホ対応とSEO

ホームページ閲覧の半数以上が「スマホ」から、という時代の中で
スマホ対応デザインを用意しておくことは、もはや常識になっています。

ただ、「スマホ対応」と言ったときに、その方法はいくつかあり、選択が必要となります。

このページでは、最新のマルチデバイス対応であり、Googleが公式に推奨している「レスポンシブデザイン」について、その仕組みやメリット・デメリット、SEOとの関係について解説いたします。

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

レスポンシブデザインとは、Webサイトのデザインを、
1つのURLとファイルによって、
閲覧ユーザーが使用するデバイス（PC・スマホ・タブレットなど）の画面サイズに応じて、自動で表示を最適化するデザインです。

従来式のスマホ対応では、
2つのURLまたは2つのファイルを使って表示切替で対応させていましたが、
レスポンシブデザインでは
1つのURL・1つのファイルですべてのデバイスに対応できます。

たとえば、スマホから閲覧する場合、スマホの画面サイズ（横幅）に応じて、自動で最適な表示がなされるわけです。

パソコンの様々なモニターやタブレットなどでも同様に最適化されて表示されます。

Webサイト閲覧の半数以上が、スマホなどの「モバイル」からとなっている状況下において、スマホ対応は必須です。

特に、自動で最適表示されるレスポンシブデザインは、
ユーザーの利便性・見やすさ・SEOなどの観点から、最もお勧めと言えるスマホ対応デザインです。

3つのモバイル対応方法

モバイル対応の方法には、以下の3つがあります。

「従来型」のモバイル対応が、「別々のURL」方式と「動的な配信」方式です。
レスポンシブデザインとの違いを下図でご確認ください。

「別々のURL」とは、パソコン用URLとスマホ用URLのように、2つのサイト・2つのURLを作成して、ユーザーの閲覧デバイスの信号を受け取って、それぞれを表示する方法です。

「動的な配信」は、サイト・URLは1つですが、2つのHTMLファイルを別々に作成して、ユーザーの閲覧デバイスの信号を受け取って、それぞれを表示する方法です。

「レスポンシブデザイン」は
1つのURL・1つのHTMLファイルで、あらゆるユーザーに同じファイルを送ります。
閲覧者の画面の大きさに合わせて、表示が自動で変化する…という方法です。

３つのデザイン手法の「閲覧者のリクエストから表示まで」のイメージは以下のようになります。

デバイス信号を確認して、それに応じたファイルを表示するというプロセスが必要となるため、
表示に時間がかかる（読み込み時間の低下）や表示ミスが発生することもあります。

レスポンシブデザインでは、表示までのプセスがシンプルですので、
表示速度が速く、ミスもありません。

メリット・デメリット

レスポンシブデザインのメリットとデメリットを確認して行きましょう。

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

レスポンシブデザインは、
1つのURL・1つのファイルで、スマホ・タブレット・PCに対応するマルチデバイス対応デザインです。

メリットには、以下のものがあります。

• 表示速度が早い
  閲覧リクエストに対して、即座に応答しますので、表示スピードが向上します。
• エラーが発生しにくい
  スマホ・タブレット・PCなどに1つのファイルで対応しますので、表示エラーが起こりません。
• シェアしやすい
  1つのURL・ファイルですので、SNSでシェアしやすいという特徴があります。
• リンクしやすい
  「2つのURL」では、スマホでリンクした場合にスマホ用URLがリンク先となりますが、これをPCで見たときにスマホ用の表示が返される可能性が高くなり、リンクが混乱することがあります。
  レスポンシブデザインなら、リンクもシンプルに行えます。
• 被リンクが確実
  1つのURLですので、被リンクを確実に受けることができます。
• ページエクスペリエンス向上
  あらゆるデバイスに最適な表示をしますので、ユーザーの閲覧環境が良好になり、満足度が高まります。

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

レスポンシブデザインのデメリットには、以下のものがあります。

• 制作費が高くなる場合がある
  HP制作業者によっては、レスポンシブデザイン費として追加料金を請求されることがあります。

• 複雑なデザインを組みにくい
  1つのファイルであらゆるデバイスに対応させるため、シンプルにデザイン構成する必要があります。

• 画像ファイルを変える必要がある
  パソコン用に大きなファイルサイズの画像を表示する場合など、そのままスマホ表示すると読み込み速度の低下になるため、スマホ表示用の画像を用意する必要がる
  （全ての画像でスマホ用画像が必要なわけではありません）

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

SEO（Search Engine Optimization＝検索エンジン最適化）とは、検索エンジンに正しく・高く評価されることで、検索結果のランキングを上げて行くための対策です。

レスポンシブデザインとSEOの関係を見て行きましょう。

検索エンジンの巡回率の向上

「別々のURL」「動的配信」では、2つのファイルが存在するため、検索エンジンが正しく情報を収集できないことがあります。

レスポンシブデザインの場合は、Google検索エンジンが1つのURLだけを巡回すれば済むため、サイト全体のクロール効率が向上し、正確に内容把握することができます。
新しいページや更新情報、内部リンク、各ページのコンテンツの質などを検索エンジンが検索が評価しやすくなるため、SEOにプラスの効果があります。

モバイルファーストインデックスに完全対応

モバイルファーストインデックス（MFI）とは、Google検索エンジンが、「モバイル表示の情報を」検索ランキング決定評価基準にする仕組みのことで、2023年から全世界で実施されています。

「別々のURL」「動的配信」で、PC表示とモバイル表示の内容が異なる場合、MFIでは、モバイル版のみが評価対象となるため、マイナスの影響を受けることがあります。

レスポンシブデザインの場合は、1つのファイルで表示を行うため、「スマホ版だけ情報が不足して評価が落ちる」というリスクを完全に防止できます。

被リンク・SNSシェアなどの集中

レスポンシブデザインは、一つのファイルで管理しているため、
外部から受けた被リンク・SNSでのシェアが分散することなく、評価を受けることができ、
外部からのシグナルをきちんとSEO評価として蓄積して行くことができます。

（「別々のURL」方式では、スマホで受けた被リンクとPCで受けた被リンクが分散します）

表示速度の向上につながりやすい

表示速度（コアウェブバイタル）は、Googleのサイト評価の重要基準であるページエクスペリエンス（良好な閲覧環境）のコア指標です。

「別々のURL」「動的な配信」では、ユーザーのデバイスシグナルを判断してから表示するため、速度低下につながりやすい一方、
レスポンシブデザインは、ユーザーリクエスト⇒即表示、となりますので、速度低下が起こりにくくまります。

レスポンシブデザインでのSEO最適化とチェックポイント

これまで見てきました通り、Googleが推奨するレスポンシブデザインの採用は、
SEOにプラスの効果をもたらします。

ただし、レスポンシブデザインを採用すれば、上記の全てがOKかと言いますと、必ずしもそうではなく、制作時に何らかのマイナスとなる要素が含まれますと、SEO効果が損なわれることになります。

ですので、レスポンシブデザインで制作を進める段階で、
以下のチェックを行うようにしましょう。

表示速度のチェック

「携帯電話」（スマホ表示版）の表示速度が重要で、このテストでの数値が「30」以下の場合は、SEOにマイナスの影響が出ますので、改善が必要です。

改善ポイントは、「パフォーマンス」の結果表示の下に示されますので、これを参考に改善を進めてください。

PageSpeed Insightsの改善ポイント表示例↓

モバイルフレンドリーのチェック

レスポンシブデザインは、あらゆるデバイスで最適な表示を返す仕組みですが、これがモバイルフレンドリーで十分であることを保証する訳ではありません。

「文字の大きさ」「行間」「タップするボタン間隔」「図表の適正表示」「画面からのはみ出しがない」などを、先ほど確認した「PageSpeed Insights」の「SEO」のところをクリックしてください。

「SEO」表示の中の「スマホ対応」というところに、
モバイルフレンドリーに関して問題のある場合に、その箇所が表示されますので、改善してください。
（「SEO」の点数が70点以上あれば、特に改善は必要ありません。）

実際に目で確認する

レスポンシブデザインでの制作を進めたら、実際に、スマホ・タブレット・パソコンなどで、自分の目で確認するようにしましょう。

ページエクスペリエンスを向上させてSEO効果を高めるためには、
PageSpeed Insightsでチェック・改善すると同時に、
ユーザーの立場で、「どのように見えるか？」「使い勝手はよいか？」「ページは見つけやすいか？」などを確かめて、改善を重ねることが重要です。

レスポンシブデザインでSEOに強いwebサイトに！

レスポンシブデザインは、Googleが推奨し、様々なメリットがある最新のスマホ対応・マルチデバイス対応デザインです。

「SEOホームページ制作」では、レスポンシブデザインを採用し、SEOに強いウェブサイトを制作していますので、お気軽にご相談ください。

【関連ページ】