Lottie のプレイヤー・配色エディター・最適化ツール、すべてローカルで
.lottie・.tgs・.json のアニメーションを開き、塗り・線・グラデーションの各ストップを配色し直し、他のプレイヤーで壊れる箇所を確認して、JSON・SVG・PNG・連番画像・WebM に書き出せます。すべてブラウザ内で完結します。
アニメーションを開くと構造が表示されます。
使い方
ファイルをドロップ
素の .json、.lottie アーカイブ、Telegram の .tgs ステッカー、圧縮された .json.gz。どこにもアップロードされません。
レポートを読む
描画を始める前に、サイズ、レイヤー数、そして iOS・Android・古いプレイヤーで壊れる箇所の一覧が手に入ります。
色を変えて切り詰める
塗り、線、グラデーションのストップ、色のキーフレームがそれぞれスウォッチになります。レイヤーを隠し、範囲を切り詰め、fps を上書きできます。
書き出す、または次へ
JSON、.lottie、SVG、PNG、連番の画像シーケンス、WebM 動画。あるいは結果をそのまま別のツールへ送れます。
何ひとつ端末の外へ出ない
プレイヤーも、配色エディターも、最適化も、すべての書き出しも自分の CPU で動きます。アップロードもアカウントも順番待ちもなく、ネットワークを抜いたままでも動き続けます。
他のビューアーが見落とす色まで
多くのオンラインビューアーは静的な塗りしか見つけません。このツールは線、グラデーションのストップ、平面レイヤー、アニメーションする色のキーフレームまで拾い、各色が何回使われているかも示します。
本物のレイヤーツリー
トップレベルの各レイヤーを種類・エクスプレッション・トラックマットとともに一覧し、要らないものを隠すスイッチも付いています。隠したレイヤーは書き出し時に削除できます。
計算を見せる最適化
書き出し時に 15 桁で書かれた座標を丸め、作者のメタデータを外し、非表示レイヤーを削除するだけで、ファイルはたいてい半分になります。約束ではなく、前後のバイト数が表示されます。
画像と動画の書き出し
現在のフレームを PNG か SVG で、範囲全体を ZIP 内の連番 PNG で、あるいはフレーム単位で正確な WebM 動画で。すべてこのタブ内の canvas で描画します。
互換性レポート
エクスプレッション、パスの結合、レイヤーエフェクト、テキストレイヤー、3D フラグ、URL 参照の画像——ここでは正しく見えるのにスマートフォンで崩れる原因そのものです。
ストリーミングのプレビューではなく、実際に描画するプレイヤー
アニメーションは、このページ上で動く lottie-web が描画します。ドキュメント本来のフレームレートで、フレーム単位の正確なスクラブと本物のトランスポート（1コマ送り、逆再生、範囲のトリミング、fps の上書き）が使えます。レンダラーがローカルなので、アップロード待ちもプレビューサービスによる画質の上限もありません。
Lottie アニメーションを開いて中身を正確に把握し、配色を変え、余分な重さを削ぎ落とし、本当に必要な形式で書き出せます。どこにもアップロードせずに。
デザイナーから渡された 900 KB の Lottie が Android で崩れる——このツールは公開前にその理由を示し、After Effects に戻らずブランドカラーへ配色し直させ、書き出し時に残った非表示レイヤーを取り除き、JSON・.lottie・SVG・PNG・連番画像・WebM のいずれかで返します。
すべてこのタブの中で完結します。さらに、画像を URL 参照しているアニメーション（Lottie が自己完結しなくなる唯一のケース）には印を付け、.lottie アーカイブに同梱されている場合は自動で埋め込みに変換します。
よくある質問
Qアニメーションはどこかにアップロードされますか？+
いいえ。ファイルはブラウザ標準の File API で読み込み、メモリ上で処理し、このページに同梱されたプレイヤーが描画します。どの段階でもサーバーへの通信はなく、次回訪問時に何かが残ることもありません。
Qどんな形式を開けますか？+
素の .json Lottie、.lottie アーカイブ（lottiefiles.com が既定で渡す形式）、Telegram の .tgs ステッカー、圧縮された .json.gz です。コンテナは中身で判定するので、拡張子が間違っていても開けます。
Qファイルを置いた瞬間に再生が始まらないのはなぜ？+
意図的です。ドロップした時点ではファイルを解析して調べるだけで、まずサイズ・構造・互換性レポートが出て、ボタンを押すとプレイヤーが動き出します。それを丸ごと飛ばしたい場合は、JSON を手で貼り付ければすぐ開きます。
Q実際に編集できる色はどれですか？+
静的な塗りと線、塗り／線グラデーションの各ストップ、平面レイヤーの色、そしてアニメーションする色プロパティの各キーフレームです。埋め込み PNG に焼き込まれた色やレイヤーエフェクトが生む色は変更できません。素材を描き直さない限り、どのエディターでも同じです。
Q最適化でどれくらい小さくなりますか？+
元ファイル次第なので、このツールは数字を謳う代わりに前後の実バイト数を表示します。After Effects から出したばかりのファイルは、小数 2 桁で 40〜60% 小さくなるのが普通です。重さのほとんどが有効数字 15 桁で書かれた座標だからです。
QGIF で書き出せますか？+
直接はできません。これは意図的で、ブラウザ内の GIF エンコーダーはベクターアニメーションの色をポスタリゼーションしてしまいます。代わりに連番 PNG か WebM を書き出してください。どちらも全色を保持し、任意のエンコーダーで劣化なく GIF にできます。
Q色を変えるとアニメーションは壊れますか？+
いいえ。編集内容は元のドキュメントに対するパッチとして保持され、元データは一切変更されません。取り消し、やり直し、パレットのリセット、あるいは「比較」を押し続けることで、いつでも手つかずのファイルを確認できます。