Lottie をあなたのブランドに

JSON または .lottie ファイルを開き、色を合わせて動きを調整。変更をプレビューしながら、ウェブサイトやアプリ向けの Lottie JSON をダウンロードできます。読み込みから書き出しまで無料です。

Lottie を編集する

手持ちのアニメーションを、自分の色と動きに

ブランドカラーに合わせる

レイヤーを選んで塗りと線の色を変更。プレビューを見ながら、アイコン、ローディング表示、イラストを製品の配色に合わせられます。

タイミングを整える

タイムライン上でレイヤーを移動・トリミング。開始フレームと表示区間を指定し、再生ヘッドの位置で分割できます。スナップで動きのタイミングを揃えられます。

動き方を調整する

変形キーフレームの値とタイミングを編集。イージングプリセットを適用し、選択したキーフレームの時間調整、反転、時間差の設定で、登場シーンやトランジション、ループを整えられます。

既存のレイヤーを活用する

入れ子のレイヤーを確認し、順序の変更、複製、非表示、削除ができます。プロパティパネルで位置、拡大率、回転、不透明度を調整できます。

変更を試して選ぶ

ライブプレビューで編集結果を確認。フレームを指定したり、再生速度を落としたりして動きを確認できます。作業中は元に戻す、やり直す、リセットも使えます。

編集したファイルを持ち帰る

Lottie JSON の読み込み、編集、ダウンロードは無料。アカウントは不要です。ファイル編集と JSON の書き出しはブラウザ内で処理するため、手持ちのアニメーションをそのまま編集できます。

色の変更から書き出しまでを見てみよう

ファイルを編集して、サイトやアプリへ

1Lottie JSON または .lottie ファイルを開きます。サンプルのロケットでもエディターを試せます。
2レイヤーを選んで色、見た目、表示状態を変更。タイムラインとキーフレームで動きを調整します。
3編集中の結果をプレビュー。元に戻す・やり直す操作を使いながら、デザインに合う動きに仕上げます。
4編集した JSON をダウンロード。ウェブサイトやアプリの Lottie プレーヤーで使うか、開発者にファイルを渡せます。

VizGPT での Lottie 編集について

読み込みから書き出しまで無料ですか？

はい。ファイルの読み込み、色・レイヤー・キーフレームの編集、プレビュー、編集した JSON のダウンロードまで無料です。ファイルエディターにアカウントやサブスクリプションは必要ありません。

After Effects やコードなしで編集できますか？

はい。ブラウザでアニメーションを開き、レイヤーパネル、色のコントロール、視覚的なタイムラインで編集できます。ブランドカラーへの変更からタイミングやイージングの調整まで、同じエディターで行えます。

どの形式を読み込み・書き出しできますか？

Lottie JSON と .lottie ファイルを開けます。編集結果は編集可能な Lottie JSON としてダウンロードでき、ウェブサイトやアプリの開発に使えます。

色だけでなく動きも変更できますか？

はい。レイヤーの移動・トリミング、変形キーフレームの編集、イージングプリセットの適用ができます。選択したキーフレームの時間調整、反転、均等配置、時間差の設定を行い、ライブプレビューで確認できます。

ファイル編集はどこで処理されますか？

ファイルの読み込み、編集、書き出しはブラウザ内で処理します。選んだアニメーションを直接編集し、その場で結果をダウンロードできます。

ファイルを用意せずに試せますか？

はい。サンプルのロケットを開いて、レイヤー選択、色、タイムラインの操作を試せます。元に戻す、やり直す、リセットを使いながら、書き出す前にいろいろな編集を試せます。

新しいアニメーションは、アイデアから

AI ジェネレーターに作りたい動きを伝えて、ワークスペースのエディターで仕上げましょう。