Lottie JSON Editor、Visual Studio Codeでアニメーションの色を編集する方法

Lottieアニメーションが素晴らしい理由のひとつ（理由は他にもたくさんあります！）は、ファイルフォーマットがJSONに基づくものであることです。つまり、特定の要素（たとえば色）を、テキストを編集するのと同じように簡単に変更できるのです。

でも具体的にはどのようにするのでしょうか？

このチュートリアルでは、Lottie JSON Editor、 Visual Studio Codeを使って、Lottieアニメーションの色を編集する方法を紹介します。チュートリアルは次の動画でご覧いただけますが、下にスクロールすると文書版もご覧になれます。順を追ってじっくり見たいなら、このチュートリアルで使用したデザイン資料をダウンロードすることもできます。

Lottie JSON filesにおける色の仕組みはどうなっているのでしょうか？

Lottie JSON filesで色を編集するには、まずその仕組みを理解する必要があります。JSON filesは、プログラミング言語JavaScriptの構文に基づくフォーマットで情報を保存するファイルです。

あるLottie JSON fileを開くと、大量のコードが見えます。そのコードには、色のデータを含むLottieアニメーションに関する情報が記載されています。

Lottie JSON fileでは、色は数値で指定されます。そのフォーマットは、RGBAカラーモデルと同様のものです。RGBAカラーモデルの仕組みは次の通りです。

• 色はRGBA（レッド、グリーン、ブルー、アルファ）で指定されます。
• レッド、グリーン、ブルーの各パラメータは、例えば、RGBA（2, 255, 193, 1）というふうに、0から255までの数値で表されます。
• 各数値が大きいほど、レッド、グリーン、ブルーの要素が多い色ということになります。
• アルファの値は0から1までで、これは色の透明度を表します。アルファ値0は完全に透明、アルファ値1は完全に不透明ということを表します。
• RGBが使われている場合もありますが、これは同じ色でアルファ値が指定されていないものです。

以上に対して、Lottie JSON files における色の仕組みは次のようになっています。

• ここでも、色は [レッド、グリーン、ブルー、アルファ] で指定されます。
• レッド、グリーン、ブルーを表す数値の範囲は0から1までです：例 [0.01, 1, 0.76, 1]
• RGB、RGBAの数値からJSONの数値への変換は簡単で、レッド、グリーン、ブルーの各パラメータを255で割るだけです。

Lottie JSON editorでLottieアニメーションの色を編集する方法

JSON fileをLottie JSON Editorにドラッグ＆ドロップします。JSONコードが自動的にフォーマットされ、非常に読み取りやすくなります。

• 上記操作によって、変更したいLottie JSONのカラーコードの検索が可能になりました。
• 例えば、ロゴに使われている、RGB値がRGB（2, 255, 194）であるグリーンを変えたいとします。
• 各パラメーターを255で割ると、カラーコードは [0.01, 1, 0.76] になります。
• Lottie JSON Editorで 0.76 を検索して、カラーコードを探します。該当するカラーコードが見つかったら、それを0から1までの他の値に変更してみましょう。変更後の色がすぐに表示されます！

Visual Studio CodeでLottieアニメーションの色を編集する方法

Visual Studio Code（VS Code）を使ってLottie JSONの編集をしたい場合は？簡単です。その方法をご紹介します。

• LottieFilesをインストールして、Visual Studio Codeをプラグインします。
• Visual Studio CodeでJSONファイルを開きます（ファイルをドラッグ＆ドロップするか、右クリックしてオプションの「Open with Visual Studio Code」を選択します）。

• JSONコードがフォーマットされていない場合は、Visual Studio Codeを右クリックし、「Format Document」をクリックします。

• コマンドパレット（Ctrl+Shift+P）を開き、「View in Lottie Player」を選択します。オプションが表示されない場合は、入力欄に「 View in Lottie Player」 と入力し検索してください。
• Lottie Playerでは、アニメーションのプレビュー、背景色の素早い変更、SVGやPNGファイルでのダウンロードが可能です。
• 変更したいLottie JSONのカラーコードを探します。
• 例えば、RGB（144, 19, 254）の色を変えたい場合、各パラメーターを255で割ると、Lottie JSONカラーコード [0.564, 0.0074, 0.99] が得られます。

• Visual Studio Codeで、例えば0.99などと検索して、カラーコードを見つけます。カラーコードが見つかったら、それを編集することができます。
• 最新のプレビューを見るには、コマンドパレット（Ctrl+Shift+P）からLottie Playerをもう一度開いて更新してください。

カラーコードが見つからない場合は？

Lottie JSON fileでカラーコードが見つからない場合は、丸める小数点以下の桁数が違っていないか確認してみましょう。例えばRGB（2, 255, 193）を探している時に、 Lottie JSON fileに保存されているカラーデータが [0.01, 1, 0.76] とか [0.0078, 1, 0.7568] になっている可能性があります。

Lottieアニメーションについての追加情報

Lottieアニメーションの色の編集は、Lottie JSON EditorとVisual Studio Codeの2つの方法で行えますが、Lottie Editorでも色の編集ができるということを覚えておきましょう。Lottie Editorを使って色、寸法、レイヤー、フレームレートなどを細かく調整する方法については、こちらのチュートリアルをご覧ください。

Lottieアニメーションについてもっと知りたい方は、LottieFilesのYouTubeチャンネルをご覧いただくか、こちらの無料Lottie講座を受講してください。あなたの作品を見るのを楽しみにしています！