レスポンシブデザインはSEOに効く？Googleの公式見解とモバイル対応で順位を落とさない設定

Q: モバイルフレンドリーテストはどこに行きましたか？

モバイルフレンドリーテストとSearch Consoleのモバイル ユーザビリティ レポートは提供終了が予定され、2023年12月1日にGoogleのドキュメントから記述が削除されました。現在はChromeのLighthouseやSearch ConsoleのCore Web Vitalsレポートで確認します。

レスポンシブデザインは、Googleが「実装と維持が最も簡単」としておすすめしているモバイル対応の方法です。ただし、レスポンシブにしただけで検索順位が上がるわけではありません。SEOで大事なのは、スマホで見たページにPCと同じ内容が載っていること（Googleはスマホ版のページを基準に評価する）と、表示の速さや安定性（Core Web Vitals）です。

この記事では、レスポンシブデザインとSEOの関係を、Google検索セントラルの公式ドキュメントに書かれている内容に沿って整理し、実装の基本と確認方法をまとめます（2026年10月15日確認）。

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

レスポンシブデザイン（レスポンシブウェブデザイン）は、PC・タブレット・スマホのどれで見ても同じURLで同じHTMLを返し、CSSで画面の幅に合わせて見た目を切り替える作り方です。Googleはモバイル対応の方法を3つに分けて説明しています（Google検索セントラル：モバイルサイトとモバイルファーストインデックスに関するおすすめの方法）。

方法	URL	HTML	SEOで気をつけること
レスポンシブデザイン	PCとスマホで同じ	同じ（CSSで見た目だけ変える）	内容とメタデータが自動的にPCとスマホで同じになる。Googleのおすすめ
動的な配信	同じ	端末ごとに別のHTMLを返す	User-Agentの判定と `Vary: User-Agent` ヘッダーが必要。スマホ版の内容をPC版と揃える
別個のURL（m.ドメインなど）	端末ごとに別	別	canonicalとalternateの指定、リダイレクト、robots.txt、hreflangをPC版・スマホ版の両方で正しく設定する必要がある

同じドキュメントには「Google では、実装と維持が最も簡単なデザインパターンとしてレスポンシブウェブデザインをおすすめしています」と書かれています。また、ドキュメントの注意点の多くは「動的な配信と別個のURLにのみ当てはまる」とされ、レスポンシブなら各ページの内容とメタデータはモバイル版とPC版で同じだと説明されています。レスポンシブの利点は、スマホ版とPC版の食い違いによるSEOの事故が起きにくいことだと考えるとわかりやすいでしょう。

レスポンシブデザインとSEOの関係（Googleの公式情報）

Googleはスマホ版のページで評価する（モバイルファーストインデックス）

Googleは、スマホで表示したときの内容をインデックスに登録しています。Google検索セントラルブログは2023年10月31日に、モバイルファーストインデックスへの移行が「ついにゴールを迎えました」と発表しました。2015年のモバイルフレンドリーアップデート、2016年のモバイルファーストのクロール開始からの取り組みの完了です（Google検索セントラルブログ：モバイルファーストインデックスが実現）。

そのため、スマホで見たときに本文や見出しが削られていると、その分は評価されません。Googleのドキュメントは、スマホ版の内容がPC版より少ない場合はトラフィックの減少が予想されるとし、スペースを空けたいなら内容を削るのではなくアコーディオンやタブに移すよう勧めています。レスポンシブでも、display: none でスマホだけ文章を消すような作り方をすれば同じ問題が起こります。

指標	測るもの	良好の目安	レスポンシブで関係しやすい点
LCP（Largest Contentful Paint）	読み込みの速さ	2.5秒以内	スマホにもPC用の大きな画像を送っていないか
INP（Interaction to Next Paint）	操作への反応の速さ	200ミリ秒未満	メニューの開閉などのJavaScriptが重くないか
CLS（Cumulative Layout Shift）	表示中のレイアウトのずれ	0.1未満	画像の大きさを指定せず、読み込み後に文章が押し下げられていないか

まとめると

レスポンシブかどうかそのものが順位を上げるわけではない
Googleはスマホ版を基準に評価するので、スマホでPCと同じ内容が見られることが前提になる
順位に使われるのはCore Web Vitals。レスポンシブの作り方しだいで良くも悪くもなる
レスポンシブはURLとHTMLが1つなので、別URL方式のような設定ミスが起きにくい

「モバイルサイトのSEO」で気をつけること

m.ドメインなど、スマホ専用のサイトを別に持っている場合は、レスポンシブよりも気をつける点が増えます。Googleのドキュメントにある主な項目です。

PC版とスマホ版で同じ robots メタタグを使う（スマホ版だけ noindex になっているとインデックスに登録されないことがある）
主要な内容を、スワイプやクリックなどの操作をしないと読み込まれない遅延読み込みにしない
PC版とスマホ版で、title要素とメタディスクリプション、構造化データを揃える
画像の代替テキスト（alt）を揃え、できれば同じ画像URLを使う
別URLの場合は、PC版を正規URL（canonical）、スマホ版をその代替（alternate）として指定する
スマホ版にエラーページを返したり、複数のページをすべてトップページにリダイレクトしたりしない

レスポンシブなら、このうちメタデータや構造化データの食い違いは原理的に起きません。それでも、遅延読み込みや「スマホだけ非表示」の扱いは同じように注意が必要です。

レスポンシブデザインの作り方（基本の3点）

最小限の例です。viewport の指定、メディアクエリ、画像の扱いの3点が基本になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>レスポンシブの例</title>
<style>
  body { margin: 0; font-size: 16px; line-height: 1.7; }
  .cards { display: grid; gap: 16px; padding: 16px;
           grid-template-columns: 1fr; }            /* スマホ：1列 */
  .cards img { max-width: 100%; height: auto; }
  @media (min-width: 768px) {                        /* 幅768px以上：3列 */
    .cards { grid-template-columns: repeat(3, 1fr); }
  }
</style>
</head>
<body>
  <div class="cards">
    <article><img src="photo1.jpg" width="640" height="360" alt="教室の様子"><h2>カード1</h2></article>
    <article><img src="photo2.jpg" width="640" height="360" alt="作品の画面"><h2>カード2</h2></article>
    <article><img src="photo3.jpg" width="640" height="360" alt="講師の説明"><h2>カード3</h2></article>
  </div>
</body>
</html>

このHTMLをChromeのヘッドレスモードで開いて .cards の列の幅を調べると、ウィンドウ幅500pxでは「468px」の1列、1024pxでは「320px 320px 320px」の3列になりました（2026年10月15日確認）。

viewportのmetaタグ：width=device-width, initial-scale=1 を書くと、ページの幅が端末の画面の幅に合わせられます。書かないと、スマホでPC用の幅のページが縮小表示されます（MDN：<meta name=”viewport”>）。
メディアクエリ：@media (min-width: 768px) のように、画面の幅で適用するCSSを切り替えます。上の例のようにスマホ用を先に書き、広い画面向けを追加する（モバイルファーストのCSS）と、スマホで余計な上書きが減ります。768pxなどの区切り（ブレークポイント）は決まりではなく、レイアウトが崩れる幅に合わせて決めます。
画像：max-width: 100%; height: auto; で画面からはみ出さないようにし、img には width と height を書いておきます。web.devは、画像と動画には必ず幅と高さの属性を付けるか、CSSの aspect-ratio などで場所を確保するよう勧めています。読み込み中に表示領域が確保され、レイアウトのずれ（CLS）を防げるためです（web.dev：Cumulative Layout Shift を最適化する）。

文字の大きさやタップしやすいボタンの大きさなど、デザイン面の考え方はSEOに強いWebデザインとは？、アクセシビリティやINPなど最近の変化はWebデザイナーが押さえるべき最新の変化にまとめています。

スマホ表示とSEOの確認方法

確認したいこと	使うもの
スマホ幅での見た目	Chromeのデベロッパーツールのデバイスモード、実機
表示速度・アクセシビリティ・SEOの基本項目	Lighthouse（Chromeのデベロッパーツールに入っている）
実際のユーザーでのCore Web Vitals	Search Consoleの「ウェブに関する主な指標（Core Web Vitals）」レポート
Googleがスマホでページをどう読んだか	Search ConsoleのURL検査

以前あった「モバイルフレンドリーテスト」とSearch Consoleの「モバイルユーザビリティ」レポートは、提供終了が予定されたため、Googleは2023年12月1日にドキュメント全体からこの2つの記述を削除しました（Google検索セントラル：ドキュメントの更新情報）。古い記事にこの2つのツールを使う手順が出てきたら、代わりにLighthouseを使ってください。Lighthouseは、Chrome DevTools・コマンドライン・Nodeモジュールから実行でき、パフォーマンス、ユーザー補助、SEOなどを監査します（Chrome for Developers：Lighthouse の概要）。計測ツールの全体像はSEOツール16選で紹介しています。

よくある質問

Q. レスポンシブデザインにするとSEOで有利になりますか？

レスポンシブであること自体で順位が上がるわけではありません。Googleはレスポンシブを実装と維持が最も簡単な方法としておすすめしており、PCとスマホで内容が食い違う事故を防げる点が利点です。順位に使われるのはCore Web Vitalsです。

Q. スマホ専用サイト（m.ドメイン）とレスポンシブはどちらが良いですか？

Googleがおすすめしているのはレスポンシブです。スマホ専用サイトでも評価はされますが、canonicalとalternateの指定、robotsメタタグ、構造化データ、画像やメタデータをPC版と揃える必要があり、設定ミスの余地が大きくなります。

Q. スマホでは文章の一部を非表示にしても大丈夫ですか？

Googleはスマホ版の内容を基準に評価するので、スマホで削った内容は評価されません。スペースを空けたい場合は、削るのではなくアコーディオンやタブに入れるようGoogleのドキュメントは勧めています。

Q. モバイルフレンドリーテストはどこに行きましたか？

モバイルフレンドリーテストとSearch Consoleのモバイルユーザビリティレポートは提供終了が予定され、2023年12月1日にGoogleのドキュメントから記述が削除されました。現在はChromeのLighthouseやSearch ConsoleのCore Web Vitalsレポートで確認します。