こんにちは！クリエイターのMです。
先日After Effectsでアニメーションを作成したのですが、Webサイトに実装するとなると考慮する点が多く混乱しました。。。
書き出し形式ごとに特徴も異なっており、最適な書き出し形式を選択することが難しいなと感じたので、同じように悩んでいる方の参考になればと思いこちらの記事を書いています。
アニメーションの書き出し形式はGIF、APNG、MP4、WebPなどたくさんありますが、今回はLottieアニメーションについて書いていこうと思います！
Lottieとは？
Lottieは、Airbnbという会社がつくったAndroid、iOS、Web、Windows用アニメーションライブラリです。
拡張プラグイン「Bodymovin」を使用することで、After Effectsで作成したアニメーションをJSONファイルで出力することができ、モバイル・Web上でアニメーションを表示することができます。
アニメーションの書き出しにはプラグインの「Bodymovin」が必ず必要です。
インストール方法についてはまた別の記事で書いていきます。
Lottieを使うメリット
Lottieを使うメリットは主に以下3点です。
- SVGアニメーションなので高い解像度を保ったまま拡大縮小ができる。
- MOVファイルやGIFアニメーションに比べてファイルサイズが圧倒的に軽い
- JavaScriptで再生のタイミングや逆再生などの制御ができる
Webサイトへの実装では、主に「ファイルサイズが軽いこと」と「綺麗に表示できること」の2点を考えるのが良いと思います。
Lottieは上記2点をクリアしている点で、積極的に使いたい書き出し形式だと言えそうです。
Lottieにはサポートされていない表現がある
お伝えしてきたように、Lottieを使用すると、After Effectsで作成したアニメーションの実装が手軽にでき、ファイルサイズも軽量で良いことが多いのですが、調べてみると出力できる表現に制限があることがわかりました。
以下、対応できる表現と未対応の表現をまとめてみたので参考にしてみてください。
「対応可能な表現」
- 単色で構成されたオブジェクト
- パスのトリミング
- 不透明度、スケール、回転など、基本的なアニメーション
- 背景透過
「未対応な表現」
- グラデーション（塗り・線）
- 複雑なエフェクト
- リッチな画像効果
- 3D表現
- マスク
- BGMなど音をつけること
また、After EffectsでそのままAiファイルを読み込んでしまうと、エラー表示となってしまうので、必ずシェイプレイヤーに変換しておきましょう。
表示するプラットフォームによっても対応が異なるようなので、使いたいアニメーション機能がLottieでサポートされているかは、以下公式ドキュメントをご確認ください。
https://airbnb.io/lottie/#/supported-features
プレビューできるか確認
After Effectsでアニメーションを作成し、Bodymovinを使ってJSONファイルで書き出しを行います。
書き出したら、エンジニアに共有する前にJSONファイルに問題がないか確認してみましょう。
こちらにJSONファイルをドラッグアンドドロップすると、プレビューすることができます。
書き出しが上手くいっていない場合は表示されないので、書き出し方法を見直してみたり、そもそも未対応な表現を使用していないか、再確認してみてください。
https://lottiefiles.com/share/5cxgfpzo
上記は私が作成したアニメーションをプレビューしている様子です。
JSONファイルに問題がなければ、このように正常に動いてくれます。
まとめ
Lottieアニメーションについて簡単にご紹介しました。
Webサイトに実装する際の書き出し形式の選択肢はたくさんありますが、その１つにLottieを知っておくととても便利です。
Lottieでできないこともあるので、あらかじめ特性を理解したうえで、他の書き出し形式と取捨選択できるようになるといいですね。
