mobile-friendly

SEOテクニカル：モバイルフレンドリー

モバイルファーストインデックスの最適化とモバイルユーザビリティについて説明します。Googleはページのモバイル版をインデックス登録とランキングに使用するため、モバイルフレンドリーであることはランキング要因です。

使用時：初回は、役立つ場合、このスキルの対象範囲と重要性を1～2文で説明してから、主な出力を提示してください。2回目以降、またはユーザーから省略するよう求められた場合は、主な出力を直接提示してください。

対象範囲（テクニカル SEO）

• モバイルファーストインデックス：Googleは主にモバイル版をクロールしてインデックス登録します
• モバイル対応：レスポンシブデザイン、ビューポート、ブレークポイント
• コンテンツの同等性：モバイル版とデスクトップ版のコンテンツは一致させる必要があります（モバイル版を優先しても構いません）
• モバイルユーザビリティ：ビューポート、フォントサイズ、タップターゲット、煩わしいインタースティシャルがないこと
• AMP：Accelerated Mobile Pages。そのステータスと検討すべきタイミング

初期評価

プロジェクトのコンテキスト： ルートに contextus.md がある場合は読み込み、このタスクに関連するモジュールのみを読み込んでください。Contextus がない場合は、利用可能なプロジェクト資料またはユーザーが提供した情報を使用し、不足情報を尋ねてください。別個のコンテキストシステムは作成しないでください。

以下を特定してください。

1. サイトの種類：レスポンシブ、個別の AMP、動的配信
2. コンテンツの同等性：モバイル版にデスクトップ版と同じコンテンツが表示されるか
3. ツール：GSC のモバイルユーザビリティ レポート、モバイル フレンドリー テスト

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

要件	対応
コンテンツの同等性	モバイル版にはデスクトップ版と同じ主要コンテンツを含める必要があります。モバイル版で重要なコンテンツを非表示にしないでください
構造化データ	モバイル版とデスクトップ版で同じスキーマを使用し、スキーマ内のモバイル URL を確認してください
メタデータ	モバイル版でも同じタイトルとメタディスクリプションを使用してください
メディア	画像をクロール可能にしてください。ファーストビューの画像には遅延読み込みを使用しないでください

レスポンシブデザインとモバイル対応

レスポンシブデザイン = 単一の HTML を使用し、CSS メディアクエリで画面サイズに合わせてレイアウトを調整します。SEO では、URL が1つで重複コンテンツが発生しないため、推奨されます。

原則	実践方法
モバイルファースト	まずモバイル向けに設計し、デスクトップ向けに拡張します
流動的なレイアウト	%、vw、flex、grid を使用し、固定ピクセル幅は避けてください
ブレークポイント	一般的な値：320px、768px、1024px、1280px。デバイスの幅に合わせてください
画像	レスポンシブ画像（srcset、sizes）を使用してください。image-optimization を参照してください

ビューポート

ビューポートのメタタグは、モバイルでページをどのように拡大縮小して表示するかをブラウザーに伝えます。モバイルフレンドリーなページには必須です。

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

属性	目的
width=device-width	ビューポートの幅をデバイス画面の幅に合わせます
initial-scale=1	読み込み時に1:1の倍率にし、ズームを防ぎます
maximum-scale	ズームを無効にしないようにします（アクセシビリティ）
user-scalable=no	避けてください。アクセシビリティが損なわれます

ビューポートがない場合：デスクトップ向けのレイアウトが縮小表示され、横スクロールが発生し、モバイル フレンドリー テストに合格しません。page-metadata を参照してください。

モバイルユーザビリティのチェックリスト

要素	ガイドライン
ビューポート	上記を参照してください。モバイルフレンドリーにするには必須です
フォントサイズ	本文は最小16pxにし、読むためにズームする必要がないようにしてください
タップターゲット	ボタンやリンクは48×48px以上にし、タップ間に十分な間隔を設けてください
コンテンツ幅	横スクロールが発生せず、コンテンツがビューポートに収まるようにしてください
煩わしいインタースティシャル	モバイルで主要コンテンツを遮るポップアップは避けてください

よくある問題

問題	解決方法
モバイルでコンテンツが非表示になる	重要なコンテンツを表示し、主要コンテンツにアコーディオンやタブを使用しないでください
Flash／非対応機能	HTML5 の代替手段に置き換えてください
テキストが小さすぎる	基本フォントサイズを16px以上にし、12px未満の font-size は避けてください
リンク同士が近すぎる	タップターゲットのサイズを大きくし、パディングを追加してください

レスポンシブ対応と個別 URL

アプローチ	使用する場面	備考
レスポンシブ対応	推奨	URL は 1 つで、HTML は共通、CSS のメディアクエリを使用します
動的な配信	同じ URL で、ユーザーエージェントに応じて異なる HTML を配信する場合	モバイルとデスクトップでコンテンツの同等性を確保してください
個別 URL	m.example.com	canonical と hreflang を使用してください。canonical-tag、page-metadata を参照してください

Accelerated Mobile Pages（AMP）

AMP は、ページを高速に読み込むための Web コンポーネントフレームワークです。状況（2024～2025 年）：引き続きサポートされていますが、トップニュースやランキングに必要ではなくなりました。

項目	備考
ランキング	最適化されたレスポンシブページに対するランキング上の優位性はありません
トップニュース	2021 年以降、AMP は不要です。Core Web Vitals で十分です
検討する場面	ニュースサイト、広告の多いページ、非常に遅いホスティング。ただし、通常はレスポンシブ対応と CWV のほうが適しています
代替案	レスポンシブデザインと core-web-vitals の最適化、SSR/SSG。rendering-strategies を参照してください

推奨事項：ほとんどのサイトでは、AMP よりもレスポンシブデザインと Core Web Vitals を優先してください。AMP は保守作業（AMP HTML の別途管理）が増えます。最新の最適化では、より柔軟に同等のパフォーマンスを実現できます。

出力形式

• モバイル ユーザビリティのステータス：GSC またはモバイル フレンドリー テストの合格／不合格
• レスポンシブ対応／ビューポート：ビューポートメタを確認します。ブレークポイント、流動的なレイアウトも確認します
• コンテンツの同等性：モバイルとデスクトップのコンテンツを確認します
• AMP：レガシーなケースや特定の用途に限ります
• 修正：影響の大きい順に優先順位を付けます

関連スキル

• page-metadata：ビューポートメタタグ。モバイルで必須です
• core-web-vitals：CWV はモバイルで測定されます。トップニュースでは AMP に代わり、LCP、INP、CLS を測定します
• canonical-tag：モバイル用の個別 URL。モバイルでは hreflang を使用します
• image-optimization：レスポンシブ画像。モバイルの LCP に対応します
• rendering-strategies：モバイルでの高速な読み込みを実現する SSR/SSG
• google-search-console：モバイル ユーザビリティ レポート