Lottielabでアニメーション制作はじめてみませんか？

2024年12月23日に投稿された記事です。

こんにちは。dotD デザイナーの渡邉です。
Advent Calendar 2024 の23日目を担当します。

今回は、最近導入した「Lottielab」というツールをご紹介します。アニメーション制作のハードルを下げる画期的なツールですので、ぜひ参考にしてみてください。

1. Lottielabとは

みなさんは「Lottie」をご存知ですか？
最近ではWebサイトやアプリで頻繁に使われており、見たことがある方も多いと思います。

Lottieの特徴

JSONベースのアニメーションファイル形式
ファイルサイズが小さく、表示が高速
ベクターベースのため、拡大縮小しても画質が劣化しない

活用シーン

Webサイトのローディングアニメーション
UIのインタラクション
イラストアニメーション
ロゴアニメーション

軽量で見た目にも美しいLottieは、サービスやプロダクトのコンセプトを伝えるのに最適です。

2. Lottielabについて

これまで、Lottieアニメーションを制作するにはAfter Effectsなどのツールが必要で、専門スキルや学習時間が求められました。
私自身もAfter Effectsに挑戦したものの、操作性の違いに戸惑い、挫折した経験があります。。

そこで「Lottielab」です。Lottielabはブラウザ上で動作するエディターで、アニメーション制作のハードルを大幅に下げてくれるツールです。

Lottielabの特徴

直感的で操作しやすいUI
操作エリアが広く、次に何をするべきかが明確。初心者にも優しいデザインです。
調整が簡単
パラメーターやEasingの設定が分かりやすく、簡単な操作で滑らかなアニメーションが作れます。
Figmaとの連携がスムーズ
プラグインを使用すれば、Figmaのデザインを簡単にインポート可能。後からパーツを追加することもできます。
効率的なアニメーション作成
シンプルなアイコンアニメーションやボタンのインタラクションを、素早く手軽に制作できます。

まずは公式のチュートリアルを見ることをおすすめします。動画編集ソフトを触ったことがない方でも、イメージがつかみやすい内容です。

3. アニメーション作成の実例

今回は、弊社サービス「dotHatch 事業創造スターターキット」のイラストにアニメーションを付けてみました。

制作の流れ

1.Figmaからのインポート
Lottielabのプラグインを使用し、Figmaのデザインをストレスなくインポート。デザインが崩れる心配もなく、簡単に作業が始められます。

パーツの多いイラストも一発でインポートできます。
グループ化と名前付けをしておくとLottielab側で編集しやすいです

2.アニメーションの設定
基本的な操作は以下の通り：

アニメーションを付けたいオブジェクトを選択
タイムライン上でキーフレームを作成
アニメーション後の状態を設定
イージングを適用し、滑らかな動きを追加
リアルタイムプレビュー機能で、調整もスムーズです。

イージングの設定

⚡️Interactivity
インタラクティブを設定することもでき、ホバーやクリックをトリガーにアニメーションさせることもできるのでプロトタイプなどにも使えそうです。（公式ドキュメント）

3.作成したアニメーションの書き出し

エクスポート形式の選択
Lottielabでは、作成したアニメーションをLottie形式（JSONファイル）でエクスポートできます。
必要に応じてGIFやMP4形式でも書き出し可能です。
エクスポートオプションの設定
書き出す際に、以下のオプションを設定できます：
- アニメーションのループ有無
- 背景の透過設定
- ファイルサイズの最適化
書き出し後の利用方法
エクスポートしたLottieファイルは、Webサイトやアプリに簡単に組み込むことができ、Lottieライブラリ（Lottie WebやLottie iOS/Android）を使用すれば、エンジニアとの連携もスムーズです。

4. まとめ

Lottielabのような直感的に操作できるツールは、学習のハードルを下げ、新たなアイデアを引き出してくれます。何か新しいことを始めるとき、まず「楽しい！」という感覚を見つけられると、どんどん吸収していける気がします。
私たちのdotHatchも、そんなワクワクを引き出すサービスを目指して日々取り組んでいます。

これまでアニメーション制作に躊躇していた方も、ぜひチャレンジしてみてくださいね。きっと新しい発見があるはずです！