After Effects覚え書き#5 Lottieでアニメーションアイコンを作ってみた！
動画制作の独学を始めてから、作ったアニメーションをどのようなワークフローでWEBサイトに取り込むことができるのかな？という実装面を色々調べていた時に、Lottieにたどり着きました！
そんな時ちょうど、社内でも使い始めたデザイナーさんもちらほら出てきましたので、みんなの情報交換の役割も兼ねて、私も実際にLottieを使ってアニメーション作成→jsonファイル書き出し→実装までの流れを想定して、予習＆検証＆覚え書きをこちらにまとめておこうと思います！
Lottieって何？どんな使い方ができるの？
まずは、Lottieがどんなサービスで、どんなことができるのかを調べながら整理してみました！
民泊マッチングサービスAirbnbが開発したアニメーションライブラリLottie（公式サイト：https://airbnb.design/lottie/）だそうです。
（素敵なライブラリを作ってくださって感謝！）
【特徴】としては
・Webサイトはもちろん、iOSやAndroidのアプリにも組み込むことができ、従来の方法よりも動作が軽く、簡単に実装することができる。
【注意点】としては
・画像を含むアニメーションには対応していない！！
なので、代表的なソフトを例に上げるとIllustratorやXD、Figmaなど（他にもあるようです！）ベクターデータで作成されたイラスト等のアニメーションしか対応してないようで、写真等の画像データを含んだ状態で書き出すと、json形式に変換した時点で表示されなくなるそうです。写真などの画像を含んでる場合はMP4やGIFアニメでの書き出しになりそうですね。
そっか…商品画像や人の写真などが入った動画には使えないなのか（＞＜）
…と、ちょっと想定していた使い方ができなかったことに、多少がっかりしたものの、
しかし！！Lottieを活用するメリットは多かったのです！
Lottieを使うメリット
【Lottieを使うメリット】
・MP4やGIFなどの動画ファイルよりも、とても軽いサイズで実装可能！
（アイコンであればわずか数KBほど）
・拡大しても解像度が変わらない！SVGで出力されるためサイズを拡大しても荒れない！
（だから、レスポンシブ対応で画像は非対応なのね～、納得！）
・After Effectsで動画を作成するため、CSSやjQueryのようにコードに制限されることなく、イメージ通りの動きを表現できる！
（デザイナー側でjsonファイルまで準備できるから、フロントエンドのエンジニアさんの制作＆スケジュール負担も軽減できるてwin-winな感じが嬉しいですね！）
・JavaScriptや、Lottie独自のメソッドで、幅広いカスタマイズができる
（まだ多くは調べきれていませんが、https://lottiefiles.com/で出力したjsonをプレビューしたり編集、htmlに埋め込み用のコード出力等もできたりする！）
ファイルサイズが軽くて、拡縮しても荒れないで再現できるところが、さまざまなデバイス幅に対応できるのがWEBサイトに向いてますね！
上記の内容は以下のサイトから参考にさせて頂きましたm(__)m
もっと詳しく知りたい方は、参考元サイトへGo！
Lottieを使うためにはBodymovinとZXP Installerをダウンロードしてインストールする
まずLottieを使うために、After Effects上で使用するプラグイン、BodymovinをLottie公式サイトからダウンロードしてインストールする必要がありますが、ダウンロードすると、Bodymovin.zxpファイルというデザイナーの私は普段見慣れない拡張子で、そのままではインストールできないので、インストールするために、ZXP Installerもインストールする必要があり、ちょっと最初の設定は少し時間がかかりました（＾＾；）
詳しいインストール手順は、以下のサイトを参考させて頂き、何とかインストール完了！
Lottieで実装するためのベクターデータ作成＆書き出し時のコツや注意すること
After Effectsで使用する元データはベクターデータである必要があります。
代表的なソフトIllustratorで作成する時のコツや注意点を整理すると、
【Illustratorで作成する時のコツや注意点】
・ファイルの大きさは作りたいアイコン等の実寸サイズ
（例：W100px H100pxとか、実寸で使いたいサイズ。最終的にはSVGで書き出させるから、あとから拡大もできるかも）
・カラーはもちろんRGBモードで！
（印刷用のロゴデータ等をCMYKでそのまま取り込んだら、色味がくすんでました）
・動かすパーツ毎にレイヤーを分ける
（切り替わるパーツも非表示状態で分けておくと、After Effectsで取り込んだあと非表示レイヤーもくっついてきました～）
After Effectsに取り込んだ時や、書き出し時の注意点もまとめると
【After Effectsでの注意点】
・aiファイルをコンポジションで読み込む
・読み込んだら編集前にレイヤーを全て選択して「作成」＞「ベクトルレイヤーからシェイプを作成」でシェイプ化しておく（元のデータは削除してOK）
・レイヤー名はわかりやすい短い英語表記にしておく方が良い
（日本語入力でも大丈夫ですが、チームで作業したりする時はMacとWindows間でファイルをやりとりする場合のフォントの文字化け予防のため）
・アニメーション作成後、「ウィンドウ」＞「エクステンション」＞「Bodymovin」でjsonファイルに書き出し→★補足photo1
・Bodymovinの画面上で、「書き出し先」を選択、Settingsで”Demo”を選択するとHTMLもjsonファイルとは別に書き出されて、ブラウザでローカル確認できるので便利。→★補足photo2、★補足photo3
★補足photo1
★補足photo2
★補足photo3
データの作成手順や注意点も以下のサイトを参考に検証させていただきました！
もっと詳しい解説を知りたい方は、以下の参考サイトへGo！
実装する時は、エンジニアさんとLottieについての事前共有＆アニメーションの実装後の動作確認が大事
書き出したjsonファイルをWEBサイトで使用するためには、普段コーディングしないデザイナーの私の場合は、フロントエンドを担当しているエンジニアさんにjsonファイルを渡して、WEBサイトに設置＆読み込んでもらってアニメーションを描画させるワークフローになります。
なので、実務でLottieでアニメーションを作って実装することになったら、事前にLottieについてエンジニアさんにも共有しておくことも大事になりそうですね！
また、After Effectsのエフェクト機能で、Lottieで対応していないものも多いようなので、デザイナー側でアニメーションを作る段階から、表示させたい環境（プラットフォーム）で再現できるエフェクトだけを使用するように注意しながらアニメーション制作→jsonファイルを書き出すようにすれば、後々、実装してみてから「あれ！？この環境だと、動いてないよ！？」という手戻りをデザイン段階で防げるのかなと思いました。
【制作前に要確認】LottieFilesの「Lottieがサポートする機能」のページ
ちょうど、先日、同じチームのデザイナーWさんが、先駆けて実案件で、Lottieでアニメーションを作り、マークアップのエンジニアさんとやりとりした経緯等が伺えましたので、その時のフィードバック等も参考にエンジニアさんと共有する内容をまとめてみました！
埋め込み方法とかの参考サイトのご共有、かなり有り難いですm(__)m
＜エンジニアさんと共有事項＞
★書き出したjsonファイル＆プレビュー用HTMLファイル
★Lottieの公式ページ：https://airbnb.design/lottie/
★埋め込み方法の参考サイト（JSで表示）：notes by SHARESLのinoueさんのブログ記事「Lottieを使ってアニメーションを表示させてみる」https://notes.sharesl.net/articles/1379/
あと、念の為、事前にデザイナー側でも確認して制作したサポート機能のページもデバック用に共有しておくと安心かも？
★LottieFilesの「Lottieがサポートする機能」のページ：https://lottiefiles.com/supported-features
実装後は、アニメーションが対象環境で想定していた通りに動いているか、デザイナーもエンジニアと協力してしっかり確認が必要ですね！
＜まとめ＞Lottieが活用できることをデザイン段階から検討しつつ、積極的に使っていきたい！
Lottieについてや、AfterEffectsでの編集＆書き出し方法が分かったので、あとは、実際の仕事でも活用できるシーンでは、積極的に試しながら制作し、実装してみたいと思います！
また、今回はIllustratorデータの元データの場合をシミュレーションしてみましたが、Adobe XDやFigmaデータからのアニメーション作成なども検証して、効率良いアニメーション作成のワークフローも探ってみたいと思っております！今後、また検証共有できるように準備してみます～
それでは、最後まで読んでくださり、ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？