LottieFilesの料金形態と活用方法について
Lottieアニメーションはアニメーションを手軽に制作でき、Webサイトやアプリに追加することができるツールです。Lottieアニメーションを活用することで、より魅力的なアプリやWebサイトの制作が可能になります。この記事ではその作成・編集プラットフォームであるLottieFilesの料金形態や活用方法について、分かりやすく解説します。
LottieFilesとは？
LottieFilesは、Airbnbが開発したLottieアニメーションのためのプラットフォームです。デザイナーがcanvaやillustrationなどで作成したベクター画像をAdobe After Effectsに取り込むことで、画像にアニメーションを作成することができます。LottieFilesは作成したアニメーションをJSON形式に変換し、Webサイトやアプリへの組み込みを可能にします。軽量でピクセル化を起こさずに拡大縮小できるため、様々なプラットフォームで利用されています。
LottieFilesで対応に制限があるもの
- エクスプレッション、エフェクトメニューのエフェクト、ブレンド モード、レイヤーエフェクトなど、特定のAfter Effects機能はサポートされていません。
- 3D機能がないため、アニメーションは2Dのみである必要があります。
- メディアアセット、テキストレイヤー、およびタイムリマッピングを含めることはできません。
- 互換性とパフォーマンスは、プラットフォーム (iOS、Android、Web) によって異なります。
LottieFilesの料金プラン
LottieFilesは基本的に無料で利用できますが、高度な機能や大規模なプロジェクトには有料プランへの変更が適しています。
参照元：https://lottiefiles.com/jp/pricing
無料プラン
- Lottieアニメーションのテスト、共有
- 無料ですぐに使えるアニメーションのライブラリの利用が可能
- 基本的な編集やパーソナライズが可能
無料プランは手軽にLottieアニメーションを試すには最適ですが、保存できるファイル数などに制限があります。
- 最大 2 つのワークスペース
- 10個のプライベート ファイル
- 1 つのプライベート プロジェクト
- 制限付きの共有リンク
大規模なプロジェクトでは、有料プランへのアップグレードを検討する必要があるかもしれません。
個人向けプラン
個人向けプランは月額$19.99で以下のサービスが利用できます。
- 無制限のファイルアップロード
- プロジェクト数無制限
- ファイルサイズの最適化機能
- Lottieホスティング＆CDNサービス
- oEmbedアニメーション
- Notion、Medium、Ghost、Reddit、WordPressなど、人気のウェブアプリへのアニメーション埋め込み
- 複数のファイル形式へのエクスポート
- 200,000以上のプレミアムLottieライブラリー など
チーム向けプラン
チーム向けプランでは月額$24.99で以下のサービスが利用できます。
- チーム専用のワークスペース
- 無制限のチームファイル
- AEPとFigmaのソースファイルをホスト
- FigmaとCanvaからチームライブラリにアクセス
- 管理者、チームメンバー、権限設定のカスタマイズ
- 個人向けプランの機能も全て利用可能 など
エンタープライズプラン
エンタープライズプランは月額$119.99で以下のサービスが利用できます。
- 大規模チームや企業向けのカスタマイズ可能な機能
- 無制限のビューワーライセンス
- ワークスペースやプロジェクト内のアニメーションを検索、表示、コメントのためにユーザーを招待
- アクセスログ
- SAML/SSO
- 専任アカウントマネージャー
- 分析ダッシュボード
- 専用サポートチャネル
- トレーニング＆オンボーディング など
Lottieアニメーションの編集は簡単？
Lottieアニメーションの編集は、Lottie Editorを使用することで比較的簡単に行うことができます。詳細についてご紹介します。
▼カラーパレットの変更
ワンクリックでアニメーションの色を変更できます。
▼Lottie Editorによる編集
コードを触ることなく、レイヤーの並び替え、色の変更、不要なレイヤーの削除などが行えます。
▼アニメーションのプロパティ調整
アニメーションのサイズや速度も簡単に調整可能です。
複雑なアニメーションのカスタマイズには、ある程度のスキルと時間が必要となる場合もありますが、基本的な編集は直感的に操作できます。
WebflowでのLottieアニメーションの活用
WebflowでLottieアニメーションを使用する場合も、基本的には無料です。LottieFilesからダウンロードしたアニメーションをWebflowにアップロードして使用できます。ただし、無料プランのアセットリンクの制限を回避するために、JSONファイルをダウンロードして自分のサーバーにアップロードすることを推奨します。
After EffectsでのLottieアニメーション作成手順
Adobe の After Effectsでアニメーションを作成し、After Effectsの拡張機能「Bodymovin」を使って書き出す方法と、「LottieFiles」で書き出す2種類があります。今回は「LottieFiles」で書き出す方法についてお伝えします。
1. デザインの準備
IllustratorやFigmaなどでアニメーションに必要な要素を作成し、SVG形式で出力します。
2. After Effectsでのアニメーション作成
SVGファイルをAfter Effectsに読み込みます。After Effects上で、タイムラインを使ってオブジェクトのプロパティ（位置、サイズ、透明度など）を変化させ、アニメーションを作成していきます。
3. LottieFiles拡張機能のインストール
"LottieFiles for After Effects"拡張機能をインストールします。After Effects拡張機能を使えるように設定を行います。
4. JSON形式で書き出し
「Window > Extensions > LottieFiles」よりLottieFilesにログインします。
5. JSON形式での書き出し
設定を開き、ワークスペースからダウンロードし、「Include assets in json」にチェックを入れて作成したアニメーションをJSON形式で書き出します。
6. LottieFilesでの編集と調整
必要に応じてLottieFiles上でアニメーションを編集・調整し、最終的なJSONファイルをダウンロードします。これらのファイルを各プラットフォームのアプリやWebサイトに組み込むことで、Lottieアニメーションを表示できます。
まとめ
LottieFilesを使用してWebサイトやアプリをより魅力的に
LottieFilesは、Webサイトやアプリに魅力的なアニメーションを追加するための強力なツールです。無料プランでも基本的な機能は利用できますが、プロジェクトの規模やニーズに合わせて有料プランを検討することもおすすめです。Lottie Editorを活用すれば、アニメーションの編集も比較的簡単に行えます。ぜひLottieFilesを活用して、Webサイトやアプリをより魅力的に演出してみてください。
