目次
3つとも透明度を保存できますが、納品先が異なります。WebにはWebM Alpha、編集と合成にはProRes 4444、フレームごとの制御や汎用的な元データにはRGBA PNG連番をまず検討します。
ただし結論だけでは足りません。同じ動画でファイルサイズはどう変わるか、エンコードとデコードを経てもAlphaは残るか。AnimGenの同じアニメーションを3形式で書き出し、2つの動画を全96フレームへデコードし直して元のPNGと画素ごとに比べました。検証ファイルもすべて公開しています。
最終的な納品先で選ぶ
| 最終用途 | 最初に検討する形式 | 理由 | 主な負担 |
|---|---|---|---|
| Webサイト・対応ブラウザ | WebM Alpha | 1つの比較的小さい透過動画 | ブラウザ間でAlpha対応が異なる |
| 動画編集・モーショングラフィックス・合成 | ProRes 4444 | Alpha付きの高品質な交換形式 | 大きく、一般的なWeb配信には不向き |
| フレーム検査・保管・独自処理 | RGBA PNG連番 | 各フレームが独立した可逆画像 | ファイルが多く、順序とFPSの保存が必要 |
| 2Dゲームの実行時 | スプライトシートまたはエンジン用パッケージ | フレーム、時間、メタデータを一緒に渡せる | テクスチャ、原点、フィルタ、導入設定の確認が必要 |
全工程を管理できるならPNG連番を共通の元ファイルとして残し、納品先に合わせてWebM、ProRes、ゲーム素材を作れます。1種類だけ書き出すなら、形式名の印象ではなく「次のソフトがどう使うか」で決めます。
1つの透過アニメーションから得た3つの実ファイル
公開されているAnimGenの等角投影の戦士による斬撃を使います。元データは 512 × 512のRGBA PNGが96枚、24 FPSで 4.00秒 です。キャンバスサイズは固定、動作は非ループで、四隅は完全に透明です。
2つの動画は、現在のAnimGenの書き出しエンコーダーが同じ96枚から作成しました。WebMはVP8で ALPHA_MODE=1、MOVはProRes 4444 profile、ap4h codec tag、yuva444p12le 画素形式と判定されました。その後で両方を96枚のPNGにデコードし、透明度と画素を比較しています。
ローカルにFFmpegがあれば、ダウンロードしたファイルの容器と映像ストリームを調べられます。
ffprobe -v error -show_entries "stream=codec_name,profile,codec_tag_string,pix_fmt,width,height,r_frame_rate:stream_tags=ALPHA_MODE:format=duration" -of json your-export.webm
ただしメタデータだけを最終判定にせず、全フレームを実際にデコードし、別の背景にも重ねました。
実測ファイルサイズ
| 出力 | 正確なバイト数 | およそのサイズ | WebM比 |
|---|---|---|---|
| WebM Alpha | 828,010 | 0.79 MiB | 1× |
| PNG連番ZIP | 14,427,494 | 13.76 MiB | 17.42× |
| ProRes 4444 MOV | 20,052,159 | 19.12 MiB | 24.22× |
倍率はこの素材だけの結果です。解像度、長さ、細部、動きの大きさ、エンコード設定、ZIP内のPNGの構成によって変わります。この例ではWebMが明らかに小さく、PNG連番とProResは制作向けの構造と引き換えに保存容量を使います。
デコードしても透明度は残るか
今回、両方の動画で透明度が保たれました。デコード後も各96フレーム、Alphaの範囲は0～255、四隅のサンプルは完全透明です。同じフレームを明るい、暗い、高彩度の背景に置くと、下の背景が透け、固定された矩形にはなりません。
0～255のチャンネル値で、元RGBAフレームに対するデコード後の平均絶対誤差も計算しました。
| デコードした出力 | Alphaの平均誤差 | 1フレームあたり最大のAlpha平均誤差 | 可視領域のRGB平均誤差 |
|---|---|---|---|
| WebM Alpha | 0.0497 | 0.0911 | 2.5984 |
| ProRes 4444 | 0.0016 | 0.0038 | 0.4524 |
「可視領域」は元画像のAlphaが8を超える画素です。0でなければ完全な画素一致ではありません。今回、両方とも使用可能な透明度を保ち、ProResのデコード結果の方がAlphaと可視RGBで元画像に近くなりました。各形式の一般的な用途とも整合しますが、1つの例から「どんな場面でも肉眼でProResが優れている」とは言えません。
PNG連番には動画のエンコード・デコードがありません。ZIP内のファイルが元の独立したRGBAフレームです。問題が生成、動画エンコード、対象プレーヤーのどこで起きたか調べる際の基準になります。
Web配信：WebM Alphaを検討する
透過キャラクター、エフェクト、マスコットを対応ブラウザやWebランタイムで再生するなら、WebM Alphaはよい出発点です。この例は1 MiB未満で、96枚を個別に転送・再生管理する必要もありません。
ただし「WebM対応」は、このVP8 Alphaの組み合わせへの対応を意味しません。MDNの動画コーデックガイドでは、SafariがVP8／VP9動画のAlphaに対応しないと説明されています。対象のブラウザ、OS、端末、WebView、プレーヤーで試してください。
実際に透明なPNGのposterまたはフォールバックも用意します。ブラウザが <video> を認識しても、Alphaのデコードや合成に失敗する可能性があります。独立した <img> を置き、動画を使えると確認した時点で切り替えると堅実です。Webページに透過キャラクターを置くガイドにはHTML、CSS、フォールバック、動きを減らす設定、サンプルがあります。
WebM Alphaが向く条件は、ダウンロードサイズが重要、実行時に個々のフレームを直接読む必要がない、対象ランタイムを決めて検証済み、不対応環境へPNGを出せることです。後で1枚ずつ細かく修正するなら、WebMを唯一のマスターにしないでください。
編集・合成：ProRes 4444を検討する
ProRes 4444はAlphaを必要とするモーショングラフィックス、合成、中間の交換を想定します。AppleのProResホワイトペーパーでは、ProRes 4444と4444 XQが4:4:4:4の画像ソースと最大16-bitのAlphaチャンネルに対応すると説明しています。
今回のデコード後のAlphaと可視RGBはWebMより元フレームに近い一方、4秒のMOVは19.12 MiBでWebMのおよそ24倍です。編集用マスターなら合理的でも、通常のWeb配信には大きすぎることが多いでしょう。
編集、合成、放送、モーショングラフィックスが次工程で、フレームのディレクトリより1本のタイムライン向け動画が便利で、容量より色とAlphaの忠実度を優先するなら候補になります。実際のソフトでProRes 4444のAlphaを確認してください。透過できるからといって大型マスターをそのままWebへ置かず、軽量な配信版を別に作ります。
フレーム制御とトラブルシューティング：RGBA PNG連番
PNG連番では各フレームが独立したRGBA画像です。直接検査し、問題のあるフレームだけを替えられます。全編を動画として再エンコードする必要はありません。PNGはW3CのPNG仕様で定義された可逆画像形式です。
少数のフレームを直したい美術作業、画素やマスクや矩形を直接読む独自ツール、将来WebM・ProRes・スプライトシート・エンジン用パッケージを生成する共通の元データ、透明度の不具合箇所の特定に特に向きます。
主な負担は管理です。96ファイルの順序を守り、FPSを別途保存し、容量と転送量も増えます。ZIPはダウンロードには便利ですが、エディターやエンジンは展開してフレームを理解する必要があります。
取り込み時はファイル名の並び、FPS、キャンバス、pivot、色処理、フィルタリング、straight Alphaとpremultiplied Alphaの解釈を確認します。元画素が正しくても不適切な設定で縁が汚れて見えます。
ゲームではスプライトシートやエンジン用パッケージも候補
2Dゲームの実行時には、時間・原点のメタデータ付きスプライトシートや、対象エンジン用のアセットパッケージの方が使いやすいことがあります。汎用性の一部と引き換えに、直接取り込みやすくなり、テクスチャ切り替えも減らせます。
この比較では3形式の入力フレームをすべて512 × 512に統一しました。別の公開エンジンサンプルは実行時向けの異なるパッキング設定を使うため、同じサイズグラフに「4本目」として入れていません。これは本検証の追加データではなく、別のワークフローです。
GodotならGodot 4への実際の取り込み検証を参照できます。公開パッケージ、96領域、再生時間、再現可能なプロジェクトを含みます。出力形式のドキュメントにはスプライトシート、Unity、Godot、Unreal Paper2D、Cocos CreatorとAPI上の形式名があります。
透過動画が黒く見えるのはなぜ？
黒い矩形だけでAlphaが失われたとは断定できません。
- 同じ書き出しのPNGフレームを明暗2背景へ置きます。
- PNGが透過するなら、そのコーデックとAlphaモードを明示的に扱えるデコーダーか合成ツールで動画を見ます。
- サーバーがWebMを
video/webm、ProRes MOVをvideo/quicktimeで返すか確認します。 - OSのサムネイルだけでなく実際の対象ブラウザやソフトで試します。
- すべて不透明なら元画像のAlphaと透過書き出し設定へ戻ります。
透明な縁は複数の背景に適応するはずです。髪、発光、ブラー、影、キー色に近い色は、四隅の空白より慎重に検査します。透過形式の互換性と透過書き出しのトラブルシューティングも参照してください。
堅実な書き出し方針
- 動きを生成し、使える範囲まで切ります。
- まずPNGフレームを書き出し、代表的なフレームを複数の背景で確認します。
- チームの工程に合わせ、PNG連番またはProRes 4444を制作元として残します。
- Web向けならWebM Alphaを作り、対象ブラウザで実測します。
- リアルタイムゲーム向けならスプライトシートかエンジン用パッケージを作ります。
- FPS、順番、キャンバスサイズ、pivotを素材と一緒に保存します。
AnimGenの無料PNGフレーム書き出しでまず結果を確かめてから、本番用形式を購入するか判断できます。WebM Alpha、ProRes 4444、スプライトのメタデータ、エンジン用パッケージ、商用利用権は現在の有料プランまたはCredit Packの権限に従います。記事中の固定価格ではなく現在の書き出しと商用利用の条件を確認してください。
透過PNGのキャラクターがあれば透過アニメーションの制作フローから動きを作り、次のツールの実際の要件に合わせて形式を選べます。強そうな仕様名ではなく、検証・編集・納品できる形式を優先しましょう。