LASSIC Media らしくメディア
アプリのLottieアニメーション・マイクロインタラクション実装を外注で進める方法
LASSIC IT事業部｜元請（プライムベンダー）としてシステム保守・運用を受託
この記事のポイント
- LottieはAdobeAfterEffectsで作成したアニメーションをJSON形式で軽量に配信できる仕組みで、dotLottieに移行するとさらに容量を削減できます
- ローディングやオンボーディング等のマイクロインタラクションに活用できますが、レンダリング負荷の対策がパフォーマンス品質を左右します
- 外注で進める場合は、デザイナーとエンジニアの役割分担・ファイル仕様・最適化要件を事前に合意することがスムーズな進行のカギです
目次
LottieとdotLottieとは — JSONアニメーションのしくみと違い
モバイルアプリのLottieアニメーション実装外注とは、Adobe After Effectsで制作したアニメーションをJSON形式に変換し、iOSやAndroidアプリ上でネイティブレンダリングする機能を専門パートナーに委託することです。単なるGIF画像の置き換えではなく、デザイン制作・ファイル変換・最適化・ライブラリ組み込みの各工程を外部に依頼する形態です。
Lottie（ロッティー）は、LottieFilesが提供するアニメーション記述フォーマットです*1。拡張子は.jsonで、Adobe After Effectsで作ったアニメーションをBodymovinプラグインでエクスポートすることで生成できます。ファイル容量は数KBと軽量で、GIF画像と比べて拡大縮小時の劣化がなく、デザイン変更もAEデータを修正してエクスポートするだけで済みます。
一方、dotLottieは拡張子.lottieを使うzipベースの新コンテナ形式です*1。必要なアセット・設定・複数アニメーションを1ファイルに同梱でき、Lottie（.json）より容量をさらに削減できます。LottieFilesが公式に提供しており、新規プロジェクトではdotLottieを採用すると効率的です。
マイクロインタラクションへの活用 — ローディング・ボタン・オンボーディング
マイクロインタラクション（micro interaction）とは、ユーザーの操作に反応して起動する小さなアニメーションやフィードバックの総称です。Lottieは軽量かつベクターベースであるため、このマイクロインタラクションの実装に広く活用されています。
代表的な用途として、まずローディングアニメーションがあります。通信待ちの間にブランドらしいアニメーションを表示することで、待機中のユーザーの離脱を防げます。次にオンボーディングでの活用です。初回起動時にアプリの使い方を視覚的に伝えるイラストアニメーションとして使われます。
インタラクティブボタンへの活用も増えています。ボタンを押した瞬間に小さなアニメーションが反応することで、操作が受け付けられたことをユーザーに直感的に伝えられます。このような細かな反応は操作感（ハプティクス的な視覚フィードバック）として体験品質を高めます。
実装ライブラリと組み込みの流れ（iOS・Android・Flutter）
Lottieアニメーションをアプリに組み込むには、プラットフォームごとの専用ライブラリを使います。iOSではlottie-ios、Androidではlottie-androidが公式ライブラリです*1。FlutterやReact Nativeにも対応したライブラリが提供されており、クロスプラットフォーム開発でも利用できます。
組み込みの基本的な流れは次の通りです。まずデザイナーがAfterEffectsでアニメーションを制作し、Bodymovinプラグインでjsonファイルを出力します。その後、エンジニアがライブラリをプロジェクトに追加し、jsonファイルをアセットフォルダに配置して再生処理を実装します。
注意点として、AfterEffectsのすべてのエフェクトがLottieで再現できるわけではありません。ブラーやグロー等の一部エフェクトは非対応のケースがあり、デザイン制作前にエンジニアと使用可能なエフェクトを確認しておくことが大切です。確認を怠ると、完成したデザインをエクスポートした際に意図した表現が崩れ、作り直しのコストが発生します。
パフォーマンス最適化の勘所 — 不要レイヤ削減・dotLottie化・同時再生数
LottieファイルはJSONのため数KBと軽量ですが、アニメーションのレンダリング処理はCPU・GPUに負荷をかけます*1。端末の性能が低いほど、またアニメーションの複雑さが高いほど、動作が重くなるリスクがあります。外注先がパフォーマンス対策を見落とすと、レビュー後に大規模な修正が必要になることがあります。
主要な最適化の手法は3つあります。第一は不要レイヤの削減です。AfterEffects上で不要なレイヤや非表示レイヤをエクスポート前に整理することで、JSONファイルの複雑さを下げられます。第二はdotLottie化です。LottieFilesの最適化機能を使ってdotLottie形式に変換すると、ファイルサイズと処理コストをさらに削減できます*1。
第三は同時再生数の抑制です。1画面に複数のLottieアニメーションが同時再生されると、端末への負荷が積み重なります。スクロールで画面外に出たアニメーションを一時停止する処理を実装するなど、レンダリングタイミングを制御することが大切です。これらの対策を外注時の要件として明示しておくと、品質トラブルを避けやすくなります。
外注で進める場合の工程と役割分担
Lottieアニメーションの外注は、デザイン工程とエンジニアリング工程が分かれるため、依頼先の選定と役割の明確化が重要です。デザイン会社とアプリ開発会社を別々に契約するケースと、アニメーション実装まで一括で受けるアプリ開発パートナーに依頼するケースがあります。
工程を整理すると、①要件定義・アニメーション仕様策定、②AfterEffectsによるアニメーション制作、③Bodymovinエクスポート・dotLottie変換・最適化、④ライブラリ組み込み・実装、⑤実機テスト・パフォーマンス計測、⑥ストア申請・リリースの6ステップになります。このうち①③⑤は発注側とパートナー側が仕様を共有しながら進める工程で、認識のすり合わせが不十分だと手戻りが発生しやすいです。
発注側が事前に用意しておくと進行がスムーズになる情報として、アニメーションを設置する画面・箇所・トリガー（どの操作で再生するか）、参考にするアニメーションのサンプルやLottieFilesのURL、利用するプラットフォーム（iOS/Android/Flutter等）、対応する最低端末スペックの4点があります。これらを準備しないまま発注すると、パートナーが仕様を推測して進め、完成後に「想定と違う」という問題が起きやすくなります。
内製vs外注 — 費用の考え方と判断基準
| 比較項目 | 内製 | 外注 |
|---|---|---|
| 必要なスキル | After Effects操作・Bodymovin・lottie-ios/android・パフォーマンス計測 | 要件定義・仕様書作成・レビュー観点の理解 |
| 立ち上げ期間 | 既存エンジニアのスキル習得から開始する場合、学習期間が別途必要 | パートナーの経験次第で短縮可能。 仕様を固めてから着手できる |
| 費用の性質 | 人件費・ツール費用（AEライセンス等）が固定コストとして発生 | 工程・アニメーション数に応じた変動費。 修正回数が増えると追加費用が発生 |
| 品質リスク | AfterEffects・Lottie双方の知見がないと最適化が不十分になりやすい | 発注仕様が不明確だと手戻りが増加。 最適化要件の明示が必須 |
| 向いているケース | アニメーション数が多く継続的に改修するプロダクト | 初回導入・スポット対応・社内にAEスキルがない場合 |
費用の考え方として、外注の場合はアニメーション1点あたりの制作費と、ライブラリ組み込み・実装費が別建てになるケースが一般的です。アニメーションの複雑さ・修正回数・対応プラットフォーム数によって費用は変わるため、見積もりの段階でこれらの前提をパートナーと明確にすることが大切です。
内製を検討する場合、After Effectsの操作スキル・Bodymovinの使い方・各プラットフォームの実装知識・パフォーマンス計測手法の4領域を習得する必要があります。既存のモバイルエンジニアがLottieの経験を持っていない場合、学習と実装を並行することで納期が伸びるリスクがあります。
外注先選定で確認すべき3つのポイント
Lottieアニメーション実装の外注先を選ぶ際に確認しておきたいポイントが3つあります。
まずAfterEffectsデザインとエンジニアリングの両対応可否です。デザイン制作のみ対応のパートナーに発注した場合、組み込みは別の会社に依頼する必要が生じます。プロジェクトが分断されると、エフェクトの再現性やパフォーマンス要件の引き継ぎが難しくなります。デザインから実装まで一気通貫で対応できるパートナーかどうかを確認することが大切です。
次にパフォーマンス最適化の対応実績です。Lottieはファイル自体が軽量でも、アニメーションのレンダリングは端末に負荷をかけます。不要レイヤ削減・dotLottie化・同時再生数の制御といった最適化をスコープに含めているかを提案書や実績で確認します。実績がない場合、テスト工程でパフォーマンス問題が発覚し、大規模な修正が必要になることがあります。
最後に修正回数と仕様変更の取り決めです。アニメーションはデザインの方向性が変わると修正コストが大きくなります。見積もりに含まれる修正回数の上限、仕様変更時の追加費用の算出方法を契約前に確認しておくことがトラブルを防ぐカギです。
まとめ：Lottie実装外注を成功させる3つの判断軸
本稿では、モバイルアプリのLottie・dotLottieアニメーションとマイクロインタラクション実装を外注で進める方法を整理しました。要点を3つに集約すると次の通りです。
第一に、LottieとdotLottieの違いを理解した上でファイル形式を選択することです。dotLottieは容量効率・複数アニメーション管理の観点で優位であり、新規プロジェクトでは積極的に採用を検討する価値があります。
第二に、パフォーマンス最適化をスコープに含めて発注することです。ファイルが軽くてもレンダリング負荷は発生するため、不要レイヤ削減・dotLottie化・同時再生数の制御を外注先への要件として明示することが大切です。
第三に、デザイン制作・変換・実装の全工程を一括で対応できるパートナーを選ぶことです。工程が分断されると仕様の引き継ぎで手戻りが起きやすくなります。外注先の選定段階でAfterEffectsとモバイル実装の両方の対応可否を確認することが、品質とスケジュールの安定につながります。
よくある質問
LottieとGIFアニメーションの違いは何ですか？
Lottieはベクターデータをベースにしたアニメーションフォーマットです。GIFと異なり、どのサイズに拡大・縮小しても画像が劣化しません。また、JSONファイルとして配信するためGIFに比べてファイルサイズが小さく、背景透過や色数の制限もありません。アニメーションの途中で動的にパラメーターを変更することも可能です。
dotLottieに移行するメリットはどれくらいですか？
dotLottieはzipベースのコンテナ形式で、Lottie（.json）よりファイルサイズを削減できます*1。また、複数のアニメーションや関連アセットを1ファイルにまとめられるため、アセット管理が簡素化されます。LottieFilesの最適化ツールを使ってdotLottie化する手順は比較的シンプルで、既存のLottieファイルからの移行コストは低く抑えられます。
Lottieのアニメーション実装はReact Nativeでも使えますか？
はい、React NativeおよびFlutterにも対応したLottieライブラリが提供されています*1。クロスプラットフォーム開発でもLottieを活用できます。ただし、プラットフォームごとにライブラリのバージョンや対応するLottieの機能に差異があるため、iOS/Android/React Native間での表示差異を実機テストで確認することが大切です。
アニメーションが多いとアプリが重くなりますか？
LottieファイルはJSONのため数KBと軽量ですが、アニメーションのレンダリング処理はCPUやGPUに負荷をかけます*1。アニメーションの複雑さや同時再生数が増えると、端末スペックによっては動作が重くなることがあります。不要レイヤ削減・dotLottie化・画面外アニメーションの一時停止処理などの最適化を実施することで、多くのケースでパフォーマンスを改善できます。
外注する際に発注側で準備しておくことは何ですか？
スムーズな進行のために、発注前に次の情報を用意しておくことをお勧めします。①アニメーションを設置する画面・箇所・再生トリガー（タップ/スワイプ/自動再生等）、②参考にするアニメーションのサンプルやLottieFilesのURL、③対応プラットフォーム（iOS/Android/Flutterなど）、④テスト対象の最低端末スペック。これらを事前にまとめておくと、パートナーとの認識のすり合わせが円滑に進みます。
著者：テレリモ総研編集部 鈴木 亮佑
ご不明な点はお問い合わせフォームからもご連絡いただけます。
- *1 出典：LottieFiles「LottieFiles — 公式サイト」；LottieFiles「Optimize Lottie — 最適化・dotLottie変換機能」
