Phaseで作ったアニメーションを無理くり背景透過APNG/アニメーションWebPにする【Premier Pro】

2025年3月14日

Phase は簡単なLottieアニメーションを作るのに使える便利なツールです。

PNGもインポートできるのですが、Lottieはベクターでこそ真の力を発揮できるので、PNGやJPGを読み込んで使うなら、内容によってはアニメーションWebPの方が適しているかも。

しかし、PhaseではLottie以外にはMP4かGIFしか書き出せません。
そしてMP4は背景透過できません。

そこで、Phaseで作ったアニメーションをMP4で書き出した後、それを無理くり背景透過APNG/アニメーションWebPにする方法を考えてみました。

Phaseから背景透過APNG/アニメーションWebPを書き出す流れ

まずはPhaseでアニメーションを作ります。この記事では作り方は説明しません。

MP4は背景透過できないので、あとからPremier Proでカラーキーで抜く用の背景色を塗ります。

そしてMP4で書き出します。

Premier ProでMP4をひらいて、カラーキーで抜きます。

キーカラーをスポイトして、「カラー許容値」「エッジを細く」で要素のふちに残った背景色をなるべく削ります。

※この時、一時的にカラーマットを敷いておくと見やすいです。

Premier Proの書き出しから形式「PNG」を選んで書き出します。

書き出すと、書き出しフォルダに連番のPNGが保存されます。

連番で書き出したPNGを、アニメ画像に変換する君で開きます。

用途「Webページ用アニメーション」を選択し、フレームレートはMP4と同じフレームレートにします。

画質設定では「容量再最適化」を選択しておきます。
APNGの場合、最終的には圧縮率の高い「zopfli」が理想かと思いますが、いったん作ってみるだけなら「zlib」が速いです。

「アニメ画像を保存する」をクリックすると、APNGとWebPが保存できます。

「Lottieはベクターでこそ真の力を発揮できるので、PNGやJPGを読み込んで使うなら、内容によってはアニメーションWebPの方が適しているかも」という仮説の元、実際に同じ動画をLottieとAPNG/アニメーションWebPにしてファイルサイズを比較してみました。

要素数の少ないLottieだと通常は数KBですから、400KBはLottieとしてはファイルサイズが大きいことが分かります。
また今回の例ではアニメーションWebPにしたとき、200KBとLottieの半分ほどのファイルサイズになりました。

写真を背景透過でループで簡単に動かしたい場合は、アニメーションWebPも選択肢のひとつになりそうです。

ただし、カラーキーでくり抜くのには限界がありますから、Premier ProやAfter Effectsで初めから透過で作って、PNGで書き出すほうがおススメです！

よかったらシェアしてね！