よくある原因
AIは指示されなければ外部CDNへの依存を当然のように使います。たとえばTailwind CSSをCDN経由で読み込むコードを生成しがちで、CDN側の障害やアクセス制限があると共有先でスタイルが適用されずページが壊れて見えます。「外部CDNを使わず、スタイルはすべて`<style>`タグ内にインラインで書いてください」とプロンプトに明示することが最初の対策です。
AIが生成したHTMLにはフォームの`action`属性や`fetch()`のエンドポイントとして、ローカルホストや仮のAPIアドレスが残る場合があります。公開URLで開いた瞬間にJavaScriptエラーが発生してページ全体がクラッシュし、「見えない」状態になります。「実際の送信処理は不要です。フォームはデモ表示のみで、submitイベントは`event.preventDefault()`で止めてください」と指定しておくと安全です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AIが出力したHTMLをそのまま使う前に、`<script src=`と`<link href=`でhttpから始まる行がないかをエディタのgrepで確認してください。1行でも外部依存があれば、その内容をインライン化するか削除するようにAIへ追加指示を出します。「外部URLへの参照をすべてリストアップして」と聞くと漏れを見つけやすいです。
JavaScriptのコンソールエラーも必ず確認しましょう。DevToolsを開いて画面を再読み込みし、赤いエラーがゼロの状態を目視確認してから共有してください。特にundefined参照やCORSエラーは画面表示を止める原因になりやすく、AIが生成したコードに埋め込まれていても気づきにくいです。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
AI生成HTMLを共有した相手が見えないと言ったとき、まず「ブラウザのコンソールにエラーが出ていますか？」と聞いてみてください。DevToolsの使い方を知らない相手には「F12キーを押してConsoleタブを開き、赤い文字があればスクリーンショットを送って」と伝えると状況が把握しやすくなります。
相手のブラウザが古い場合、AIが生成したES2022以降の構文（オプショナルチェイニングや`??=`演算子など）が解釈できずエラーになることがあります。対象ブラウザを事前にヒアリングし、プロンプトに「IE非対応でよいがChrome 90以降で動くよう古い構文も使ってください」などと制約を書いておくと安全です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
AIにHTMLを生成させるときの標準プロンプトテンプレートをチームで共有してください。「外部CDN不使用・インラインCSS・form送信なし・コンソールエラーゼロ」の制約を毎回手打ちするのは手間がかかるので、スニペットとして保存しておき先頭にペーストするだけで使えるようにすると習慣化しやすいです。
生成後の確認フローも定型化しましょう。「grep外部URL→コンソールエラー確認→シークレット窓で疎通確認」の3ステップをチェックボックス付きのissueテンプレートにしておくと、レビュー担当者が変わっても品質を一定に保てます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
インラインCSSにするとHTMLファイルが大きくなりすぎませんか？
Tailwindのような大規模フレームワークを丸ごとインライン化すると数百KBになりますが、必要なクラスだけを手動で記述すればほとんどのケースで10KB以内に収まります。AIに「必要なスタイルだけ最小限で書いて」と指示すると効果的です。
AIへの追加指示を出しても外部URLが消えない場合の対処法は？
一度「このHTMLの外部URLをすべて列挙して」と聞き、出てきたURLをリストに持って「これらをすべてインライン化またはコメントアウトして」と具体的に再指示する方が確実です。抽象的な禁止より具体的な対象を示した指示の方が精度が上がります。
プロンプトを工夫しても毎回品質にばらつきがあるのですが？
AIの出力は確率的なので完全な一致は難しいですが、出力後に自動で外部URL数をgrepするスクリプトを組み込むと人的確認のばらつきを補完できます。生成→自動チェック→修正依頼のループを仕組み化するのが現実的な対策です。