Lottieアニメーションで、イラストを動かし、Webサイトに埋め込み

1. Lottieとは

Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。

2. Lottieのメリット

小さいファイルサイズ

Lottieアニメーションなら、GIFやMP4のようなほかの形式と比べて、同じ品質を保ちながらファイルサイズをはるかに小さくできます。

無限に拡大縮小可能

Lottieアニメーションはベクターベースです。そのため、解像度を気にすることなく拡大縮小できます。

マルチプラットフォームのサポートとライブラリ

どんな開発者にとっても、LottieのHandoffはとても簡単です。Lottieアニメーションは、修正することなくiOS、Android、Web、React Nativeで使用できます。

インタラクティブ

Lottieアニメーションは、アニメーションの各要素にアクセスして操作できるようになっています。スクロール、クリック、ホバーといったインタラクションに反応するインタラクティブなアニメーションを作成することができます。

3. Lottieアニメーション作成方法

Lottieアニメーションで、イラストを動かし、Webサイトに埋め込む方法を紹介します。また、AfterEffectで、Lottieで使用できる基本的なアニメーションを紹介します。

まずは、Lottieアニメーションの作成から、Webサイトに埋め込むまでの方法を紹介します。

3-1. アカウント作成

まずは、アカウントを作成します。LottieFilesのWebサイトの無料で始めるボタンをクリックします。ポップアップで、Create an acconutと表示されるので、ガイドに従ってアカウントを作成します。

LottieFilesのWebサイトの無料で始めるボタンをクリックして、ガイドに従ってアカウントを作成します。

3-2. アニメーション作成

まず、AIでイラストを作成します。今回は、サッカーボールを作成しました。サイズは、実際の配置サイズを想定して作成します。

AIでイラストを作成

AfterEffectを開き、コンポジション＞新規コンポジションをクリックします。コンポジション設定が表示されるので、AIと同じ大きさのサイズで作成します。フレームレートは24に設定し、デュレーションにタイムラインの長さを設定します。AIデータをコピーし、AfterEffectのコンポジションにペーストします。

コンポジション設定で、AIと同じ大きさのサイズで作成

AIデータをコピーし、AfterEffectのコンポジションにペースト

アニメーションをつけていきます。トランスフォーム＞回転をクリックし、有効にします。タイムラインの00:00と03:00の位置にキーフレームを打ちます。03:00のキーフレームをクリックして、回転を1に設定します。アニメーションを確認してイラストが3秒かけて回転する、ループアニメーションになっているか確認します。

タイムラインの00:00と03:00の位置にキーフレームを打ち、03:00のキーフレームの回転を1に設定

3-3. 書き出し

JSONファイルに書き出します。ファイル＞エクステンション＞Bodymovinをクリックします。書き出したいコンポジションのSelectedにチェックを入れます。右上のProject Settingをクリックし、Use comp nameにチェックを入れ、コンポジションネームがファイル名になるように設定し、Closeボタンをクリックします。右の3点リーダーをクリックし、保存場所を設定し、保存ボタンをクリックします。

これで、書き出し設定は終了です。左上のRederボタンをクリックし、書き出します。

Bodymovinをクリック

書き出したいコンポジションのSelectedにチェック

Project Setting＞Use comp nameにチェック

3点リーダーをクリックし、保存場所を設定

左上のRederボタンをクリックし、書き出し

3-4. 埋め込み

Lottie FilesのWebサイトを開き、ログインします。右上のマイダッシュボードボタンをクリックします。右のUpload filesをクリックして、アップロード画面を表示します。browseをクリックして、アップロードするファイルを選択し、開くボタンをクリックし、JSONファイルを読み込みます。

ログインして、右上のマイダッシュボードボタンをクリック

Upload filesをクリック

browserをクリック

アップロードするファイルを選択

右のHandoffをクリックします。Embed HTMLに埋め込み用のコードが表示されるので、コピーして、HTMLファイルにペーストします。インラインにサイズを指定する箇所があるので、Webデザインに合わせて、サイズを指定します。

Handoffをクリック

Embed HTMLに埋め込み用のコードが表示されるので、コピーして、HTMLファイルにペースト

4. ベジェアニメーション

色々なアニメーション作成方法を紹介します。まず、ベジェ曲線が伸縮されるアニメーションを紹介します。

前項で作成したコンポジションを複製します。イラストのレイヤーの、右上の追加ボタンをクリックします。セレクターが表示されるので、パスのトリミングを選択します。レイヤーのコンテンツにパスのトリミング1が表示されます。開始点のストップウォッチをクリックし、タイムラインの00:00と00:12にキーフレームを追加します。00:00のキーフレームをクリックし、開始点の値を100に設定します。

レイヤーの、右上の追加ボタンをクリックし、パスのトリミングを選択

開始点のタイムラインの00:00と00:12にキーフレームを追加し、00:00のキーフレームをクリックして、開始点の値を100に設定

次に、終了点のストップウォッチをクリックし、タイムラインの02:12と03:00にキーフレームを追加します。02:12のキーフレームをクリックし、開始点の値を0に設定します。ループアニメーションで、0.5秒の間隔を空けるため、開始点を00:06から00:18に、終了点を02:06から02:18に変更します。アニメーションを再生し確認し、OKなら書き出します。

終了点の、タイムラインの02:12と03:00にキーフレームを追加し、02:12のキーフレームをクリックして、開始点の値を0に設定

ループアニメーションで、0.5秒の間隔を空けるため、開始点を00:06から00:18に、終了点を02:06から02:18に変更

5. カラーアニメーション

色が変化するアニメーションです。前項で作成したアニメーションのコンポジションを複製します。イラストレイヤーのコンテンツ内の全てのグループ（パス）を選択し、追加＞線をクリックします。グループ12を展開し、線＞カラーのストップウォッチをクリックします。タイムラインの00:12、01:00、02:00、02:12にキーフレームを追加します。00:12、02:12のキーフレームをクリックし、カラーを元のブルーに、01:00、02:00のキーフレームをクリックし、カラーをレッドに設定します。

レイヤーのコンテンツ内の全てのグループを選択し、追加＞線をクリック

タイムラインの00:12、01:00、02:00、02:12にキーフレームを追加し、00:12、02:12のキーフレームをクリックし、カラーを元のブルーに設定

01:00、02:00のキーフレームをクリックし、カラーをレッドに設定

カラーのタイムラインをコピーします。他のグループの線＞カラーのタイムラインの00:12にカーソルを合わせ、ペーストします。アニメーションを再生し確認し、OKなら書き出します。

カラーのタイムラインをコピーし、他のグループの線＞カラーのタイムラインの00:12にカーソルを合わせ、ペースト

6. パスアニメーション

パスに沿ってイラストが動くアニメーションです。まず、前項で作成したアニメーションのコンポジションを複製します。コンポジション設定を開き、サイズを幅400px、高さ400pxに変更します。新たにシェイプレイヤーを作成し、ペンツールでイラストを動かしたい導線を作成します。シェイプ1＞パス1＞パスを選択し、コピーします。

コンポジション設定を開き、サイズを幅400px、高さ400pxに変更

ペンツールでイラストを動かしたい導線を作成し、コピー

イラストのレイヤーを再表示し、トランスフォーム＞位置にペーストし、シェイプレイヤーを非表示にします。キーフレームの最後が02:00になっているので、選択して、03:00まで移動します。これで、ボールがバウンドするアニメーションが作成されます。アニメーションを再生し、画面からはみ出ている場合、コンポジション内の位置のベジェ曲線を変更して調整します。アニメーションを再生し確認し、OKなら書き出します。

イラストのレイヤーの、トランスフォーム＞位置にペースト

02:00のキーフレームを選択して、03:00まで移動

画面からはみ出ている場合、コンポジション内の位置のベジェ曲線を変更して調整

7. まとめ

以上で今回のBLOGは終了です。AIで作成したイラストを自由に動かせるので、表現の幅が大きく広がります。データサイズも小さいので読み込みが早いので、色々な場所に組み込むことができます。

今回紹介したアニメーションはほんの一部なので、AfterEffectで色々なアニメーションを作成することができます。メインやアイキャッチなどに有効なので、Webサイトに導入してみてはいかがでしょうか。