Lottie vs APNG vs GIF — UIマイクロアニメの最適解 2025

TL;DR

• 写実/写真は動画系、UIはLottie/APNGで軽量に
• 反復/往復/入力応答はフレーム数最適化でINPに配慮
• 文字/線画はLottieのベクター優位。APNGは互換性の担保に

内部リンク: 透過動画を諦めない 代替設計ハンドブック 2025, シームレスループの作り方 2025 — GIF/WEBP/APNG の境界を消す実務

選定の軸

• 文字/線画/アイコン → Lottie（ベクター/軽量/インタラクティブ）
• 写実/写真的効果 → APNG（高忠実なラスター、alpha対応）
• GIF → 小さなループ以外では非推奨（サイズ/色数/画質）

実装の注意

• prefers-reduced-motion を尊重し、アニメを停止/簡略化
• INP悪化を避けるため、フレーム数/解像度を最適化

チェックリスト

• [ ] 還元モーション対応
• [ ] 画質/サイズのトレードオフを可視化
• [ ] ツールチェーンの再現性

詳解: 3形式の特性

Lottie

• 長所: ベクターベースで拡大縮小に強い、DOM/Canvas/Nativeで再生、プログラム制御に適す
• 短所: 写真的表現は苦手、複雑なパスでCPU負荷、再生環境差

APNG

• 長所: PNG互換、24bitカラー+8bit alpha、GIFより高画質/滑らか
• 短所: ファイルサイズが増えやすい、Safari/一部環境で挙動差

GIF

• 長所: 広い互換性、実装が簡単
• 短所: 256色、アルファ無し、巨大化しやすい、電力効率が悪い

判定フロー

1. ベクター素材/アイコン中心 → Lottie
2. 写真・ラスタベースで短いループ → APNG
3. レガシー互換最優先 or 制作体制が無い → GIF（圧縮に注意）

制作・最適化のベストプラクティス

• ループを厳密にシームレス化（Lottieはキーフレーム補間、APNGは先頭/末尾コマの整合）
• 動作時間を <2s に抑え、可視性トグルで再生を制御
• ダーク/ライトで色を変える場合、Lottieはテーマ変数、APNGは2種生成

計測のポイント

• Lottie: 初回JSON取得＋ランタイムCPU、インタラクション遅延
• APNG: 転送サイズ、デコード時間、ビット深度
• GIF: 転送サイズ、CPU（デコード）、メモリ滞留

移行手順（GIF → APNG/Lottie）

1. 現状棚卸し（サイズ、用途、再生条件）
2. アイコン/ロゴはLottie、写真はAPNGに振り分け
3. 自動変換パイプラインを構築：ffmpegでAPNG、BodymovinでLottie
4. e2eで視覚回帰（フレーム一致、ループ整合）、メトリクス比較

まとめ

形式は目的で選ぶ。UI強化ならLottie、フォトループはAPNG、互換優先は最小限のGIFに留め、観測で継続的に最適化しましょう。

実装レシピ（抜粋）

Lottie（Web）

import { Player } from '@lottiefiles/react-lottie-player';

export function IconLike() {
  return (
    <Player src="/anim/like.json" autoplay={false} loop keepLastFrame style={{ width: 24, height: 24 }} />
  );
}

再生コントロールやテーマカラーの切替はpropsで行い、prefers-reduced-motion で停止。

APNG（ffmpeg）

ffmpeg -i src.mp4 -plays 0 -f apng -vf "fps=30,scale=640:-1:flags=lanczos" out.apng

フレーム数とビット深度でサイズを抑えます。

GIF（最終手段）

ffmpeg -i src.mp4 -vf "fps=24,scale=480:-1:flags=lanczos" -loop 0 out.gif

減色は品質劣化が激しいため、できるだけ回避。

公開前チェック

• [ ] 還元モーションで停止/簡略化される
• [ ] ループがシームレス（先頭/末尾の一致）
• [ ] 転送サイズとCPU負荷が閾値内

FAQ

Q. Lottieがカクつきます — A. 複雑なレイヤー統合やベクターをラスタライズし、パス数を減らします。

Q. APNGが重いです — A. 30fps→20fps、解像度を段階的に下げ、必要ならWebM/MP4検討。

Q. GIFから何に移行すべき？ — A. アイコン/線画はLottie、写真はAPNG、長尺は動画へ。