L O A D I N G

SNS

MENU

CLOSE

0422-70-3802

C O N T A C T

1
EN

HELLO!

JP

CONTACT - STEP01

お問い合わせ内容を以下の中から選択してください。

お仕事のご依頼
採用のお問い合わせ
その他お問い合わせ

CONTACT - STEP02

以下の項目よりご依頼内容を選択してください。

ブランディングに関するお問い合わせ
ディレクションに関するお問い合わせ
制作全般に関するお問い合わせ
デザインに関するお問い合わせ
開発に関するお問い合わせ

CONTACT - STEP03

以下よりご予算を選択してください。

APPROXIMATE BUDGET
0 yen
0 yen
~
2,000,000 yen
~
4,000,000 yen
~
6,000,000 yen
~
8,000,000 yen
~
10,000,000 yen

CONTACT - STEP04

以下よりプロジェクトの公開日を選択してください。

ESTIMATED TIMELINE
0 month
0 month
~
1 month
~
2 month
~
3 month
~
4 month
~
5 month
~
6 month

CONTACT - STEP05

以下のフォームよりプロジェクトの情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
COMPANY ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下の項目より職種を選択してください。

ディレクター
デザイナー
ディベロッパー
その他

CONTACT - STEP03

以下よりご経験年数を選択してください。

YEARS OF EXPERIENCE
1 year
0 year
~
1 year
~
2 year
~
3 year
~
4 year
~
5 year
~
6 year
~
7 year
~
8 year
~
9 year
~
10 year

CONTACT - STEP04

以下の項目よりご希望の雇用形態を選択してください。

正社員
契約社員

CONTACT - STEP05

以下のフォームより志望動機をご記入ください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
URL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下のフォームより情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎
STEP01

C L O S E

S U B M I T

CONTACT COMPLETE

お問い合わせありがとうございます。
お問い合わせ内容を確認させていただき次第、担当者より返信させていただきます。

THANK YOU
CLOSE

NEWS

BLOG May.15.2019

アプリのアニメーションをLottieでつくる

by Staff

SHARE

先日、Lottie(ロッティー)を使用したアニメーション制作をする機会があったので、備忘録も兼ねて所感を書かせていただきます。

これから制作を始める方の助けになれば幸いです。

実際にLottieに挑んだプロジェクトはこちら。ご参考までによかったらご覧になってみてください。

【HELLO SCOOTER サービスサイトプロジェクト】
https://uniel.jp/project/hello-scooter/

Lottieとjson

Lottieとは、特にモバイルアプリでAfter Effectsで制作したアニメーションを綺麗に再生できるアニメーションライブラリ(≒仕組み)のことです。

公式サイトには、Lottieで制作された様々なアニメーション作品が投稿されています。

かわいいローディングや、アイコンのアニメーションがたくさんあって、見ているとワクワクしてきますよ。
https://lottiefiles.com/popular

そして、このLottieでアニメーションを表現する場合、jsonという形式のファイル(以下json)を用います。

jsonは感覚としてはsvgと似ており、ざっくりいうと「JavaScriptの中でオブジェクトを表現するためのコードが書かれたファイル」です。この記事では、After Effectsで作ったアニメーションを正しくjsonで出力するまでのポイントを書いていきます。

After Effectsでjsonを出力する準備をする

はじめに、After Effectsだけではjsonを出力できないので、「Bodymovin」というプラグインを入れて環境を整えます。

下記URLからプラグインを導入できます。
https://www.adobeexchange.com/creativecloud.details.12557.html

※上記からの導入がうまくいかない場合は、ZXP Installerを用いた方法を試してみてください。

インストールが完了したら、タスクバーの [編集] > [環境設定] > [一般設定] の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れてください。

これでAfter Effectsで制作したアニメーションをjsonで出力することができるようになりました。導入したBodymovinの起動は [ウィンドウ] > [拡張機能] > [Bodymovin] から可能です。

出力したいコンポジションを選択・保存先を指定し、「Render」をクリックすれば出力されます。この時、前述の環境設定のチェックを入れ忘れると動かないので注意してください。

アニメーションさせるものをつくる

After Effects上でオブジェクトを配置して、それにアニメーションをつけていくこともできますが、Illustratorで作ったパスデータを取り込んでそれを動かした方が簡単なので、おすすめです。

この時、コンポジションにドラッグ&ドロップで配置したaiデータではjsonに出力されないので、配置したaiデータを [レイヤー] > [作成] > [ベクトルレイヤーからシェイプを作成] でシェイプに変換してください。

作成したシェイプレイヤーの方を編集し、jsonに書き出してください。

失敗談

初めて制作したときに失敗した点です。

1.先にも触れた通り、シェイプレイヤーに変換していないaiファイルは、画像のような扱いになるのでjsonで出力してもエラーになります。

2.サポートされていない機能もあるので注意してください。3Dレイヤー、レイヤー効果などは現在未対応のようです。

対応機能の一覧については下記の「Supported After Effects Features」をご参照ください。
https://github.com/airbnb/lottie-ios

特に、レイヤー効果については現在未対応のため、Illustratorでオブジェクトを制作をする際は通常モードで制作することをお勧めします。

余談ですが、欲しかった機能の一つである「タイムリマップ」が最近対応されたようです。このように、今後も対応機能が増えていくと思われるので、随時アップデートを確認すると良いです。

3.Lottieは、PCサイト(下記URL)にjsonデータをドラッグ&ドロップすることで、プレビューすることができます。
https://lottiefiles.com/preview

しかし、PCサイトのプレビューとスマートフォンのプレビューには差異が発生することもあります。

スマートフォンでの表示を検討している場合は、Lottieのプレビュー用のアプリを入れて、実機で動作を確認することをお勧めします。

最後に

Lottieは、社内のメンバーにお勧めされたことがきっかけで触り始めました。初めはいろいろと躓きましたが、私も様々な記事を読んで理解を深めつつあります。

調べると大体の解決策は出てくるので、興味がある方は是非チャレンジしてみてください。Lottieを用いたアニメーションの制作の利点は、エンジニア側の実装コストの軽減もありますが、体感で自分の理想とするアニメーションを制作できる点だと思います。

仕様や特徴を覚えて、ウェブサイトやアプリを華やかにしてみてはいかがでしょうか。


本記事は、緊急事態宣言により、外出自粛が要請される中、みなさまに少しでもおうち時間を有意義に過ごしていただけたらと、過去執筆した記事を加筆・編集し、アーカイブ記事としてご提供させていただいています。

みなさまのおうち時間がより良いものになりますよう、そして、新型ウイルス感染の収束をスタッフ一同願っております。

by Staff

SHARE

OTHER ARTICLES

TOPIC
Apr.27.2017

G.W.の休暇のお知らせ

by Staff

TOPIC
Dec.26.2018

年末年始休暇のお知らせ

by Mami Ohtani

BLOG
Nov.12.2019

MapAPIの利用にあたって

by Staff

SCROLL TO
CLICK TO
N E W S   A L L
TAP TO NEWS ALL