LottieのJSONを読み込むと、使われている色を自動で抽出します。 カラーピッカーやカラーコードで置き換えるだけで、After Effectsを開くことなく プレビューを見ながら配色を調整し、そのままJSONとして書き出せます。
このツールはブラウザの中だけで動いています。入力した内容が、外部に送信されることはありません。入力内容は外部に送信されません。
詳しくLottie（JSON）を読み込むと、ここにプレビューが表示されます
読み込んだファイルは端末内で処理され、外部へ送信されません。
Lottieの色を変更する方法は？JSONを読み込むだけでAE不要
Lottieは軽量で美しいアニメーションを実現する標準フォーマットですが、「素材の色をブランドカラーに変えたいだけ」という場面でも、通常はAfter Effectsで開き直してBodymovinで再書き出しするか、JSON内の0〜1で表現されたRGB数値を手作業で書き換える必要があります。
本ツールは、LottieのJSONを自動解析して使われている色をすべてリスト化し、カラーピッカーやカラーコード（HEX）で置き換えられる制作支援ツールです。塗り（Fill）・線（Stroke）の単色に加えて、グラデーションのカラーストップ、キーフレームでアニメーションする色、ソリッドレイヤーの背景色、テキストの色まで抽出でき、変更はプレビューへリアルタイムに反映されます。
透明度（アルファ値）は書き換えずに維持するため、半透明のシェイプもそのまま保たれます。背景を透明・白・黒に切り替えてダークモードでの見え方を確認したり、ブランドカラーへ一括で色相を寄せることもできます。すべての処理はブラウザ内で完結し、読み込んだデータが外部へ送信されることはありません。
こんなシーンで便利です
フリー素材をブランドカラーに合わせたい時に
ダウンロードしたLottieアニメーションを、自社サービスやアプリのブランドカラーへ数秒で統一できます。色相の一括変更にも対応しています。
ダークモード用のバリエーションを作りたい時に
明るい背景用に作られたアニメーションを、黒背景プレビューで確認しながら暗い画面でも見やすい配色へ調整し、別ファイルとして保存できます。
After Effectsが手元にない時に
エンジニアやディレクターがAEのライセンスを持っていなくても、ブラウザだけで色の差し替えが完結します。デザイナーの手を借りる工数を減らせます。
JSONを直接編集して壊してしまうのを避けたい時に
テキストエディタでRGB配列を検索置換する必要がなく、構文エラーでアニメーションが表示されなくなるリスクを回避できます。
プロトタイプで色味を素早く試したい時に
周囲のUI要素に合わせた「ちょっとした色味の調整」をその場で行い、複数パターンのJSONを書き出して比較できます。
使い方は簡単 4ステップ
- LottieのJSONファイルをドラッグ＆ドロップするか、タップして選択します（「サンプルで試す」から動作確認もできます）。
- 自動で抽出された色の一覧から、変更したい色のカラーピッカーを開くか、カラーコードを直接入力します。
- プレビューで色の反映を確認します。背景の切り替えや再生速度の変更で、ダークモードや途中の色変化もチェックできます。
- 「JSONをダウンロード」で編集後のファイルを保存するか、「JSONをコピー」でそのまま貼り付けて使います。
※プレビューはループ再生され、色を変えても再生位置が先頭に戻らないため、同じ場面で色味を比べられます。
ご利用時の注意点
- 対応する色：塗り（fl）・線（st）の単色、グラデーション（gf／gs）のカラーストップ、キーフレームでアニメーションする色、ソリッドレイヤー（ty:1）の背景色、テキストの塗り・線に対応しています。
- 透明度について：RGBAのうちRGBのみを書き換え、アルファ値はそのまま維持します。透明度自体を変更したい場合はAfter Effects等での編集が必要です。
- 同じ色は一括で変わります：同一のカラーコードが使われているパーツは、レイヤーが違っても同時に変更されます。別々に変えたい場合は、元データの時点で色を分けておく必要があります。
- dotLottie（.lottie）について：ZIPで圧縮されたパッケージ形式のため読み込めません。JSON形式に書き出してからご利用ください。JSON内に埋め込まれたBase64画像の色も変更対象外です。
- ファイルサイズ：色の数値のみを書き換えるため、元のJSONとほぼ同じサイズを維持します。読み込み後はオフラインでも動作し、データが外部へ送信されることはありません。
Lottieカラー編集の対応状況と仕様
After Effects不要でブラウザ上で完結する編集機能の技術仕様です。
| 編集項目 | 対応状況 | 詳細・メリット |
|---|---|---|
| 塗り（Fill／fl） | 対応 | シェイプのメインカラーを瞬時に一括置換 |
| 線（Stroke／st） | 対応 | 境界線やアウトラインの色変更が可能 |
| グラデーション（gf／gs） | 対応 | カラーストップを1つずつ個別に編集できる |
| アニメーションする色 | 対応 | キーフレームで時間変化する色も開始値・終了値ごとに置換 |
| ソリッドレイヤー（ty:1） | 対応 | 背景ベタ塗りレイヤーのHEX指定にも対応 |
| テキストの色（fc／sc） | 対応 | テキストレイヤーの塗り・線の色も抽出 |
| 不透明度（アルファ） | 維持 | RGBのみを書き換え、透明度は変更せず保持 |
| 画像アセット（Base64） | 対象外 | JSONに埋め込まれた画像の色は変更できません |
| dotLottie（.lottie） | 対象外 | ZIP圧縮形式のため、JSONへ書き出してから読み込みが必要 |
| 外部送信 | 非発生 | ローカル処理のため、機密情報を含むJSONも安全 |
【なぜ専用ツールが必要なのか】
通常、Lottieのカラー編集にはAfter Effects（AE）とBodymovinプラグイン、あるいはコードによる動的制御が必要です。しかし、エンジニアがコードでColorPropertyを書き換えるのは手間がかかり、デザイナーがAEを立ち上げ直すのも非効率です。本ツールは「JSONをプレビューしながらノーコードで書き換える」ことで、Web制作やアプリ開発の工数を削減します。
【Lottieの色がJSON内でどう保存されているか】
Lottieの色は、0〜255ではなく0〜1の小数で表したRGBA配列（例：[0.145, 0.388, 0.922, 1]）としてc.kプロパティに格納されています。4要素目が不透明度です。グラデーションの場合はg.k.kに[位置, R, G, B, 位置, R, G, B, ...]という平坦な配列で並びます。手作業で書き換えるとカンマや括弧の崩れによる構文エラーが起きやすいため、ツールによる自動置換が安全です。
Lottieのカラー運用とアニメーション実装を加速させる実践テクニック
カラーカスタマイズを終えたLottie（JSON）を、実際のWebサイトやiOS・Androidアプリへ組み込む際に、開発効率とパフォーマンスを最大化するための考え方を解説します。
静的なカラー置換とランタイムでの動的制御、どちらを選ぶべきか
ユーザーの操作に応じて色をリアルタイムに変える必要がある場合は、Webならlottie-webのインターフェース経由、あるいはSVGをCSS変数で制御する方法が必要です。
しかし、ダークモード対応やホバー時の色違いなど、単に配色のバリエーションが欲しいだけであれば、ランタイムで重い描画処理を走らせるのは非効率です。本ツールであらかじめ色を置き換えた静的なJSONを複数用意し、アセットを切り替える構成にする方が、端末のCPU消費を抑えメインスレッドを解放するうえで有利になります。
ダークモード対応では、線の色とコントラスト比を必ず実機基準で確認する
ライトモードだけで確認してダークモードに実装すると、細い線や薄いグレーのパーツが背景に同化して見えなくなることがあります。
とくにアウトライン中心のアイコンアニメーションは、背景を黒にした瞬間に視認できなくなりがちです。本ツールのプレビュー背景を透明・白・黒で切り替え、WCAGのコントラスト比を意識しながら明度を調整してください。白背景用と黒背景用で2つのJSONを書き出し、テーマに応じて読み分けるのが確実です。
同じ役割のパーツには同一のカラーコードを割り当てておく
同じ色に見えるパーツが#2563ebと#2564ebのようにわずかに違う値で定義されていると、ツール上では別々の色として並び、変更の手間が増えます。
After Effectsでのコンポジション制作段階、あるいは素材選定の時点で、同じ役割を持つシェイプ（ボタンの背景、アイコンのアクセントなど）には完全に同一のHEX・RGBA値を適用しておくと、1回の操作で全体を置き換えられるようになります。将来ブランドカラーが変わったときの作り直しコストも大きく下がります。
マルチプラットフォーム開発でのアセット管理と読み込みの注意点
Web、iOS（lottie-ios）、Android（Lottie for Android）では、同じJSONでもレンダリングエンジンや対応プロパティにわずかな差異が生じることがあります。
クロスプラットフォーム環境（FlutterやReact Nativeなど）で色変更後のJSONをアセットとして配置する際は、ファイル名にハイフンや大文字を避けたスネークケースを使うとパス参照のエラーを防げます。また、アプリ起動時の読み込み遅延を避けるため、アニメーションは初期レンダリング対象から外し、非同期での遅延ロードを行うのが定石です。
グラデーションを含むLottieを編集するときに押さえておきたいこと
グラデーションはg.k.kに「位置・R・G・B」の組が繰り返される平坦な配列として保存され、その後ろに不透明度のストップが続く場合があります。
本ツールはストップ数（g.p）を参照して色の部分だけを正確に切り出すため、不透明度のストップを誤って色として書き換えることはありません。ただし、グラデーションの方向や位置（s／e）は編集対象外です。角度や広がりまで変えたい場合は、元のAfter Effectsデータでの調整が必要になります。
よくある失敗と対策
After Effectsでの再書き出しでアニメーションが崩れる・容量が増える
フリー素材サイトからダウンロードしたLottieの色をUIカラーに合わせるため、After EffectsへインポートしてBodymovinで再エクスポートした結果、フォントやエフェクトの再現が崩れたり、不要なデータが付与されてファイルサイズが肥大化してしまう失敗です。
💡 対策・解決策を見る▼
JSONを手動で書き換えて構文エラーを起こし、アニメーションが表示されなくなる
テキストエディタでLottieのJSONを直接開き、0〜1で表されたRGB配列を検索・置換しようとした結果、カンマや括弧を壊してしまい、Webサイトやアプリでアニメーションがまったく表示されなくなる失敗です。数値が小数のため、目視での判別も困難です。
💡 対策・解決策を見る▼
色を変更したら半透明のパーツが不透明になってしまった
Lottieの色はRGBAの4要素で指定されますが、置換処理がアルファ値まで一律で1に書き換えてしまうツールや手法を使うと、半透明だった影やグローの部分がベタ塗りになり、見た目の印象が大きく変わってしまう失敗です。
💡 対策・解決策を見る▼
ダークモードでの見え方を確認せずに実装し、パーツが背景と同化する
ライトモード環境だけで色を決めてしまい、ダークモードのUIに実装した結果、線や細かいパーツが黒背景と同化して見えなくなったり、コントラスト比の基準を満たさなくなる失敗です。
💡 対策・解決策を見る▼
dotLottie（.lottie）をそのまま読み込もうとして作業が止まる
LottieFilesなどからダウンロードした「.lottie形式」をそのままツールに投入し、色の抽出やプレビューが行われずに原因が分からないまま時間を浪費してしまう失敗です。
💡 対策・解決策を見る▼
同じ色が全パーツで一括置換されてしまい、一部だけ変えられない
背景とアイコンでまったく同じカラーコードが使われていたため、片方だけを変えたいのに両方が同時に変わってしまう失敗です。ツールの仕様というより、元データの設計に起因します。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.After Effectsを使わずにLottieの色を変更できますか
A. できます。本ツールはLottieのJSONファイルを読み込むだけで、内部で使われている色を自動的に抽出して一覧表示します。カラーピッカーで選ぶか、ブランドカラーのカラーコード（HEX）を直接入力するだけで色が置き換わり、プレビューにリアルタイムで反映されます。After Effectsの再インストールやBodymovinでの再書き出しは必要ありません。編集後はそのままJSONとしてダウンロードできます。
Q.グラデーションの色も変更できますか
A. できます。本ツールは塗り（Fill）と線（Stroke）の単色に加えて、グラデーション塗り（gf）・グラデーション線（gs）のカラーストップも抽出して個別に編集できます。また、時間とともに色が変化するアニメーション付きのカラー（キーフレームで指定された色）や、ソリッドレイヤーの背景色、テキストの塗り・線の色にも対応しています。
Q.透明度（アルファ値）は保持されますか
A. 保持されます。Lottieの色はRGBAの4要素で指定されますが、本ツールが書き換えるのはRGBの3要素のみで、4要素目のアルファ値には一切手を加えません。半透明のシェイプを含むアニメーションでも、透明度がリセットされることなく色だけが置き換わります。
Q.ブランドカラーに全体をまとめて寄せることはできますか
A. できます。「ブランドカラーに一括で寄せる」の欄に基準となる色を指定して実行すると、各色の明るさと鮮やかさを保ったまま、色相だけを指定色に合わせます。濃淡のバランスを崩さずにアニメーション全体の色味を統一できます。白・黒・グレーといった無彩色は影響を受けないため、文字や影の部分が意図せず色付くこともありません。もちろん、その後に個別の色を微調整することも可能です。
Q.dotLottie（.lottie）形式のファイルは読み込めますか
A. 直接は読み込めません。dotLottie（.lottie）はJSONや画像をZIPで圧縮したパッケージ形式のため、本ツールでは扱えない仕様です。読み込もうとした場合はその旨のメッセージを表示します。LottieFilesなどのサービスでJSON形式として書き出してから読み込んでください。JSON内にBase64形式の画像が埋め込まれている場合も、画像部分の色は変更できません。
Q.ダークモード用の配色を確認しながら編集できますか
A. できます。プレビューの背景を「透明（チェック柄）」「白背景」「黒背景」から切り替えられるため、ダークモードに置いたときに線やアイコンが背景と同化しないかをその場で確認できます。再生・一時停止と再生速度（0.5倍〜2倍）の切り替えにも対応しているので、アニメーションの途中で色が変わるケースも見逃しません。
Q.編集するために読み込ませたアニメーションデータが外部へ漏洩するリスクはありませんか
A. ありません。本ツールはファイルの解析から色の置換およびプレビューにいたるまで、すべてお使いのブラウザ内だけで処理を行う完全ローカル処理型の設計です。データが外部のサーバーへ送信または保存されることはないため、公開前のプロダクトや機密プロジェクトのアセットでも安全にご利用いただけます。
Q.色をカスタマイズした後のファイル形式やプラットフォームの互換性はどうなりますか
A. 編集後は標準的なLottieのJSON形式としてそのまま保存されます。ファイル構造やバージョンを維持したまま色情報のみを書き換えるため、WebサイトやiOS、Androidアプリなど、Lottieが動作するすべてのプラットフォームでそのまま利用できます。不要なメタデータが追加されることもないため、ファイルサイズも元とほぼ変わりません。
Q.スマートフォンやタブレットのブラウザからでも編集や保存は行えますか
A. はい。レスポンシブ設計に対応しているため、スマートフォンやタブレットのブラウザからでも、JSONファイルの読み込み、カラーピッカーによる色変更、プレビューの確認、カスタマイズしたファイルのダウンロードまで、すべての機能がそのまま利用できます。
Q.手元にLottieファイルがなくても機能を試せますか
A. 試せます。「サンプルで試す」を押すと、塗り・線の色を含む簡単なアニメーションが読み込まれ、色の抽出から変更、プレビュー、ダウンロードまでの一連の流れをその場で確認できます。導入前に使い勝手を確かめたい場合にご利用ください。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。