そもそもLottieとは
Lottieはズバリ「ノーコードでWebアニメーションが作れる技術」とも言えます。
通常、WebアニメーションはcssやJavaScriptを使って実装しますが、LottieはAdobeの動画制作ソフトAfter Effects（以下Ae）で作ったアニメーションから、拡張機能(※1)を使ってJSONファイル(※2)を書き出すことができる技術です。書き出したJSONファイルをサイトに組み込むだけで、Webアニメーションの実装ができます。
※1：Bodymovin というプラグインです。
※2：データファイルの一種です。要するにテキストファイルです。
Lottieアニメーションの制作フロー
デザイナーからアニメーションの指示を受けて、エンジニアが実装する通常のWebアニメーションと異なり、Lottieアニメーションではデザイナーがアニメーションまで制作するため、細かいニュアンスを伝えたり、感覚的なフィードバック＆修正を繰り返すことが無く、スムーズにアニメーションを実装することが可能です。
通常のアニメーション制作フロー
Lottieを使った制作フロー
実際に作成してみました
ここからLottieアニメーションの作成手順を簡単にご説明します。
Illustratorで元となるデザインを作成
はじめからAeで作成しても問題ありませんが、今回は使い慣れたIllustrator（以下Ai）で元となるデザインを作成しました。
注意するポイントは以下になります。
- グラデーションは使用不可。
- 要素は全てベクターデータに。（アピアランスのままや、ラスタライズは不可）
- 動かす要素ごとに最上位レイヤーに分ける。（下記キャプチャ参照）
Aeを開き、Aiファイルを読み込む
Aeから新規コンポジションを作成し、ファイル>読み込み から、上記で保存したAiファイルを読み込みます。読み込みの種類は「コンポジション-レイヤーサイズを維持」を選択します。
シェイプに変換
Aiファイルを読み込むと左上のウィンドウに読み込んだファイル名が表示されるので、それをダブルクリックすると、タイムラインに各レイヤーが表示されます。
しかし、このままだとシェイプとして認識されずLottieを書き出すことができないため、各レイヤー名を選択し、右クリック＞作成＞ベクトルレイヤーからシェイプを作成 をクリックしてシェイプ化します。
アニメーションを作成
ここからアニメーションをつけていきます。動きによって出来る・出来ないがありますので、詳しくはLottieのブラウザ対応リストを確認になりますが、出来ることとしては、位置、サイズの拡縮、透過、などのシェイプを動かすアニメーションが可能です。
Aeの操作方法に関しては長くなるので割愛しますがyoutubeにも様々なhow to動画がありますので参考にしてみてください。
Bodymovinを使ってjsonファイルを書き出し
（事前にAeにプラグイン「Bodymovin」をインストールしておきます）
Lottieファイルの書き出しは、上のメニューバーから ウィンドウ>エクステンション>Bodymovin を選び、立ち上がった下記のウィンドウから作成したアニメーションを選びます。右端の三点リーダーから保存場所を設定し、Renderボタンを押せばjsonファイルが保存されます。
Lottieの公式サイトで確認
Lottieのサイトにアカウントを作成し、jsonファイルをアップロードすればアニメーションの確認が可能です。Shareから他の方にURLで共有し確認も出来ます。また、jsonファイルはXDに貼り付ければプレビューからアニメーションの確認が可能です。（Shareでの共有は各自アカウントが必要です）
完成したアニメーション
こちらが完成したアニメーションです。
（サイトの都合によりGIFデータですがLottieでの動作も確認済みです）
メリット・デメリット・注意点
メリット
- デザイナーが作業するため、指示やフィードバックの必要がない
- エンジニアの工数が少ない
- XDでプレビューが可能（テストアップ前にクライアント確認ができる）
- ファイルサイズが軽く、サイト読み込み時の負担が少ない
デメリット
- After Effectsの操作が必要
- デザイナーの工数がかかる
- ブラウザ対応の確認が必要
注意点
Lottieファイルの使用に関しては、組み込むサイトの状態や仕様的にパフォーマンスへの影響がないか、などを事前にエンジニア・ディレクターに確認した上で取り入れる必要があります。また、Lottieで実装できるAfter Effectsのモーションには制限があり、対応表の確認や実装後のブラウザ確認が必須となります。
デザイナー側に増える工数
今回ご紹介した方法でアニメーションを制作する場合、気になるのがデザイナーにかかる工数です。
工数に関しては、上記でご紹介したアニメーションの作成に約1〜2時間でした。（ある程度制作に慣れてきた状態で、なおかつIllustratorで作成したベースデザインが既にある場合）
After Effectsに慣れていくことで、工数はもう少し削減できそうな印象です。
まとめ
今回のようにデザイナーがWebアニメーションを制作するフローを採用することで、エンジニアの負荷を増やすこと無くクライアントの要望を叶えることができました。
また、工数を想定しやすいため、デザイン提案の際にアニメーションの提案がしやすくなったことも、利点として上げることができます。
現時点では実例が少ないため、今後はWebサイトのどのような箇所に使用できるかなど、可能性を検証していきたいと思います。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
