田口 冬菜
田口 冬菜

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種類あります。

  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

「Download」ボタンを押します。

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

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

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

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

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

KBar いっぱい出てて恥ずかしい…

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

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

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

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

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

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

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

田口 冬菜

田口 冬菜

Fuyuna Taguchi

三重県伊勢市生まれ。高校卒業後、4年間医療を学び理学療法士になる。二次救急病院のリハビリテーション科に所属し、急性期および回復期、外来の整形外科、脳血管、呼吸器、心臓疾患など臨床を経験する。臨床6年目で趣味としてデザインを学びはじめたところ、ハマりすぎてデザイナーに転職。半年後に上京、都内のデザイン会社へ就職し、2020年6月からneccoにデザイナーとして参画。人の心を動かすもの、魅せるデザインを日々探究中。仕事や自主制作でモーションデザインも楽しんでいる。最近は3DCGモデリングにもハマっている。好きなものはデザイン、本、アート、お出かけ、インテリア、犬、効率化。じっとしていることが苦手。おもしろそうなことはなんでもやってみる。

SHARE

TwitterFacebook

Other Posts

necco note
Vook主催ウェビナー「そのイラスト、動かしてみない? WebデザイナーのためのAfter Effects入門」DAY1バナー

Vook主催「そのイラスト、動かしてみない? WebデザイナーのためのAfter Effects入門」に2日間ゲスト講師出演しました。

necco Corporate Character HakonecoDOWNLOAD

necco Corporate Character HakonecoCONTACT