Lottieでアプリにアニメーションを組み込む話（デザイナー編）

最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。

アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。

とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。

最後にアニメーションとデザインについても簡単にまとめてみたいと思います。

ちなみに私は最近Motion Designについてすごく興味を持っているのですが、それについてはまた別の機会に…。

INDEX

Lottieとは

2017年2月にAirbnbが発表した、Web・iOS・Android・React Nativeなどでアニメーションを組み込むためのライブラリです。

きれいなアニメーションをリアルタイムにレンダリングでき、しかも軽量に、とっても簡単に実装することが可能で、アニメーションを作成するデザイナーとフロントエンジニアの連携をスムーズにするという意味でも大変便利なツールです。

リリースから１年以上経っていますが積極的にアップデートされていて、リリース当初にサポートしていなかったけれどアップデートで使えるようになった部分もありますので、そのあたりも一部触れながらご紹介します。

airbnb.design

Lottieのメリット

アニメーションを組み込む方法としてはGIFやPNGによるアニメーションなども考えられますが、それぞれアニメーションのコマ数分のイメージが必要となるため、ファイルサイズが重くなりがちです。 ファイルサイズを軽くしようとコマ数（フレームレート）を減らそうとすると、その分なめらかなアニメーションからは程遠くなっていきますしね。

その点、LottieはリソースファイルとしてJSONデータを使用しますので、大きくても数十KB程度のファイルサイズで、なめらかなアニメーションを描画することができます。 厳密にはライブラリのファイルサイズもありますが、それでもGIFアニなどと比べればかなり小さくなります。

軽くて綺麗という意味ではSVGアニメーションも同様ですが、複雑なSVGアニメーションを作成・実装するのは手間が多かったり、難しかったりします。

LottieはAftterEffectsを使用して作成したアニメーションを簡単なコードで組み込むことが可能です。Javascriptライブラリなら、ライブラリを読み込んで1lineのscriptもしくはHTMLを書くだけでアニメーションを描画することができます。

Illustratorで元データを作る

今回はロゴやLoadingインジケーターなどのイラストのアニメーションを作ることを前提として、Adobe Illustratorを使ってアニメーションさせるイラストデータを作成するところからはじめます。

まずは動かしたいイラストを描きます。 アニメーションとして書き出したい画像サイズでアートボードを作り、イラストを描いていきます。 最初は非表示で途中から表示させる予定のパーツなども描いておき、大体の位置（そのパーツのアニメーションのStart位置もしくはEnd位置）に配置しておきます。

レイヤー分け

AftterEffectsはIllustratorの.aiファイルをそのまま読み込むことができます。その際、IllustratorでのレイヤーがそのままAftterEffectsのレイヤーになるため、動かしたいパーツごとにIllustrator上でレイヤーを分けておくのが楽です。 またレイヤー名も引き継がれるので、わかりやすいレイヤー名に書き換えておくほうが良いでしょう。

これで元データの準備は完了です。 テキストを動的に変化させたいなどの特殊な場合を除いて、テキストはOutline化（Shape化）させておきましょう。

元データをAfterEffectsに取り込む

AfterEffectsを起動してAIファイルをAfterEffectsで開きます。

Import KindをCompositionに、Footage DimensionsをLayer SizeにしてOKボタンを押します。

すると、AIファイルがCompositionとして取り込まれ、各レイヤーが作成されていることがわかります。

アニメーション全体の時間やフレームレート、背景色を変えたい場合はComposition Settingsから変更しておきます。

AIデータをShapeに変換

このままアニメーションを作っていくことももちろん可能ですが、AIデータのまま作っていくと最終的にそのパーツは画像として書き出されることになります。

今回はパスデータのみのイラストなので、Shapeとして扱うようにしたほうがファイルサイズも小さくなりますし、拡大しても綺麗に表示することができます。

なので、レイヤーのAIデータ（Vector Layer）をShapeに変換します。 レイヤーをすべて選択して「Menu > Layer > Create > Create Shapes from Vector Layer」でShapeレイヤーが作成されます。 Vector Layerのほうは非表示になり残っていますが、レイヤーを視やすくするためにも消してしまいましょう。

これでIllustratorからの元データの取り込みは完了で、後はアニメーションを作っていきます。

Lottieで動かせるアニメーションを作るときのポイント

Lottieを使うにあたっていくつか気をつけるポイントや、リリース当初はできなかったがアップデートによって対応した部分があります。

MaskやText・Imageのアニメーション、pre-compositionもOK

LottieはShapeだけでなくTextやImage、pre-compositionにも対応しています。リリース当初はImageやpre-compositionには対応していなかったようですが、現在はDocumentにも明記されており、実際に動くことを確認しています。

もちろんMaskにも対応しているので、sampleのように円の中からひょこっと顔を出すなどのアニメーションが可能です。

PathのMerge Modeはデフォルトの「Merge」しか使えない

複数のパスによって構成された複雑なShapeはAffterEffectsに取り込んだときに、意図していない表示になることがあります。

AffterEffects上でこれを直す方法はいくつかあります。 Merge ModeをExclude Intersectionsに変更するという方法でも見た目上なおりますが、Merge ModeのExclude IntersectionsはLottieがサポートしていないため使用できません。 （Merge Mode：Intersectなどは対応しているみたい？です。ただこの辺りは動作が怪しいので推奨しない）

この場合は、各PathのDirectionを変更することで修正し対応しましょう。

shadowや少しでも特殊な機能は使えないと思ったほうが良い

AffterEffectsではLayer StylesによってDropshadowなどの効果をつけることができますが、LottieはLayer Stylesをサポートしていません。

少し特殊な機能になってくるとサポートしていないことが多いので、基本的には使えない感じだと思っておいと良いと思います。

アニメーションを書き出す

AffterEffectsでアニメーションが作成できたら、Lottieで読み込めるJSON形式に書き出します。

Bodymovinプラグインのインストール

Lottieで読み込めるJSONを書き出すためには、Bodymovinというプラグインを使用します。

まずはLottieのgithubページからZipファイルをダウンロードしておきます。 github.com

ダウンロードした「lottie-web-master.zip」を解凍して「lottie-web-master > build > extension」の中にある「bodymovin.zxp」がそうです。

zxpファイルはZXPインストーラーが必要なので、ない場合はダウンロードしてインストールしておきましょう。 ZXP Installer - aescripts + aeplugins - aescripts.com

ZXPインストーラーでbodymovin.zxpを開けばプラグインがインストールできます。

JSONで書き出す

AffterEffectsで「Menu > Window > Extensions > Bodymovin」を選択し、プラグインを立ち上げます。

書き出したいCompositionを選択して、書き出したいディレクトリを設定したら「Render」ボタンを押して書き出します。

これでdata.jsonなどのファイルが書き出されます。 イメージリソースが含まれている場合は、別途imageフォルダが作成され、その中に画像も書き出されます。

ココまででフロントの実装前までの作業が完了です。（この後はiOSやWebにJavascriptライブラリなどで組み込む）

この後の作業については別の記事で！

実際に作ったサンプル

Maskやpre-compositionを使ったサンプル

Lottie（Javacript）： http://kudakurage.com/test/lottie/sample1/

単色のサンプル

Lottie（Javacript）： http://kudakurage.com/test/lottie/sample2/

AIデータをShapeデータに変換しなかった場合のサンプル

（リソースが画像として書き出される）

Lottie（Javacript）： http://kudakurage.com/test/lottie/sample3/

JSONデータの確認方法

書き出したJSONデータの確認は、レポジトリからダウンロードしたjavascriptライブラリやdemo用のhtmlなどを改変することで手元でも確認できると思います。

もっと簡単に確認できる方法としてはLottieFilesというサイトで、JSONをドラッグ・アンド・ドロップでアップロードするだけでも確認可能です。 簡単に他人が辿れるページに公開されるわけではないですが、サーバーにアップロードするのでそれを承知の上で利用すると良いと思います。 アップロード後は固有のURLでシェアすることが可能です。

www.lottiefiles.com

透過GIFアニで書き出す方法

番外編として、透過GIFアニメーションとして書き出す方法についてもご紹介します。

AffterEffectsで「Menu > Composition > Add to Render Queue」を選択し、Render Queueを追加します。 追加されたRender QueueのOutput Moduleの「Lossless」の部分をクリックして、Output Module Settingsウィンドウを開きます。

Formatを「QuickTime」にします。

Video OutputのChannelsを「RGB + Alpha」にします。

Video OutputのColorを「Straight (Unmatted)」にします。

音は不要なので「Audio Output Off」にしておきます。 これで「OK」をクリックして、Renderボタンをクリックしてmovファイルを書き出します。

次にこれをAdobe Photoshopで開きます。透過movとして読み込まれるので、Web用に保存でGIFアニメーションとして書き出せば完了です。

アニメーションとデザイン

最後に少しだけアニメーションとデザインについて書いてみようと思います。

デザイン的なアニメーションは単なる賑やかしではなく、デザイン的な機能を持っています。 たとえば、以下のような機能です。

• オブジェクトが動かせること、どのように動かせるかがわかる
• 待感・没入感を高めユーザーのストレスを軽減する
• 状況の（途中の）変化を見せることで、何が起こったのかをわかりやすくする・変化の見落としを防ぐ

例えば、ローディングなどの待ち時間が発生することは、現状のアプリやサービスだとよくあることだと思います。 この時に画面の変化がないと「正しく動いているだろうか」と不安になってしまいます。 流石に何も表示しないということはなかったとしても、単純なloading indicatorを表示しているだけだと、今は何が起こっているのか？何に待たされているのか？などストレスを感じかねません。

そこでアニメーションで今何が進捗しているのかを伝えることで、テキストを読まなくてもひと目で状況を把握できますし、また楽しげなアニメーションはアプリ・サービスへの期待感を感じさせることができる。

恋人とのマッチングのために待たされているなら、以下のようにデータを送っているような雰囲気を楽しげに演出するアニメーションが良いかもしれません。

別の例では、アカウント登録画面でもアニメーションは良い影響を与えられるかもしれません。 通常ユーザーはそのアプリ・サービスを何かの目的を持って利用したいと考えており、ユーザー登録を目的にすることはありません。 よってアプリ開始時やコアな機能の前にユーザー登録を求めるのは、ユーザーにとってハードルとなります。

そこで登録画面等をアニメーションによって楽しげな雰囲気にしたり、期待感をもたせることで、事務的な手続きを乗り越えるモチベーションを与えることができるかもしれません。

これらはアニメーションの役割のほんの一部ですが、このようにアニメーションはロゴのブランディングイメージなどのためだけでなく、様々なデザイン的機能として働きます。

今では、それを効果的に使っているアプリも多くなってきたので、いろいろと見て考えてみると面白いと思います。