タマネギのLottieを商用利用してもいいですか？

はい。Google Noto Emoji AnimationはApache License 2.0で公開されています。個人・商用プロジェクトいずれでも利用・改変・再配布が可能です。ソースをバンドルする際にライセンス表記とクレジットを残してください。

アニメーションはどこから配信されていますか？

すべてのフレームはGoogleのCDN https://fonts.gstatic.com/s/e/notoemoji/latest/1f9c5/lottie.json から直接配信されます。当サイトでミラーリングや改変はせず、ブラウザがfonts.gstatic.comから取得します。Googleが更新すれば、サイト側も自動的に新しいバージョンを使えます。

lottie-web以外でも使えますか？

はい。Bodymovin互換のレンダラーならすべて動作します：lottie-web、lottie-react、Lottie iOS/Android、Skottie、dotLottie。ファイルは標準のLottie JSON v5.8.1で、特定ベンダーに縛られません。

DBEmoji

Noto Lottie

Fluent 3D

Native Unicode

タマネギ

タマネギ（🧅）は食べ物 & 飲み物に属します。

🧅はタマネギ絵文字のモーション版。静的字形と同じ意味を保ちつつ、表情や動作のテンポをそのまま生かすようGoogleがループを設計しています。

アニメーションは食べ物 & 飲み物カテゴリーの静的字形がほのめかすだけの瞬間を広げます — 笑顔がもう一段ほどけ、モノが反応し、ジェスチャーが完結する。モーションがノイズではなく意味を増やす場面にぴったりです。

タマネギアニメが活きる場面

ランディングのヒーロー／機能ハイライト — 静的SVGのヒーローをタマネギのアニメに差し替えれば、動画なしでモーション演出を加えられます。
空状態・成功・エラー状態 — 「完了！」や「まだここには何もありません」といったコピーと組み合わせて、ページが止まって見えないようにします。
メッセンジャーのリアクションとスタンプ — 64〜128pxでレンダリング。GIFより軽く、どのDPRでも輪郭がにじみません。
オンボーディングとツールチップのイラスト — 機能の説明中の視線誘導に最適。約1.2秒のループが平均的な注視時間に合っています。
マーケティングコピーとSNSカード — ブログ、チェンジログ、プロダクト発表に埋め込めば、静的絵文字では物足りない場面を補えます。

タマネギをプロジェクトに埋め込む

スタックに合うスニペットを選んでください。どのスニペットもGoogle CDN上の同じLottie JSONを参照するので、アセットを自前でホストする必要はありません。

Lottie JSON URL

オリジナルURL。Lottie互換のレンダラーに直接渡せます。

https://fonts.gstatic.com/s/e/notoemoji/latest/1f9c5/lottie.json

<lottie-player> Webコンポーネント

ビルド不要のHTML。モダンブラウザーでそのまま動作します。

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
  src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f9c5/lottie.json"
  background="transparent"
  speed="1"
  style="width: 160px; height: 160px"
  loop
  autoplay>
</lottie-player>

HTML + lottie-web (CDN)

loadAnimation()を手動で呼び出し。ループ・速度・セグメントを完全に制御。

<div id="lottie-onion-1f9c5" style="width:160px;height:160px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById("lottie-onion-1f9c5"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f9c5/lottie.json"
  });
</script>

React + lottie-react

TypeScriptコンポーネント。マウント時にJSONを取得します。

import Lottie from "lottie-react";
import { useEffect, useState } from "react";

export function Onion1f9c5() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1f9c5/lottie.json").then((r) => r.json()).then(setData);
  }, []);
  if (!data) return null;
  return (
    <Lottie
      animationData={data}
      loop
      autoplay
      style={{ width: 160, height: 160 }}
    />
  );
}

ベストプラクティス

1×または2×DPRでレンダリングしてください。原本は1024pxなので、256pxまでは非常にシャープに表示されます。
ファーストビューより下では遅延読み込みを。lottie-web本体が約50KB gzipped。プレイヤーがビューポートに入るまでインスタンス化を遅らせます。
prefers-reduced-motionを尊重してください。オートプレイを止めてUnicode文字 🧅 や静的Noto PNGにフォールバックします。
JSONは自前のCDNにキャッシュ。Googleのgstaticは既にグローバルエッジ配信ですが、同一オリジンのプロキシで接続再利用を保てます。
Lottieファイルを直接書き換えないでください。Googleが標準アニメをその場で更新するので、オーバーレイやカラーフィルターで上から味付けする方が安全です。

アニメ絵文字のよくある質問

タマネギのLottieを商用利用してもいいですか？: はい。Google Noto Emoji AnimationはApache License 2.0で公開されています。個人・商用プロジェクトいずれでも利用・改変・再配布が可能です。ソースをバンドルする際にライセンス表記とクレジットを残してください。
アニメーションはどこから配信されていますか？: すべてのフレームはGoogleのCDN https://fonts.gstatic.com/s/e/notoemoji/latest/1f9c5/lottie.json から直接配信されます。当サイトでミラーリングや改変はせず、ブラウザがfonts.gstatic.comから取得します。Googleが更新すれば、サイト側も自動的に新しいバージョンを使えます。
lottie-web以外でも使えますか？: はい。Bodymovin互換のレンダラーならすべて動作します：lottie-web、lottie-react、Lottie iOS/Android、Skottie、dotLottie。ファイルは標準のLottie JSON v5.8.1で、特定ベンダーに縛られません。

Asset source

Lottie URL: https://fonts.gstatic.com/s/e/notoemoji/latest/1f9c5/lottie.json
Codepoints: U+1F9C5
Format: Bodymovin Lottie · 60fps · 1024×1024
License: Apache 2.0 · Google Noto

アニメーション提供：Google Noto Emoji Animation（Apache License 2.0）。Googleがfonts.gstatic.comでホストしています。