UX
スマホで読みにくい・押しにくい画面を直す
PCで整って見えるページでも、スマホではCTAが遠い、テキストが詰まる、固定ヘッダーが邪魔になることがあります。スマホは別画面として確認します。
ui.design: tap-targetsui.design: reflow-320ui.design: llm-visual
まず確認する症状
- ボタンやリンクが小さく、隣の要素と近すぎる。
- 横スクロールや固定要素の重なりで本文が読みにくい。
なぜ問題か
- スマホの操作負荷はフォーム離脱やCTA未クリックにつながります。
- 画面幅が狭いほど、情報密度と余白の設計がCVに影響します。
診断で見る指標
タップターゲット寸法
320pxリフロー
固定ヘッダーの占有
スマホのCTA位置
修正方法
最小修正
押す要素のサイズと間隔を確保する
主要ボタンとリンクの高さ、余白、隣接距離を広げます。
推奨修正
スマホ専用の並び順にする
PCの横並びをそのまま詰め込まず、価値、証拠、CTAの順に縦積みします。
さらに改善
実機に近い操作で確認する
片手操作、キーボード表示、フォーム入力中の固定CTAを確認します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
コーディングエージェント向け修正指示
目的: 390px前後と320px幅で、本文、CTA、フォームが横スクロールや重なりなく操作できるようにしてください。押す要素には十分な高さと周囲余白を確保してください。
参考資料
よくある失敗
- PCのカード数と密度をそのままスマホに流し込む。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。