---
title: "レスポンシブ画像が荒く見える問題をAI生成HTMLで防ぐプロンプト"
description: "ChatGPTやClaudeなどのAIにHTMLを作ってもらうときに、レスポンシブ画像のぼやけを未然に防ぐプロンプト設計を知りたい方向けの解説記事です。テンプレート文例もあります。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/responsive-image-blurry-ai-prompt"
markdown: "https://giga-site.com/articles/responsive-image-blurry-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# レスポンシブ画像が荒く見える問題をAI生成HTMLで防ぐプロンプト

AIにHTMLを生成してもらうとき、画像周りの指示を省略すると高DPI環境での荒さトラブルが後から発覚しがちです。最初のプロンプトに数行追加するだけで、AI出力の品質を大きく上げられます。この記事では実際に効くプロンプトのパターンを具体例付きで解説します。

> Source HTML: https://giga-site.com/articles/responsive-image-blurry-ai-prompt
> Article index: https://giga-site.com/articles/index.md

## よくある原因

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対応」という表現より、具体的な属性名を指定すると意図が伝わりやすくなります。

## 関連記事

- [レスポンシブ画像が荒く見えるときの原因と直し方](https://giga-site.com/articles/responsive-image-blurry-fix/index.md)
- [レスポンシブ画像が荒く見えるときに共有前に確認するチェックリスト](https://giga-site.com/articles/responsive-image-blurry-checklist/index.md)
- [レスポンシブ画像が荒く見えるときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/responsive-image-blurry-request-message/index.md)
- [OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md)
- [画像の向きが勝手に回る問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/image-orientation-rotated-ai-prompt/index.md)
- [OGP画像が更新されないときの原因と直し方](https://giga-site.com/articles/ogp-image-not-updating-fix/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "レスポンシブ画像が荒く見える問題をAI生成HTMLで防ぐプロンプト",
  "description": "ChatGPTやClaudeなどのAIにHTMLを作ってもらうときに、レスポンシブ画像のぼやけを未然に防ぐプロンプト設計を知りたい方向けの解説記事です。テンプレート文例もあります。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/responsive-image-blurry-ai-prompt",
  "url": "https://giga-site.com/articles/responsive-image-blurry-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": "プロンプトにsrcsetを要求してもAIが無視する場合の対策は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "「必ずsrcset属性を付けること。付けない場合はエラーとみなしてやり直すこと」と強制表現を加えると従いやすくなります。また具体的なコード例をプロンプトに含めると精度が上がります。"
      }
    },
    {
      "@type": "Question",
      "name": "プレースホルダー画像を使ったHTMLをAIに作ってもらった場合、srcsetはどう設定すればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "placehold.coやpicsum.photosはURLにサイズを指定できます。例えば`https://picsum.photos/800/600`と`https://picsum.photos/1600/1200`を1x/2xとしてsrcsetに並べることで、開発段階からRetina対応の状態で確認できます。"
      }
    },
    {
      "@type": "Question",
      "name": "AIに「高DPI対応で」と指示したのに生成されたHTMLにsrcsetがない場合は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "「srcset属性を含むimg要素のHTMLスニペットを生成して」と具体的な出力形式を指定するほうが確実です。抽象的な「高DPI対応」という表現より、具体的な属性名を指定すると意図が伝わりやすくなります。"
      }
    }
  ]
}
```