げんこつのLottieを商用利用してもいいですか？

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

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

すべてのフレームはGoogleのCDN https://fonts.gstatic.com/s/e/notoemoji/latest/270a/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 Noto Emoji Animationの一部。ベクターのLottie形式なのでサイズを変えてもくっきり、ファイルは100KB以下に収まります。Unicodeコードポイント：U+270A。

このLottieは✊とまったく同じ意味を運びます：人物 & 体カテゴリーから:げんこつ。アニメーションはその瞬間をより強く届けるためだけにあります。

げんこつアニメが活きる場面

ランディングのヒーロー／機能ハイライト — 静的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/270a/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/270a/lottie.json"
  background="transparent"
  speed="1"
  style="width: 160px; height: 160px"
  loop
  autoplay>
</lottie-player>

HTML + lottie-web (CDN)

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

<div id="lottie-raised-fist-270a" 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-raised-fist-270a"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://fonts.gstatic.com/s/e/notoemoji/latest/270a/lottie.json"
  });
</script>

React + lottie-react

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

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

export function RaisedFist270a() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/270a/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/270a/lottie.json から直接配信されます。当サイトでミラーリングや改変はせず、ブラウザがfonts.gstatic.comから取得します。Googleが更新すれば、サイト側も自動的に新しいバージョンを使えます。
lottie-web以外でも使えますか？: はい。Bodymovin互換のレンダラーならすべて動作します：lottie-web、lottie-react、Lottie iOS/Android、Skottie、dotLottie。ファイルは標準のLottie JSON v5.8.1で、特定ベンダーに縛られません。