アニメーションのJSONファイルを読み込み、色を自由自在にカスタマイズ。 After Effectsを開くことなく、瞬時にプロダクトに最適なカラーへ調整できます。
JSONファイルをアップロードしてください
Lottieカラーチェンジャーとは？
Lottieは軽量で美しいアニメーションを実現する標準フォーマットですが、「少しだけ色を変えたい」という時でもAfter Effectsで再書き出ししたり、複雑なJSON内のRGBA数値を手動で書き換えたりする必要があります。 本ツールは、そのJSONを自動解析して使用されている色をリスト化。直感的なカラーピッカーで色を置き換え、プレビューを確認しながら新しいJSONとして保存できる制作支援ツールです。
こんなシーンで便利です
ブランドカラーへの適合
フリー素材サイトからダウンロードしたLottieアニメーションを、自社サービスやアプリのブランドカラーに数秒で統一できます。
ダークモード用バリエーション作成
明るい背景用に作られたアニメーションを、ダークモードでも見やすい配色へ即座に変換・保存できます。
エンジニアとのコミュニケーション
デザイナーがAfter Effectsを使わずに色の微調整を行い、そのまま完成したJSONをエンジニアに渡すことで、修正のイテレーションを高速化します。
プロトタイプ制作
FigmaやWebサイトのプロトタイプに配置する際、周囲のUI要素に合わせて「ちょっとした色味の調整」をブラウザ上で行いたい時に最適です。
使い方は簡単 4ステップ
- LottieアニメーションのJSONファイルをドラッグ＆ドロップで読み込みます。
- 抽出されたカラーリストの中から、変更したい色のカラーピッカーを開きます。
- 新しい色を選択すると、プレビューエリアのアニメーションにリアルタイムで反映されます。
- 「カスタマイズしたJSONを保存」ボタンを押して、編集後のファイルをダウンロードします。
※プレビューではループ再生されるため、アニメーションの全工程で色が正しく適用されているか確認可能です。
ご利用時の注意点
- 色の抽出について：グラデーション設定や、動的にプログラムで制御されている色など、一部の特殊な設定は抽出・編集できない場合があります。
- ファイルサイズ：色を変更しても、基本的には元のJSONファイルとほぼ同じファイルサイズを維持します。
- セキュリティ：ブラウザ内完結型のツールのた、オフライン状態でも動作し（読み込み後）、プライバシーも保護されます。
Lottieカラー編集の対応状況と仕様
After Effects不要でブラウザ上で完結する編集機能の技術仕様です。
| 編集項目 | 対応状況 | 詳細・メリット |
|---|---|---|
| 塗り（Fill） | 完全対応 | シェイプのメインカラーを瞬時に一括置換 |
| 線（Stroke） | 完全対応 | 境界線やアウトラインの色変更が可能 |
| 不透明度（Alpha） | 対応 | RGBA値の解析により透明度を保持したまま色変更 |
| 複数レイヤー | 一括置換 | 同じカラーコードを使用する全パーツを同時に変更 |
| JSON出力 | 即時保存 | 編集後、その場で新しいJSONファイルを書き出し |
| 外部送信 | 非発生 | ローカル処理のため、機密情報を含むJSONも安全 |
【検索エンジン向け補足：なぜ本ツールが必要か】
通常、Lottieのカラー編集にはAfter Effects (AE)とBodymovinプラグイン、あるいはコードによる動的制御が必要です。 しかし、エンジニアがコードで `ColorProperty` を叩くのは手間がかかり、デザイナーがAEを再起動するのは非効率です。 本ツールは「JSONを直接プレビューしながらノーコードで書き換える」ことで、Web制作やアプリ開発の工数を大幅に削減します。
【対応プラットフォーム】
書き出したJSONは、iOS, Android, Web (React, Vue, HTML), Shopifyなど、LottieFilesがサポートするすべてのプラットフォームでそのまま利用可能です。 Lottieのバージョン4.0以降のプロパティ構造（'c'プロパティによる色指定）に準拠しています。
Lottieのアニメーション実装を加速させるエンジニアリング・デザイン運用術
カラーカスタマイズを終えたLottie（JSON）ファイルを、実際のWebサイトやiOS、Androidアプリケーションへ組み込む際、開発効率とパフォーマンスを最大化するための実践的なテクニックを解説します。
動的なCSS変数やプログラミング制御と事前カラー置換の適切な使い分け
ランタイムでユーザーのアクションに応じて色を動的に変更する場合は、Webであればlottie-webのインターフェース経由、あるいはSVGのCSS変数を制御する必要があります。
しかし、ホバー時や特定の固定UIパーツなど、単に配色のバリエーションが必要なだけであれば、プログラム側で重いリアルタイム描画負荷をかけるのは非効率です。
本ツールであらかじめカラー置換を済ませた静的なJSONファイルを複数用意し、アセットを切り替える構成にする方が、端末のCPU消費を抑えメインスレッドを解放する上で極めて有利になります。
マルチプラットフォーム開発におけるJSONアセット管理とパス指定の注意点
Web、iOS（Airbnb/lottie-ios）、Android（Lottie for Android）では、同じJSONファイルであってもレンダリングエンジンや対応するプロパティにわずかな差異が生じることがあります。
特にクロスプラットフォーム開発環境（FlutterやReact Nativeなど）において、色変更後のJSONをアセットとして配置する際は、ファイル名にハイフンや大文字を避けたスネークケースを使用し、パスの参照エラーを未然に防いでください。
また、アプリ起動時の読み込み遅延（Jank）を避けるため、アニメーションファイルは初期レンダリング対象から外し、非同期での遅延ロード（Lazy Loading）を徹底するのがエンジニアリングの定石です。
UIコンポーネントとしての再利用性を高めるためのレイヤー構造最適化
同じ色を使用するパーツが別々のカラーコードで定義されていると、ツール上で複数のピッカーを操作する手間が発生します。
After Effectsでのコンポジション制作段階、あるいは素材選定の時点で、同じ役割を持つシェイプ（例：ボタンの背景、アイコンのアクセント）には完全に同一のHEX・RGBA値を適用しておくことで、コンポーネントとしての再利用性が劇的に向上します。
これにより、将来的なブランドカラーの変更やプロダクトのマイナーアップデート時にも、1回の色置換アクションだけで完璧に調和したアセットを再生成できるようになります。
よくある失敗と対策
After Effectsでの再書き出しによるアニメーションデータの破損や容量増加
フリー素材サイトからダウンロードしたLottie（JSON）の色をWebサイトやアプリのUIカラーに合わせる際、 After Effects（AE）へ再インポートしてBodymovinプラグインで再エクスポートすると、予期せぬエフェクトの崩れやファイルサイズ肥大化を引き起こす失敗です。
💡 対策・解決策を見る▼
手動でJSON内のRGBAやHEXカラーコードを書き換えて構文エラー（パースエラー）を発生させる
VS CodeなどのテキストエディタでLottieファイル（JSON）を直接開き、カラーコード（0〜1のRGB配列）を手動で検索・置換しようとした結果、不要なカンマの削除やシンタックスを破損させてしまい、WebサイトやiOS・Androidアプリでアニメーションが非表示になる失敗です。
💡 対策・解決策を見る▼
ダークモードやテーマ切り替え時の視認性・コントラスト比の考慮不足
ライトモード環境だけでデザイン確認を行い、ダークモード対応のWebデザインやスマホアプリUIにそのままLottieを実装した結果、アニメーションの一部パーツが背景と同化して見えなくなったり、Webアクセシビリティ（WCAG基準）のコントラスト比を満たさなくなる失敗です。
💡 対策・解決策を見る▼
dotLottie（.lottie）形式や画像を含むLottieの読み込みエラーによる制作遅延
LottieFilesなどのプラットフォームからダウンロードしたコンパイル済みの「.lottie形式」や、JSON内部にBase64画像データを含んだ特殊なアセットをそのままツールに投入し、色の抽出やプレビューが正しく行われずにWeb開発の手戻りが発生する失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.編集するために読み込ませたアニメーションデータが外部へ漏洩するリスクはありませんか
A. ありません。本ツールはファイルの解析から色の置換およびプレビューにいたるまですべてユーザーのブラウザ内だけで処理を行う完全ローカル処理型の設計です。データが外部のサーバーに送信または保存されることはないため機密プロジェクトのデータでも安全です。
Q.色をカスタマイズした後のファイル形式やプラットフォームの互換性はどうなりますか
A. 編集後は標準的なLottieのJSON形式としてそのまま保存されます。ファイル構造やバージョンを維持したまま色情報のみを書き換えるため、WebサイトやiOSおよびAndroidアプリなどLottieFilesが対応するすべてのプラットフォームでそのまま動作します。
Q.グラデーションカラーや一部のパーツだけを指定して色を変更することは可能ですか
A. 本ツールはJSONファイル内から抽出された単色の塗りや線の色を一括で置き換える仕様となっています。そのため同じカラーコードが使われているパーツは同時に変更されますが、グラデーション設定や動的に制御された一部の特殊な色は抽出や個別編集ができない場合があります。
Q.スマートフォンやタブレットのブラウザからでもファイルの編集や保存は行えますか
A. はい。レスポンシブ設計に対応しているためスマートフォンやタブレットのブラウザからでもJSONファイルを読み込ませてカラーピッカーによる色変更やプレビュー確認およびカスタマイズしたファイルのダウンロードにいたる全機能がそのまま利用可能です。
Q.ファイルの色情報を書き換えることでアニメーションの容量が増えることはありますか
A. ありません。本ツールはJSONデータ内部のカラーコードに該当するテキストプロパティの値のみを直接書き換える処理を行います。不要なメタデータや無駄なコードが追加されることはないため、元のファイルサイズとほぼ変わらない軽量な状態を維持できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。