PC で問題なく見えていればスマホは後回しでいいですか？

日本国内のモバイル経由トラフィックは 2025 年 4 月時点で 65%（StatCounter）です。PC を後で対応する『デスクトップファースト』は完全に時代遅れで、Google も 2024 年 7 月に PC 専用クロールを廃止し、モバイル版だけがインデックス対象（Mobile-First Indexing 完全移行）。スマホで見づらい時点で SEO 順位も大きく不利になります。

レスポンシブデザインにすればスマホ対応は完了ですか？

レスポンシブは必要条件であって十分条件ではありません。①タップターゲット最低 24×24px（WCAG 2.2 必須化）②文字サイズ 16px 以上 ③画像最適化（WebP / AVIF + 遅延読み込み）④コアウェブバイタル（LCP / INP / CLS）合格 — の 4 点を満たして初めて『スマホ対応済』と言えます。

WordPress テーマを使えば自動でスマホ最適化されますか？

Web Almanac 2025 によれば、WordPress サイトのモバイル CWV 合格率はわずか 43.44%（半数以上が不合格）。テーマを選んだだけでは合格しません。プラグイン削減・画像 WebP 化・遅延読み込み・フォント最適化を個別に対応する必要があります。

タップターゲットの 24×24px とは何ですか？

W3C が 2023 年 10 月に勧告した WCAG 2.2 で AA レベルとして必須化されたタップ領域の最小サイズです（実装上は 44×44px が業界標準）。ボタンやリンクの当たり判定が小さいと、特にシニア層・指の太い人・揺れる電車内での誤タップが急増し、CV を逃します。

何から始めるべきですか？

優先順位は ①viewport メタタグ + レスポンシブ CSS の徹底 ②タップターゲット 44×44px 統一 + 文字 16px 以上 ③画像 WebP / AVIF 化 + 遅延読み込み ④CWV（LCP / INP / CLS）改善 ⑤Sticky CTA でモバイル CV 導線。PageSpeed Insights のモバイルスコア 90 以上が一つの目安です。

Problem ／モバイル最適化

スマホで見にくい・タップしづらい

2026 年 5 月 15 日公開最終更新 2026 年 5 月 15 日読了目安 8 分

この記事の結論

日本国内の WEB トラフィックの 65% はスマホ経由（StatCounter 2025-04）。一方で WordPress サイトのモバイル CWV 合格率はわずか 43.44%（Web Almanac 2025）です。Google は 2024 年 7 月に PC 専用クロールを廃止し、モバイル版のみがインデックス対象（Mobile-First Indexing 完全移行）。スマホで見づらい時点で SEO・CV の両方で不利です。WCAG 2.2 のタップターゲット 24×24px 必須化を含む、現実的な改善策を一次出典付きで解説します。

こんな状態ではありませんか？

□ スマホで見ると文字が小さく、ピンチ拡大が必要
□ ボタンが小さく、隣のリンクを誤タップする
□ ハンバーガーメニューが押しにくい・開きにくい
□ フォーム入力時にキーボードで入力欄が隠れる
□ モバイル表示の確認を制作後にしていない

1 つでも当てはまるなら、訪問者の 65% を取り逃しています。

図 1：日本のモバイル需要 65% に対し、WordPress 供給品質は 43.44%（半数以上が不合格）。

1. モバイルファーストが現実

「PC で見えていれば良い」という時代はすでに終わっています。データで見ると現実は明確です。

・StatCounter 2025 年 4 月時点で、日本国内のモバイル経由トラフィックは 65%（PC 30% / タブレット 5%）

・Google は 2024 年 7 月に PC 専用クロール（Googlebot Desktop）を廃止し、モバイル版のみがインデックス対象に（Mobile-First Indexing 完全移行）

・PageSpeed Insights のスコアもモバイル基準が SEO 評価軸

・ローカル検索（『沼津〇〇』等）の 82% がモバイル経由（Google ローカルレポート）

つまり、スマホで見づらいサイトは Google にも評価されない構造になっています。「PC 後で対応しますね」という古いデスクトップファースト発想は、SEO 的にも CV 的にもすでに時代遅れです。

2. スマホで離脱される 5 つの典型パターン

中小企業サイトのモバイル離脱要因を実測すると、おおむねこの 5 種類に集約されます。

文字が小さく、ピンチ拡大が必要

本文 14px 以下、行間 1.3 以下のサイトは「読む前に閉じる」が大半。Google Material Design / Apple HIG ともに本文 16px 以上 + 行間 1.5 以上を推奨。シニア層の利用が多い業種ほど 18px 以上が安全です。

タップ領域が小さく誤タップする

隣接リンクと近すぎる、ボタンが指より小さい。WCAG 2.2 が 最低 24×24px を AA 必須化（2023-10 勧告）。実装上は 44×44px が業界標準（Apple HIG / Google Material Design 共通値）。

画像が重くて表示が遅い

PNG/JPEG のままアップロードされた重い画像、遅延読み込み未実装。LCP（最大コンテンツ描画）2.5 秒超で Google 「Poor」評価。WebP / AVIF 化で 30-50% 軽量化、遅延読み込みで表示優先度を制御。

ハンバーガーメニューが押しづらい

アイコンが画面端ギリギリ、サイズが小さい、開閉ボタンが探しづらい。NN/g 調査では「メニューが見つからない」が モバイル離脱の上位 3 要因に常に入ります。閉じるボタンの位置・サイズも要設計。

フォーム入力時にキーボードで入力欄が隠れる

フォーム最下部の項目入力時、ソフトキーボードが入力欄を覆い隠す。input type 属性（email / tel / number 等）を正しく指定すれば 適切なキーボードが自動表示され、入力体験が大きく改善します。Baymard Institute 調査ではフォーム最適化で CV +35.26%。

3. 改善の 5 ステップ

優先順位はおおむね上から。土台から順に積みます。

viewport メタタグ + レスポンシブ CSS の徹底 — viewport メタタグ（width=device-width, initial-scale=1.0）を全ページ設置。CSS は Mobile First（モバイル基準で書き、メディアクエリで PC 拡張）。
タップターゲット 44×44px 統一 + 文字 16px 以上 — WCAG 2.2 AA は最低 24×24px だが、実装上は 44×44px（Apple HIG / Google Material Design 共通）。本文文字は 16px 以上、行間 1.5 以上。
画像 WebP / AVIF 化 + 遅延読み込み — 全画像を WebP / AVIF に変換（PNG/JPEG 比 30-50% 軽量）。loading 属性で遅延読み込み。Hero 画像は preload で最初の描画を高速化。
CWV（LCP / INP / CLS）合格 — LCP 2.5 秒以内 / INP 200ms 以内 / CLS 0.1 以内。PageSpeed Insights で mobile スコア 90+ を目標。
Sticky CTA でモバイル CV 導線 — 画面下部に常時 CTA（電話 / 問い合わせ / 予約）を sticky 配置。モバイル CV 率を平均 1.3-1.6 倍に押し上げる。

4. WCAG 2.2 タップターゲット 24×24px 必須化

W3C は 2023 年 10 月、WEB アクセシビリティガイドライン WCAG 2.2 を勧告しました。重要な変更点の 1 つが タップターゲット最小サイズ 24×24px の AA レベル必須化です（成功基準 2.5.8）。

ただし「最低限」が 24×24px であって、実装上の業界標準は 44×44px（Apple Human Interface Guidelines）または 48×48px（Google Material Design）です。HARTON は安全側に倒して 44×44px で実装しています。

欧州アクセシビリティ法（EAA）は 2025 年 6 月施行で WCAG 2.1 AA を法的義務化しています（WCAG 2.2 ではない点に注意）。日本では JIS X 8341-3:2016 が WCAG 2.0 ベースですが、海外取引・大企業納品では WCAG 2.2 AA を要求されるケースが急増中です。

タップターゲットを大きくすることは、シニア層・身体障害者・揺れる電車内のユーザーにも優しい設計です。CV 改善とアクセシビリティ向上が同時に達成できる、最も費用対効果の高い改善の 1 つ。

5. HARTON の解決アプローチ

HARTON は全プランで Mobile First で設計します。モバイルレイアウトを最初に組み、PC 拡張をメディアクエリで対応。タップターゲット 44×44px 統一、本文 16px 以上、画像は全て WebP / AVIF + 遅延読み込み、CWV 全 GOOD（LCP / INP / CLS）を納品基準にしています。

Sticky CTA をモバイルレイアウトのデフォルトに含め、業種別に「電話 / 問い合わせ / 予約」を 1 タップで実行できる導線を実装しています。

このサイト自体が実証です。tcharton.com は CWV 全 GOOD、PageSpeed Insights mobile 90+、WCAG 2.2 AA 準拠で運用しています。実装の根拠は方法論ページとモバイルファースト設計記事で全公開しています。

よくある質問

PC で問題なく見えていればスマホは後回しでいいですか？: 日本国内のモバイル経由トラフィックは 65%（StatCounter 2025-04）。Google は 2024 年 7 月に PC 専用クロールを廃止し、モバイル版のみがインデックス対象（Mobile-First Indexing 完全移行）。スマホで見づらい時点で SEO 順位も大きく不利になります。
レスポンシブデザインにすればスマホ対応は完了ですか？: レスポンシブは必要条件であって十分条件ではありません。①タップターゲット最低 24×24px ②文字 16px 以上 ③画像最適化 ④CWV 合格 — の 4 点を満たして初めて『スマホ対応済』と言えます。
WordPress テーマを使えば自動でスマホ最適化されますか？: Web Almanac 2025 によれば、WordPress サイトのモバイル CWV 合格率はわずか 43.44%（半数以上が不合格）。テーマを選んだだけでは合格しません。プラグイン削減・画像 WebP 化・遅延読み込み・フォント最適化を個別に対応する必要があります。
タップターゲットの 24×24px とは何ですか？: W3C が 2023 年 10 月に勧告した WCAG 2.2 で AA 必須化されたタップ領域の最小サイズ（実装上は 44×44px が業界標準）。当たり判定が小さいと特にシニア層・指の太い人・揺れる電車内での誤タップが急増し、CV を逃します。
何から始めるべきですか？: 優先順位は ①viewport + レスポンシブ CSS ②タップターゲット 44×44px + 文字 16px 以上 ③画像 WebP / AVIF 化 + 遅延読み込み ④CWV 改善 ⑤Sticky CTA。PageSpeed Insights のモバイルスコア 90 以上が一つの目安です。

出典

StatCounter Global Stats, Japan Mobile vs Desktop 2025-04 — gs.statcounter.com/japan
Google Search Central, Mobile-First Indexing 完全移行 (2024-07) — developers.google.com/search/blog/2024/07
HTTP Archive, Web Almanac 2025（CMS chapter） — almanac.httparchive.org/en/2025/cms
W3C, WCAG 2.2 (Recommendation 2023-10) — w3.org/TR/WCAG22
Apple, Human Interface Guidelines — developer.apple.com/design/human-interface-guidelines
Google, Material Design Touch Targets — m3.material.io/foundations/accessible-design
Baymard Institute, E-commerce Form Usability — baymard.com/checkout-usability

Free Diagnosis

あなたのサイトはスマホで快適ですか？

無料診断では、現状サイトのモバイル表示・操作性・CWV を機械検証してお見せします。診断だけで終わっても費用は一切かかりません。

1 分で無料診断を申し込む