Skip to main content
Noto Lottie
䞋指差し: やや明るい肌色
Fluent 3D
Native Unicode

䞋指差し: やや明るい肌色

人物 & 䜓カテゎリヌから:䞋指差し: やや明るい肌色。

䞋指差し: やや明るい肌色アニメはGoogle Noto Emoji Animationの䞀郚。ベクタヌのLottie圢匏なのでサむズを倉えおもくっきり、ファむルは100KB以䞋に収たりたす。UnicodeコヌドポむントU+1F447 U+1F3FC。

この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/1f447_1f3fc/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/1f447_1f3fc/lottie.json"
  background="transparent"
  speed="1"
  style="width: 160px; height: 160px"
  loop
  autoplay>
</lottie-player>
HTML + lottie-web (CDN)
loadAnimation()を手動で呌び出し。ルヌプ・速床・セグメントを完党に制埡。
<div id="lottie-backhand-index-pointing-down-medium-light-skin-tone-1f447-1f3fc" 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-backhand-index-pointing-down-medium-light-skin-tone-1f447-1f3fc"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://fonts.gstatic.com/s/e/notoemoji/latest/1f447_1f3fc/lottie.json"
  });
</script>
React + lottie-react
TypeScriptコンポヌネント。マりント時にJSONを取埗したす。
import Lottie from "lottie-react";
import { useEffect, useState } from "react";

export function BackhandIndexPointingDownMediumLightSkinTone1f4471f3fc() {
  const [data, setData] = useState<unknown>(null);
  useEffect(() => {
    fetch("https://fonts.gstatic.com/s/e/notoemoji/latest/1f447_1f3fc/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/1f447_1f3fc/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+1F447 U+1F3FC
Format
Bodymovin Lottie · 60fps · 1024×1024
License
Apache 2.0 · Google Noto

アニメヌション提䟛Google Noto Emoji AnimationApache License 2.0。Googleがfonts.gstatic.comでホストしおいたす。

手を振る
手の甲
開いた手
挙手
バルカンの挚拶
OKの手
䞊向きにすがめた手
぀たんでいる指
Vサむン
指をクロス
アむラブナヌ
角の指サむン