スマホで読みにくい・押しにくい画面を直す

PCで整って見えるページでも、スマホではCTAが遠い、テキストが詰まる、固定ヘッダーが邪魔になることがあります。スマホは別画面として確認します。

ui.design: tap-targetsui.design: reflow-320ui.design: llm-visual

まず確認する症状

ボタンやリンクが小さく、隣の要素と近すぎる。
横スクロールや固定要素の重なりで本文が読みにくい。
PCでは整って見えるが、スマホ、ズーム、長い文言、低速表示で判断順が崩れる。
カードや装飾の量が多く、見出し、本文、CTA、入力欄の役割差が弱い。

なぜ問題か

スマホの操作負荷はフォーム離脱やCTA未クリックにつながります。
画面幅が狭いほど、情報密度と余白の設計がCVに影響します。
UXの問題は単一コンポーネントではなく、読む順番、操作順、待ち時間、復帰導線のつながりで発生します。
AIに画面修正を依頼する場合も、見た目の好みではなく、ユーザーが判断・操作できる条件へ落とす必要があります。

診断で見る指標

タップターゲット寸法

320pxリフロー

固定ヘッダーの占有

スマホのCTA位置

スマホ390px/320pxでの読了と操作

視覚順とDOM順の一致

主CTAまでのスクロール量

エラーや待ち時間からの復帰率

390pxと320pxのスクリーンショット

片手操作の主要CTA

固定要素の占有率

キーボード表示時のフォーム

修正方法

最小修正

押す要素のサイズと間隔を確保する

主要ボタンとリンクの高さ、余白、隣接距離を広げます。

推奨修正

スマホ専用の並び順にする

PCの横並びをそのまま詰め込まず、価値、証拠、CTAの順に縦積みします。

さらに改善

実機に近い操作で確認する

片手操作、キーボード表示、フォーム入力中の固定CTAを確認します。

受け入れ条件

01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
04PC、スマホ、320px幅、長い文言のいずれでも、主要情報と操作が重なりや欠けなく確認できる。
05ユーザーが読む順番とTab移動や画面構造の順番が大きく矛盾しない。
06スマホで本文、CTA、フォーム、エラー表示が横スクロールなしに読め、押せる。
07固定ヘッダー、追従CTA、チャット、Cookie表示が主要操作を隠さない。

コーディングエージェント向け修正指示

目的: 390px前後と320px幅で、本文、CTA、フォームが横スクロールや重なりなく操作できるようにしてください。押す要素には十分な高さと周囲余白を確保してください。追加確認: PCの横並びを単純に縮小せず、スマホでは価値、証拠、CTA、詳細の順に縦方向へ再配置してください。

参考資料

よくある失敗

PCのカード数と密度をそのままスマホに流し込む。
見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
FigmaやPC表示だけで判断し、実際のスマホ幅、キーボード表示、読み込み待ちを見ない。
密度を下げるために必要な説明まで削り、判断材料を不足させる。