はじめに
突然ですが、lottie ってご存知ですか？
lottie は、Webサイトやアプリでアニメーションを表示するためのファイル形式です。
GIFよりも軽いのに、綺麗な画質でアニメーションを表示させることが出来ます！
今までは、AfterEffects でアニメーションを作成し、その後に Bodymovin というプラグインを使って lottie ファイルを作成していましたが、最近では、LottieLab や Lottie Creator といったツールを使って、簡単に lottie ファイルを作成することが出来るようになりました!
そこで今回は簡単なアニメーションを作成してみて、LottieLab と Lottie Creator を比べてみたいと思います！
LottieLab
LottieLab は LottieLab社が開発した、Web上で動作する lottie ファイルを作成するためのツールです。
AfterEffects と比べて、lottieファイルの作成するのに特化しているため、シンプルな画面で操作が出来ます。
よくあるデザインツールのような操作画面で、普段からデザインツールを使っている人には直感的に操作が出来ると思います。
実際にちょこっと使ってみた感想
特に調べたりする必要なく、アニメーションを作成することが出来ました。
横幅などのプロパティの入力なども、Figma ライクで操作しやすかったです。
また、Figma と連携するプラグインもあるため、Figma上の要素をそのまま LottieLab に持ってくることが出来るので、デザインからアニメーションまで一貫して作成することが出来ました！
ちなみに、lottie自体のFigmaのプラグインもあるため、Figma上でアニメーションを作成することも出来ます！
Lottie Creator
対して、Lottie Creator は LottieFiles社が開発した、lottie ファイルを作成するためのツールです。
つまり公式ツールです！（のはず）
こちらは、LottieLab と比べて、AfterEffects のような操作画面になっています。
lottieファイルは、AfterEffects で作成したものを Bodymovin というプラグインを使って変換する必要があるためAfterEffects を使わずに、Lottie Creator を使う方が使い勝手が良いかもです。。。
実際にちょこっと使ってみた感想
少し見辛いですが、Lottie Creator と比べるとちょっと操作にクセがあるかなと感じました。
というか前述の通り、めちゃくちゃAfterEffects っぽいです。
1つのアニメーション毎にピンを打っていく感じがまさにそうで、より細かい操作ができる分凝ったアニメーションを作成することが出来るかなと思います。
まとめ
LottieLab と Lottie Creator は、どちらも lottie ファイルを作成するためのツールですが、個人的な感想ではありますが、LottieLabはより簡易的なアニメーション、Lottie Creatorはより凝った演出のアニメーションを作成するためのツールという印象を受けました。
なので、ボタンのホバーやちょっとしたワンポイントのアニメーションがLottieLab、メインビジュアルに使うようなものや、ロゴアニメーションなどがLottie Creator という使い分けが良いかなと思いました。
両方に言えるのは、チュートリアルがしっかりしています。
- LottieLab
- Lottie Creator
動画での解説なので、実際の操作している様子が見れるので、初めて使う人にも分かりやすいと思います！
今後それぞれのツールがどのように残っていくのかわからないですが、現状は用途によって使い分けると良いかなと思います！
Discussion