よくある原因
img要素のwidthとheight属性が実際の画像サイズと一致していない場合、ブラウザがスペースを確保する際に誤った比率で表示し、ぼやけたように見えることがあります。特にAIが生成したHTMLではプレースホルダー的な数値（width="500" height="300"）が入りやすく、実際の画像と比率が合わないケースが散見されます。
外部CDNから読み込む画像URLに低解像度版が指定されている場合も原因になります。例えばUnsplashのURLに`?w=400`パラメータが付いていると、Retina端末では400px幅の画像を引き伸ばして表示するため荒く見えます。共有前にURLのクエリパラメータを確認し、十分な解像度のものを指定してください。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
Chromeの開発者ツールを開き、「Toggle device toolbar」でスマートフォンエミュレーターに切り替えます。デバイスをPixel 7またはiPhone 15に設定し、すべての画像が鮮明に見えるか目視確認しましょう。DevTools右上の「DPR」表示が2.0以上になっているかも合わせて確認してください。
画像ファイルを右クリックして「Open image in new tab」し、URLバーに表示された実際の解像度（例：`1200 × 800`）と表示サイズを比較します。表示サイズの2倍以上の解像度があれば高DPI環境でも荒くなりません。解像度が足りない場合は元データから高解像度で書き出しし直してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手に「iPhoneまたはAndroidの実機で、画面を最大輝度にして確認してほしい」と依頼してください。画面が暗いと荒さが目立ちにくく、確認精度が下がります。また、Zoomや拡大表示の状態で見ていないかも確認してもらうと誤認識を防げます。
相手のデバイスがDPR 1.0の古い端末（非Retina）の場合、こちらが荒いと感じている画像でも相手には問題なく見えることがあります。相手のデバイス機種・OSバージョンを聞いてから判断すると、不必要な修正作業を避けられます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
共有フローの中に「モバイルエミュレーター確認」を必須ステップとして組み込み、Notionやスプレッドシートのテンプレートにチェックボックスとして追加しておくと属人化を防げます。具体的には「①Chrome DevToolsでiPhone表示確認 ②全画像が鮮明か目視 ③srcset属性の有無をHTMLソースで確認」の3ステップを記載します。
ギガサイト便のようなHTMLプレビュー共有サービスを使う場合、公開URLをまず自分のスマートフォン実機で開いてから相手に送る習慣をつけると、送付後の手戻りを大幅に減らせます。数十秒の確認で「画像が荒い」という差し戻しを防げます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
チェックリストを全部クリアしたのに相手から「荒い」と言われた場合は？
相手のブラウザにキャッシュされた古い画像が表示されている可能性があります。共有URLのクエリパラメータにバージョン番号（例：`?v=2`）を追加して再送すると、キャッシュをバイパスして最新画像が読み込まれます。
Figmaからエクスポートした画像がHTMLで荒く見えるのはなぜですか？
Figmaのエクスポート設定で@1xを選んでいる場合、Retina環境では画像が引き伸ばされて荒くなります。エクスポート時に@2xまたは@3xを選択し、srcset属性で用途に応じて切り替える設定にしてください。
background-imageで設定した画像が荒く見える場合の対処法は？
CSSのimage-setプロパティを使い`background-image: image-set(url('bg.jpg') 1x, url('bg@2x.jpg') 2x)`と指定することでRetina対応できます。ただし古いブラウザは未対応のため、-webkit-image-setも併記してください。