【Lottieでグラデーションは使えない？】透明グラデ×単色レイヤーの重ね技で表現できます！

Lottieでグラデーションを使いたいけど、思ったように表示されなくて困っていませんか？私も同じ問題にぶつかりました。

After Effects上ではちゃんと表示されていたはずのグラデーションが、Lottieに書き出すと白黒になってしまうんです。

どうにかしてこの問題を解決したくて、いろいろ試した結果——
「透明グラデーション」と「単色レイヤー」を重ねて使うことで、色付きグラデーションのように“見せる”方法を見つけました。

今回はその制作方法とコツを、実例を交えて紹介します。

Lottieでグラデーションが使えない問題

まず、After Effectsで以下のようなグラデーション表現を2つの方法で作ってみました。

ところが、これをLottieに書き出すと…

【塗りのグラデーション】
白黒に変換されてしまう

【エフェクトで作ったグラデーション】
そもそも反映されない

という残念な結果に。

このように、標準的なグラデーション表現はLottieで対応していないのが現状です。
だから「Lottieではグラデーションが使えない」とよく言われているんですね。

といった情報もありましたが、私の環境では効果がありませんでした。

いろいろ試す中で、マットにグラデーションを使った表現なら、Lottieでも正しく書き出せることがわかりました。ここで使ったのが、After Effectsのマット機能であるAlpha MatteやLuma Matteです。

例：

マットにグラデーションを使うことで、徐々に透けていくような表現を作ることができ、それがLottieでもきちんと反映されます。

マットにグラデーションが使えるとわかったので、単色レイヤーと重ねれば擬似的にカラーグラデーションに見せることができるのでは？と考えました。そこで、以下の構成で試したところ、Lottieでも問題なく表現できました。

上：透明度のあるグラデーションシェイプ（白→透明）
※このシェイプは「グラデーションの形」を決めるためのもので、見た目には表示されません。形は自由に設定できます。今回は星を覆うように作成しています。

真ん中：実際にグラデーションとして見せたい色（黄色）のシェイプ

下：ベースカラー（オレンジ）のベタ塗りシェイプ

この3つを順に重ねることで、透明部分を通して下の色が見える仕組みができあがり、結果的に「オレンジ→黄色」のようなカラーグラデーションが“見える”状態になります。

今回の制作では Luma Matte（ルミナンスマット）を使用していますが、マットの作り方によってはAlpha Matteでも同様の表現ができます。

自分のWebサイトに書き出したLottieアニメーションを設置して動作確認したところ、ChromeでもSafariでも問題なく表示・動作しました。

完成したのがこちら！！（ホバーで再生/停止します）

透明グラデ＋単色レイヤーは実用レベルで十分使える方法だと確認できました！

Lottieのグラデーション表現は、Web（ブラウザ）では問題なく動くことが多いですが、スマホアプリで使うと、環境によっては正しく表示されないことがよくあります。そのため、スマホアプリ向けにはグラデーションを使わず、透明度を調整した単色レイヤーなどで表現することをおすすめします。

Lottieでは、標準のカラーグラデーションは使えません。しかし、透明グラデーションと色の重ね合わせを工夫することで、色が変化していくようなグラデーション表現を“見せる”ことは可能です！ぜひこの方法を活用して、制作の幅を広げてみてください。

今後も制作や素材のこと、気づいたことを発信していく予定です。
オリジナルのLottie素材制作にご興味があれば、お気軽にご相談ください！