基本から応用まで！Lottieアニメーション制作ガイド【2024年最新版】

neccoではウェブサイトを制作する際、Lottieアニメーションを取り入れる機会が多くあります。
アドベントカレンダー11日目はAfter Effectsで作成するnecco流のLottieアニメーションの基本から、つまずいたポイント、少し変わった使い方の応用編までご紹介します！
ウェブサイトとアプリでは対応しているアニメーションや表現が異なります。今回はウェブサイトで使えるLottieアニメーションについての内容です。

After Effectsの基本設定

Lottieアニメーションを作成する場合におすすめのAfter Effects基本設定です。

After Effectsの英語化

JSONに日本語が含まれているとグラデーションが白黒など設定とは異なる状態になってしまいます。
それを回避するため、Lottieアニメーション制作では基本的にAfter Effectsを英語版に変更しています。

英語化の方法はファイルをひとつ追加するだけなのでとても簡単です。Lottieアニメーション制作前に変更しておきましょう！

macの場合

1. ae_force_english.txtという名称のテキストファイルを作成
2. 作成したファイルを書類フォルダに保存
3. After Effectsを再起動

Bodymovinのインストール

「Bodymovin」はAfter EffectsからLottieアニメーションを書き出すときに必要なエクステンションです。

BodymovinはAdobeからもダウンロード可能ですが、2024年12月時点ではバージョンが最新ではないため、neccoではGitHubからダウンロードしたものを使用しています。
lottie-web/build/extension at master · airbnb/lottie-web

ZXP Installerのインストール

GitHubからダウンロードしたBodymovinを使用するにはZXPインストーラーが必要です。
ZXP Installer

上記サイトよりダウンロード後インストールを進めます。
Bodymovinインストール後一覧に表示されていればAfter Effectsで使用可能な状態です。

After Effectsの環境設定

After Effectsの環境設定のScripting & Expressionsを開き、「Allow Scripts to Write Files and Access Network」にチェックを入れ、 スクリプトによるファイルへの書き込みとネットワークへのアクセス許可します。

BodymovinとZXP Installerの使い方についてはモーションデザイナーの冬菜さんが執筆した記事にもくわしく書かれていますのでこちらも合わせてご覧ください！
Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法

以上で制作を始める前の基本設定は完了です！

Lottieアニメーション制作の基本

Bodymovinで書き出すLottieアニメーションに可能な表現

移動や回転、拡大などの基本的なアニメーションに加え、
グラデーションや画像、マスク、トラックマット（アルファマット）を使った表現も可能です。
ブラーやドロップシャドウなどのエフェクト、エクスプレッションは表現できません。

コンポジションの設定

デザインと同じサイズに設定

neccoのLottieアニメーション制作は、デザイン作成後エンジニアさんに実装していただいている間に並行して行うことがほとんどです。
そのため、コンポジションのサイズはデザインで作成したイラスト、図版などのサイズと同じものにすると差し替え後の調整などが少なくエンジニアさんの負担を減らすことができます。
ここでのポイントはあらかじめ動かす範囲を想定してデザインを作成することです。

フレームレートは24fps

フレームレートは1秒間に表示されるフレームの数です。
計算しやすい24fpsに設定することが多いです。
設定したフレームレートとブラウザのフレームレートは異なるためAfter Effectsで再生したアニメーションとブラウザで表示されるアニメーションの滑らかさも異なります。

デュレーションは偶数秒がおすすめ

Lottieのアニメーションが1回再生される長さです。
ゆったりとした動きを基準として、繰り返しなどの細かな動きも成立する秒数を設定しています。フレームレートと同様に計算しやすいよう、偶数にすることが多いです。

Lottieアニメーションの書き出し

Bodymovinの設定

グラデーションがうまく表示されるか、主要なブラウザでの動きは問題ないかを確認するため、必ずDemoにチェックを入れ、htmlも一緒に書き出します。

画像を使用している場合はAssetsの設定で「Original Asset Name」にチェックを入れます。

また書き出されるJSONのファイル名とコンポジション名を揃えたい場合は、
「Project Settings」内の「Use comp name」にチェックを入れます。

書き出し先を指定し、「Render」をクリックすることでLottieアニメーションが書き出されます。

書き出したら何かおかしい！Lottieアニメーションつまずきポイント

2024年Lottieアニメーションを作成してきたなかで、とくにグラデーションがうまく表示されず苦戦することが多くありました。
苦戦したポイントと解決方法をご紹介します！

グラデーションが設定とは異なる色になる

日本語が含まれている

はじめから英語版で作成したものは問題ありませんが、途中で日本語版から英語版に変更した場合に、
レイヤー名やグループ名、塗りや線の名称が日本語になっていることがあります。
日本語が含まれているとグラデーションがうまく表示されないことが多いため、すべて英語に変更します。

グループの名称

レイヤー内のグループ名に同じ名称がついている場合にもグラデーションがうまく表示されないことがあります。
すべてユニークな名称にすることで解決できます。

塗りの名称

原因はわかりませんが、まれにグラデーションの塗りの名称が「Gradient Fill」になっている場合にもグラデーションの表示がおかしくなることがあります。
その場合はFillなどシンプルな名称にすることで解決できることが多かったです。

Bodymovinのキャッシュ

上記の対策を行ってもまだうまく表示されない場合はBodymovinのキャッシュが原因の可能性があります。
After Effectsを再起動して、再度書き出してみましょう。

トラックマット

Safariでアニメーションがカクつく

トラックマットはアルファマットのみ使用可能です。
アルファ反転マットを使用するとSafariでアニメーションがカクつくので使わないようにしています。

ドロップシャドウとブラー

エフェクトであるドロップシャドウとブラーもBodymovinでの書き出しには対応していません。
ドロップシャドウとブラーを表現したい場合は、円形グラデーションまたは画像を使用することが多いです。

エクスプレッション

ループなど表示はできますが、不安定なのでエクスプレッションは基本的に使わないようにしています。

Lottieアニメーション応用編

エクスプレッション「wiggle」の動きをLottieアニメーションに取り入れる

映像制作でwiggleを使うことが多く、Lottieアニメーションでも取り入れたいと考えていました。
前述の通りLottieアニメーションでは基本的にエクスプレッションは使用できません。

今回は応用編としてwiggleの動きをキーフレーム化し、wiggleに近い動きをLottieアニメーションに取り入れる方法をご紹介します。

1.まずは通常通りエクスプレッションを追加し、ループ再生できるwiggleのコードを記述します。

freq = 0.2　//速度
amp = 50 //移動量
loop = 12 //ループさせる秒数
t = time % loop;
wiggle1 = wiggle(freq, amp, octaves=1, amp_mult=.5, t=time);
wiggle2 = wiggle(freq, amp, octaves=1, amp_mult=.5, t=time - loop);
linear(time , 0 , loop , wiggle1 , wiggle2)

参考：ループ素材！wiggleのloop｜クリエイティブMEMO

2. エクスプレッションをキーフレーム化

エクスプレッションはこのままでは書き出しできないので、キーフレームに変換します。
位置や透明度などプロパティ名を右クリックで表示される
Keyframe AssistantのConvert Expression to Keyframesを選択します。

キーフレームに変換されました。
先ほど記述したエクスプレッションは不要なので削除します。

3. Smootherでキーフレームを減らす

このままではキーフレームが大量なので、減らしていきます。
キーフレームを減らすため、Smootherという機能を使います。

ウィンドウからSmootherを表示し、キーフレームをすべて選択後、SmootherウィンドウのTolerance（許容量）を必要に応じて変更します。
値が高いほどキーフレームが減り、動きがスムーズになりますが、イメージしているwiggleの動きと異なってくるので低めの値を設定することが多いです。

ほぼwiggleと同じ動きになっているかと思います！
位置や大きさ、回転、透明度にも設定可能なので背景のあしらいなどにも使うことが多いです。
ぜひ試してみてください！

Lottieアニメーションを使用している制作実績

エネクラウド株式会社 コーポレートサイト

エネクラウド株式会社 コーポレートサイト

メインビジュアルやイラスト、あしらいなどにLottieアニメーションを使用しています。

心の問題に取り組む企業「Awarefy」ブランドデザイン・コーポレートサイト

心の問題に取り組む企業「Awarefy」ブランドデザイン・コーポレートサイト

図版やあしらい、コーポレートキャラクター ファイさんの一部の動きにLottieアニメーションを使用しています。

ほかにも様々なウェブサイトでLottieアニメーションを取り入れています。ぜひ制作実績をご覧ください！

まとめ

2024年はLottieアニメーションを作成することが多く、その分苦戦したポイントも多かったので振り返りの意味も込めてLottieアニメーション制作の基本についてまとめました。

Lottieアニメーションを取り入れることで、イラストをより魅力的に、図版をよりわかりやすくすることができ、デザインのクオリティをもう一段階あげられると考えています。

Lottieアニメーション制作をはじめるきっかけになったり、悩んでいた部分の解決に繋がると嬉しいです！

---

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

• フロントエンドエンジニア
• アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

（2024年11月時点）