書き出した画像がぼやける・ガタつく — 渡す前に防ぐ、実装者からのお願い

「支給した画像、Retinaでぼやけて見えるんですが」。納品したあとに、デザイナーからこう連絡をもらったことがあります。カンプ上では完璧だったロゴが、実機のMacで見るとうっすら滲んでいる。原因は私のCSSでもデザインでもなく、書き出しの一歩手前にありました。

書き出した画像がぼやける、細い線がガタつく、なぜか位置がずれる。受け取って組む側から見ると、この手の不具合は原因がだいたい3つに絞れます。渡す前に押さえておけば、納品後の「なんか汚い」はほぼ消える。実装者として受け取る側の視点で、その勘所をまとめました。

ぼやけるのは「1倍で書き出している」から

一番多いのがこれ。犯人は解像度です。

いまのスマホやMacの画面は、見た目の1ピクセルを、物理的には2つぶんの点で描いています（この倍率をDPRと呼びます）。DPRが2の画面では、100pxの幅で置いた画像を、画面側が200個ぶんの点へ引き伸ばして映す。だから1倍で書き出した画像は、その場で拡大されて滲みます。

対策はシンプルで、表示したいサイズの2倍で書き出してもらうこと。200pxの枠に置くなら400px幅で用意し、実装側でCSSで半分に縮める。これでDPR2の画面でもくっきり出ます。

「高解像度で」と一言添えてもらえれば、こちらで受け止められます。実寸ぴったりの1倍だけが届くと、あとから書き出し直しをお願いする往復が生まれる。

2倍で書き出したのに、罫線やアイコンの縁がなぜか甘い。これは別の原因、小数ピクセルの仕業です。

ブラウザは要素の位置を0.5pxのような小数で扱うことがあります。線の左端が整数の座標に乗っていないと、1pxの線が隣り合うピクセルへ半分ずつまたがり、その境目をならすために薄くぼかされる。シャープなはずの線が、眠く見えるわけです。

Figma側では、こう防げます。

小数のズレはデザイン中には見えにくく、実装側で初めて気づくことが多い箇所です。「なんとなく甘い」の正体は、たいていこれ。座標を整数に丸めるだけで、驚くほど締まります。

ぼやけ対策で2倍と書きましたが、そもそもロゴやアイコンはラスターで渡さないほうが確実です。

画像には、点の集まりであるラスター（PNG/JPG）と、図形の情報を持つベクター（SVG）の2種類があります。ベクターは拡大しても劣化しない。ロゴやアイコンのように線と面でできたものは、SVGでもらえれば、どんな画面でも、どんな拡大率でも常にくっきりします。2倍で書き出す手間もいりません。

使い分けの目安はこうです。

SVGは書き出したあとにコードで色を変えられます。ダークモードでロゴの色を反転させる、ホバーでアイコンの色を変える——PNGでもらうと、この柔軟さが全部消えてしまう。

受け取る側として、あるだけで手戻りが消えるのはこの3点です。

このあたりは、支給データ全体を「実装しやすく」整える話ともつながります。Figmaデータ側の準備は実装しやすいFigmaデータ7チェックに、色やサイズの値の渡し方はFigma VariablesをそのままCSS変数に写すにまとめました。

画像の書き出しは、地味なわりに納品の見た目を大きく左右します。ここがそろっていれば、実装は受け取って置くだけで済む。ずれていると、私が実機で気づいて、書き出しから直してもらう往復が生まれます。

デザインは固まっているけれど実装は任せたい、支給データの整え方から相談したい。そんな制作会社の方は、お問い合わせからお気軽にどうぞ。渡す前の段階から、崩れない受け渡しを一緒に設計します。

本記事は2026年7月時点の情報です。