どうもこんにちは!サカです。✋🐱
最近Lottieでモーションの書き出しをする機会がありました。手順自体は意外と簡単なので、DL・書き出し方法をatSTRIX内だけでサクッと把握できるようにまとめていきます!
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/08/975e2605898483dbb9dea349c83c42b0.gif)
Lottieとは?SVGとは?といったフォーマットの解説の部分は要約のみで進めますので、詳細を知りたい方は参考リンクを是非ご覧ください。
使用するAdobeアプリ:Adobe After Effects・Adobe illustrator
これからダウンロードするプラグイン:Bodymovin
本当は1つの記事でまとめたかったのですが、画像が多く重くなってしまいそうなので、
準備編とモーション作成&書き出し編の前後編にします。分けないとatSTRIXの〆にも間に合わなそうなので…..
そもそもLottieとは?
GIFやMP4よりもファイルが軽く、解像度も保ったまま、Webサイトやアプリ上に、少ない工数でアニメーションを実装できるライブラリです。
グラデーション等の難しい表現は現時点ではできませんが、Web/アプリ系でのアニメーション表現に非常に有用です。
aiファイルを素材として使用しますが、書き出しはSVGファイルになります。
https://necco.inc/note/7370
↑こちらの記事を参考にしていますので、もっと詳しく知りたい方はリンクからご覧ください。
準備① AEプラグイン「Bodymovin」のダウンロード
Bodymovin
Adobeにログインし、上記リンクからInstall nowボタンをクリックし、エラーメッセージなど出ずに読み込めたらダウンロードは完了です。▼ 簡単すぎる…!
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/bodymovinadobe.png)
Adobe After Effectsでの確認も必要です。
環境設定からプラグインがオンになっているか、
ウィンドウ→エクステンションにBodymovinがあるか確認しましょう。▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/bodymovin2.png)
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/bodymovin3.png)
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/512e1cb5ad033def227dc15bd0680e8e.png)
これでBodymovinが使えるようになりました。
Adobeにログインできない等、上記の方法が上手くいかなかった場合は
「ZXP Installer」をインストールし、
GitHubから「bodymovin.zxp」をダウンロードします。
ZXP Installerのウィンドウへbodymovin.zxpをドラッグ&ドロップし、After Effectsで確認してBodymovinがあれば完了です!
準備② illustrator-スタンプ素材の作成
動かしたいスタンプの素材を作っていきましょう!
変化前・変化後でレイヤー合計2枚を想定していますが、どんなアイコンでも大丈夫なのでillustratorの操作に慣れている方はなんでも自由に作ってみてください。
今回は例として、illustratorでハートを作って説明していきます。
1、正方形キャンバスを新規作成し、図形ツールで正方形を作る▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/b32b57bbc3b8ea31fec04d603ac009bc.png)
2、角の一点を消す▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/fa6376d43b223638d0b49204259f8907.png)
3、線を太くして線端を丸くする▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/d1cca899f5c047db346a20e6e9a46338.png)
4、回転して位置を整える▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/2448717dec6bac3c5f78128e390d1b10.png)
5、パスのアウトライン化▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/695126e39026b8e87191799632deed04.png)
6、レイヤーを複製して、塗りのみのレイヤーと線のみのレイヤーを作成する▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/653633891fd8eb08f3a3c3d594e6bf0f.png)
7、それぞれ別のaiファイルとして保存する▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/07/16b1aad806aefe89da9196a8317262d3.png)
以上で準備完了です。
準備③ After Effects-新規プロジェクト作成
1、新規プロジェクトを作成▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/08/171ae9ad7154fae65e58a056bbc5f749-1.png)
2、新規コンポジションの作成▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/08/4cc976a51fc089ac09437ac158f596f0.png)
3、正方形の画面を作成 フレームレート20で作ってしまいましたがLottieの仕様に合わせてフレームレート30にして大丈夫です。▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/08/c418ffa7cddb9ab9c5ec3063d548de90.png)
4、コンポジションが用意できました。ここにaiファイルをドラッグ&ドロップで入れていきます。
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/08/902211dd903c788e77a11fce86b26dfb-1.png)
この画面が出てきたら「フッテージ」を選択してOKを押してください。▼
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/08/61559516ddc6226f02e672f40aa03bf9-1.png)
![](https://at.strix-inc.jp/wordpress/wp-content/uploads/2022/08/f0e1d74f08c0177ee8cfc664d1039576.png)
ここまでで作業準備完了です!
次回記事でモーションエフェクトの作成とアニメーションの書き出し方法について解説していきますので、お楽しみに👋🐱