サメ（🦈）はGoogle Notoが手で仕上げたLottieアニメ絵文字です。1024×1024のキャンバスを60fpsでループし、ファイルサイズは約60〜90KB。静的PNGが置ける場所ならどこでも置き換えられます。
モーションが乗ることでサメは静的キャラクターよりも存在感が増します。ランディングのヒーロー、オンボーディング、リアクションスタンプ、アプリ内のお祝いなど、ワンテンポ「間」が欲しいメッセージにどうぞ。
サメ
サメ — 動物 & 自然カテゴリーの絵文字。
サメアニメが活きる場面
- ランディングのヒーロー／機能ハイライト — 静的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/1f988/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/1f988/lottie.json"
background="transparent"
speed="1"
style="width: 160px; height: 160px"
loop
autoplay>
</lottie-player>HTML + lottie-web (CDN)
loadAnimation()を手動で呼び出し。ループ・速度・セグメントを完全に制御。
<div id="lottie-shark-1f988" 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-shark-1f988"),
renderer: "svg",
loop: true,
autoplay: true,
path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f988/lottie.json"
});
</script>React + lottie-react
TypeScriptコンポーネント。マウント時にJSONを取得します。
import Lottie from "lottie-react";
import { useEffect, useState } from "react";
export function Shark1f988() {
const [data, setData] = useState<unknown>(null);
useEffect(() => {
fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1f988/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/1f988/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+1F988
- Format
- Bodymovin Lottie · 60fps · 1024×1024
- License
- Apache 2.0 · Google Noto
アニメーション提供：Google Noto Emoji Animation（Apache License 2.0）。Googleがfonts.gstatic.comでホストしています。