透過PNGの白/黒フリンジ徹底対策（Premultiplied Alphaの正しい扱い）

切り抜いたロゴや人物の縁が白っぽく光る／黒くにじむ。多くはPremultiplied Alpha（乗算アルファ）の影響や、YUV 4:2:0 の色サブサンプリング、あるいはガンマ前提の違い によるものです。本稿は「なぜ起きるか」を1枚の絵で理解しながら、Web配信での最短解を提示します。

要点（TL;DR）

ロゴ/UIはPNG or WebP Lossless（可逆・4:4:4相当）。写真系はAVIF/WebPの4:4:4を優先。
書き出しはマットなし（No Matte / Transparency=Straight）。不明ならPNGに逃げる。
ダーク/ライトで色が合わない場合は配色別アセットかSVG/マスクで着色に切替。
公開前は白/黒背景のトグルで縁のにじみを必ず確認（チェックリストあり）。

1. フリンジが発生する理由

A. Premultiplied vs. Straight Alpha

透過PNG自体は基本Straight（非乗算）ですが、制作・エンコード・再圧縮のどこかで背景色込みで前計算された画素（Premultiplied）が紛れると、別背景に載せた時に「もとの背景色」が縁に残って見えます。白背景で書き出すと白縁、黒背景だと黒縁が典型です。

B. 色差サブサンプリング（4:2:0）

WebP/AVIF の4:2:0は色を間引くため、アルファ境界で色のにじみが出やすくなります。ロゴ・UIのような鋭いエッジは可逆や4:4:4を使うのが安全です。

C. ガンマと合成順序

線形ではなくガンマ空間でアンチエイリアスや合成をすると、境界の見えが変わります。近年のツールは改善されていますが、古いエクスポート設定の流用には注意が必要です。

2. 最短フロー（判断 → 書き出し → 配信）

用途で形式を分類：
- ロゴ/アイコン/図：PNG or WebP Lossless（にじみ最小）
- 人物切り抜き：AVIF/WebP 4:4:4（品質次第でPNGも比較）
書き出しは「マットなし」： Photoshop の Export As などでTransparency を維持し、Matte=なしを確認。不安ならまず PNG に出してから変換ツールで比較します。
配色別アセット（必要に応じて）：ダーク/ライトで見えが変わるロゴはアセットを分けるのが王道です。
公開前チェック：白/黒背景の切り替え、ズーム、Retina/非Retinaで縁を確認。

PNGと可逆WebPの重さ

PNGは最も安全ですが重くなりがち。まず PNG で正しく見える状態を作り、そこから /convert でWebP Lossless や AVIF 4:4:4 を比較しましょう。

3. 実装レシピ（コピペOK）

A. ダーク/ライト別ロゴ

<picture>
  <source srcset="/img/logo-dark.png" media="(prefers-color-scheme: dark)" />
  <img src="/img/logo-light.png" alt="サイトロゴ" width="160" height="40" decoding="async" />
</picture>

B. SVG/マスクで色を付ける（縁のにじみを根本回避）

/* CSS */
.logo-mask {
  width: 160px; height: 40px;
  background: currentColor;
  -webkit-mask: url("/img/logo-mask.svg") no-repeat 50% 50% / contain;
  mask: url("/img/logo-mask.svg") no-repeat 50% 50% / contain;
}

<!-- HTML -->
<span class="logo-mask" aria-label="サイトロゴ" style="color:#111"></span>

C. WebP/AVIF で縁を守るエンコード例

# 可逆WebP（縁のにじみを最小化）
cwebp -z 9 -lossless input.png -o output.webp

# AVIF 4:4:4（にじみが出やすい図形や細線向け）
avifenc --yuv 444 --depth 8 --min 0 --max 63 -a enable-chroma-deltaq=0 input.png -o output.avif

配信後の見え方確認

Before/After 比較は /compare、容量最適化は /compressor を使うと素早いです。

4. 公開前チェック（8項目）

白/黒背景で縁に色が残らない（トグルで確認）。
形式は用途に最適（ロゴ/UI=PNG or WebP Lossless、人物=AVIF/WebP 4:4:4）。
書き出し時にマットなしを確認した。
Retina/非Retina（100%/200%）で輪郭が崩れない。
暗色テーマで沈み/浮きが無い（必要なら配色別アセット）。
配信用画像は width/height を明示（CLS対策）。
圧縮は /compressor で画質と容量の落とし所を確認。
アセット名に指紋（v2等）を付け、差し替えキャッシュに対応。

5. さらに深く学ぶ

色域/色管理の基礎は sRGB変換とICCプロファイルを参照。
レスポンシブ配信は srcset/sizes実践ガイドを併読。
UI図版の破綻はテキスト/線のにじみ対策で総合的にケア。