---
title: "レスポンシブ画像が荒く見えるときの原因と直し方"
description: "PCでは綺麗に表示されるのにスマホで画像が荒く見えると困っているデザイナー・エンジニア向けに、srcsetやCSSの不備を素早く診断し修正するための手順を具体的にまとめました。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/responsive-image-blurry-fix"
markdown: "https://giga-site.com/articles/responsive-image-blurry-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# レスポンシブ画像が荒く見えるときの原因と直し方

スマートフォンで表示したとき、デスクトップでは鮮明だった画像がぼやけて見えるトラブルは、HTML共有の場面でよく報告されます。原因の多くはimg要素のsrcset・sizes属性の設定ミスや、CSSでの幅指定の不備にあります。この記事では原因の特定から修正手順まで、実際のコード例を交えて解説します。

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

## よくある原因

最も頻度が高い原因は、img要素にsrcset属性がなく単一の低解像度画像だけが指定されているケースです。Retinaディスプレイ（device-pixel-ratio: 2）では論理ピクセルの2倍の物理ピクセルが使われるため、srcsetで2x用画像を用意しないと引き伸ばされてぼやけます。

CSSでwidth: 100%と指定しながらmax-widthを設定していない場合、親コンテナが広くなるほど画像が引き伸ばされます。特にAIが生成したHTMLはコンテナ幅の考慮が不十分なことが多く、モバイルファーストのビューポート設定（`<meta name="viewport" content="width=device-width">`）が抜けているケースも確認されています。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

まずブラウザのDevToolsでNetworkタブを開き、実際に読み込まれている画像URLと表示サイズを確認します。表示サイズが300pxなのに読み込まれた画像が150pxであれば解像度不足が原因です。srcset属性に`image-2x.png 2x`または`image-600w.png 600w`形式で高解像度版を追加しましょう。

画像ファイル自体の実際のピクセル数も確認が必要です。Figmaやデザインツールからエクスポートする際、@1xしか書き出していないと高DPI環境で必ずぼやけます。書き出し時に@2xを選択するか、SVGで提供できるアイコン・ロゴ類はSVGに差し替えると根本解決になります。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

受け取った相手のブラウザ・デバイス環境によってはキャッシュに古い画像が残っていることがあります。Shift+リロード（スーパーリロード）で再読み込みしてもらい、それでも荒く見えるか確認を依頼してください。キャッシュ起因の場合は共有URLを変えるだけで解消します。

相手がiPhoneのSafariで見ている場合、WebP形式の画像が正しく表示されないことがあります（古いiOS13以前）。picture要素でJPEGとWebPを両方用意するか、JPEGのみに統一する対応を案内してください。また、相手の画面の実際のDevice Pixel Ratioをdevice-pixel-ratioで確認してもらうと、原因の切り分けが早まります。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

テンプレートHTMLに最初からsrcset・sizes属性の雛形を含めておくと、AIが生成するたびに設定漏れが起きるリスクを減らせます。例：`<img src="img.jpg" srcset="img.jpg 1x, img@2x.jpg 2x" alt="...">`を標準パターンとして用意しておくと修正の手間が省けます。

共有前の確認ルーティンとして「Chromeのモバイルエミュレーター（DevTools > Toggle device toolbar）でPixel 7とiPhone 15の両方をチェックする」をリスト化しておくことを推奨します。これにより実機がなくてもDPR2環境での見え方を事前に把握でき、荒く見える状態で相手に送ってしまうミスが防げます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### srcsetを追加したのにまだ荒く見える場合、何を確認すればよいですか？

sizes属性が指定されていないとブラウザが誤ったサイズで候補を選ぶことがあります。`sizes="(max-width: 600px) 100vw, 600px"`のように実際の表示幅に合わせて指定してください。

### SVGを使えばRetinaでも荒くなりませんか？

ロゴやアイコンなどベクター形式で表現できる素材はSVGが最適です。ただし写真はSVGに変換できないため、JPEGまたはWebPの2x書き出しで対応する必要があります。

### AI生成HTMLで画像が荒くなりやすいのはなぜですか？

AIはプロンプトで指示しない限りsrcsetを省略しがちで、1x画像のみのimgタグを出力することが多いためです。プロンプトに「高DPI対応のsrcset付きで」と明記すると改善されます。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "レスポンシブ画像が荒く見えるときの原因と直し方",
  "description": "PCでは綺麗に表示されるのにスマホで画像が荒く見えると困っているデザイナー・エンジニア向けに、srcsetやCSSの不備を素早く診断し修正するための手順を具体的にまとめました。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/responsive-image-blurry-fix",
  "url": "https://giga-site.com/articles/responsive-image-blurry-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "srcsetを追加したのにまだ荒く見える場合、何を確認すればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "sizes属性が指定されていないとブラウザが誤ったサイズで候補を選ぶことがあります。`sizes=\"(max-width: 600px) 100vw, 600px\"`のように実際の表示幅に合わせて指定してください。"
      }
    },
    {
      "@type": "Question",
      "name": "SVGを使えばRetinaでも荒くなりませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ロゴやアイコンなどベクター形式で表現できる素材はSVGが最適です。ただし写真はSVGに変換できないため、JPEGまたはWebPの2x書き出しで対応する必要があります。"
      }
    },
    {
      "@type": "Question",
      "name": "AI生成HTMLで画像が荒くなりやすいのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "AIはプロンプトで指示しない限りsrcsetを省略しがちで、1x画像のみのimgタグを出力することが多いためです。プロンプトに「高DPI対応のsrcset付きで」と明記すると改善されます。"
      }
    }
  ]
}
```