こんにちは、Webマーケティングチームの髙橋です。
 
以前の記事で佐山が動画制作について触れていましたが、今回はAfter Effectsを使ってアニメーションを作成し、それをWebサイトに実装するためのツールである「Lottie」についてご紹介します。
 
Lottieとは
 
Lottieは、ベクター画像をアニメーションさせることができるファイルフォーマットです。拡張子は.jsonまたは.lottieとなり、ファイルの中身はオブジェクトとアニメーションのデータが格納されたテキストファイルです。
 
Webサイトへの実装手順は以下の通りです。
 
1. After Effectsのエクステンション「Bodymovin」をインストールする
Bodymovin – After Effectsで作成したアニメーションをJSON形式で出力するプラグイン
2. After Effectsでアニメーションを作成
3. Bodymovinを使ってjsonファイルを書き出し
4. Webへ実装するためにlottie-webをnpmでインストールまたは、CDNで読み込ませる
5. html・JavaScriptでアニメーションを呼び出す記述を行う
 
以上が、Lottieを使ってWebサイトにアニメーションを実装する手順です。やってみると意外と簡単で、スムーズに実装できます。
 
メリット
 
1. ファイルサイズが小さい
2. 拡大縮小可能
ベクターベースのため、解像度を気にすることなく拡大縮小できる。
3. マルチプラットフォームをサポートしている
iOS、Android、Web、React Nativeで使用可能
4. アニメーションのトリガー設定が可能
クリック、ホバーに反応するアニメーションを作成することができる。
 
デメリット
 
1. After Effectsで作成する必要がある
2. エフェクトや複雑な画面効果は使用不可
 
After Effectsが使用できることが前提にはなりますが、作成すれば実装までのコストは非常に低くなっていると感じます。ローディング画面や、Webサイト内のアイコンなど利用シーンは多いと思うのでぜひご活用ください。
 
また、弊社LP内のアニメーション動画もAfter Effectsを使って作成しています。こちらもぜひ見ていただけると幸いです。
 
 

信頼と実績のサポート力で、収益化までしっかり伴走します！