電話の合図: 明るい肌色アニメはGoogle Noto Emoji Animationの一部。ベクターのLottie形式なのでサイズを変えてもくっきり、ファイルは100KB以下に収まります。Unicodeコードポイント：U+1F919 U+1F3FB。
この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/1f919_1f3fb/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/1f919_1f3fb/lottie.json"
background="transparent"
speed="1"
style="width: 160px; height: 160px"
loop
autoplay>
</lottie-player>HTML + lottie-web (CDN)
loadAnimation()を手動で呼び出し。ループ・速度・セグメントを完全に制御。
<div id="lottie-call-me-hand-light-skin-tone-1f919-1f3fb" 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-call-me-hand-light-skin-tone-1f919-1f3fb"),
renderer: "svg",
loop: true,
autoplay: true,
path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f919_1f3fb/lottie.json"
});
</script>React + lottie-react
TypeScriptコンポーネント。マウント時にJSONを取得します。
import Lottie from "lottie-react";
import { useEffect, useState } from "react";
export function CallMeHandLightSkinTone1f9191f3fb() {
const [data, setData] = useState<unknown>(null);
useEffect(() => {
fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1f919_1f3fb/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/1f919_1f3fb/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
- Codepoints
- U+1F919 U+1F3FB
- Format
- Bodymovin Lottie · 60fps · 1024×1024
- License
- Apache 2.0 · Google Noto
アニメーション提供：Google Noto Emoji Animation（Apache License 2.0）。Googleがfonts.gstatic.comでホストしています。