カヤック意匠部の青木と申します。
自社事業や受託案件でアプリやWebサービスのUIデザインをしています。
最近、Lottieでアニメーションをつくる機会が多く、ツールの知見を得たのでシェアします。結論を先に書くと『ANINIXという制作ツールがオススメ』です。
まず、前提としてLottieというアニメーション形式を簡単に紹介します。
# Lottieとは
↑サンプル。これが動画でもgifでもなく、Lottieです。
LottieはAirbnb社が開発したアニメーションの仕組みです。
JSONファイルで書き出し、Webやアプリにアニメーションを設置できます。
公式サイト
以下のような特徴があります。
- gifでも動画でもエンジニアに動かしてもらうでもでない、アニメーションの実現手段
- LottieはSVGを使用しているので、拡大縮小に強い
- ファイルサイズが軽い
- 発展途上段階（最近のアップデートで画像を組み込めるようになった気がしますが公式リリースは未確認です）
これまでアニメーション実装はとても手間のかかる仕事でした。
- デザイナーがAfter Effects等でアニメーションのサンプルを作成
- デザイナーが素材を切り出し
- エンジニアがサンプルを元に動きを再現
- 両者で調整を繰り返し行う
- やっとこさ完成
↑これがLottieを導入することで劇的に改善します。
- デザイナーがアニメーションを作成し、JSONファイルで書き出し
- エンジニアが組み込んで完成
素材の切り出しやリネームに時間を割いたり、理想の動きに近づけるため何度も調整をしたり、工数がハマらないからアニメーションを断念し涙する、、、そんなことはもうありません。
Lottieって最高ですね。
# どうつくるか
Lottieに関するブログのほとんどがAfter Effectsで制作することを勧めています。王道の作成方法ではありますが『ちょっと動きをつける』のにAfter Effectsはややオーバーパワーと感じます。近所の自販機に行きたいだけなのに、わざわざ旅客機をチャーターするような感覚があります。
また、ショートカットを思い出したり、操作方法をググったりしながら涙目で作業するデザイナーは恐らく私だけではないでしょう。
そこでANINIXをお勧めします。以下の特徴があります。
- Lottie制作に特化したWebアプリケーション
- Figmaと親和性が高く、素材のやりとりがスムーズ
- FigmaのUIに寄せられているため、直感的に作業が可能
- 2作品まで無料利用可
公式サイト
Figmaプラグイン
実際のワークフローはこのような流れです。
- ユーザー登録とFigmaアカウント連携を済ませておく
- Figmaで素材を準備
- プラグインで素材をアップロード
- ANINIX側で動きをつける
- ANINIXでJSONにexport
以上です。シンプルですね。
# 結び
先日Lottielabというサービスがリリースされました。
こちらもANINIXのようにブラウザ上で動作するアニメーションツールです。
まだ使い込んでいませんが、こちらも使いやすそうなツールのようです。
ただし、まだANINIXの方ができることが多いため、今のところ乗り換える予定はありません。
また、After Effectsに精通したアニメーターにLottieを発注した際は、複雑な動きを実現していました。
やはりAfter Effectsも並行して使っていくのが良いかもしれませんね。
ANINIXは非常にとっつき易いので、アニメーションを活用したい方は是非お試しください。
それではみなさま、よきLottieライフを！
