【初心者向け】Lottieでメインビジュアルのキャラクターをいい感じに動かした〜い！！！💞✨

やっほ〜〜🌈  

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/5a0f79f7-0480-4c62-bd0b-173cd0e2badb.png" width="300">

うちらのポイントサイト「**モッピー**」が今年でなんと**20周年 🎉**！！  
それをお祝いして、**アニバーサリーLP**つくったよ〜〜👏🎂✨  

工数ちょいタイトだったんだけど、  
**せっかくだしメインビジュアル、可愛く動かしたくない！？** ってことで、  
今回はじめて **Lottie** 使ってみたの🫶💖  

こんな感じになったよ〜💃👇

![画面収録 2025-04-30 17.05.58.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/9c5f5b3d-d7f4-4620-9b13-17284502fd60.gif)



## 💭「Lottieってなに？」って人向けに〜🫧

**Lottie**っていうのは、After Effects（AE）とかで作ったアニメーションを  
**めちゃ軽いJSON形式でWebとかアプリに載せられるライブラリ**のことだよ〜！

### 🧃Lottie登場前のアニメ事情ってこんな感じ👇

| 手法               | お悩みポイント                                                           |
|--------------------|------------------------------------------------------------------------|
| mp4とかの動画       | 重いし、拡大すると画質ガビガビ…💦 <br>ユーザー操作とも連動しにくい！         |
| GIF               | 画質いまいち、容量重い、<br>ループしかできない🥲                        |
| コーディング再現     | デザイナーが思ってる動き、<br>エンジニアが再現するのむずすぎ問題💥       |

👩‍🎨「こんな感じで動かしてほしいの〜！（AEファイル渡す）」  
👨‍💻「え…これJSとCSSで全部手書き？泣いていい…？」



### 🪄そんな時、Lottieが登場して革命起きた

👩‍🎨「AEで作って、BodymovinでJSON書き出したよ〜」  
👨‍💻「神か… `lottie.loadAnimation()` 書くだけやん！」



## ✨Lottieの推せるとこまとめ〜📝

- **軽い！** → JSON形式だから、動画とかGIFよりめっちゃ軽量🐣  
- **画質キレイ！** → ベクター形式なので拡大してもガビらない👏  
- **コードいらず！** → AE使えれば誰でもそれっぽいアニメ作れちゃう🎨  

:::note warn
#### 🧡 補足メモ：LottieとLottieFilesはちょっと別モノ！
わたしが最初ちょっと勘違いしてたことあるから、シェアしとくね〜！

検索すると「LottieFiles」っていうの出てくるけど、  
**LottieとLottieFilesって、似てるけどちょい別モノ！⚠️**

- **Lottie**：AEとかで作ったアニメをWebとかアプリで動かす「ライブラリ」  
- **LottieFiles**：アニメ素材がいっぱいある「マーケット＆ツールサイト」 

LottieFilesのエディターでもちょっとしたアニメ作れるけど、 
**AE慣れてる人はふつーにAE→Bodymovinで書き出すのが速いと思う！**

わたしは最初、LottieFilesからしか書き出せないと思いこんでて、  
AEで作ったやつ無理やり読み込ませようとしてた🤣  
でも、ふつうにAEで作ってBodymovinで書き出せばOKです◎
:::


## 💡ざっくり実装フローまとめたよ👇

### 🖌 Step 1：Illustratorで素材つくる

- ロゴとかキャラとか、**動かしたいパーツはベクター形式で用意**
- レイヤー分けもちゃんとしておくと、あとで動かしやすいよ🙆‍♀️  

例：顔／目／手／背景…とかね！

![qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/43175ea6-52d9-43b4-b43e-7045202ab370.png)

（ほんとはもっとたくさんキャラの手とか体とか動かしたかった〜😭）

---

### 🎞 Step 2：After Effectsでアニメつくる

![スクリーンショット 2025-05-01 17.11.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/1f08a5d7-827f-406a-b33a-70b5cb41d5d7.png)

1️⃣ Illustratorファイルを読み込んで「コンポジション - レイヤーサイズを維持」で開く  
2️⃣ レイヤーを右クリックして「シェイプレイヤーに変換」←**ここめちゃ大事！たぶん！**

   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/8ce64ad1-0e30-49a5-82fd-4e1335990a51.png" width="300">

3️⃣ トランスフォーム（位置・回転・透明度など）使ってアニメつけてく！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/a2a57260-18fd-4f61-870b-b7b70ff54aab.gif" width="300">

:::note warn
一部のエフェクトやエクスプレッションは
Lottieで動かないことあるから注意だよ〜！  
[▶︎Lottieのサポート表はこちら](https://airbnb.io/lottie/#/supported-features)
:::
 
---

### 📤 Step 3：Bodymovinで書き出し（JSON化）

1️⃣  After EffectsにBodymovinプラグイン入れる（Adobe公式にあるよ）  
2️⃣ ツールバー → `After Effects` → `設定` → `スクリプトと拡張機能`  
　 ✅ 「スクリプトによる書き込みとネットワークアクセスを許可」にチェック入れといて！

   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/137e2082-a822-4fe0-8c27-125053efdb0a.png" width="600">

3️⃣  書き出したいコンポジションを選んで、JSONでエクスポート！✨

![スクリーンショット 2025-05-01 17.40.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582698/80ddbdb0-b89e-49c6-af80-aeaa8ea11f87.png)

---

### 🌐 Step 4：Webで実装！

CDN読み込んで、Lottie動かすだけ！

```html
 <!-- CDN読み込むよ -->
<script src="https://unpkg.com/lottie-web@5.12.0/build/player/lottie.min.js"></script>

 <!-- アニメーション入れたいところにdiv書くよ -->
<div id="lottie-container"></div>

<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'your-animation.json' //jsonファイルのパス書くよ！
  });
</script>
```

ちなみに、LottieFilesでは無料で公開されてるアニメーションも使えるよ！
試しに猫のやつ入れてみたらかわいかった🐱💕

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZYYvXBK" data-pen-title="Untitled" data-user="dcdakxpd-the-flexboxer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/dcdakxpd-the-flexboxer/pen/ZYYvXBK"> Untitled</a> by suzuki (<a href="https://codepen.io/dcdakxpd-the-flexboxer">@dcdakxpd-the-flexboxer</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://public.codepenassets.com/embed/index.js"></script>

## 🔗 参考リンクまとめておくね！

- [LottieFiles公式チュートリアル](https://lottiefiles.com/tutorials)
- [Airbnb公式ドキュメント](https://airbnb.io/lottie/)

🌟 事例いろいろ見れるやつ
- [事例](https://lottiefiles.com/case-studies)
- [DuolingoのLottie事例](https://lottiefiles.com/case-studies/duolingo)
🦉Duolingoのあのキャラの動きもLottie使われてるらしいかわいすぎるので見て：



## 🥰 まとめ
ちょっとでも動きが加わるとめちゃ映えるから、
「おしゃれで軽いアニメやりたい！」ってときは、Lottieほんとオススメだよ〜💖

若干ざっくり説明だったけど、手軽さを感じてもらえたらうれしいなって思ってる🫶



:::note info
本記事は手軽さを表すべく、AIによる校正を行なっております
:::

```c:ギャル口調のプロンプト例
この文章を、令和ギャルが書いたような口調にしてください。
- 軽やかでテンション高めだけど、説明はわかりやすくてちゃんと伝わる
- 絵文字や顔文字を自然に使ってOK（💖✨🫶😂など）
- 専門用語はラフに言い換えてもOKだけど、要点はちゃんとキープ
- 相手をちょっと巻き込むような語り口で（例：「〜じゃない？」「〜かも！」など）
- 砕けすぎず、親しみやすく明るいトーンで
```