Google評価の最重要項目「モバイルフレンドリー」とViewport設定の正解

モバイルフレンドリーの真実と「Viewport」の正解#

Googleが2015年に「モバイルフレンドリーアップデート」を実施して以来、モバイル対応はSEOの最重要評価基準の一つとなりました。しかし、単に「スマホで崩れずに表示される」だけでは不十分です。

GoogleのLighthouseやPageSpeed Insightsは、**「タップターゲットの大きさ（48px以上）」や「コンテンツの可読性」**を厳密にスコアリングします。その土台となるのが、HTMLヘッダーに記述する <meta name="viewport"> タグです。

本記事では、コピペで使える2024年版の「正解」設定と、その技術的背景を解説します。

1. 結論：2024年版 Viewportの正解#

結論から言います。現在、ほぼ全てのWebサイトで採用すべき設定は以下です。

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

Next.js (App Router) を使用している場合は、layout.tsx または page.tsx の metadata オブジェクトで設定します（デフォルトで適切な値が設定されますが、明示的に制御する場合）。

import type { Viewport } from 'next';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
  // ユーザーによるズームを許可する（アクセシビリティの必須要件）
  userScalable: true, 
};

2. 各プロパティの技術的意味#

| プロパティ | 推奨値 | 解説 | | :--- | :--- | :--- | | width | device-width | 表示領域の幅をデバイスの画面幅に合わせます。これを指定しないと、スマホでPCサイトを縮小表示したような（文字が極小の）状態になります。 | | initial-scale | 1 | ページ読み込み時のズーム倍率を等倍（1.0）にします。 | | maximum-scale | 5 | 重要。ユーザーがピンチインで拡大できる最大倍率です。アクセシビリティ（WCAG）の観点から、少なくとも2倍以上、できれば5倍程度まで許可すべきです。 | | user-scalable | yes (or 省略) | 「no」は絶対NGです。視覚障がいを持つユーザーや、老眼のユーザーが文字を拡大して読む権利を奪うことになり、アクセシビリティスコアが激減します。 |

⚠️ user-scalable=no の大罪

かつてネイティブアプリのような操作感（固定レイアウト）を実現するために user-scalable=no が多用されました。しかし、これは現在アンチパターンとされています。 テキスト入力フォームにフォーカスした際の自動ズームを防ぎたい場合は、CSSでフォントサイズを適切に調整する（16px以上にする）のが正しい解決策です。

/* iOS Safariで入力時にズームしないための設定 */
input, textarea, select {
  font-size: 16px; /* 16px未満だとiOSは自動ズームしてしまう */
}

3. 最新トレンド：Interactive Widget#

iOS 15以降やAndroidのChromeでは、ソフトウェアキーボードが表示された際のビューポートの挙動を制御できるようになりました。 interactive-widget プロパティを使うと、チャットアプリのように「キーボードが出てもコンテンツを隠さない（リサイズする）」挙動を実現できます。

<!-- キーボード表示時にビューポートをリサイズする -->
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">

4. Google Lighthouse での評価ポイント#

Chrome DevTools の Lighthouse タブで "Mobile Friendly" をチェックする際、以下の項目が自動テストされます。

1. Viewportタグが存在し、width または initial-scale が設定されているか
2. コンテンツが画面幅に収まっているか（横スクロールが発生していないか）
3. タップターゲットのサイズ（ボタンやリンクが小さすぎないか、隣接しすぎていないか）
   • 推奨サイズ: 48x48px 以上
   • 推奨間隔: 8px 以上

開発者ツールでの確認方法

Webサイトを開き、F12 (Macは Cmd+Option+I) で開発者ツールを開き、左上の「デバイスモード」アイコンをクリックします。様々なデバイス幅での表示崩れがないか、必ず実機エミュレーションで確認しましょう。