透過GIFの「白いフチ」はなぜ出る?
— 2値アルファとマット色の仕組みから消し方まで
透過GIFをダークカラーのスライドに貼ったら、線のまわりに白いフチがうっすら見えた — 誰もが一度は踏む罠です。これはツールのバグではなく、GIFという画像形式の仕様によるものです。仕組みを知れば確実に消せます。
原因: GIFの透明は「あり/なし」の2値しかない
PNGの透明度(アルファチャンネル)は0〜255の256段階あり、「半分だけ透明」なピクセルを表現できます。文字や線のフチのなめらかさ(アンチエイリアス)は、この半透明ピクセルが背景と混ざることで実現されています。
一方、GIFの透明は「完全に透明」か「完全に不透明」かの2値しかありません。アルファ値でいえば0か255だけで、中間がないのです。そのため、フチのなめらかな半透明部分をGIFにするときは、次のどちらかを選ぶしかありません。
- 半透明ピクセルを捨てる → フチがギザギザ(ジャギー)になる
- 半透明ピクセルを何かの色と混ぜて不透明にする → なめらかだが、混ぜた色が焼き込まれる
この「混ぜる色」がマット色(matte)です。FlowArrowの「フチ合わせ色」はこのマット色のことです。
白いフチの正体
マット色を白のまま書き出したGIFは、線のフチに「線の色と白を混ぜた中間色」のピクセルを持っています。白背景に貼れば完全に馴染みますが、ダーク背景に貼るとその中間色だけが浮いて見える — これが白いフチの正体です。逆に、黒マットで書き出したGIFを白背景に貼れば黒いフチが見えます。
消し方: マット色を貼り先の背景色に合わせる
- 貼り先のスライドの背景色を調べる(Googleスライド: 背景 → 色 / PowerPoint: デザイン → 背景の書式設定)。カラーコード(
#202124など)を控える - FlowArrowの「フチ合わせ色」にその色を指定する
- 書き出し直して貼り替える
背景がグラデーションや写真の場合: 一色に合わせられないため、フチは完全には消せません。グラデーションの中間あたりの色をマット色にして目立ちにくくするか、矢印の通り道だけ単色の帯を敷くレイアウトに変えるのが現実的です。
ほかの形式ではダメなのか? — APNG・WebM・Lottieとの比較
| 形式 | 半透明 | Googleスライド | PowerPoint | Notion |
|---|---|---|---|---|
| GIF | ×(2値) | ◎ 自動ループ再生 | ◎ スライドショーで再生 | ◎ |
| APNG | ◎ 256段階 | ×(静止画扱い) | ×(静止画扱い) | △(環境による) |
| WebM(動画) | ◯(対応コーデックなら) | △ 動画扱い・自動再生に制約 | ◯ 動画として挿入 | ◯ |
| Lottie(JSON) | ◎ | × | × | × |
半透明を完全に扱えるAPNGやLottieは、肝心のスライドツールがアニメーションとして再生してくれません。「どこに貼っても確実にループ再生される」のは今もGIFだけで、だからこそマット色での運用が現実解になっています。
ファイルサイズを抑えるコツ
GIFは古い形式なのでサイズが膨らみがちです。スライドに貼る用途なら以下で十分軽くなります。
- 寸法を貼るサイズに合わせる — スライド上で幅400pxで使うなら、800pxで書き出す必要はありません
- フレーム数を欲張らない — ループする動きは1周期分だけあればよく、24フレーム前後で十分なめらかです
- 色数はもともと少ない — 単色の矢印なら数十色に収まり、GIFの256色制限は問題になりません