ハクソク

世界を動かす技術を、日本語で。

Lottieはアニメーションベクターグラフィックスのオープンフォーマットです

2025年5月25日原文(lottie.github.io)

概要

  • Lottie Animation Community (LAC) は非営利のオープンソースプロジェクト
  • The Linux Foundation の支援のもと活動
  • Lottieファイルフォーマット の標準化と普及が目的
  • オープンかつ協力的な運営体制
  • コミュニティ全体での透明性と参加を重視

Lottie Animation Community（LAC）概要

  • Lottie Animation Community (LAC) は、アニメーションベクターグラフィックス技術である Lottie File Format の効率的かつスケーラブルなクロスプラットフォーム化を目指す非営利プロジェクト
  • The Linux Foundation のホスティングによる運営
  • Lottieフォーマット仕様 の正式策定と、各種レンダラーやツールへの実装推進
  • Lottieファイルフォーマット の業界標準化と広範な普及活動
  • オープンで協力的な標準化活動を保証する Joint Development Foundation のガバナンス下でのプロジェクト運営
  • コミュニティ全体での 透明性 を重視し、誰もが仕様策定や改善プロセスに参加可能

コントリビューションについて

  • LAC は、誰でも参加できる オープンな貢献活動 を推進
    • 仕様策定やツール開発、ドキュメント整備など多様な貢献分野
    • GitHub等でのコラボレーションを推奨
  • コミュニティメンバーは、 Lottie File Format の改良や普及活動に意見やアイデアを提案可能
  • 参加方法や詳細情報は、 公式ウェブサイトやリポジトリ にて案内

Hackerたちの意見

アニメーションの共通でオープンなフォーマットがあるっていうアイデアはいいと思う。ただ、CSSやSVGベースのアニメーションについてもっと学ぶ代わりに、Lottieを使おうとするウェブ開発者が結構いるのが気になるんだよね。Lottieはライブラリやラッパーで数百キロバイト追加されるし、アニメーションごとにさらに増えるし。そういう意味では、Lottieの小さいサイズをメインサイトで自慢してるのもあまり好きじゃない。GIFやPNGファイルとしか比較してないし、SVG/CSSアニメーションのことは全然触れてないから。とはいえ、ネイティブモバイルアプリには合ってると思うけどね。

└

自分の経験では、Lottieが本当に優れているのはデザイン作成ツール、特にAfter Effectsのターゲットフォーマットとしてだと思う。リンクされた記事でも、ライブラリとファイルフォーマットの元々の動機として触れられているしね。そもそも、そんなものを手で書く人はいないよ。モバイルアプリ開発者としてLottieアニメーションを使ったことはあるけど、自分で作ったことはないんだ。

└

LottieアニメーションをSVG+JSにコンパイルすることはできないのかな？それがまだできていないだけなのかも。

└

CSSやSVGベースのアニメーションについてもっと学ぶ代わりに 反対意見だけど、FlashはWeb 1.0の中で最高のものの一つだったよ。強制的にCSSに移行させられたり、他の「標準」の星座がFlashがかつて提供していたものに追いついていない。Flashは、動画フォーマット、アニメーションフォーマット、プログラミング環境、動画プレーヤー、インタラクティブUIシステム、ゲームプログラミングエンジン、マルチプレイヤーMMOゲーム開発エンジン、インフォグラフィックスシステムなど、実際には自分が望むものすべてを兼ね備えていた。しかも、子供でも使えるくらいシンプルだった。もしAdobeがフォーマットやプレーヤーなどをオープンにしていたら、今でも続いているような素晴らしいものになっていたかもしれない。これを再考してやり直す余地はあると思う。CSSやSVG、HTML、JavaScriptだけが唯一の方法だなんて、そんなにドグマティックになる必要はないよ。彼らはもう40年近く輝いてきたけど、まだ同じ問題に苦しんでいる。車輪を再発明しようとするべきだよ。

└

それに、CSSアニメーション（新しいWeb Animations APIも含めて）はハードウェアアクセラレーションを許可するけど、こういうライブラリはそうじゃないからね。

└

Lottieのポイントは、CSSトランジションのようなシンプルなアニメーションじゃなくて、もっと複雑で自由なアニメーションだよ。ちょっとした動きじゃなくて、アニメーションのようなもの。いい例は、Lottieをアニメーションステッカーのフォーマットとして使っているTelegramメッセンジャーだね。例えば、https://tlgrm.eu/stickers/Princess（クリックするとアニメーションするよ）。

LottieとRiveの実装や埋め込みの経験はほとんどないけど、Riveの方が明らかに良かったって言える。将来的にどちらかを選ぶ必要があるとしたら、Lottieについて何か見落としてることがあるのかな？

└

Riveのことは今まで知らなかったけど、プロジェクトで使えそうな感じ。ありがとう、こういう情報があるとHNにハマっちゃうんだよね。

└

私自身はRiveを使ったことはないけど、その進捗を追っている。特に、Lottieのクリエイターが数年前にRiveチームに加わったことが注目に値する。この分野で評価するツールのリストには入れておきたい。私が関わったプロジェクトでは、デザイナーが使いたいアニメーションの種類に対してファイルサイズが非常に難しいことから、Lottieの使用に反対してきた。SVGatorは別の成功した代替手段だった。一つ非常にイライラしているのは、Lottieがファイルサイズについて何も言わずに推奨されている場所が多いこと。例えば、Webflowのようなツールや、テックコミュニティの著名な人物からの一般的な推奨。Lottieには適切なポイントがあると思うけど、ほとんどの人が使っているケースにはもっと良い選択肢があると確信している。

Lottieは私にとって悲しみそのもの。アイデア自体は好きだし、アニメーターが使っているものからアニメーションを生成できるのはすごくクールだけど、実装が本当に残念すぎる。フォーマットは、この用途には最悪の選択肢の一つだと思う。JSONだし、通常は数字の塊で、もっとコンパクトなバイナリフォーマットにぴったりなのに。このJSONは外部ファイルを参照できるから、アニメーションは以下のいずれかになる。- ファイルがたくさん入ったフォルダ（サブ画像） - それとも、ファイルがJSON内にbase64でインライン化されている - それか、単一のファイルで、結局はこの統合のzipフォルダになっている。これをウェブで読み込むことを想像してみて。絶対に巨大なSDKを読み込まなきゃいけない（しかもあまりメンテナンスされてないし、サイズ最適化もあまりされてない）。アニメーションを読み込むには、ファイルを別々に読み込むか、単一のファイルを読み込んで、複数の異なるパーサーを通して処理する必要がある（JSON、base64、png、lottie、zip）。.lottieファイルを使う場合、JSバンドルにzipデコンプレッサーを含めなきゃいけない（.lottieプレイヤーは別のライブラリで、2MBのwasm blobも使ってるけど、理由はよくわからない）。このクレイジーなもののフットプリントをアプリで抑えるのに時間がかかったし、ホットパスで使ってないのは良かった。だって、これはただのクレイジーだもん。特別な時のためのちょっとしたおまけのはずなのに、コードベースの中で一番重い部分になってる。アニメーションを手動で調整したり、いくつかの最適化ツールを通したり、変なパスやインラインの問題を修正したり、ベクターをpngに変換するエクスポーターの問題を直したり、いろいろやった。さらに、ブラウザは同時にいくつかのアニメーションを再生するのが安定しない（特に低スペックのデバイスでは）、だって（誰が予想した？）JSとDOMでアニメーションするのはあまりパフォーマンスが良くないから。週末プロジェクトでこれを最適化されたsvgスプライトに変えて、CSSトランジションで再生してみたいな。これで少しはマシになるか試してみたい。

└

あなたが言ったこと、100%同意。私が遭遇したのは、ひどいAfter EffectsからLottieへのワークフロー。多くのレイヤーやスタイルがエクスポートするときにうまくいかないから、モーションデザイナーにどの機能が使えるか、どれが使えないかを説明しなきゃいけないんだけど、彼らはそれをあまり喜ばないことが多い。多くの場合、動画をレンダリングして再生をインタラクションに結びつける方が、Lottieを使うよりもずっと軽量で手間がかからない。Riveについては前に聞いたことがあるけど、彼らの選択肢はLottieの問題を解決するための正確な修正のように見える。ただ、まだ使ったことはないから、あなたの経験次第だね。

└

モバイルでの私の経験はLottieに対してかなり優しかった。主にランタイムで編集可能なテキストのおかげ。15種類の異なるアセットを送らずに、フルローカリゼーションを想像してみて...

Hacker Newsで議論の続きを見る