よくある原因
AIはプロンプトにモバイル対応の指示がないと、デスクトップ向けのCSSを優先しがちです。特にviewportメタタグは「HTMLの基本構造を生成して」程度の指示では省略されることが多く、Androidのデフォルトビューポート幅（980px）でレンダリングされ文字が小さくなります。
font-sizeの単位も指定がなければAIは文脈に応じてpx・em・vwを混在させます。見出しにvwを使い本文にemを使うような出力は、Androidの小さい画面では崩れる組み合わせです。単位ポリシーをプロンプトに明記することが防止の第一歩です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
生成されたHTMLを受け取ったら、まず`<head>`内に`<meta name="viewport" content="width=device-width, initial-scale=1">`があることを確認します。次にCSSファイル（またはstyleタグ）をCmd+Fで`vw`と検索し、本文要素（p, li, span等）に使われていないかを確認します。これだけで主要な問題の有無を1分以内に把握できます。
Chromeに生成されたHTMLをドラッグ&ドロップして開き、DevToolsのデバイスツールバーでPixel 7などのAndroid端末を選択してください。段落テキストをクリックしComputedタブでfont-sizeが16px前後になっているなら合格です。14px未満の場合はプロンプトを修正して再生成してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
プロンプトを修正して再生成した場合、相手に「Chrome以外のブラウザで開いている可能性があるか」を確認してもらうと切り分けが進みます。Samsung Internet、UCブラウザ、アプリ内WebViewなどはChromeと挙動が異なるため、まずChromeで開いた場合の表示を確認してもらうのが基本です。
相手に「スクリーンショットをテキストで説明してもらう」のではなく、ギガサイト便のURLを同じ端末で再度開きリロードしてから確認するように依頼すると、キャッシュによる古い表示の誤認を防げます。修正版を差し替えた後は「ページを長押し→再読込」を行ってもらうと確実です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
再発防止に最も効くのはプロンプトテンプレートの整備です。「HTMLを生成する際は必ず(1)`<meta name='viewport' content='width=device-width, initial-scale=1'>`を`<head>`内に含める、(2)本文のfont-sizeはremまたはpxのみ使用、(3)bodyに`-webkit-text-size-adjust: 100%`を設定する」という条件を固定文として保存しておきましょう。
週次で新しいHTMLを生成する業務なら、生成→Chrome DevToolsで確認→ギガサイト便にアップ→実機確認、の4ステップをチェックリスト化してノーションや社内wikiに貼っておくと担当者が変わっても品質が落ちません。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
プロンプトにviewportを指定したのにAIが別の設定で出力しました
AIはプロンプトを解釈して判断するため、「必ず」「そのまま使用」などの強調表現を加えると遵守率が上がります。また生成後にdiffで確認し、違えば「viewportのinitial-scaleを1に修正して再出力してください」と追加指示してください。
AIが生成したCSSに`text-size-adjust: none`が入っていました。これは問題ですか
noneにするとユーザーがブラウザのフォントサイズ設定を変更しても効かなくなるため、アクセシビリティ上好ましくありません。100%に変更するようAIに指示するか、手動で修正してください。
毎回再生成するのが面倒です。一度作ったHTMLをテンプレートにする方法はありますか
正常に表示されたHTMLの`<head>`部分とbodyのCSSリセット部分を抜き出して「共通ヘッダーテンプレート.txt」として保存します。次回からAIに「このヘッダーを使ってコンテンツ部分だけ生成して」と指示することで、毎回の設定ミスを防げます。