よくある原因
「iPhoneで横スクロールする」という報告が来たとき、原因として考えられるのは①CSS設定のミス（`100vw`・固定幅）、②iOSのSafari固有の挙動、③特定の端末サイズでのみ発生するブレークポイントのズレ、④サードパーティウィジェットのはみ出しです。これら4つを確認依頼メッセージで一度に聞き出せれば、1往復で原因を絞り込めます。
相手が使っているブラウザを確認せずに「iPhoneの問題」と決めつけると対処を間違えることがあります。iPhoneでもChromeやFirefoxを使っている場合があり、Safari固有の問題かブラウザ共通の問題かで修正内容が変わります。最初のメッセージに「使っているアプリはSafariですか？」という質問を含めるだけで、原因候補が大幅に絞り込まれます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
確認依頼を送る前に、自分のMacのSafariとChromeでiPhoneシミュレーターを使い、報告された問題を再現できるか試します。自分で再現できれば「原因をある程度特定した上で確認を依頼」できるため、相手への質問がより的確になります。再現できない場合は端末固有の問題の可能性があるため、モデル番号やiOSバージョンの確認が最優先になります。
確認依頼メッセージで収集すべき情報は5つです：①iPhoneのモデル（SE/14/15など）、②iOSのバージョン、③使用しているブラウザ（Safariか別アプリか）、④横スクロールが起きる操作手順、⑤スクリーンショット（可能なら横スクロールしたときの状態も）。この5点が揃えば再現確認と修正作業を同時に開始できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
確認依頼の文面例：「iPhoneで横スクロールする件、ご報告ありがとうございます。原因を特定するために以下を教えてください。①iPhoneのモデル（iPhone 13、SEなど）②iOSのバージョン（設定→一般→情報で確認できます）③使っているブラウザ（Safari/Chrome/その他）④横スクロールするページ（特定のページのみですか？）⑤スクリーンショット（横スクロールした状態で撮っていただけると助かります）」。箇条書き形式にすると回答が返ってきやすくなります。
報告者が複数のiPhoneモデルを持っている場合は、「もしSEなど小さい画面のiPhoneでも試せる場合は確認してみてください」と依頼することで、問題が画面サイズに依存するかを確認できます。画面幅375px（SE）でのみ発生する場合は、ブレークポイントのCSSに問題があると特定できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
「iPhoneレイアウト確認依頼テンプレート」をメモアプリやSlackのスニペットとして保存し、次回報告が来たときにすぐ送れる状態にしておきます。テンプレートは「初回報告時（情報収集）」「修正後の再確認依頼」の2種類を用意すると、確認フローがスムーズになります。
iPhoneの横スクロール問題が繰り返し発生する場合は、HTMLの生成プロセスかCSSのルールに根本的な問題があります。毎回個別に修正するのではなく、AIプロンプトのテンプレートや社内のCSSベースラインに `width: 100%`・`max-width` の使用ルールを明記することで、問題の発生頻度自体を下げることができます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
相手がiPhoneのモデルを「古いやつ」としか教えてくれません。どう対応しますか？
モデル名よりも「設定→一般→情報→モデル番号」で確認できる機種識別子（MQ6T3J/Aなど）を聞くと正確です。それも難しければ「画面が小さいSEですか、それとも大きいサイズですか？」とサイズ感で分類してください。SE相当（幅375px）か通常サイズ（幅390px以上）かがわかれば修正の絞り込みには十分です。
修正したと連絡したら「まだ横スクロールする」と返信が来ました。何を確認すべきですか？
キャッシュで古いCSSが残っている可能性があります。「ブラウザのキャッシュを消すか、シークレットモードで再確認してください」と依頼してください。それでも変わらない場合は、別の箇所にもはみ出し要素が残っている可能性があるため、DevToolsで全要素のwidthを再度確認してください。
報告者がスクリーンショットを送れないと言っています。文字だけで状況を把握する質問は何がよいですか？
「画面の右端にコンテンツが半分見切れていますか？それとも右に空白スペースが広がっていますか？」と聞くと状況が把握しやすいです。前者は特定の要素がはみ出し、後者はbodyやコンテナ自体の幅が実際の画面幅を超えています。