スマートフォン対応・モバイルフレンドリー化

スマホで見るとレイアウトが崩れる

PCを前提に固定幅（px）で設計されたサイトをそのままスマートフォンで表示すると、要素がはみ出したり重なったりします。CSSにメディアクエリが設定されていないか、設定が不十分なことが主な原因です。

テキストが小さすぎて読めない

PCで読みやすい12〜13pxのテキストはスマートフォンで見ると非常に小さく見えます。ブラウザが自動で文字を拡大することがありますが、それがレイアウトのズレを引き起こすこともあります。

ボタンが小さくてタップしにくい

PCではマウスカーソルで正確にクリックできますが、スマートフォンでは指でタップするため44px以上のタップ領域が必要です。小さなボタンはタップミスを誘発しCVRを低下させます。

スマホでのページ表示が遅い

PC向けに最適化された大きな画像・複数のJavaScriptファイル・未使用のCSSが読み込まれることで、モバイル回線環境での表示が遅くなります。LighthouseのモバイルスコアがPC比で大幅に低いケースが多いです。

ハンバーガーメニューが使いにくい

メニューが開閉しない・開いてもリンクがタップできない・メニューが画面外にはみ出すなどの問題がよく起きます。JavaScriptの実装ミスやz-indexの設定誤りが主な原因です。

画像がはみ出る・圧縮されていない

max-width: 100%の設定がない画像は親要素からはみ出して横スクロールを引き起こします。また、PC向けの大きな画像をそのまま表示するとデータ量が多くなり読み込み速度に悪影響を与えます。

フォームがスマホで入力しにくい

入力フィールドが小さすぎる・スクロールしないと送信ボタンに届かない・キーボードが表示されると画面が切れてフィールドが見えなくなるなどの問題がCVRを大きく下げます。

モバイルでのCVが低い

PCとモバイルのCVRを比較するとモバイルが大幅に低いケースがあります。ページ速度・タップUI・フォームの使いにくさ・CTAの視認性が複合的に影響していることが多く、ヒートマップ分析が有効です。

Google Search ConsoleにモバイルUsabilityエラーが出ている

「クリック可能な要素が近すぎます」「テキストが小さすぎて読めません」などのエラーは放置するとモバイルインデックスでの評価に影響します。定期的なSearch Consoleの確認と対応が必要です。

PCデザインをそのままスマホに押し込んでいる

PCで4カラムのグリッドをスマートフォンでそのまま表示したり、横幅いっぱいの表をそのまま表示したりするケースです。スマートフォン用のレイアウト変更を加えることで大幅にUXが改善します。

レスポンシブデザイン（Flexbox・Grid・Tailwind CSS）

CSSのFlexbox・Grid・メディアクエリを使って、画面幅に応じてレイアウトが自動調整されるレスポンシブデザインを実装します。Tailwind CSSによる効率的な実装で高品質なレスポンシブを実現します。

文字サイズ・行間・余白のモバイル最適化

スマートフォンでの読みやすさを優先した文字サイズ（16px以上）・行間（1.7〜1.9）・ボタン間の余白を確保します。PCとスマートフォンで適切なサイズに自動調整します。

タップターゲットの最小サイズ確保

ボタン・リンク・メニューアイテムは指でタップできる最小サイズ（44×44px以上）を確保します。Googleのモバイルユーザビリティガイドラインに準拠した実装です。

横スクロールの完全排除

すべてのコンテンツが画面幅内に収まるよう設計します。表・画像・埋め込みコンテンツなどで横スクロールが発生しないよう詳細に対応します。

画像サイズの最適化（next/image）

next/imageコンポーネントによりスマートフォンの画面解像度・サイズに応じた最適な画像を自動配信します。不必要に大きな画像を読み込まないため表示速度が大幅に改善します。

モバイルフォームの操作性向上

入力フォームのフィールドサイズ・キーボードタイプの最適化・エラーメッセージの表示位置など、スマートフォンでのフォーム操作を細部まで最適化します。

現状のモバイル表示確認（実機・Chrome DevTools）

iPhone・Androidの実機複数台とChrome DevToolsのエミュレーションで現状の表示を確認します。横スクロール・文字の小ささ・タップしにくいUI・レイアウト崩れを記録します。

Google Mobile-Friendly Testの実施

GoogleのMobile-Friendly Testで各ページの評価を確認します。合否だけでなく、具体的な問題点のリストが表示されるため、修正箇所の特定に活用します。

Lighthouse モバイルスコア測定

Chrome DevToolsのLighthouseでパフォーマンス・SEO・アクセシビリティのモバイルスコアを測定します。各項目のスコアと改善提案を確認し、優先度をつけます。

問題箇所のリストアップ

実機確認・Mobile-Friendly Test・Lighthouseの結果を統合して問題箇所一覧を作成します。影響度（CVRへの影響・SEOへの影響）と修正コストで優先順位をつけます。

レスポンシブブレイクポイント設計

スマートフォン（〜767px）・タブレット（768〜1023px）・PC（1024px〜）のブレイクポイントを設計します。各画面幅でのレイアウト変更方針をワイヤーフレームで確認します。

タップターゲットサイズ確認（44px以上）

ボタン・リンク・ナビゲーション要素のサイズを44×44px以上に拡大します。要素間の間隔も8px以上確保し、誤タップが起きにくいUIに修正します。

フォント・行間の最適化

本文フォントサイズを16px以上・行間を1.7〜1.9に設定します。見出しのサイズはPCより小さく設定し、スマートフォン画面内に適切に収まるよう調整します。

画像のWebP化・遅延読み込み

既存のJPEG・PNG画像をWebP形式に変換し、ファイルサイズを削減します。スクロールしないと見えない画像には遅延読み込みを設定し、初期表示速度を改善します。

フォームのモバイルUX改善

入力フィールドのサイズ拡大・適切なinputtype設定（tel・email・number等）・エラーメッセージの視認性改善・送信ボタンのサイズ拡大を実施します。

公開後のCore Web Vitals確認

公開後にPageSpeed InsightsでモバイルのCore Web Vitals（LCP・INP・CLS）を測定します。Google Search ConsoleのCore Web Vitalsレポートで実際のユーザーデータも確認します。

計測場所: Chrome DevTools / PageSpeed Insights

パフォーマンス・アクセシビリティ・SEOのモバイルスコアを定期的に測定します。スコアが下がった場合は追加したプラグインや画像が原因であることが多く、特定して改善します。

計測場所: PageSpeed Insights / Search Console

LCP（最大コンテンツの読み込み時間）・CLS（レイアウトの安定性）・FID/INP（応答速度）の3指標をモバイルで測定します。いずれも「良好」範囲に入ることを目標にします。

計測場所: Google Analytics（セグメント分割）

スマートフォンからの問い合わせ・資料請求・予約などのコンバージョン率を、PCとセグメント別に比較します。差が大きい場合はモバイルUXに改善余地があります。

計測場所: Google Analytics（デバイスセグメント）

スマートフォンからのアクセスのうち、1ページだけ見て離脱した割合です。高い直帰率はページ速度・コンテンツの関連性・UXの問題を示しています。

計測場所: Google Analytics（デバイスセグメント）

スマートフォンユーザーがサイト内で過ごす平均時間です。短い場合は読みにくさ・コンテンツの関連性・速度の問題が疑われます。改善後の比較で効果を測定します。

計測場所: Google Search Console（ページエクスペリエンス）

「クリック可能な要素が近すぎます」「テキストが小さすぎて読めません」などのモバイルエラー件数をゼロにすることを目標とします。月次で確認します。

計測場所: Google Analytics（デバイスカテゴリ）

全アクセスに占めるスマートフォンからのアクセスの割合を把握します。モバイル比率が高いサイトほどモバイル最適化の優先度が高く、改善効果も大きくなります。