Lottie を使う

ガイド · 付録

Lottie は、Web ページやモバイルアプリで簡単なアニメーションを実装できる JSON ファイル形式です。Lottie の詳細は以下のサイトで確認できます。

Shoplive では、いいね(Like)ボタンのアニメーションに Lottie を活用しています。円滑なサービス提供のため、いいねアニメーションの容量・個数・効果を次のとおり制限しています。

区分	説明
推奨容量	5KB
容量制限	最大 30KB(30KB を超えるファイルはアップロードできません)
個数制限	最大 10 個
対応効果	POSITION, SCALE, ROTATION, OPACITY, COLOR
フォーマット	JSON
比率	1:3.7

ご注意ください!

上記から外れる Lottie ファイルは、アップロードできないか、Shoplive プレーヤーで正常に動作しない場合があります。

特に Repeater オプションを含む Lottie ファイルは配信のパフォーマンスに非常に大きな影響を与えるため、使用を固く禁止しています。

Shoplive が標準で提供する Lottie 画像は、以下のファイルをダウンロードして確認できます。Lottie アニメーションの修正についてご質問があれば、Shoplive の担当者にお問い合わせください。

Lottie ファイルはどうやって作るのですか?

After Effects で Lottie を作成する場合は、以下を参考にしてください。

Lottie は After Effects で作成でき、Lottie Plugin をダウンロードしてエクスポートできます。Lottiefiles Plugin のみを使用してください。Bodymovin には対応していません。

1Plugin を起動したら、Window で Extensions をクリックし、LottieFiles をクリックします。

2設定をクリックします。

3すべての設定のチェックボックスを外して保存します。

4任意のフォルダに保存し、Shoplive の担当者に渡します。