necco note
田口 冬菜
necco note
ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説
- Motion Design
neccoが制作するウェブサイトでは、2020年から「Lottie（ロッティー）アニメーション」の使用が増えました。
イベント登壇などでLottieのお話をすると、「Lottieって何？」とご質問をいただくことがあるので、今回はLottieアニメーションでできることから作成時の注意点、書き出し方法などについて紹介します。
Lottieとは？
Lottieは民泊サービスなどを展開している会社・Airbnbが作ったアニメーションライブラリです。
After Effectsで作ったアニメーションをLottie専用の拡張機能で出力することで、ウェブサイトやアプリ上でかんたんにリッチな動きのアニメーションが表示できます。エンジニアさんはアニメーションの細かい実装をする必要がないので、工数面でもクオリティ面でもいいことばかりです。
Lottieを使ったサイトの例
実際にLottieが使われているサイトの例です。次の株式会社WORDSさんのサイトでは、複数のページにLottieを使ったラインアニメーションがあります。
画面の幅やアニメーションの表示サイズに関わらず、線がはっきりなめらかに描画されています。動きにも安定感があり、Lottieのよさが伝わりやすいサイトだと思います。
WORDSさんのように「線」や「コンテンツ（文字）」の表現を大切にしているサイトでは、アニメーションのラインが少し荒れるだけで全体のクオリティが落ちてしまいます。イラストやデザインとの相性もありますが、シンプルできれいな線・オブジェクトを表現したい場合にはLottieがピッタリです。
Lottieを使うメリット
画像の書き出し形式にはGIF、APNG、MP4などもありますが、その中でLottieを選択するメリットは以下です。
- 高い解像度を保ったまま、サイズの拡大・縮小ができる
- GIFやMP4よりもファイルが軽い
- JavaScriptで再生のタイミングや逆再生などの制御ができる
LottieはSVGアニメーションになるので、どれだけサイズを大きくしてもなめらかな線が描画できます。また再生速度や逆再生などのカスタマイズができるのも大きな魅力です。
Lottieで出力できる表現、できない表現
Lottieはとても便利ですが、出力できない表現もあります。Lottieアニメーションを検討するときは、「できること」「できないこと」を頭にいれておく必要があります。
■ Lottieで出力できる表現
After Effectsでアニメーションを作成する際、次の要素で作られたものはLottieで出力できます。
- 単色で構成されたオブジェクト
- パスのトリミング
- 不透明度、スケール、回転など、基本的なアニメーション
- 背景透過
以下、Lottieで書き出しできる表現のサンプルです。（この記事内ではGIF・MP4動画を埋め込んでいます）
ぽよよんとキャラクターやアイコンがはねるような表現は、コードで一から書くと大変、ですよね…？Lottieであれば、After Effectsで細かい動きを設定して書き出すだけで、すぐにアプリやウェブサイトに実装できます。
■Lottieでは出力できない表現
Lottieでは、下のサンプル動画のようなイラストにリッチな効果が使われているもの、マスクをかける部分があるもの、音楽をつけたいものなどは出力できません。
- グラデーション（塗り・線）
- 複雑なエフェクト（After Effects標準装備のエフェクト全般）
- リッチな画像効果
- 3D表現
- マスク
- BGMなど音をつける
以下、Lottieでは出力できない表現を使ったサンプル動画です。（※音声の再生ボタンを押すと音楽が流れます）
Airbnbの公式サイトでは「将来的にグラデーションや画像のサポートにも対応したい」というようなことが書かれているので、今後アップデートして上記のような制限がなくなる可能性もあります。たのしみに待ちましょう！
After EffectsからのLottie書き出し方法
After EffectsからLottieアニメーションを作成したい場合の手順です。（書き出しにはエクステンション「Bodymovin」が必要です）
- ZXPInstallerがない人はインストール
- 拡張機能「Bodymovin」をインストール
- After Effectsでアニメーション準備
- 作成したアニメーションをBodymovinで書き出す
以下、それぞれ画像つきで説明していきます。
📝 追記 2022/4/13
Bodymovinのダウンロード・インストール方法をまとめた記事も公開したので、よければこちらも参考にしてみてください。
Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法
1. ZXPInstallerがない人はインストール
Lottieの書き出しに使う拡張機能（Bodymovin）はZXP形式ファイルなので、「ZXPInstaller」を使ってインストールする必要があります。ZXPInstallerを使ったことがない方は、以下のサイトからダウンロードできます。
https://aescripts.com/learn/zxp-installer/
2. 拡張機能「Bodymovin」をインストール
AirbnbのGithubから「Bodymovin」をインストールします。（だれでも無料でダウンロードできます）
https://github.com/airbnb/lottie-web
Bodymovinのインストールは、ZXPInstallerを開いてZXPファイルをドラッグ&ドロップするだけでOKです！
3. Afte Effectsでアニメーション準備
シンプルなアニメーションをAfter Effectsで作成します。（サンプルは見やすいように背景色をいれていますが、実際は背景色を透過して使います）
4. 作成したアニメーションをBodymovinで書き出し
After Effectsのメニューから次の順でBodymovinを開きます。
[ ウィンドウ ] → [ エクステンション ] → [ Bodymovin ]
Lottieの設定画面が表示されるので、書き出したいファイルを選択します（Selected）。
ファイルが選択できたら、Settingsを開いて出力するファイルの詳細設定に進みます。（Settingsの部分でマウスを止めると、小さいモンスターがでてきます。かわいいです）
Settingsの画面では、「Standard」が選択されていれば問題なく書き出しできます。
わたしはエンジニアさんに書き出しデータの共有や実装の相談をするとき、サッとブラウザ確認ができるように「Demo」にもチェックをいれることが多いです。
選択が終わったら「Save」のボタンを押して設定を保存。
最後にみどりの丸が3つ並んでいる部分を選択し、出力先と名前を決めます。
書き出しに必要な情報がすべて入力されると、左上の「Render」ボタンが押せるようになります。Renderボタンを押したらLottieアニメーションの書き出し完了です！
Aeでのアニメーション作成がむずかしい場合は「LottieFiles」
「アニメーションを自分で作るのはむずかしいけど、Lottieは使ってみたい！」
そんな方は、すでに作成されたLottieアニメーションが無料でダウンロードできる「LottieFiles」というサイトを利用してみてください。
気になるアニメーションのページで [ Download ] → [ Lottie JSON ] を選択、保存すれば、すぐに使えるJSONファイルを保存できます。
まとめ：Lottieの特徴を知って上手に活用
After Effectsで作ったアニメーションを、軽くて、きれいで、タイミングなどを調整できる形で出力できるLottieアニメーションの基本をご紹介しました。
アプリケーションやウェブサイトへの実装もかんたんで便利なLottieアニメーションですが、デザインや動きによってはAfter Effectsで作った動き・見た目が再現できない場合もあります。
アニメーションをLottieで出力する選択肢がある場合は、あらかじめLottieが得意とすること、苦手なことを把握し、うまく活用していきましょう。
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2023年9月時点）
田口 冬菜
Fuyuna Taguchi
三重県伊勢市生まれ。理学療法士として三重県の二次救急病院でリハビリの仕事をしていたところ、趣味ではじめたデザインにハマりデザイナーへ転職。せっかく転職するならと勢いで上京、都内のデザイン会社へ就職。neccoには2020年6月から参画。好きなものはデザイン、本、カヌレ、ウイスキーコーヒー、お出かけ、インテリア、犬。じっとしていること、繰り返し作業が苦手。いまが一番たのしいを更新しつづけている。
