あなたのカットインの縁が黒ずむ理由は、1987年に決まっていた

透過したはずのカットインを読み込んだら、キャラクターの輪郭に薄汚れた黒い縁が残っている。光のエフェクトのふちがギザギザに割れている。

書き出し設定をいじっても直りません。これはあなたのミスではなく、GIFという規格の仕様です。

というところまでは知っていたんですが、「じゃあ代わりに使うAPNGって何なんだ」が気になって調べてみたら、思っていたより面白い経緯がありました。この規格は、2007年に公式に却下されています。却下されたまま、今あらゆるブラウザで動いているようです。

先に実用の話をして、後半でその経緯を書きます。

GIFの透明度は「0か1」しかない

GIFが決めた透明度の扱いは、シンプルです。そのピクセルは、透明か、不透明か。

中間がありません。1ビット、つまり2択です。

1987年当時、これは合理的な設計だったはずです。回線は遅く、色数は256色で十分で、透明度に8ビットも割く余裕はない。用途はウェブページのアイコン程度でした。

問題は、いま私たちが作りたいものが「アイコン」ではないことです。

• 光のグロー。中心から外に向かって徐々に薄くなる

• 煙、霧、飛沫。全体が半透明

• ぼかしの効いた縁。輪郭が滑らかに消えていく

• フェードインとフェードアウト。時間方向に透明度が変化する

これらは全部、中間の透明度で成立している表現です。GIFに入れると、中間だった部分が「透明」か「不透明」に強制的に振り分けられます。

50パーセント透明だったピクセルが不透明側に倒れると、そこには元の背景色が焼き付いたまま残ります。白背景で作れば白い縁、黒背景で作れば黒い縁。あの汚れの正体はこれです。

そして振り分けの境界がピクセル単位で発生するので、なめらかだった輪郭が階段状になります。ジャギの正体もこれ。

ここは設定では直りません。フォーマットを変えるしかない、というのが結論です。

ここから調べた話

PNGは「特許を回避するため」に生まれたらしい

そもそもなぜPNGという規格があるのか。知らなかったので調べました。

GIFの圧縮方式であるLZWには特許がついていて、権利を持っていたUnisysが1990年代に権利行使の姿勢を示したことで、GIFを使うことに法的な不安が生じたそうです。この特許は米国では2003年に失効していますが、それまでの不確実性が、ロイヤリティフリーの代替フォーマットを求める動きにつながった、と。

そうして作られたのがPNGです。GIFの置き換えとして設計されたので、当然、弱点も潰してあります。256色制限と1ビット透過の廃止。フルカラーで、透明度を256段階持てる。

ただしPNGは1枚絵の規格として設計されたので、動きません。

却下された規格、APNG

「PNGの画質でGIFのように動くもの」が必要でした。

Wikipediaによると、2004年にMozillaのStuart ParmenterとVladimir Vukićevićという2人がその仕様を作ったのがAPNGの始まりだそうです。

同じ目的の規格としてMNGというものが既にあったのですが、Mozillaは2003年5月にMNGのサポートを打ち切っています。デコーダのライブラリが300KBと大きすぎたから、とのこと。300KBが「大きすぎる」という感覚が時代を感じます。PNGのデコーダを流用したAPNGは、はるかに軽量だったそうです。

ところが、PNG開発グループはこれを歓迎しなかった。PNGは単一画像フォーマットとして構想されたものだ、というのが原則論だったようです。

面白いのがここからで、妥協案も出ていたらしいんですね。専用のMIMEタイプを使えば折り合えるのではないか、と。ところがAPNG側は新しいMIMEタイプ（image/apng）は採用しつつ、拡張子は `.png` のまま押し通した。ここで決裂したと書かれています。

そして2007年4月20日、PNG開発グループはAPNGを公式な拡張として正式に却下しました。

普通ならここで消えるはずです。

生き延びた理由に日本が出てくる

却下されたあとも、APNGは「野良規格（rogue standard）」として使われ続けたそうです。

これを取り上げた2013年のTechCrunchの記事を読んでいたら、こう書かれていました。日本では、Pixivで作品を公開する多くのアーティストがこの形式を使い続けていた、と。

標準化の政治とは無関係に、「透過アニメーションをきれいに出したい」という需要が現場にあり続けたわけです。ここは正直、ちょっと嬉しくなりました。

そして時間が経つと、実装のほうが追いつきます。2015年にWebKitがサポートを取り込み、2017年3月にはChromiumにも実装が入っています。

現在、Chrome / Edge / Firefox / Safari のすべてがAPNGを表示できます。正式な規格として承認されないまま事実上の標準になった、ということのようです。

実務上の結論

透過アニメーションを作るなら、APNG。半透明を含む表現をGIFに入れる限り、縁の汚れは消えません。

もうひとつ、調べていて感心した点を。
APNGは「最初のコマが通常のPNGとして読める」構造になっているそうです。追加のコマは、PNGの仕様が元々許容している拡張チャンクに格納されているため、と。

つまり、APNGに対応していない環境で開いても、静止画として1コマ目が表示される。壊れて何も出ない、という事故が起きにくい設計になっている。却下されはしましたが、行儀のいい規格だと思います。

ただし、この構造には裏があります。APNGを知らないツールで再圧縮すると、拡張チャンクが丸ごと捨てられて、1コマ目だけのPNGになる。エラーも出ずに、動かないファイルができあがる。

実際に作るとなると

理屈はこれで終わりですが、実際に透過APNGを作ろうとすると、動画編集ソフトを開いて、アルファチャンネル付きで書き出して、変換をかけて、という手順を踏むことになります。1回だけならまだしも、シナリオごとに文言を変えたい場合はかなり厳しい。

そこを短縮するために、文字とエフェクトを選ぶだけで透過APNGを書き出せるツールを作りました。ブラウザでHTMLを開くだけのローカルツールです。

無料版があります。まずはこれで、自分の環境でAPNGがきちんと透過するかを確認できます。

▶ カットインメーカー 無料版（¥0）
https://komagomadou.booth.pm/items/8638452

関連記事

参照元

• Wikipedia「APNG」「GIF」

• TechCrunch、2013年の記事（APNGがiOS 8で採用された件を扱ったもの）