よくある原因
AIが生成するHTMLはCSSやJSを外部ファイルとして分割する構成を取ることがあります。この構成では個別ファイルのキャッシュが独立しており、HTMLだけ差し替えてCSSを差し替え忘れると古いスタイルが残ります。「すべてのスタイルとスクリプトは単一のHTMLファイルにインラインで記述してください」と明示すればこの問題を根本から防げます。
AIは画像をimgタグの`src`に外部URLで埋め込む場合があります。外部URLの画像はCDNに別途キャッシュされており、HTMLを差し替えても画像が更新されないことがあります。プロンプトに「画像が必要な場合はBase64でHTMLに埋め込んでください、または画像不要のSVGやCSSグラデーションで代替してください」と書いておくと依存を減らせます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AIが出力したHTMLを受け取ったら、`<link`と`<script src`と`<img src`の3タグについて外部URLが含まれていないかを検索します。VS Codeなら`Ctrl+F`で`http`を検索すると外部参照が一覧で確認できます。外部URLが残っていればAIに「このURLをインライン化して」と追加指示します。
差し替え後のページをDevToolsのNetworkタブを開いた状態でリロードし、読み込まれているすべてのリソースのStatusが200であることとリクエスト件数が期待通りであることを確認してください。外部リソースへのリクエストが0件であれば自己完結型のHTMLとして機能しています。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
AI生成HTMLを差し替えた後に相手が古い表示を報告してきた場合、まず相手に「URLの末尾に`?new`を付けてアクセスしてもらえますか？」と伝えてください。クエリパラメータを変えることでブラウザとCDNが別リソースとして扱い、最新のHTMLを強制的に取得します。
それでも古い表示が残る場合は、こちらのCDN側でキャッシュパージが必要です。相手にエラーをデバッグしてもらう前に、まず自分側の配信環境が正しく更新されているかを確認してから相手に連絡するのがトラブルを素早く解決するコツです。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
AIへの標準プロンプトに「自己完結型の単一HTMLファイルで生成し、外部リソースへの依存をゼロにしてください」という制約を常に含めてください。このひと言だけで差し替え後のキャッシュ問題の大半を予防できます。チームで使うプロンプトテンプレートを共有ドキュメントにまとめておくと標準化しやすいです。
差し替え作業の後には「生成→外部URL確認→デプロイ→キャッシュパージ→2環境で疎通確認」の5ステップを完遂するルーチンを設けてください。1ステップでも飛ばすと古い表示が残るリスクが高まります。このルーチンをデプロイチケットのテンプレートに組み込むと抜け漏れを防ぎやすくなります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
自己完結型HTMLに統一すると管理が難しくなりませんか？
ファイルが1つで完結するため、逆にバージョン管理が単純になります。GitでHTMLファイルのdiffを見れば変更内容が一目でわかり、ロールバックもファイルを1つ戻すだけで済みます。
Base64埋め込みで画像を入れるとページが重くなりますか？
高解像度画像を多用すると数MBになりますが、デモページや提案資料用途なら解像度を下げた小さな画像を使えば200KB以下に抑えられます。AIに画像生成を依頼する際に「幅400px以下の軽量な画像で」と添えると効果的です。
差し替えのたびにAIに全体を再生成させると時間がかかりますぎませんか？
変更が一部分なら「このセクションだけ修正したHTMLを出力して」と部分指示の方が効率的です。ただし外部依存がない自己完結型の単一ファイルを維持するために、最終的な完全版HTMLをAIに出力させて差し替えるワークフローにすることを推奨します。