---
title: "WebP画像が表示されない問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLでWebP画像の表示トラブルを未然に防ぎたい制作担当者向けに、プロンプトへの具体的な指示例と生成物の検証手順を紹介します。ギガサイト便での静的公開を前提とした実践的な内容です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/webp-not-showing-ai-prompt"
markdown: "https://giga-site.com/articles/webp-not-showing-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# WebP画像が表示されない問題をAI生成HTMLで防ぐプロンプト
AIでHTMLを生成する際にWebP画像のパスや形式を曖昧に指示すると、表示されないファイルを含んだ成果物が出力されます。この記事では、ギガサイト便での公開を前提としたWebP対応HTMLをAIに生成させるための具体的なプロンプト文例と、生成後に確認すべきポイントを解説します。
> Source HTML: https://giga-site.com/articles/webp-not-showing-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
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と組み合わせて使うと効率的です。
## 関連記事
- [WebP画像が表示されないときの原因と直し方](https://giga-site.com/articles/webp-not-showing-fix/index.md)
- [WebP画像が表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/webp-not-showing-checklist/index.md)
- [WebP画像が表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/webp-not-showing-request-message/index.md)
- [SVGが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/svg-not-showing-ai-prompt/index.md)
- [OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md)
- [SVGが表示されないときの原因と直し方](https://giga-site.com/articles/svg-not-showing-fix/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "WebP画像が表示されない問題をAI生成HTMLで防ぐプロンプト",
"description": "AI生成HTMLでWebP画像の表示トラブルを未然に防ぎたい制作担当者向けに、プロンプトへの具体的な指示例と生成物の検証手順を紹介します。ギガサイト便での静的公開を前提とした実践的な内容です。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/webp-not-showing-ai-prompt",
"url": "https://giga-site.com/articles/webp-not-showing-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "ChatGPTとClaudeのどちらが静的HTML向きのWebP対応コードを生成しやすいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "指示の明確さによる差が大きく、どちらのAIでも「Base64埋め込み・pictureタグ必須・外部URL禁止」と明示すれば対応したコードが出ます。どちらか一方が優れているという固定の傾向はありません。"
}
},
{
"@type": "Question",
"name": "AIが生成したHTMLに外部CDNのURLが含まれていた場合、そのまま使っても問題ありませんか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "BootstrapやFont AwesomeなどのCDNリンクは通常問題ありませんが、画像URLが外部サービスを指している場合はそのサービスが停止すると画像が消えます。重要な画像はBase64か同梱ファイルにしてください。"
}
},
{
"@type": "Question",
"name": "AI生成HTMLのWebP画像をまとめてJPEGに置換するスクリプトはありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "Node.jsやPythonで正規表現を使って.webpを.jpgに一括置換できます。ただし画像ファイル自体も変換しないと表示されないため、squooshのCLI版やImageMagickと組み合わせて使うと効率的です。"
}
}
]
}
```