モバイルSEOとは？

モバイルSEOとは、スマートフォンやタブレットからのアクセスに対して、Webサイトを最適化する施策の総称です。Googleは2023年にモバイルファーストインデックス（MFI）への完全移行を完了し、すべてのサイトでモバイル版のコンテンツが検索順位の評価基準となっています。

つまり、モバイル対応が不十分なサイトは、PCからの検索であっても順位が下がる可能性があるということです。モバイル版の品質が、すべてのデバイスにおける検索順位を左右します。

日本国内のWeb閲覧の約75%がスマートフォン経由であるという統計もあり、世界全体で見ても60%以上のトラフィックがモバイルデバイスからのアクセスです。モバイル最適化はもはやオプションではなく、検索エンジンでの可視性を確保するための必須要件です。

viewport メタタグの正しい設定

モバイル対応の最も基本的な要素が、viewport メタタグの設定です。この設定がないと、スマートフォンでPC版のレイアウトがそのまま縮小表示されてしまい、テキストが小さすぎて読めなくなります。ユーザーはピンチズームを繰り返しながら読む必要があり、UXが大きく損なわれます。

<meta name="viewport" content="width=device-width, initial-scale=1">

この1行を<head>内に追加するだけで、ブラウザはデバイスの画面幅に合わせてページをレンダリングするようになります。viewport メタタグはモバイルSEOのすべての基盤であり、これがなければ他のモバイル最適化施策も正しく機能しません。

避けるべき設定

以下の設定はモバイルUXとSEOに悪影響を与えるため、使用を避けてください。

<!-- ユーザーのズームを無効にする（アクセシビリティ上問題） -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<!-- 固定幅を指定する（レスポンシブにならない） -->
<meta name="viewport" content="width=1024">

user-scalable=noやmaximum-scale=1を設定すると、ユーザーがピンチズームでテキストを拡大できなくなります。これはWCAG（Webコンテンツアクセシビリティガイドライン）に違反するだけでなく、視力が弱いユーザーや高齢者にとって大きな障壁となります。UXとSEOの両面からマイナスとなるため、ズームの制限は避けてください。

固定幅（width=1024など）の指定も問題です。この設定ではデバイスの画面幅が無視され、常にPC向けのレイアウトが表示されるため、レスポンシブデザインが機能しなくなります。

レスポンシブデザインの実装

Googleが推奨するモバイル対応の方式はレスポンシブウェブデザインです。1つのHTMLページがCSSを使って画面サイズに応じてレイアウトを変化させる手法で、以下のメリットがあります。

URLが統一されるためリンク評価の分散が起きない
1つのHTMLを管理するだけでよいため、運用コストが低い
Googleの推奨方式であるため、クロールとインデックスの効率が高い

CSSメディアクエリの活用

/* モバイルファーストで設計 */
.container {
  padding: 16px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* PC */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

モバイルファーストのアプローチ（小さい画面のスタイルをデフォルトにし、大きい画面向けにメディアクエリで拡張する）が推奨されます。この方法であれば、モバイルユーザーには必要最低限のCSSだけが読み込まれ、パフォーマンス面でも有利です。

逆に、デスクトップファーストで設計し、モバイル向けにスタイルを上書きするアプローチでは、モバイルデバイスがデスクトップ用の不要なCSSも読み込む必要があり、パフォーマンスが低下します。

よくある問題と対策

問題	影響	対策
横スクロールの発生	UX悪化、離脱率上昇	`max-width: 100%`を画像や要素に適用
タップターゲットが小さい	誤タップの増加	ボタンやリンクを最低48x48pxに設定
フォントサイズが小さい	読みにくさ	本文は16px以上を推奨
コンテンツの非表示	MFIでの評価低下	モバイルでもPC版と同じコンテンツを表示

特にコンテンツの非表示は見落とされがちです。「モバイルでは情報量を減らしたほうが良い」と考えてコンテンツをdisplay: noneで隠すと、MFIではその隠されたコンテンツが評価対象から外れてしまいます。モバイルとデスクトップで同一のコンテンツを提供することが重要です。

アコーディオンやタブで折りたたむ場合は、HTMLにコンテンツが含まれている限りGoogleは評価対象にしますが、JavaScriptで動的に読み込む場合は注意が必要です。

Core Web Vitals のモバイル最適化

Core Web Vitals（LCP、INP、CLS）は、モバイルデバイスでの計測値が検索順位の評価に使われます。モバイルはPCより処理能力が限られるため、パフォーマンスの最適化がより一層重要です。

LCP（Largest Contentful Paint）を改善する

LCPはページの主要コンテンツが表示されるまでの時間を測定する指標です。2.5秒以内が「良好」とされています。モバイルでは通信速度やCPU性能の制約があるため、デスクトップよりLCPが悪化しやすい傾向があります。

画像の最適化: WebPやAVIF形式を使用し、デバイスの画面幅に適したサイズで配信する。モバイル向けには400〜800px幅の画像で十分な場合が多い
遅延読み込み: ファーストビュー以外の画像にloading="lazy"を設定し、初期ロードを高速化する。ただし、LCPの対象となるファーストビューのメイン画像にはloading="lazy"を設定しないこと
フォントの最適化: font-display: swapを使ってWebフォントの読み込みが完了するまでシステムフォントを表示し、テキストのレンダリングをブロックしない

<!-- レスポンシブ画像 -->
<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="記事のサムネイル"
  loading="lazy"
  width="800"
  height="450"
>

srcsetとsizes属性を使うことで、ブラウザがデバイスの画面幅と解像度に最適な画像サイズを自動的に選択します。スマートフォンに不必要な高解像度画像を配信しないことが、LCP改善の鍵です。

CLS（Cumulative Layout Shift）を防ぐ

レイアウトシフトとは、ページの読み込み中に要素の位置がずれる現象です。モバイルの画面は小さいため、わずかなシフトでもユーザーが「読もうとしていたテキストが突然ずれる」「タップしようとしたボタンが移動して別のリンクを押してしまう」といった問題につながります。CLS は0.1未満が「良好」です。

画像や動画にwidthとheight属性を必ず指定する（ブラウザが読み込み前にスペースを確保できる）
広告枠のスペースを事前に確保し、広告が読み込まれたときにレイアウトがずれないようにする
Webフォントの読み込みによるフラッシュ（FOUT/FOIT）を適切なfont-display戦略で防ぐ
動的にコンテンツを挿入する場合は、挿入先のスペースを事前にCSSで確保しておく

INP（Interaction to Next Paint）を改善する

INPはユーザーの操作（タップ、クリック、キー入力）から画面が更新されるまでの応答速度を測定します。200ミリ秒以内が「良好」です。モバイルではCPU性能がデスクトップの数分の一であるため、JavaScriptの処理量が直接的にINPに影響します。

メインスレッドでのJavaScript実行量を最小化する
長時間かかるタスクを分割し、ユーザーの操作をブロックしない（50ミリ秒以上のタスクは「ロングタスク」とみなされる）
requestAnimationFrameやrequestIdleCallbackを活用して、非クリティカルな処理を適切なタイミングで実行する
サードパーティスクリプト（広告、アナリティクス、チャットウィジェット等）の読み込みを遅延させる

モバイルでのページ速度改善

モバイル環境は4G/LTE回線が中心で、PCのブロードバンドに比べて帯域幅が限られます。また、モバイル通信は遅延（レイテンシ）が大きいため、リソースの数を減らすこともパフォーマンス改善に直結します。ページ全体のデータ転送量を抑えることが極めて重要です。

具体的な改善策

画像の圧縮と最適化 — 全体のデータ転送量の50%以上を画像が占めることも珍しくありません。WebPやAVIF形式への変換、適切なサイズへのリサイズが基本です。ツールとしてはSquoosh（Googleが提供する無料の画像圧縮ツール）が手軽で高品質な圧縮を実現できます
不要なJavaScriptの削除 — Tree shakingやコードスプリッティングを活用し、各ページで必要なコードだけを読み込む。使っていないライブラリやポリフィルがバンドルに含まれていないか確認する
CSSの最適化 — Critical CSS（ファーストビューの表示に必要なCSS）をインライン化し、残りを非同期で読み込む。未使用のCSSを削除し、CSSファイルの総量を削減する
サーバーレスポンスの高速化 — CDNの利用、サーバーサイドキャッシュ、データベースクエリの最適化でレスポンス時間を短縮する。Time to First Byte（TTFB）が200ミリ秒以内であることが理想
HTTP/2やHTTP/3の利用 — 多重化接続により、複数のリソースを並行して効率的に読み込める。HTTP/1.1ではリソースごとにコネクションが必要だが、HTTP/2以降は1つのコネクションで複数のリクエストを処理できる

PageSpeed Insightsでモバイルスコアを測定し、90点以上を目指しましょう。モバイルのテストはCPU性能を制限したシミュレーション環境で行われるため、デスクトップよりもスコアが低くなりやすい点に注意が必要です。

モバイルSEOとAI検索の関係

ChatGPT、Perplexity、Google AI OverviewなどのAI検索エンジンも、モバイルデバイスからの利用が急速に増えています。モバイルで適切に表示・動作するサイトは、AI検索での引用対象としても有利です。

特に以下の点がAI検索での引用に影響します。

構造化データの正しい実装 — JSON-LDがモバイル版のHTMLでも正しく読み込まれていること。MFIの仕組みにより、モバイル版に含まれない構造化データは評価されない。デスクトップ版だけに構造化データを入れている場合は、モバイル版にも反映されているか確認する
コンテンツの可読性 — 簡潔で明確な段落構成、見出しによる論理的な構造化がAIの理解を助ける。箇条書きやテーブルなどの構造化された情報はAIが抽出しやすい
ページの読み込み速度 — AIクローラーもページのレスポンス時間を考慮しており、遅いサイトはクロールの優先度が下がる可能性がある。特にGPTBotやClaudeBotなどのクローラーは大量のページを巡回するため、レスポンスが遅いサイトは後回しにされやすい

モバイルSEOの基盤がしっかりしていることは、従来の検索エンジン最適化だけでなく、GEO（Generative Engine Optimization）の土台としても機能します。モバイル対応がされていないサイトは、従来のSEOでもAI検索でも不利になるのです。

チェックリスト

モバイルSEO対策の確認ポイントをまとめます。自サイトの対応状況を一つずつ確認してください。

viewport メタタグが正しく設定されている
レスポンシブデザインが実装されている
横スクロールが発生していない
タップターゲットが48px以上ある
本文フォントサイズが16px以上
PageSpeed Insightsのモバイルスコアが90点以上
Core Web Vitals（LCP、INP、CLS）が基準値内
画像にwidth/height属性とalt属性がある
モバイルとPCで同じコンテンツが表示されている

IndexReadyでは、viewport設定やCore Web Vitalsを含むモバイル関連のチェック項目を自動で採点できます。まずは自分のサイトの現状を確認してみましょう。

よくある質問

モバイルファーストインデックスとは何ですか？

モバイルファーストインデックス（MFI）とは、Googleがサイトの評価にモバイル版のコンテンツを優先的に使用する仕組みです。2023年に全サイトに適用が完了し、モバイル版のコンテンツが検索順位の主な評価対象となっています。つまり、デスクトップ版にしか存在しないコンテンツは、Googleの評価対象から外れる可能性があります。モバイル版のHTMLに含まれる情報がすべての基準になるため、構造化データやメタ情報もモバイル版に含める必要があります。

レスポンシブデザインと別URL方式、どちらが良いですか？

Googleはレスポンシブウェブデザインを推奨しています。1つのURLで管理できるため、被リンク（外部サイトからのリンク）の分散を防ぎ、クロール効率も向上します。別URL方式（m.example.comなど）では、正規URLの指定やリダイレクトの管理が必要になり、運用コストが高くなります。また、rel="canonical"やrel="alternate"の設定ミスにより、インデックスの問題が発生するリスクもあります。

AMP（Accelerated Mobile Pages）はまだ必要ですか？

2026年現在、AMPは検索順位の直接的なランキング要因ではなくなりました。かつてはトップニュースカルーセルへの掲載にAMPが必須でしたが、現在はその要件も撤廃されています。Core Web Vitalsの基準を満たしているサイトであれば、AMPを新たに導入するメリットはほとんどありません。既にAMPを導入しているサイトでも、通常のページがCore Web Vitalsを満たしているなら、AMPの維持にかかるコストと比較して段階的な廃止を検討してもよいでしょう。

モバイルのPageSpeedスコアがPCより低いのはなぜですか？

モバイルのPageSpeed Insightsテストは、CPU性能を制限した環境でシミュレーションを行います。これは、平均的なスマートフォンの処理能力を再現するためです。具体的には、CPU速度を4倍に減速させた環境でテストされます。そのため、JavaScriptの処理が重いサイトではモバイルスコアがデスクトップの半分以下になることも珍しくありません。JavaScript量の削減、コードスプリッティング、Critical Rendering Pathの最適化が最も効果的な改善策です。

モバイルSEO対策ガイド｜スマホ時代に必須の最適化ポイント