なぜフリーランスの税金は高いのか?税理士さんにわかりやすく教えてもらった
- インタビュー
- フリーランス/個人事業主
- 税金
Lottieは、Airbnbが開発したアニメーションライブラリ。どんなプラットフォームでも簡単に使用できて、ピクセル化せずに拡大縮小ができる、とても便利なライブラリです。
そんなLottieの最大の魅力は、なんといってもコーディングの知識が要らないことでしょう。
本記事では、Lottieを使ったアニメーションの作りかたについて解説します。
Lottieは、あらゆるプラットフォームでも使用できます。つまりWebページとアプリケーションの双方でアニメーションが使えるのです。メッセージングプラットフォームでステッカーとして使う、といった使い方も考えられますね。
JSONファイルはGIFやPNGにくらべてファイルサイズが小さいため、ダウンロードの速度が速く、またディスク容量も減らせます。さらにベクターとラスターの要素を混在させて変換を適用することも可能です。
こうしたさまざまな利点をよりよく理解するために、ITG.digitalの事例を参考に解説していきます。ITG.digitalのLPにあるアニメーションは、すべてLottieで制作されています。バナーの犬も、もちろんLottieで制作したものです。
実際にLottieを使ってアニメーションを作ってみましょう。ステップは以下の3つです。
- デザインを作る
- アニメーションにする
- アニメーションを出力する
まずはデザインを制作して、アニメーションを作る準備をしましょう。
最初に制作したイラストは、以下の図のいちばん左に位置している、犬と女の子のデザインでした。この女の子が足で地面をトントン叩きながら、大きくため息をつくアニメーションを作っていきます。
ポーズを変えたあと、ワンピースのテクスチャを何パターンか制作し、最終的にアニメーションにするものを選びました。それがいちばん右のデザインです。
テクスチャを使ったイラストをアニメーションにするコツは、以下のとおりです。
- ファイルサイズを小さくするため、ベクターのテクスチャを使う
- テクスチャのポイントやパーツを少なくする
- ブラウザによってはバグが発生する可能性があるため、マスクの使用は控える
次のステップはアニメーション化です。まずはいくつかのイラストをアニメーション化してから、JSONに変換する必要があります。
このステップで大切なのは、ずばりシンプルさ。エフェクトは使わず、位置/回転/拡大縮小/透明度などを編集してシンプルにアニメーションをつけましょう。パスアニメーションもおすすめです。
かわいくて、ちょっと神経質そうな女の子のアニメーションができました。アニメーションはループすることも、1回だけ再生することも可能です。出力する前にアニメーションがきちんとループしていることを確認しておきましょう。
アニメーションが完成したら、出力しましょう。
ここからは2つの選択肢である、BodymovinプラグインとLottie Filesプラグインの使いかたについて解説します。
Lottie FilesでもBodymovinと同じことができます。しかしこちらのほうが機能が多く、ブラウザ上でLottieのWebサイトにファイルをアップロードする必要もありません。また、このプラグインを使えばアニメーションをAfter Effectsでプレビューできます。
Lottieプラグインでレンダリングをするための手順は、Bodymovinとほとんど同じです。くわえて以下のような機能もあります。
- LottieのWebサイトと同じように、完璧で良好な動作プレビューを提供
- アニメーションをWebサイトに直接アップロード可能
- 無料のLottieアニメーションライブラリ付き(好きなアニメーションを選択して、プラグインから直接AEPファイルをダウンロード可能)
Bodymovinにくらべると、png/jpg要素のレンダリングや表現の最適化など、設定を気にする必要がないのはうれしいポイントですね。
レンダリングが遅いという欠点さえ気にならなければ、おすすめの選択肢です。
これでアニメーションが準備できました。iOS/Android/Web/React Nativeなどで、Lottieファイルをそのまま使えます。
Lottieアニメーションの使い方を、以下4つの実例をもとにご紹介します。
- インタラクティブに変化する犬
- 犬を使ったライン
- アニメーション付きのタブ
- 料金プランのアニメーション
女の子の隣にいる犬のアニメーションも、Lottieで制作しています。
犬をインタラクティブに変化させるために、犬のトランジションを6つ制作し、ひとつのコンポジションにまとめました。JSONファイルのタイムコードを使えば時間を大幅に節約できます。
どの犬を選んでも、スムーズにアニメーションが動きますね。
Webサイト上のラインに使われているのも、Lottieアニメーションです。
犬を走らせて、位置のプロパティをアニメーション化するだけで、この遊び心たっぷりのラインを実現できます。
アニメーション付きのタブ、かっこいいですよね。難しそうに見えるかもしれませんが、以下の3つのステップをするだけで、とても簡単に実装できます。
- 各タブごとにイラストをデザイン化する
- 少しだけアニメーションをつける
- アニメーションをつけたイラストを、ひとつの構図にまとめてJSONに書き出す
犬がインタラクティブに変化するアニメーションと同じく、タイムコードを使うことで、作業時間を短縮しています。
料金プランの紹介に登場する恐竜のアニメーションにも、Lottieを使っています。
ちょっとしたアニメーションですが、キャラクターに命が吹き込まれたように見えますよね。
本格的なアニメーション制作に取り組む前の、練習用のファイルを用意しました。JSONとAEPファイルをここから、HTMLをここからダウンロードできます。
Lottieを使ったアニメーション制作を、ぜひ練習してみてください。
今回は、Lottieについての基礎知識や使い方についてご紹介しました。まずは練習用ファイルを使って、ぜひLottieの魅力に触れてみてください。
After Effectsのアニメーションは、JavaScriptのアニメーションよりもはるかに簡単で、柔軟性があります。またデザインの修正にかかる時間も大幅に短縮できました。必要なのは、After Effectsで編集し、JSONファイルを置き換えるという2ステップだけです。
またLottieファイルは、WordPress/Shopify/Webflow/Squarespace/Wix/ReadymagなどのWebサイトだけでなく、iOSやAndroidアプリと互換性があります。
アニメーションの表示オプションを調整するコードを書く必要もありません。そのかわりに、Lottie Webプレーヤーを使いましょう。
(執筆:Netrix 翻訳:Nakajima Asuka 編集:Kitamura Yuu、Sato Mizuki)
動き(モーション)でデザインを強化しよう!基礎知識から制作ツールまで、GIF動画付きで解説
Workship MAGAZINE
思わず魅了されるモーショングラフィックス10種類。活用シーンや事例も紹介
Workship MAGAZINE
AppleのWebサイトに施された7つの工夫。計算し尽くされた"製品体験"のデザイン
Workship MAGAZINE