【要約】【保存版】「なんかUIが地味…」を解決するLottie入門 ＋ 無料素材サイト7選 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
従来のUIアニメーションにおける課題：
- ・GIFや動画はファイルサイズが大きく、読み込み遅延を招く。
- ・解像度が固定されており、高精細ディスプレイで画質が劣化する。
- ・再生、停止、速度変更などの動的な制御が困難である。
- ・「UIが地味で体験が乏しい」というUX上の課題。
// Approach
Lottieによる解決策と実装手法：
1.ファイル形式の選択：
- ・従来の .json または、リソースを圧縮した .lottie を使用。
2.実装パターンの使い分け：
- ・dotlottie-wc：カスタムHTMLタグ
<dotlottie-wc>を使用。LP等に最適。 - ・dotlottie-web：JS APIを使用。
canvas要素と WebAssembly で高速描画。 - ・dotlottie-vue：Vueプロジェクトへの統合。
3.プログラムによる制御：
- ・
play(),pause(),setSpeed(),setFrame()等のメソッドを活用。
// Result
- ・軽量かつ高品位なベクターアニメーションの実現。
- ・APIレスポンスやユーザー操作に連動した、高度なインタラクティブ性の確保。
- ・WebAssemblyによる、描画パフォーマンスの向上。
- ・非推奨の旧ライブラリ（lottie-web等）からの脱却と最新環境への移行。
Senior Engineer Insight
> UX向上における極めて実戦的な技術である。特に、APIレスポンスやフォーム送信成功などの「状態遷移」をアニメーションで可視化することは、システムの応答性を心理的に高める効果がある。大規模なトラフィックを扱う現場では、ファイルサイズの削減に寄与する .lottie 形式の採用が必須である。また、複雑なベクターデータはCPU/GPU負荷を増大させるため、描画負荷の計測と適切なリソース管理が運用上の鍵となる。旧来の非推奨ライブラリを避け、最新の dotlottie-web を選択すべきである。