背景透過アニメーションをAEで作成したが、形式に試行錯誤したため覚書として。
結論
複雑な形状の透過や半透明の表現が必要な場合、高画質を維持したい場合は
WebM形式が良い。
理由:
HTML5との親和性: 近年の主要なウェブブラウザはWebM形式を標準でサポートしています。<video>タグを使って容易に埋め込むことができ、JavaScriptとの連携もスムーズに行えます。
アルファチャンネルによる自由な透過: WebMはアルファチャンネルをサポートしているため、アニメーションの形状に合わせてピクセル単位で透明度を設定できます。これにより、アニメーションの周囲に不要な背景色が残らず、ウェブサイトのデザインに自然に溶け込ませることができます。
高画質と高圧縮: WebMは比較的高画質を維持しながら、ファイルサイズを小さくすることができます。ウェブサイトの表示速度は非常に重要ですので、ファイルサイズが小さいことは大きなメリットになります。
────────────────────
※SUZ様カサネオのECサイト TOPページのアニメーションでは、
Webm形式だとandroidでは半透明の箇所が黒っぽい色になったり、iphoneでは背景が黒になってしまったため
PCはWebm、safari/spはapng形式とした。
────────────────────
APNGは、アニメーションGIFと同様に、背景透過をサポートする画像形式です。
APNGの特徴
- メリット:
- 24ビットカラーをサポートしており、アニメーションGIFよりも豊かな色表現が可能です。
- アルファチャンネルをサポートしており、半透明の表現も可能です。
- 主要なブラウザでサポートされています。
- デメリット:
- アニメーションGIFに比べて、ファイルサイズが大きくなる傾向があります。
- 古いブラウザではサポートされていない場合があります。
ウェブサイトでの利用について
APNGは、ウェブサイトで背景透過されたアニメーションを表示するのに適した形式の一つです。WebM形式と比較すると、以下の点が異なります。
- ファイルサイズ: 一般的に、APNGはWebMよりもファイルサイズが大きくなる傾向があります。
- 圧縮効率: WebMは、APNGよりも高い圧縮効率を実現できます。
- 動画形式: WebMは動画形式であり、
<video>タグで埋め込む必要があります。APNGは画像形式であり、<img>タグで埋め込むことができます。
どちらを選ぶべきか？
- 画質を重視し、ファイルサイズが多少大きくても許容できる場合: APNG
- ファイルサイズを極力小さくしたい場合: WebM
まとめ
APNGは、WebMと同様に、背景透過されたアニメーションをウェブサイトで表示するのに適した形式です。ただし、ファイルサイズが大きくなる傾向があるため、ウェブサイトの表示速度を考慮すると、WebM形式の方が推奨される場合があります。
AEからの書き出し方法
AEで作成したアニメーションを書き出す場合、MP4で書き出すことが多い。
高品質でファイルサイズが軽く、WindowsやMac OSを問わず、さまざまなデバイスで再生可能なため。
ただしアルファチャンネルをサポートしていないので、透過動画は書き出し不可。
AEで書き出せる背景透過可能な形式は以下。
・AVI
Windows環境で広く使われ、互換性も高く、様々なコーデックに対応できる柔軟性を持つ動画ファイル形式。
ただ、ファイル容量が大きくなりがち。
・MOV
Mac OSの標準形式。Windowsで再生できない場合があります。Windows Media Player12以降で再生可能。
ファイルサイズが大きくなる傾向があります 。
■gif
上記形式で書き出したデータを、Photoshopでgif形式へ変換。
さまざまなデバイスで再生可能だが、ファイルサイズが大きく、画像がガジガジになったりと品質が良くない。
■Webm、Apng
書き出したAVIファイルを、オンラインコンバータで変換。
例）
アニメ画像に変換する君
https://ics.media/entry/12746/