背景透過の品質を上げる実務ガイド — 白縁/色かぶり/髪の毛の処理
背景透過は完成直後は綺麗でも、置く背景が変わると“縁の正体”が露わになります。 白背景で切り抜いた素材を黒背景に置けば白縁、緑背景で撮影した人物を白背景に置けば緑のかぶりが見える── これは縁ピクセルに元背景色が混ざっている（アンチエイリアス/プレマルチ）からです。
先に結論（最短ルート）
背景透過 → 想定背景色 = マット色でデスピル → 1px 内側のデフリンジ → PNG / WebP(Lossless)で書き出し → 3色プレビューの順が最短です。
要点（TL;DR）
- 白縁/色かぶりは縁の半透明に元背景色が残ることが原因。
- 対策はマット色（配置背景）でのデスピル＋1pxデフリンジ。
- 髪の毛などは完全透過にせず半透明を残すと自然。書き出しはPNG / WebP(Lossless)。
- 仕上げは /compare で白/黒/ブランドの3色プレビューを確認。
1. 症状の見分け方
- 白縁：白背景で切り抜き → ダーク背景に置くと白い輪郭が出る。
- 色かぶり：緑/赤など色背景で撮影 → 白い背景に置くと縁が色づく。
- 髪の毛崩れ：細い毛先がギザギザ、または欠ける/硬い。
2. 最短フロー（HowTo）
- 切り抜く：まずは /bg-remove 等の自動切り抜きで土台づくり（原本は必ず保全）。
- 背景色を想定：配置先が白/黒/ブランド色かを先に決める（ここが最重要）。
- マット色でデスピル：縁の半透明が馴染むよう、想定背景色で前処理（焼き込み）する。 画像側で難しければページ側の背景色と合わせるだけでも効果あり。
- デフリンジ（1px内側）：縁に色が残る場合は選択範囲を0.5–1.0px内側に縮小して再書き出し。髪の毛は弱めを基準に。
- 半透明の調整：髪やレースは完全透過にしない。軽い半透明を残すと自然。
- 形式：ロゴ/図はPNG / WebP(Lossless)、写真ベースは必要に応じWebP（Lossy 80–85）も検証（縁ノイズが出たら可逆へ戻す）。
- 最終確認：白/黒/ブランドの3色プレビューで縁・色・欠けをチェック。
3. 具体レシピ（ケース別）
A. 白縁（白背景→ダーク配置）
- マット色をダーク/ブランド色へ変更して再書き出し。
- 縁を0.5–1.0px内側に縮小（デフリンジ）。
B. 色かぶり（グリーン/レッドの残留）
- 縁ピクセルを近傍色へ置換（デスピル）。
- 配置背景と同色のマットで馴染ませる。
C. 髪の毛がギザギザ/欠ける
- エッジのフェザー 0.3–0.6pxで滑らかに。
- 部分的に半透明を残す（完全透過は不自然）。
4. 書き出し形式の最短ルール
- ロゴ/図/文字：PNG / WebP(Lossless)（可逆で縁を崩さない）。
- 写真＋透明縁：WebP（Lossy 80–85）を検証。縁ノイズが出るなら可逆へ。
- 配置先が決まっている：背景と同色マットを使い、縁の半透明を馴染ませてから書き出し。
仕上げの容量調整は /compressor、 形式切替は /convert が便利です。
5. よくある落とし穴（回避策）
- 白背景で切った素材を暗い背景へ直置き → 白縁。マット色を背景に合わせて再書き出し。
- デフリンジのやり過ぎ → 輪郭が痩せて不自然。0.5–1.0pxを目安に。
- 完全透過にこだわる → 髪/レースは半透明を残す方が自然。
- 非可逆での縁劣化 → ロゴ/縁重視は可逆で保存（詳しくは PNG vs WebP Lossless）。
6. 公開前チェック（8項目）
- 白/黒/ブランド背景の3色プレビューで縁の色残りがない。
- マット色を合わせた（またはページ側の背景と統一した）。
- 髪・レース等は半透明で自然に見える。
- 縮小/フェザー/デフリンジが過剰でない（欠け・硬さが出ていない）。
- 書き出し形式は素材に適切（ロゴ=可逆、写真=WebP/JPEG/可逆を比較）。
- 容量は適切（過小/過大圧縮で劣化が出ていない）。
- OGP/サムネは /thumbnail で比率と安全域を統一。
- EXIF位置情報の削除（/exif-strip）。
7. まとめ：マット→デフリンジ→3色確認が最短
背景透過は、想定背景＝マット色で縁を整え、1pxデフリンジで色残りを断ち、3色プレビューで最終確認──この順でほぼ解決します。迷ったら /compressor と /compare を使って、見た目と容量の最短落とし所に収束させましょう。