Lottieプレビュー & オプティマイザー

Lottieアニメーションのプレビュー、SVGのコピー/ダウンロード、JSONの最適化、リアルタイム編集をローカルで実行。

Lottie JSONファイルをここにドラッグ&ドロップするか、クリックしてアップロード

*.json (Lottie format)

Lottieアニメーションのプレビューと最適化方法

1

LottieのJSONファイルをアップロードまたはドラッグして、インタラクティブプレーヤーでプレビューを読み込みます。

2

「レイヤーとアセット」タブを使用して、アニメーション内のテキスト要素を変更したり、画像レイヤーを置き換えたりします。

3

「診断と圧縮」タブに移動し、座標の浮動小数点の精度を設定し、不要なメタデータの削除オプションを有効にしてファイルを圧縮します。

4

「JSONエクスポート」をクリックして最適化されたLottieファイルを保存するか、現在のフレームのSVGコードをコピーしてFigmaで使用します。

Lottieツールに関するよくある質問

Lottieの最適化により、どのようにファイルサイズが削減されますか?
Lottie JSONファイルには、座標やキーフレーム曲線の浮動小数点精度が過剰に格納されていることがよくあります。精度を小数点以下1〜2桁に制限し、不要な作成メタデータを削除することで、見た目に影響を与えることなくファイルサイズを30%〜70%削減できます。
After EffectsなしでLottieのテキストレイヤーを編集できますか?
はい。エディタが編集可能なテキストレイヤーを解析します。ブラウザで直接テキストの変更、翻訳、埋め込み画像の置き換えを行い、変更を即座にプレビューできます。
コピーしたSVGコードをFigmaでどのように使用しますか?
「SVGコードをコピー」をクリックすると現在のフレームがキャプチャされます。Figmaに直接貼り付ける(Cmd+V / Ctrl+V)と、対応するベクトルレイヤーとグループが自動的に生成されます。

🔗 関連ツール