Lottie認定エキスパートを取得！インタラクティブアニメーションの可能性と実践方法とは？
- 4月4日
- 読了時間: 9分
更新日：4月8日
2026年4月3日、Lottie認定エキスパートの審査に通過し、無事Lottie認定クリエイターに合格しました！✨
今回はLottie Creator Certification（Lottieクリエイター認定）コースを実際に受講してみた感想や、Lottie認定エキスパートの審査に提出したアニメーションをご紹介します。
そもそも、Lottieアニメーションとは？
Lottieアニメーションは、Airbnbのエンジニアが開発したJSON形式のアニメーションファイルです。
従来、アニメーションやモーショングラフィックスは、AftefEffectsを使って作成し、mp4もしくはGIF形式で書き出すことがほとんどした。
そのため、書き出したファイル容量が重くてWEBサイトに導入しづらかったり、GIFにするとガビガビになってしまう…といった懸念点があったのですが、LottieアニメーションはJSON形式で書き出しができるため、従来のmp4・GIFと比較して圧倒的に軽量化されたアニメーションを作成できるようになりました。
ベクター形式のグラフィックのため、サイズの拡大縮小がしやすく、拡大しても画質が荒れることない滑らかなアニメーションを手軽に実装できます。
実際のLottieアニメーション一例はこちら↓
このアニメーションはGIF形式で書き出すと2MBでしたが、LottieJson形式で書き出せば500KB、最新版のdotLottie形式であれば26KBまでサイズを軽量化できます。
私は普段Riveを使ったインタラクティブアニメーションを仕事で制作することが多いのですが、ちょうど今年からLottieの有料プランをサブスクし、Lottieプレミアムアセットからアニメーション素材を使うようになりました。
🔗Lottieの有料プラン
アニメーションの調整とインタラクション設定はRiveで行いますが、RiveとLottieは互換性があるため、Lottieでエフェクト系のアニメーション素材（きらきら、煙など）をLottieJson形式でダウンロードし、Riveにインストールして実装するというプロセスが定着化しつつあります。
AfterEffectsからLottieへの変換も可能
以前こちらの記事でもご紹介しましたが、AfterEffectsで作成したアニメーションを、プラグインを使ってLottieファイルに変換することも可能です。
Lottie Creator Certification（Lottieクリエイター認定）コースとは？
Lottieでは、無料で受講できるオンラインの学習コースが多数用意されています。
今年の3月26日に、Lotteiのコミュニティーパーソンから、新しいコース「Lottei Creator Certification」が追加されたと知らせをうけ、これを機にLottieだけを使ったインタラクティブアニメーションの制作に挑戦してみようと思い、受講を決めました。 コースの概要としては、
”アニメーションの作成からステートマシンの構築、モーショントークンを使ったアニメーションと実データの連携、そして開発者への適切な引き渡し方法まで、幅広く学ぶ”
という学習内容になっており、Lottieクリエイターと呼ばれるLottie独自のブラウザベースアニメーションツールのほか、ステートマシーンやモーショントークン、AI（モーションコパイロット）を使ったアニメーション制作を網羅しており、はじめてLottieを使ったアニメーションに挑戦するのにぴったりな構成だと思います。
実際の学習内容と構成
コースは全部で12レッスン、45分の構成になっています。
各レッスンはおおよそ5分以内のマイクロラーニングの学習設計のため、週末に集中して取り組むことも、毎日2～3レッスンずつ進めることも可能です。
実際にレッスン内で作成したアニメーションの1つがこちら👇
Lottieの編集画面に標準実装されているプラグイン、Physics Simulator（物理演算シミュレーター）についても学びました。
こういったリアルな物理法則を再現するアニメーションは、一から作るとかなり大変なので、便利な機能で面白かったです。
コース修了までにどのくらいの日数がかかったのか？
一応45分というコース内容になっていますが、途中で作るアニメーションのブラッシュアップや、最後に提出するオリジナルアニメーションの課題制作に時間がかかったので、10～15時間ほどかかったと思います。
私はセクションごとに進めていたので、初日に最初の2セクション、数日おいて残りのセクションを一気に進め、週末に認定クリエイター審査提出用の作品づくりに集中しました。
途中グラフィックデザインの準備など早送りで紹介されたレッスンもあったので、進めながら似たようなグラフィック素材をストックサイトから入手して進めた方が早いと思います。
Lottieアニメーションとモーショントークン
学習コース後半でも触れられますが、Lottieは今年の3月、モーショントークンという新機能を発表しています。
Motion Tokens : Lottie Files Website https://lottiefiles.com/motion-tokens
アニメーションの値（サイズや透明度、色など）をトークンとして設定し、JavaScriptなどを使った開発環境でデータを管理・更新ができるようになったのです。
これにより、数値や色を変更するのに毎度アニメーション編集画面に戻る必要がなくなり、コントロールがしやすいインタラクティブアニメーションを作成できるようになりました。
Webサイトはもちろん、iOS、Androidアプリにも対応しているため、APIを使ったリアルタイムな天気情報を反映するアニメーションなども実装できます。
こういった開発環境側との連携やウェブサイト・アプリでの実装を見据えたアニメーション制作は、AfterEffects単体ではできないため、Lottie Creatorを使って、アニメーション・変数の設定やチーム内でのレビューが一括でできる点は非常に便利だなと感じました。
最終課題：Lottie認定エキスパートクリエイター審査に提出するアニメーション制作
最後のレッスンでは、最終課題としてオリジナルのインタラクティブアニメーションの制作と提出が求められます。
制作したアニメーションを公開して提出することで、Lottie認定エキスパートの審査・選考に応募が可能です。
Lottie認定エキスパートに合格するためのアニメーション条件
Lottie認定エキスパートに合格するためには、提出するアニメーションが以下のすべてを満たしている必要があります。
①インタラクティブ性（ステートマシーン）
少なくとも1つのステートマシンが完全に構築されていること
デフォルト状態を除き、最低2つ以上のインタラクティブな状態があること
ホバーやクリックなどの明確なトリガーが設定されていること
状態間の遷移がスムーズにアニメーションされていること
また、インタラクションはたたの「装飾」ではなく、意味のあるものである必要があります。
②アニメーションの品質
タイミングやイージングが適切にコントロールされていること
モーションの軌道や空間的な動きが意図的に設計されていること
レイヤー構造や命名が整理されていること
不自然な動きや途切れた遷移がないこと
状態間の流れが論理的であること
最低条件として、「実際のプロダクトに使えるレベル」であることが求められます。
上記の条件を満たしたアニメーションを制作し、LottieFiles上に指定された形式で公開・審査フォームに記載して提出することで、課題の提出と応募が完了します。
課題制作で苦労したこと
個人的にこの最終課題で苦労した点は、「実際のプロダクトに使えるレベル」という基準と、モーショントークンを実際にプレビューできる状態にすることでした。
LottieFilesではループアニメーションのアセットが多いのですが、今回は実案件を想定したインタラクティブアニメーションを作るにあたり、「おにぎりを自分好みにカスタマイズして注文するまでの、デジタルメニュー」というコンセプトで作ることにしました。
ちょうど数日前にマックの店舗でデジタルメニューを操作しながら注文した経験から発想を得ています。笑
実際に提出したアニメーションはこちら。
全体の流れが自然に遷移するよう、ループアニメーションにしつつ、今回受講したコースで学んだモーショントークンとステートマシーンを存分にいかせるよう、少し長めのタイムラインで作成しました。
ステートマシーンで番号を設定し、クリックの回数（＝変数の番号）に応じておにぎりの具やトッピングが変わるインタラクションになっています。
ソースファイルはLottieで無料公開しており、こちらからご覧いただけます👇
Lottieのモーショントークンでつくる、開発側との連携も見据えた拡張性のあるアニメーション
モーショントークンでおにぎりのベースが変化するようになっており、白米・焼きおにぎり・ケチャップライスのバリエーションを用意しました。
私はプログラミングはできないので、チュートリアルで紹介されていたCodePenやJSでの実装方法が分からず、このモーショントークンをどうやってプレビューできるのか見つけるのに時間がかかりました。
恐らくレッスン内では言及がなかったと思うのですが、最終的には下記のLottieプレビュー画面で「モーショントークン」というボタンがあり、こちらをONにすることで、Lottieファイル上でモーショントークンの確認と編集ができることに気が付きました…。
なお、実際の編集画面・Lottie Creator上では、このような表でモーショントークンが表示されるので、慣れると使いやすく、一覧でも見やすいので管理がしやすいなと感じました。
Lottie認定エキスパート審査提出から合格するまで
コース内には、課題提出後「3営業日以内」を目安にLottieチームが審査・結果が通知されると記載がありましたが、実際には提出してから数時間以内に合格通知がメールで届きました！
メールには登録したクリエイター名が記載されたアニメーションと静止画の認定画像が添付されており、LottieのプロフィールにもLottie認定エキスパートクリエイターのバッジが追加されていました。
途中テキストが上手く表示されなかったり、前述のモーショントークンの確認方法が分からず手こずりましたが、何とか条件であった「プロダクションレベル」の品質を満たして合格できたことにほっとしています。
これからは触って動かせるインタラクティブアニメーションの実装が主流になる？
今回のLottie Creatorをはじめ、RiveやSplineなど、ユーザーの動きや操作に応じてアニメーションが変化する「インタラクティブアニメーション」の需要は、近年ますます高まってきています。
ウェブサイトやアプリにこうしたリッチなインタラクティブアニメーションを取り入れることで、触って動かせる楽しさや、心地よいユーザー体験を提供することができます。
そのためには、アニメーション制作の知識だけでなく、開発側との連携を前提とした実装を見据えたデータ設計が求められていると感じています。
日々新しいツールや機能が登場し、そのスピードや技術の進化には驚かされるばかりですが、今持っているスキルをさらに拡張し、より良いデザインを提供できるよう取り組んでいきたいと考えています。
今後もLITTLE FUJIでは、柔軟な発想と新しいことに挑戦するフットワークの軽さを活かし、幅広いクリエイティブ制作に挑戦していきます！
軽量なインタラクティブアニメーションが作れる！Lottieアニメーションはこちらから👇
LITTLE FUJI Design Studioでは、海外在住の日本人デザイナーがLottieやRiveを使ったインタラクティブアニメーション、Wixウェブサイトデザインのご依頼を承っております。
お問い合わせページからお気軽にご相談ください✉
コメント