necco note
田口 冬菜
necco note
Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法
- Motion Design
After Effectsで作ったアニメーションを手軽に書き出し、ウェブサイトやアプリケーションに実装できるLottieアニメーション。
アイコンやイラスト、インタラクションなど、ちょっとした動きをつけたいときにneccoでも活躍しています。昨年はLottieの基本をまとめた記事も公開しました。
ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説 – necco note | necco inc.
Lottieでできること、できないこと、注意点などを前回の記事では紹介しましたが、書き出しに必要な「Bodymovin」のダウンロード・インストール方法はさらっと書いて終わってしまったので、今回はそこを詳しく書いていきたいと思います。
Bodymovinって何？
「Bodymovin」はAfter EffectsからLottieアニメーションを書き出すときに必要なエクステンションです。エクステンションはAfter Effectsにデフォルトで実装されていない機能を追加してくれる機能です。
YouTubeにBodymovinのプロモーション動画もあるので、一度見てみるとイメージがつきやすいかもしれません。
Bodymovinのダウンロード方法は2種類あります。
- Adobeからダウンロード
- GitHubからダウンロード
私はAdobeにログインするのがめんどうだったので、GitHubからダウンロードしました。このあと詳しく書きますが、GitHubからのダウンロードの場合は、別でZXP Installerというアプリケーションが必要になります。
方法1：Adobeからダウンロード
下記のリンクからダウンロードページを開き、右上にある「Install Now」ボタンを押します。
このあとAdobeアカウントのログインが必要になります。
先にも書きましたが、私はログインがめんどうでAdobeからのダウンロードをやめてしまい、ここまでしかフローを確認できていませんが、流れに沿ってインストールが完了するとAfter EffectsでBodymovinが使えるようになると思います。
方法2：GitHubからダウンロード
airbnbのGitHubからファイルをダウンロードし、ZXPインストーラーを使ってPCにインストールする方法です。（私はこちらの方法を利用しました）
1. まずはZXP Installerをインストール
下記のリンクからzxpファイルの使用に必要な「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年4月時点）
田口 冬菜
Fuyuna Taguchi
三重県伊勢市生まれ。地元の二次救急病院で約6年間理学療法士として約6年働き、趣味ではじめたデザインにハマってデザイナーへ転職。転職のタイミングでより成長できる環境を求めて東京に引っ越し。都内のデザイン会社1社を経て、2020年からneccoに入社した。入社後にはモーションデザインのスキルを身につけ、現在デザイナー・モーションデザイナーとして働いている。個人ではブログを書いたり、たまに動画・映像関連のメディア出演をしたりしている。著書に『これからはじめるFigma Web・UIデザイン入門』（マイナビ出版、2022）がある。インテリア、本、コーヒー、あまいもの、散歩、人の姿勢・動作観察が好き。
