Lottie Animation
ロッティー
どんな動き？
Adobe After Effectsで制作したベクターアニメーションを、Bodymovinプラグインを使ってJSON形式に書き出し、lottie-webなどのライブラリでWeb上に再生する技術。軽量なファイルサイズで滑らかな「ぬるぬる動く」アイコンやイラストを実現でき、チェックマークやローディング、オンボーディング画面のマイクロインタラクションとして広く使われている。
よく使う場所
成功メッセージオンボーディングローディングマイクロインタラクションアイコンアニメーション
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Play a small vector micro-interaction: a circle strokes in, a checkmark bounces into place, and small dots burst outward around it.Trigger:
On load, or when the element enters the viewport (Intersection Observer).
Initial state:
Circle stroke undrawn, checkmark hidden, dots collapsed at center and invisible.
Animation:
The circle's stroke draws itself in first; once complete, the checkmark draws in with a bouncy scale overshoot; small dots then burst outward from the center and fade out.
Final state:
Circle fully drawn, checkmark visible at full scale, dots faded out.
Timing:
duration: 1–1.2s total
easing: ease-out with an overshoot on the checkmark
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
lottie-webdotLottieLottieFiles
別名・関連ワード
LottieBodymovin AnimationAE Vector Animation