Lottieを無料プランで実用的に活用する
これまでWebサイトにアニメーションを挿入する方法といえば「動画ファイル（mp4, gif, webmなど）を直接挿入する」または「HTMLタグに対してJavaScriptやCSSでモーションを付ける」といった手法が主流でした。
今回は、それらに替わる新しい選択肢として、Lottieを使ったアニメーション制作〜実装までを試してみたので、その手順とポイントをレポートします。
INDEX
Lottieとは？
Webサイトに軽量なアニメーションを挿入できるサービスです。
LottieFiles公式サイト（日本語）
動画と比べてファイルサイズが小さく、表示が軽いのが特徴で、JavaScriptによる制御コストも低く抑えられます。
Lottieでできること
私もまだ全容は検証・把握できていませんが、多機能で選択肢も多いです。
アニメーション作成
ブラウザで利用する専用ツールLottieCreatorで直接制作できます。
また、AfterEffectsやFigmaなど外部ツールで作成したデータも利用可能。
選べるエクスポート形式
軽量なJSON形式（Lottieの本命形式）や、動画形式（mp4, webm など）でエクスポートできます。
選べる埋め込み方法
①lottie-web（公式ライブラリ＋JavaScript制御）
②lottie-player（専用HTMLタグ）
③iframe
④動画形式で直接使用
特に①のlottie-webは軽量かつ制御が自由で、Lottieを使う大きなメリットが得られます。
マーケットプレイス
他のクリエイターが公開しているアニメーションをそのまま利用可能。
無料プランを実用的に活用するには
Lottieには無料〜有料プランがありますが、無料プランでは動画形式エクスポートやアップロード回数に制限があります。
特にアップロード制限はすぐ上限に達するため、業務利用では有料プランを検討したほうが良い場面もあります。
ただし、AfterEffects+Bodymovinを使えば無料プランでも十分活用可能です。
AfteEffectsに拡張機能「Bodymovin」をインストールする
BodymovinはAfterEffectsで作成したアニメーションをLottieで使えるJSON形式でエクスポートできるようにする拡張機能です。
Bodymovinのダウンロード（GitHub）
Bodymovin（GitHub）
※インストールにはZXP Installerが必要。
インストールが完了したらAfterEffectsを起動して「設定 > スクリプトとエクスプレッション」を開き「スクリプトによるファイルへの書込みとネットワークへのアクセスを許可」にチェックを入れます。
Illustrator（.ai）ファイルを読み込み、アニメーション制作
AfterEffectsにIllustratorのファイルを読み込んで、アニメーションを作成します。
AfterEffectsの操作方法ついては割愛しますが、ポイントは3つ。
1.Illustratorでは動かすパーツごとにレイヤー分けをする
2.AfterEffectsに正しい設定で読み込む
読み込みの種類は「コンポジション – レイヤーサイズを維持」
「コンポジションの作成」と「Illustrator/PDF/EPS シーケンス」はチェックしない。
3.読み込んだレイヤーをシェイプに変換
埋め込んだ際に、拡大・縮小しても劣化しないようにするために、読み込んだレイヤーをシェイプ（ベクターオブジェクト）に変換します。
レイヤーを右クリックして「作成 > ベクトルレイヤーからシェイプを作成」
JSON形式で書き出し
「ウインドウ > エクステンション > Bodymovin」から、JSON形式で書き出します。
HTMLに埋め込み
<!-- 公式ライブラリ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<!-- 描画エリア -->
<div id="lottie-box" style="width:300px;height:300px;"></div>
<!-- 再生の制御 -->
<script>
lottie.loadAnimation({
container: document.getElementById('lottie-box'), // 描画エリア
renderer: 'svg', // 描画方式
loop: true, // ループ再生
autoplay: true, // 自動再生
path: 'animation.json' // JSONファイル
});
</script>上記コードはわかりやすくまとめましたが、ライブラリを読み込む場所は<head>内や</body>直下が好ましいです。また、loadAnimationの実行よりも前に読み込む必要があります。
style設定や再生制御のJavaScriptも外部化推奨で、レスポンシブや任意のタイミングによる調整やコントロールができます。
loadAnimationのオプションについて詳しくはこちら。
まとめ
・Lottieは軽量で制御しやすいアニメーション実装手段
・無料プランでもAfterEffects + Bodymovinを使えば十分実用的
・業務利用のスタイルや頻繁なアップロードには有料プランも検討価値あり
・将来のサービス終了リスクも考え、重要なアニメーションは動画形式でも保存しておくと安心かも
実際に、今回Lottieを使ったアニメーションを挿入したサイトはこちら：
https://web-reform.sezaki-design.com
