よくある原因
AIへの指示に「WebP画像を使う」とだけ書くと、HTMLにはimgタグが出力されますが、実際の画像ファイルの用意はユーザー側の責任とAIは判断します。結果として、ZIPにHTMLだけ含めてWebPファイルを添付し忘れるという初歩的なミスが頻発します。
もう一つのパターンは、AIが画像のBase64データを出力せずにプレースホルダーURLだけを記述するケースです。https://example.com/hero.webpのような外部URLが埋め込まれた場合、ギガサイト便で公開しても本番環境でしか機能しないHTMLになります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AIが出力したHTMLをそのまま使う前に、画像srcが外部URLになっていないかをテキスト検索（httpおよびhttps）で確認します。外部URLが見つかった場合は「ローカルファイルとして相対パスで参照するか、Base64で埋め込んでください」と指示して再生成させます。
生成物をローカルブラウザで開いたときに画像が壊れたアイコンになる場合、ChromeのConsoleタブでエラーメッセージを確認してください。Failed to load resourceが表示されるならパスミス、ERR_BLOCKED_BY_RESPONSEなら混在コンテンツが原因です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手がWebPを表示できないブラウザを使っている場合、AI生成HTMLにpictureタグが入っているかを確認してもらいます。プロンプトで「WebP対応していないブラウザ向けにJPEGのフォールバックをpictureタグで追加してください」と事前に指示しておけば、相手側の環境依存を事前に排除できます。
相手から「画像が四角いアイコンになっている」と言われたら、ブラウザコンソールを開いてエラー内容をスクリーンショットで送ってもらいます。404か401かによって原因が全く異なるため、エラーコードを把握してから対処してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
AIへのプロンプトに毎回手打ちで指示するのは非効率なため、「ギガサイト便用HTMLプロンプトテンプレート」を社内ドキュメントとして管理します。テンプレートに「画像は全てBase64インライン埋め込み、外部URLは一切使わない、pictureタグで必ずJPEGフォールバックを付ける」という3点を必須条件として明記しておきます。
AIが出力したHTMLを社内レビューする際は、VSCodeの検索機能でhttpと.webpを同時にハイライトして目視チェックするフローを追加します。CIを使える環境であれば、HTMLのリンク検証ツールを組み込んで自動化するとさらに安定します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
ChatGPTとClaudeのどちらが静的HTML向きのWebP対応コードを生成しやすいですか？
指示の明確さによる差が大きく、どちらのAIでも「Base64埋め込み・pictureタグ必須・外部URL禁止」と明示すれば対応したコードが出ます。どちらか一方が優れているという固定の傾向はありません。
AIが生成したHTMLに外部CDNのURLが含まれていた場合、そのまま使っても問題ありませんか？
BootstrapやFont AwesomeなどのCDNリンクは通常問題ありませんが、画像URLが外部サービスを指している場合はそのサービスが停止すると画像が消えます。重要な画像はBase64か同梱ファイルにしてください。
AI生成HTMLのWebP画像をまとめてJPEGに置換するスクリプトはありますか？
Node.jsやPythonで正規表現を使って.webpを.jpgに一括置換できます。ただし画像ファイル自体も変換しないと表示されないため、squooshのCLI版やImageMagickと組み合わせて使うと効率的です。