AIで作ったサイトをスマホで触ると変になる10か所を、公開前にまとめて直させるプロンプト

どんな問題を解決するか / いつ使うか

パソコンで見ると問題ないのに、スマホで開いた瞬間に「素人っぽい」と感じる不具合は、AIがほぼ毎回見落とす。公開前の最終チェックとして、プロジェクトにそのまま投げる。

やり方

下の項目をまとめてエージェントに渡し、「このプロジェクトに無い要素は飛ばす」「終わったら、PCのスマホ表示（エミュレーター）では再現せず実機で確かめるべき項目を教えて」と添える。

タップ

• タップ後にボタンのホバー色が残る → :hover はすべて @media (hover: hover) and (pointer: fine) の中に入れる
• タップ時に灰色のハイライトが出る → -webkit-tap-highlight-color: transparent にし、押せる要素には自前の :active を付ける
• 反応がワンテンポ遅い → ボタンとリンクに touch-action: manipulation
• 長押しでボタンの文字が選択される → ボタンなどの操作部品だけ user-select: none（本文には付けない）
• 小さいアイコンボタンが押しにくい → 疑似要素で見た目を変えずにタップ範囲を44pxまで広げる

入力欄

• タップすると画面全体が拡大される → 文字サイズを16px以上にする。maximum-scale=1 や user-scalable=no で拡大を禁止しない
• 違うキーボードが出る → 金額は inputmode="decimal"、確認コードは inputmode="numeric"、メールと電話は type="email" / type="tel"

画面

• 横にスワイプできてしまう → 横スクロールと、画面からはみ出す要素をなくす
• アドレスバーが出ると下が切れる → 全画面のオーバーレイやレイアウトは 100dvh、ヒーローは 100svh。100vh は使わない
• ノッチやホームバーが上下のバーにかぶる → viewport に viewport-fit=cover を足し、バーに env(safe-area-inset-*) で余白を付ける

注意点

• 拡大の禁止で「入力時のズーム」を止めるのはアクセシビリティ上よくない。文字サイズで解決する。
• タップの遅延やセーフエリアは、エミュレーターでは再現しないことがある。最後に実機で確認する。

関連

• エージェントにUI変更のたびにスクショで自己チェックさせる（デザイン→実装→スクショ→レビュー→修正のループ）
• モダンCSSのDos/Don'ts（100dvw、:focus-visible、:has()、@layer など）をAIへのルールにも入れる

出典

• @Voxyz_ai post