よくある原因
AIはプロンプトに具体的な指示がない場合、img要素にsrc属性だけを出力しsrcsetを省略することが多いです。これはAIが「動作するHTMLを生成する」という最低要件を満たせばよいと判断するためで、パフォーマンスやDPR最適化まで自動では考慮しません。
AI生成HTMLではviewportメタタグが省かれるケースもあります。viewportがないと、モバイルブラウザがページをデスクトップ幅として解釈し、縮小表示します。このとき画像も意図しないスケールで描画され、荒く見える原因になります。プロンプトで明示的にviewport設定を要求することが重要です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AIが出力したHTMLをそのまま使う前に、`<img`タグを検索してsrcset属性が含まれているか確認しましょう。含まれていなければプロンプトを修正して再生成するか、手動でsrcset属性を追記します。VS Codeの「Find in Files」でsrcset件数をカウントすると全体の状況がすぐわかります。
AI生成コードにCSSでwidthを%指定しているが`max-width`が設定されていない画像がある場合、大きなモニターで開いたときに画像が巨大化して荒く見えます。AIへの追加指示として「画像にはmax-widthを指定し、必要に応じてobject-fitを使うこと」を加えると、より堅牢なCSSが生成されます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
AI生成のHTMLを共有した相手が「画像がぼやけている」と報告してきたら、まず相手のデバイスのDPRを確認します。JavaScriptで`window.devicePixelRatio`を確認してもらうか、ChromeのDevToolsのDevice emulatorを使って再現確認するよう案内してください。
相手がブラウザの拡大率を変えて使っている場合（Ctrl+で拡大など）、拡大倍率に応じて画像が荒く見えることがあります。相手にブラウザのズーム率を100%に戻して確認してもらい、それで解消すれば画像解像度ではなくズームが原因です。この場合はより高解像度の画像を用意するか、SVGへの切り替えが有効です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
AI生成HTMLのシステムプロンプトやインストラクションに「すべてのimg要素にsrcset属性を含めること。DPR 1x/2xの両方に対応した画像パスを指定すること」と追記しておきましょう。ChatGPTのCustom Instructionsや、Claude.aiのProjectのCustom instructionsにあらかじめ設定しておくと毎回の指示が不要になります。
生成したHTMLは必ずコードレビューチェックリストを通すフローにします。「img srcset確認」「viewport meta確認」「CSSのmax-width確認」の3点を自動チェックするLintルールを導入するか、共有前に1分のマニュアル確認ステップとして定義しておくことで、荒い画像が相手に届くリスクをほぼゼロにできます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
プロンプトにsrcsetを要求してもAIが無視する場合の対策は？
「必ずsrcset属性を付けること。付けない場合はエラーとみなしてやり直すこと」と強制表現を加えると従いやすくなります。また具体的なコード例をプロンプトに含めると精度が上がります。
プレースホルダー画像を使ったHTMLをAIに作ってもらった場合、srcsetはどう設定すればよいですか？
placehold.coやpicsum.photosはURLにサイズを指定できます。例えば`https://picsum.photos/800/600`と`https://picsum.photos/1600/1200`を1x/2xとしてsrcsetに並べることで、開発段階からRetina対応の状態で確認できます。
AIに「高DPI対応で」と指示したのに生成されたHTMLにsrcsetがない場合は？
「srcset属性を含むimg要素のHTMLスニペットを生成して」と具体的な出力形式を指定するほうが確実です。抽象的な「高DPI対応」という表現より、具体的な属性名を指定すると意図が伝わりやすくなります。