モバイルSEOとは？

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

つまり、モバイル対応していないサイトは、PCからの検索でも順位が下がる可能性があるということです。

日本国内のWeb閲覧の約75%がスマートフォン経由であるという統計もあり、モバイル最適化はもはやオプションではなく必須の施策です。

viewport メタタグの正しい設定

モバイル対応の最も基本的な要素が、viewport メタタグの設定です。これがないと、スマートフォンでPC版のレイアウトがそのまま縮小表示されてしまいます。

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

この1行を<head>内に追加するだけで、ブラウザはデバイスの画面幅に合わせてページをレンダリングします。

避けるべき設定

<!-- ユーザーのズームを無効にする（アクセシビリティ上問題） -->
<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のアクセシビリティガイドラインに違反します。

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

Googleが推奨するモバイル対応の方式はレスポンシブウェブデザインです。1つのHTMLで画面サイズに応じてレイアウトを変化させる手法です。

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;
  }
}

モバイルファーストのアプローチ（小さい画面から設計し、大きい画面に拡張する）が推奨されます。

よくある問題と対策

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

Core Web Vitals のモバイル最適化

Core Web Vitals（LCP、INP、CLS）は、モバイルでの計測値が検索順位の評価に使われます。モバイルはPCより低スペックなため、パフォーマンスの最適化がより重要になります。

LCP（Largest Contentful Paint）を改善する

画像の最適化: WebPやAVIF形式を使用し、適切なサイズで配信
遅延読み込み: ファーストビュー以外の画像にloading="lazy"を設定
フォントの最適化: font-display: swapで表示のブロックを防止

<!-- レスポンシブ画像 -->
<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"
>

CLS（Cumulative Layout Shift）を防ぐ

レイアウトシフトは特にモバイルで顕著に発生します。

画像や動画にwidthとheight属性を必ず指定する
広告枠のスペースを事前に確保する
Webフォントの読み込みによるフラッシュを防ぐ

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

JavaScriptの実行量を最小化する
メインスレッドのブロックを避ける
requestAnimationFrameやrequestIdleCallbackを活用する

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

モバイル環境は4G/LTE回線が中心で、PCに比べて帯域幅が限られます。

具体的な改善策

画像の圧縮と最適化 — 全体のデータ転送量の50%以上を画像が占めることも
不要なJavaScriptの削除 — Tree shakingやコードスプリッティングを活用
CSSの最適化 — Critical CSSをインライン化し、残りを非同期読み込み
サーバーレスポンスの高速化 — CDNの利用、キャッシュ戦略の最適化
HTTP/2やHTTP/3の利用 — 多重化による効率的なリソース読み込み

PageSpeed Insightsでモバイルスコアを測定し、90点以上を目指しましょう。

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

AI検索エンジン（ChatGPT、Perplexity、Google AI Overview）もモバイルからの利用が増えています。モバイルで適切に表示されるサイトは、AI検索でも引用されやすい傾向にあります。

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

構造化データの正しい実装 — モバイルでもJSON-LDが正しく読み込まれるか
コンテンツの可読性 — 簡潔で明確な段落構成
ページの読み込み速度 — AIクローラーもページのレスポンスを考慮

チェックリスト

モバイルSEO対策の確認ポイントをまとめます。

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

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

よくある質問

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

Googleがサイトの評価にモバイル版のコンテンツを優先的に使用する仕組みです。2023年に全サイトに適用され、モバイル版のコンテンツが検索順位の主な評価対象となっています。

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

Googleはレスポンシブウェブデザインを推奨しています。1つのURLで管理できるため、被リンクの分散を防ぎ、クロール効率も向上します。

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

2026年現在、AMPは検索順位の直接的なランキング要因ではなくなりました。Core Web Vitalsを満たしていれば、AMPを導入する必要性は低いです。

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

モバイルのテストはCPU性能を制限した環境で行われるため、JavaScriptの処理が重いサイトではスコアが大幅に下がります。JavaScript量の削減とCritical Rendering Pathの最適化が有効です。