よくある原因
AIが生成するCSSに `width: 100vw` が含まれることが多い理由は、学習データにこの記述が多く含まれているためです。デスクトップ環境では問題なく動作するため、AIはこの記述を「正しいコード」と学習しています。しかしiOS Safariではスクロールバーの幅の扱いがChromeと異なり、`100vw` が実際の表示幅を数ピクセル超えてしまいます。
AIは「iPhoneでの動作確認」を実際に行えないため、モバイル固有のバグを出力しても検出できません。特にflexboxやgridを使うレイアウトでは、gap・margin・paddingの組み合わせによって特定の画面幅でのみはみ出しが発生するパターンがあり、AI側ではこれを事前に計算しきれないことがあります。プロンプトで事前に制約を設けることが最も効果的な予防手段です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AI生成HTMLを受け取ったら、まずHTMLファイル内を「vw」で全文検索します。`100vw` が見つかった場合は `100%` に置換します。次に「px」で検索し、350px以上のwidthが固定指定されている箇所を探して `max-width: [元の値]; width: 100%;` に変更します。この2つの作業だけで多くの横スクロール問題が解消されます。
修正後はChromeのDevToolsでiPhoneシミュレーターを開き、iPhone SE（幅375px）とiPhone 14 Pro Max（幅430px）の両サイズで確認します。シミュレーターでの確認後、可能であれば実機のiPhone Safariでも確認してください。シミュレーターとSafari実機では動作が異なるケースがあり、実機確認が最も信頼できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
AI生成HTMLを共有した相手から「iPhoneで横スクロールする」と報告が来た場合、問題をより詳しく把握するために「横にスクロールしたとき、右側に何かコンテンツが見えますか、それとも空白スペースが見えるだけですか？」と尋ねます。コンテンツが見える場合は特定の要素がはみ出しており、空白のみの場合はmarginや幅設定の計算ミスが疑われます。
報告者が複数いる場合は端末モデルも聞いてください。iPhone SEのみで発生するなら375pxのブレークポイント付近の問題、全iPhoneで発生するなら根本的なCSSの問題です。この情報をもとに修正対象を絞れば、AIへの修正依頼もより具体的になり、正しいコードが得られやすくなります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
AIへの依頼時に使うシステムプロンプトまたはプロジェクト指示に、次の内容を定型文として登録してください：「HTMLとCSSを生成する際は以下を厳守してください：①`width: 100vw`は使わず`width: 100%`を使う、②固定ピクセル幅は`max-width`として指定し`width: 100%`と組み合わせる、③`<meta name="viewport" content="width=device-width, initial-scale=1">`を`<head>`内に必ず含める、④iPhoneのSafariで横スクロールが発生しないことを確認した上でコードを出力する」。
毎回HTMLを生成してからiPhoneチェックするのではなく、「モバイルファースト」でプロンプトを書く習慣をつけると効率的です。「モバイル（iPhone 375px幅）で崩れないことを前提に設計し、その後デスクトップに拡張してください」という指示にすることで、AIがモバイル表示を基準にコードを生成するようになります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
AIに修正を依頼したら `overflow-x: hidden` を body に追加するコードを出してきました。これで十分ですか？
応急処置としては有効ですが、根本修正ではありません。`overflow-x: hidden`ははみ出しを隠すだけで、CSSの問題はそのままです。「`overflow-x: hidden`を使わずに、幅がはみ出す原因のCSSを特定して修正してください」と追加で指示し、原因要素のCSSを直接修正させてください。
AIへのプロンプトでモバイル対応を指示したのに毎回100vwが出てきます。どう防ぎますか？
「`width: 100vw`は絶対に使用しないでください。コード内に`100vw`という文字列が1つでもあれば再生成してください」と明示的な禁止形で指定すると、AIが出力を自己チェックして修正するケースが増えます。生成後にAIに「このHTMLに`100vw`は含まれていますか？」と確認させる手順も効果的です。
AI生成のflexboxレイアウトでgapを使っているときだけiPhoneで横スクロールします。
flexコンテナに`width: 100%`があってもgap分だけ実際の幅が増えることがあります。コンテナに`box-sizing: border-box`を設定するか、gapの代わりに`margin`を使う方法に変更してください。AIには「flexのgapを使う場合は、親コンテナにoverflowが発生しないことを確認してください」と指示すると対応したコードが出やすくなります。