ブログ
BLOG
Lottieアニメーションとは？
JSONベースのアニメーションデータで、どのプラットフォームでもアニメーションを簡単に実装することができます。
データプロでは主にWebサイトにアニメーションを組み込む際に使用しています。
今までのアニメーションに比べ、軽いデータで簡単に組み込めることができるのが特長です。
Lottieアニメーションのメリット
容量が軽い
アニメーションでは動画やGIFファイルに比べて容量が軽いことです。
特にアニメーションを複数箇所に設置したいというときにLottieアニメーションの強みがより発揮されます。
専門的な知識が無くてもアニメーションを作成できる
アニメーションの制作がAfterEffectsで完結するため、コーディングの知識がない人もアニメーションを製作することができます。
そのことにより、デザイナーとコーダーでアニメーションの完成イメージが違ってすり合わせに時間がかかったり、アニメーションの指示を出す手間が省けたりします。
コミュニケーションコストなども含め作業時間を全体的に短縮することができます！
アニメーションのカスタマイズが簡単にできる
LottieアニメーションはJSONで書き出されるので、再生のタイミングやループの有無、逆再生、スピードの変更などを変えたいときに、それ用のアニメーションを毎度製作する必要はなく、JS側で簡単に変更することができます。
同じアニメーションデータを使いまわすことができるので、複数アニメーションを使う場合でも容量が増えにくくなります。
Lottieアニメーションのデメリット
アニメーションはAdobeのAfterEffectsで制作して書き出しているのですが、それをWebサイトに組み込む際、実現できるアニメーションとできないアニメーションがあります。
再現できるアニメーション
- パスの変形
- 画像やパスの移動・不透明度の変更・サイズ変更
- 色の変更 など
再現できないアニメーション
- 差の絶対値や比較（明）などのブレンドモード機能
- ドロップシャドウや光彩などのレイヤースタイルの機能 など
主にこの2種類が使えるようになったら、よりアニメーションの幅が広がったり、クオリティが上がったりすると思います。
これからに期待ですね！
Lottieを使用している実績案件
まるき運送有限会社 様
サイトを読み込んだ際のローディングアニメーションで使用しています。
まとめ
Lottieアニメーションを使うことで今までよりコストの削減になったり、表現力の幅が広がります。
他のWebサイトと差別化やオリジナリティを出すのにとても優秀なツールなので、ぜひ使ってみてください！
データプロでは皆さまの情報をオンライン上で多くの方々に届け、活動を広げるお手伝いをさせていただきます。
ご質問やご相談がございましたら、お気軽にお問い合わせください。
