制作中はキレイに見えていたのに、公開後に「画像が荒い」と言われると…一気に不安になりますよね。
じつはこのトラブル、多くの場合“デザインのセンス”ではなく、元画像の質・表示サイズ・書き出し設定のちょっとした差で起きています。
この記事では、よくある原因と、デザイナーさんが事前にできる簡単なチェックポイントをまとめました。
クライアントに指摘される前に、自信を持って提出できる仕上がりに整えていきましょう。
1.なぜ“画像が荒い”問題は発生するのか？
デザイナーとして一度は経験する「クライアントから画像が荒いと言われた」問題。
まず押さえておきたいのは、“荒い”という言葉があいまいで、クライアントごとに指しているポイントが微妙に違うということ。
そのため本質的にどこが原因かを切り分けられると、トラブルがぐっと減ります。
ここでは、特に現場でよく起きる3つの原因を紹介します。
（１）元画像の解像度や品質が低い
支給された画像そのものが荒いケース。
たとえば、スマホで撮影した写真をLINEで送ってもらった場合、自動圧縮で画質が劣化していることがよくあります。
✅ピクセル数が小さい
✅JPEG圧縮でブロックノイズが出ている
✅もともとピンぼけしている
この状態でどれだけ丁寧にデザインしても、どうしても粗さは残ってしまいます。
（２）“表示サイズ”と“画像サイズ”が合っていない
デザイン上で小さく見えていても、実際の表示サイズより画像が小さいと、ブラウザが無理に引き伸ばして表示し、輪郭がぼやけます。
例：表示幅600pxの予定なのに、書き出し画像が300pxしかない→ 2倍に拡大されて“粗さ”として認識される
デザイナーさんが原因に気づきにくいポイントでもあり、実装後に「なんか荒れて見える…」と言われがちな典型例です。
（３）書き出し設定による“意図しない劣化”
PhotoshopやFigmaの書き出し設定が原因のケースもあります。特に、次のような設定ミスが多めです。
✅JPEGの圧縮率が高すぎる
✅PNGで書き出した結果、必要以上に容量が増えてサイトが重くなる
✅Retina対応を想定していない（2倍画像を用意していない）
書き出し時のわずかな設定違いが、そのまま「画像が荒い」に直結します。こうして見ると、画像が荒れる原因のほとんどは、
✅元素材の品質
✅必要なサイズの把握
✅書き出し設定の管理
この3つに集約されます。
裏を返すと、この3つを最初からコントロールできれば“荒れ”のリスクはほぼ消えるということでもあります。
次の章では、まずデザイナーさんが押さえておくべき「Webでキレイに見える画像の基本」を整理していきます。
2. Webで“キレイに見える画像”の基本を押さえる
画像の荒れ対策を考えるうえで、まず理解しておきたいのは「Webでは解像度（dpi）は関係なく、ピクセル数と表示サイズがすべて」という事実です。
クライアントやカメラマン、デザイナー間でも誤解されやすい部分ですが、ここを押さえるだけで画像トラブルの発生率が一気に下がります。
（１）dpiはWebでは無関係。重要なのはピクセル数
印刷では dpi（解像度）が重要ですが、Webは画面のピクセル単位で表示される仕組みです。
そのため、300dpiの画像でも、ピクセル数が小さければ普通に荒れます。
◯ 横2000px × 縦1200pxの写真（72dpiでも問題なし）
✕ 横600px × 縦400pxの写真（300dpiでも荒い）
「dpiが高い＝キレイ」はWebでは成立しない、という点はチーム全体で認識合わせしておくと安心です。
（２）“表示サイズより大きい画像”を用意するのが基本
Webでは、表示サイズ（ブラウザ上で何pxで表示されるか）より大きい画像が必要です。
もし小さい画像を引き伸ばすと、輪郭がガタついたり、ピントが甘く見えます。
＜例＞
表示幅：600px
書き出し画像：600px以上（できれば1200pxの2倍画像）
特にスマホは高解像度なので、600pxで表示される画像は1200pxで書き出すのが今の最適解です。
（３）Retina（高解像度）環境では“2倍画像”がほぼ必須
iPhoneを中心にRetinaディスプレイの普及が進んでいるため、2倍画像の有無はかなり見た目に影響します。
1倍画像：薄い、粗い、線がにじむ
2倍画像：くっきりシャープに見える
とくにロゴ・アイコン・テキスト入りの画像は差が大きく、ちょっと粗く見えただけでクライアントから指摘されやすい部分です。
（４）形式の選び方も“見え方”に直結する
Webでよく使う画像形式の特徴をざっくり整理すると次のとおり。
JPEG：写真向き。圧縮率を適切にすれば軽くてキレイ
PNG：ロゴ・図解・透過が必要な画像向き
WebP：写真にもロゴにも使える“万能型”。
特にWebPは、PNGのように透過も可能で、容量が非常に軽くてキレイに見えやすいので、JPEGやPNGをWebPに変換すると実用的です。
ただし、導入はコーダー側との相談が必要です。書き出し形式を誤ると、意図せず荒く見えたり、容量が重くなったりします。
（５）Webで画像をキレイに見せる基本は“サイズ管理”
最終的に、画像の見え方は 「ピクセル数 × 表示サイズ × 書き出し形式」 の組み合わせで決まります。
逆に言えば、この3つを理解してデザイン段階で意識しておけば、実装後に「なんか荒いんだけど…」と言われるリスクはグッと小さくなります。
次の章では、デザイナーさんが実務で必ず確認すべきポイントを、もっと具体的に整理していきます。
3. デザイナーが必ず確認すべき3つのポイント
画像が荒れる原因の多くは、デザイン段階での“ちょっとした見落とし”から生まれます。
逆にいえば、ここで紹介する3点を押さえておくことで、実装後の「画像が荒い」という指摘を事前にほぼ回避できます。
（１）元画像の品質チェック
支給された画像の段階で、すでに「荒れ要素」を含んでいることはよくあります。
特に注意したいのは次のポイントです。
✅ピクセル数が足りていない
✅ピンぼけしている
✅JPEG圧縮でノイズが出ている
✅LINEやSNS経由で“自動圧縮”されている
元の画像が荒い場合、デザインでどれだけ調整しても限界があります。
“仕上がりの質は元画像で決まる”という前提で、早い段階で品質を確認しておくと安心です。
（２）実際の表示サイズの把握
Webで画像がシャープに見えるかどうかは「実際に表示されるサイズ」よりも大きい画像を用意できているかで決まります。
＜例＞
ページ上で幅600pxで表示 → 書き出しは1200px（2倍画像）が最適
幅300pxで表示 → 600pxで書き出し
もし表示サイズより小さい画像を書き出してしまうと、ブラウザが強制的に拡大するため、どうしても“粗く”見えてしまいます。
特にFigmaやPhotoshopのアートボード上で見えているサイズと、実装後のサイズがズレるケースは多いため、必ずコーダーと「最終的な表示サイズ」の認識合わせをしておくことが重要です。
（３）書き出し時の設定（形式・圧縮率・2倍画像）
最後の詰めである書き出し設定は、画像の荒れを防ぐ“最終防衛ライン”です。
↓↓↓主なチェックポイント↓↓↓
①形式の選択
写真 → JPEG
図やロゴ → PNG
写真＋透過、どちらにも使える → WebP
②圧縮率の調整
圧縮を強くしすぎるとブロックノイズやにじみが発生
③2倍画像（Retina対応）を用意する
iPhoneユーザーが多い案件ほど必須
④サイズの最終確認
1pxでも小さいと荒く見えるため、書き出し後に横幅を再チェックするのがおすすめ
形式の選択ミスや圧縮しすぎは、デザインでは気づけないため「仕上がりで突然荒くなる」典型的な要因です。
最後の工程ほど丁寧に確認しておくと、トラブルを確実に回避できます。
次は、実務で特に起きやすい“画像劣化トラブルの典型パターン”を整理しながら、問題が起こる前にどう防ぐかを見ていきましょう。
4. 案件でよくある“画像劣化トラブル”のパターンと回避法
デザイン段階で確認しても、実務では思わぬところで画像が荒れることがあります。
ここでは、よくあるケースをタイプ別に整理し、デザイナーさんが事前に注意できるポイントをまとめました。
（１）バナーやヘッダー画像が荒くなる
＜原因＞
✅元画像のピクセル数が小さい
✅書き出し時に圧縮率を強くかけすぎた
✅実装後、表示サイズより小さい画像を拡大表示している
＜回避法＞
✅デザイン段階で「表示幅＋余裕」を計算して画像を用意
✅バナーなど重要箇所は2倍画像で書き出す
✅コーダーに「この幅で表示される」と明示して共有
（２）写真素材（商品や人物）が粗く見える
＜原因＞
✅SNSやLINE経由で送られてきた画像は自動圧縮で画質が低下
✅撮影時の解像度が低い
✅トリミングや拡大で画質が劣化
＜回避法＞
✅依頼時に「○○px以上で納品」を明示
✅写真が荒れている場合は、別撮影や代替素材を検討
✅デザイン上での拡大率を確認して、無理に引き伸ばさない
（３）ロゴやアイコンがぼやける
＜原因＞
✅小さなサイズで書き出したPNGやJPEG
✅Retina非対応で、2倍画像を用意していない
✅透明部分やアンチエイリアスの影響で輪郭が甘くなる
＜回避法＞
✅ロゴやアイコンは常に2倍画像で書き出す
✅必要に応じてSVG形式で共有すると、どの画面サイズでもシャープに表示可能
✅デザイン欄外で「透過が必要」と明記してコーダーと共有
（４）スクリーンショットや図解が荒れる
＜原因＞
✅キャプチャ元の解像度が低い
✅書き出し時の圧縮やリサイズで文字がつぶれる
✅Webで表示されるサイズに合わせていない
＜回避法＞
✅文字やUI要素が潰れないサイズでキャプチャ
✅書き出し時に2倍サイズで作成して、コーダーにサイズを伝える
✅重要な部分は拡大表示して別素材として用意
（５）SNS用アイコンやOGP画像が荒くなる
＜原因＞
✅仕様サイズ（Facebook、Twitter、Instagram等）に合っていない
✅自動リサイズされることで圧縮がかかる
✅元素材の解像度が低い
＜回避法＞
✅SNSごとの推奨サイズを確認して書き出す
✅高解像度素材を用意し、必要に応じて2倍サイズでアップ
✅コーダーやSNS担当者とサイズの共通認識を持つ
こうしたパターンをデザイン段階で把握しておくと、“荒い”とクライアントに指摘される前に対策を打つことが可能です。
次の章では、素材支給や外部依頼時に行うべき前処理と指示方法を整理していきます。
5. 外部依頼や素材支給の際にやるべき前処理と依頼テンプレ
デザイン段階で画像を整えても、クライアントやカメラマン、外部の素材提供者から受け取る画像が荒ければ意味がありません。
ここでは、デザイナーさんが事前にできる“素材の前処理”と、依頼時の指示方法を整理します。
（１）元素材の受け取りルールを明確にする
①最低限のピクセル数を指定
例：幅2000px以上／高さ1200px以上
②ファイル形式を指定
写真はJPEG、図やロゴはPNG、可能であればWebPも可
③透過や背景の指定
ロゴやアイコンは背景透過が必要か明記
こうすることで、受け取った時点で「荒い・不適切な形式」というトラブルを減らせます。
（２）デザイン段階での前処理
①受け取った画像を実際の表示サイズに合わせてトリミングやリサイズ
②小さなノイズや色味のずれをPhotoshopやFigmaで補正
③必要に応じて2倍画像を作成してコーダーと共有
これにより、コーダーに渡す素材は「すぐ使える状態」となり、実装時の荒れリスクが大幅に減ります。
（３）依頼テンプレを作る
毎回バラバラの指示を出すと、素材の品質にムラが出やすいです。デザイナー側で簡単な依頼テンプレを作っておくと便利です。
例：カメラマンへの依頼テンプレ
撮影対象：商品A
画像サイズ：横2000px以上、縦1200px以上
形式：JPEG（圧縮率80％以内）
背景：白／透過不可
注意点：手ブレやピントズレを避ける
例：クライアントへの素材支給依頼テンプレ
ロゴはPNG（透過）で縦横500px以上
写真素材は原寸サイズで送付
スクリーンショットは文字がつぶれない解像度で
こうしたルールをテンプレ化しておくことで、誰が提供しても最低限の品質が担保される仕組みを作れます。
↓↓↓ポイント↓↓↓
✅デザイナーさんが先にルールを決めておく
✅前処理を済ませた素材をコーダーに渡す
✅テンプレ化で依頼効率と品質が同時に向上
次の章では、コーダーと共有すべき画像仕様リストを整理し、より確実に荒れを防ぐ方法を見ていきます。
6. コーダーと共有すべき画像仕様リスト
デザイン段階でいくら画像に注意しても、コーダーとの認識がズレると、実装後に「荒れて見える」トラブルは起こり得ます。
ここでは、コーダーと共有しておくべき最低限の仕様を整理します。
（１）表示サイズと書き出しサイズ
①表示サイズ（ブラウザ上でのピクセル幅）
例：バナー幅600px、サムネイル幅300px
②書き出しサイズ
表示サイズの2倍画像を用意すると、Retinaなど高解像度端末でもシャープに表示されます。デザイナーさんは「この画像はここで○px表示」と欄外に記載しておくとコーダーが迷わず実装できます。
（２）ファイル形式と圧縮率
✅写真 → JPEG（圧縮率70～80％程度が目安）
✅ロゴ・図解 → PNG（透過が必要な場合は明記）
✅WebP → 写真もロゴも兼用可能、容量軽減と画質保持に有効。圧縮しすぎない、または劣化を確認してから渡す
（３）2倍画像・Retina対応の有無
✅アイコンやロゴなど細かい要素は、必ず2倍画像を用意
✅実装後に荒く見えないよう、コーダーに「ここは2倍画像を使う」と伝える
（４）特殊対応の指示
✅表示サイズに収まらない横長のテーブルや図は、スクロール可能にするなどの工夫を伝える
✅スクロール可能な場合は、「スクロールヒントを入れる」など、コーダーに具体的な指示を添える
（５）備考・補足メモ
✅デザイン欄外に余白や位置、透過や色味の補足を書いておく
＜例＞
「セクション前後余白 80px」
「ボタンは透過PNGを使用」
こうすることで、デザインの意図がコーダーに正しく伝わり、最終的に「荒い」と指摘されるリスクを減らせます。
次の章では、ここまでの内容を整理し、クライアントから“画像が荒い”と言われる前にできる対策のまとめをお伝えします。
7. まとめ
「画像が荒い」という指摘は、クライアントにとっては一目でわかる小さな不満ですが、制作側にとっては制作フロー全体の管理不足が表面化したサインでもあります。
本記事で紹介したポイントを振り返ると、荒れを防ぐデザインのコツは次の通りです。
①元画像の品質を確認する
受け取った素材が粗い場合は、早めに対応策を検討する
②表示サイズに合った書き出しを行う
実際にブラウザで表示されるサイズを意識し、必要に応じて2倍画像を用意
③書き出し形式と圧縮率を最適化する
JPEG／PNG／WebPなどの特性を理解し、圧縮による劣化を防ぐ
④素材支給・外部依頼のルールを明確にする
ピクセル数、形式、透過、背景など、必ずテンプレ化して指示
⑤コーダーと仕様を共有する
表示サイズ、形式、2倍画像、スクロール指示などを具体的に伝え、デザインの意図を正確に再現してもらう
つまり、クライアントからの「画像が荒い」という指摘は、事前にルールと確認ポイントを整理しておくことでほぼ防げる問題です。
デザイナーさんとしては、単にきれいな見た目を作るだけでなく、素材の品質・表示サイズ・書き出し・共有方法まで含めて管理することで、トラブルを未然に防ぎ、スムーズな実装につなげることができます。
この習慣を案件ごとに取り入れるだけで、クライアントとの信頼も、制作の効率も格段に上がります。
