スクショのにじみを消す（PNG最適化・色数削減）
UIやコードのスクショがにじむ/ざらつく原因の多くは、撮影時の倍率と、保存時の設定です。JPEGのような非可逆圧縮はテキストの色エッジを崩しやすく、拡大/縮小比が半端だとサンプリング誤差で輪郭が甘くなります。
本稿では100%スケール撮影 → PNG（パレット）減色 → ディザ弱めというシンプルな手順で、読みやすさを落とさず容量も削るやり方を、表とチェックリスト付きでまとめます。詳細な理屈や数値チューニングは PNG減色とディザの実践ガイド にも展開しています。
要点（TL;DR）
- 撮影は100%スケール、Retinaはピクセル等倍（2×画像をCSSで1×にしない）。
- 保存はPNG（パレット）を基本。16–64色＋ディザ弱め〜オフ。
- 表示幅にきっちり合わせて書き出し、imgにwidth/heightを指定。必要なら srcset/sizes。
- 白縁/透過の問題は 背景透過の画質を守る を参照（マット/デフリンジ）。
1. 撮る段階での最適化（にじみの元を作らない）
- 100%スケールで撮影（OS表示倍率/ブラウザズーム=100%）。90%や110%はにじみの主因。
- Retinaは等倍で書き出す（2×画像を1×枠に詰めない）。必要なら実幅用に再サンプル。
- UIテーマは高コントラストにすると境界が安定。影/半透明は極力オフ。
まずは /compare で“今”を観察
いきなり減色に進む前に、/compareで原稿と1:1比較するとボトルネックが分かります。
2. PNGの最適化（パレット化・色数削減・ディザ）
スクショはベタ塗り/少色のためパレットPNGが最適です。色数を落とすほどにじみが減り、容量も下がります。文字のざらつきはディザを弱める or オフにするのがコツ。
| 絵柄 | パレット（色数） | ディザ | メモ |
|---|---|---|---|
| UI/コード（文字多） | 16–64 | 弱め〜オフ | 可読性最優先。にじみが出たら色数↑/ディザ↓。 |
| 図表/アイコン | 32–64 | 弱め | 輪郭を崩さない範囲で調整。 |
| グラデ/半透明UI | 64–128 | 弱め | 段差が出たら色数↑。それでも出るならWebP Lossless検証。 |
- まず /convert でPNGに統一。
- 次に /compressor で減色（16–64色）＋ディザ弱めを適用。文字が滲むならディザをさらに弱く、もしくはオフ。
- 線・文字に色残りがある場合は色数を少し増やす（32→48→64）か、逆にディザを完全オフ。
※ PNGは可逆圧縮。画質は劣化しません。必要に応じてWebP Losslessとも比較するとさらに容量を抑えられることがあります（PNG vs WebP Lossless）。
3. 書き出しと実装（崩さず軽く）
4. よくある落とし穴（回避策）
- 90%/110%など小数倍率で撮影 → 100%に戻す。
- スクショをJPEG保存 → 文字/線がにじむ。UIは可逆（PNG/WebP Lossless）を基本に。
- ディザが強すぎ → 粒状感と可読性低下。弱め〜オフを起点に。
5. ケーススタディ：ヘルプセンター更新
既存のスクショがモヤついて読みにくかったため、撮影を100%スケールに揃え、保存をパレット32–64色へ。 ディザは弱め、文字部分はオフ。表示幅で書き出し直し、srcsetを追加したところ、可読性は改善しつつ容量を大幅に削減できました。
6. 公開前チェックリスト（7項目）
- 撮影は100%スケール（Retina等倍）で行った。
- PNG（パレット16–64色）に最適化／ディザ弱め〜オフ。
- ベクター要素は可能な限りテキスト/コードで再現（画像にしない）。
- srcset で表示幅に合わせたサイズを用意。
- imgにwidth/heightを付与してCLSを抑制。
- 必要に応じてWebP Losslessも比較（容量と互換のバランス）。
- OGP/サムネは別テンプレで最適化済み。
まとめ：撮影を正し、減色で仕上げる
スクショのにじみは撮影倍率と保存設定を正せば驚くほど早く解決します。まずは100%スケールで撮り、 PNGのパレット減色＋ディザ弱めでシャキッと。比較は /compare、一括出力は /compressor と /convert が近道です。