田口 冬菜
田口 冬菜

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

三重県伊勢市生まれ。理学療法士として三重県の二次救急病院でリハビリの仕事をしていたところ、趣味ではじめたデザインにハマりデザイナーへ転職。せっかく転職するならと勢いで上京、都内のデザイン会社へ就職。neccoには2020年6月から参画。好きなものはデザイン、本、カヌレ、ウイスキーコーヒー、お出かけ、インテリア、犬。じっとしていること、繰り返し作業が苦手。いまが一番たのしいを更新しつづけている。

SHARE

TwitterFacebook

Other Posts

necco note
実績 ACES 制作メンバーの写真

ACESのウェブサイトができるまで|情報設計・デザイン・モーション制作編