Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法

After Effectsで作ったアニメーションを手軽に書き出し、ウェブサイトやアプリケーションに実装できるLottieアニメーション。

アイコンやイラスト、インタラクションなど、ちょっとした動きをつけたいときにneccoでも活躍しています。昨年はLottieの基本をまとめた記事も公開しました。

ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説 – necco note | necco inc.

Lottieでできること、できないこと、注意点などを前回の記事では紹介しましたが、書き出しに必要な「Bodymovin」のダウンロード・インストール方法はさらっと書いて終わってしまったので、今回はそこを詳しく書いていきたいと思います。

Bodymovinって何？

「Bodymovin」はAfter EffectsからLottieアニメーションを書き出すときに必要なエクステンションです。エクステンションはAfter Effectsにデフォルトで実装されていない機能を追加してくれる機能です。

YouTubeにBodymovinのプロモーション動画もあるので、一度見てみるとイメージがつきやすいかもしれません。

Bodymovinのダウンロード方法は2種類あります。

1. Adobeからダウンロード
2. GitHubからダウンロード

私はAdobeにログインするのがめんどうだったので、GitHubからダウンロードしました。このあと詳しく書きますが、GitHubからのダウンロードの場合は、別でZXP Installerというアプリケーションが必要になります。

方法1：Adobeからダウンロード

下記のリンクからダウンロードページを開き、右上にある「Install Now」ボタンを押します。

Bodymovin

このあとAdobeアカウントのログインが必要になります。

先にも書きましたが、私はログインがめんどうでAdobeからのダウンロードをやめてしまい、ここまでしかフローを確認できていませんが、流れに沿ってインストールが完了するとAfter EffectsでBodymovinが使えるようになると思います。

方法2：GitHubからダウンロード

airbnbのGitHubからファイルをダウンロードし、ZXPインストーラーを使ってPCにインストールする方法です。（私はこちらの方法を利用しました）

1. まずはZXP Installerをインストール

下記のリンクからzxpファイルの使用に必要な「ZXP Installer」をインストールします。（無料でインストールできます！）

ZXP Installer

実際のアプリケーション画面はこんな感じ。

ZXP InstallerはBodymovin以外にも便利なエクステンションを使うときに必要になることがあるので、After Effectsを今後も使っていきたい方はインストールしておいて損はないと思います。

2. GitHubから Bodymovin.zxp をダウンロードする

次にairbnbのGitHubからBodymovinのzxpファイルをダウンロードします。

以下のリンクからGitHubを開き、「bodymovin.zxp」を選択。

lottie-web/build/extension at master · airbnb/lottie-web

Bodymovin.zxpがダウンロードできたらZXP Installerを開き、ファイルをドラッグ&ドロップします。するとAfter EffectsでBodymovinが使えるようになります。（After Effectsが起動している場合は一度終了して開き直します）

以上でBodymovinのダウンロード・インストールは完了です！

3. Bodymovinが使えることを確認

After Effectsを起動してBodymovinが使えることを確認してみましょう。

[ ウィンドウ ] → [ エクステンション ] → [ Bodymovin ]

Bodymovinを選択して、以下の画面が表示されればOKです！

Bodymovinが使えない場合は環境設定を確認

「Bodymovinはインストールできた！エクスプレッションからBodymovinの画面も開く！でも使えない！」という場合は、以下のAfter Effectsの設定を確認してみてください。

[ 環境設定 ] → [ スクリプトとエクスプレッション ] → 「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」を有効にする

以上でBodymovinのダウンロード・インストール方法の説明を終わります！

Lottieアニメーションの作成方法や注意点、できること、できないことなどは以下の記事に書いているので、よければこちらも参考にしてみてください。

ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説

---

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

• フロントエンドエンジニア
• アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

（2024年3月時点）