アニメーションインフォグラフィックは何をしますか？

デザインされたインフォグラフィック（アイコン、いくつかのキーナンバー、短いテキスト、そして実際の視覚的階層を持って配置されたシンプルな形状）を構築し、各要素が順序立ててアニメーション表示されるようにすることで、それぞれが注目される瞬間を作り出します。職人技は、まずコンポジション、次にコレオグラフィーです。つまり、静的なレイアウトがそれだけで成立し、段階的なカスケードで表示されることで、視線を正確に目的の場所へ誘導します。

使用するタイミング

混合レイアウトの説明：「3ステップで」「しくみ」「数字で見る」、統計カードグリッド。
アイコン＋統計＋ラベル＋コネクタを1つのデザインされたシーンとして順に表示。
ピクトグラム/アイコンのアニメーション、カウントアップするキーナンバー、ステップ間のフローコネクタ。

このスキルは構成されたインフォグラフィックを担当します。コンテンツそのものがチャートである場合（棒グラフレース、アニメーションする折れ線/面グラフ、CSV駆動のグラフ）は、代わりにchart-animationを使用し、そのチャートをここではインフォグラフィック内の1ブロックとして構成し、再構築しません。

唯一のルール：最初に静的なフレームをデザインする

優れたアニメーションインフォグラフィックは、たまたま動く優れた静的インフォグラフィックです。1つのキーフレームも追加する前に、すべてのアイコン、数字、ラベルを最終位置に配置し、完全なコンポジションのレイアウトとバランスを取ります。その後、アニメーションは既に配置された各要素がいつ表示されるかを制御するだけで、レイアウトを決定することは決してありません。これにより、最も一般的な失敗（デザインされていない位置に要素が飛んでいくため、最終的な静止フレームが偶然のように見えてしまう）を防ぎます。

範囲は厳密に絞ります：1つの中心的な洞察、3～5個の補足データポイント、30～90秒。5つ以上の競合する要素があると、カスケードはカオスとして読まれます。

視覚的階層 → 表示順序

表示順序こそが階層です。目は出現順に追従するため、レイアウト順ではなく重要度順に要素をアニメーションさせます。各要素を階層にマッピングし、階層ごとに表示します。

階層	要素	表示	モーション
1	セクションタイトル / 中心的な洞察	最初、単独で	フェード＋わずかな上昇
2	アイコン（各項目のアンカー）	項目ごと、グループをリード	ポップ / スケールオーバーシュート
3	キーナンバー（カウンター）	アイコンの直後	カウントアップ、イーズアウト
4	ラベル / キャプション	数字の下に落ち着く	フェード、動きのドラマはなし
5	コネクタ / フローライン	項目の完了時にリンク	描画（パス長）

静的な階層にはサイズ、太さ、色を使用し、アニメーションレイヤーにはタイミングとモーションを使用します。一度に目立たせるのは1つだけにしてください。決して一度に2つの数字をカウントしてはいけません。

スタガ：カスケード

兄弟要素は、それらの間に固定の遅延（スタガ）を設定して表示し、グループがフラッシュではなくシーケンスとして読まれるようにします。すべての要素を現在のフレームから純粋関数として駆動します。壁時計時間やライブラリのアニメーションループは使用せず、レンダリングが決定論的になるようにします。

import { useCurrentFrame, spring, useVideoConfig } from "remotion";

const STAGGER = 8; // 兄弟要素間のフレーム数（約0.27秒 @30fps）

function Item({ index, children }) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const local = frame - index * STAGGER;            // このアイテム独自のクロック
  const enter = spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } });
  return (
    <div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 24}px)` }}>
      {children}
    </div>
  );
}

スタガは6～10フレームがシャープに感じられます。約15を超えると引きずります。すべての兄弟要素で同じエンターカーブを維持し、カスケードがノイズではなく確信として読まれるようにします。

アイコンのアニメーション：ポップ

アイコンは各項目のアンカーとなるため、最も強いエントランス（落ち着くスケールオーバーシュート、「ポップ」）を与えます。バウンスには低いダンピングのスプリングを使用します。リニアなスケール（機械的に読まれる）は決して使用しないでください。

const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
// popは1を超えてオーバーシュートし、その後落ち着く → 生き生きとした印象
<g transform={`scale(${pop})`} style={{ transformOrigin: "center" }}>{icon}</g>

ピクトグラムの塗りつぶし（例：「10人中7人」）の場合、同じスタガでユニットを表示し、部分的なユニットをスケーリングではなくマスクでクリップします。

キーナンバー：落ち着くカウンター

元の数値を補間し、イージングをかけ、レンダリング時にフォーマットします。2つの必須事項：フォーマット前に丸めること、そしてtabular-numsを使用して、数字が変化するときにレイアウトがジッターしないようにすることです。（chart-animationと共通の技術です。通貨/パーセントのバリアントについては、そのカウンターセクションを参照してください。）

import { interpolate, Easing } from "remotion";

const raw = interpolate(frame - delay, [0, 30], [0, 1287], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
  easing: Easing.out(Easing.cubic),   // "数字に落ち着く"
});
const label = new Intl.NumberFormat("en-US").format(Math.round(raw)); // "1,287"
// CSS: font-variant-numeric: tabular-nums; line-height: 1;

見出しの数字にイーズアウトを使用すると、到着したように読まれます。リニアはロボットの走行距離計のように読まれます。各数字は、次の項目が始まる前に約0.5秒間保持します。

コネクタとフロー

コネクタはカードのグリッドをプロセスに変えます。ライン/矢印をパスに沿って描画するようにアニメーションさせ、それが指すアイテムが終了するちょうどそのときに同調させます。これは「ここを見てください」と言っているような動きです。

const pathRef = useRef();
const len = pathRef.current?.getTotalLength?.() ?? 0;
const draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" });
<path ref={pathRef} d="M40,0 C40,30 40,30 40,60" fill="none" stroke="#444" strokeWidth={3}
  strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />

コネクタは、それが接続する2つのアイテムの間に、ソースが表示されてからターゲットが表示されるまでのギャップに描画します。ラインは次の表示へと視線を誘導します。

セクションペーシング

時間は、仕上げの1秒あたりではなく、要素ごとに予算配分します。視聴者は一度に1つの動くものしか追跡できません。

ビート	予算
タイトルホールド（落ち着かせる）	0.8～1.2秒
項目ごと（アイコンポップ → カウンター → ラベル）	1.2～2.0秒
コネクタ描画	0.4～0.6秒、次の項目にオーバーラップ
最終構成ホールド（スクリーンショット可能）	2～3秒

完成した静的なインフォグラフィックを2～3秒間静止させて終了します。テイクアウェイは組み立てられたフレームであるため、競合するモーションなしで落ち着かせます。

出力チェックリスト

静的レイアウトは、あらゆるキーフレームの前にデザインされ、バランスが取れている。保持された最終フレームが意図的に見える。
1つの中心的な洞察、3～5個のデータポイント、30～90秒。
表示順序が階層に従っている（タイトル → アイコン → 数字 → ラベル → コネクタ）。レイアウト順ではない。
兄弟要素は、一貫した6～10フレームのスタガと1つのエンターカーブでカスケードする。
アイコンはスプリングオーバーシュートでポップする。数字はイージングとtabular-numsでカウントアップする。一度にアニメーションする数字は1つだけ。
コネクタは、視線を次の表示へ誘導するために描画される。
すべての値はuseCurrentFrame()の純粋関数。ライブラリのタイマーはなし。
最終構成フレームは2秒以上保持される。

デリバリと検証（レンダリングされた静止画 → MP4）

パッケージ化されたヘルパー（scripts/）：scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.pngで静止画をタイル表示し、scripts/probe-mp4.sh out.mp4 [WxH] [fps]でエンコードを検証します。scripts/README.mdを参照してください。

Remotionはフレーム決定論的です。すべてのアイコンポップ、カウンター値、コネクタ描画はuseCurrentFrame()の純粋関数であるため、シークハーネスなしで任意の正確なフレームをヘッドレスレンダリングできます。インフォグラフィックはキーナンバーを保持するため、静止画検査により、エンコードを無駄にする前に、間違った統計やキャンバス外に配置されたスタガをキャッチできます。

出力契約：

シーンが登録された（<Composition> + zod schema + defaultProps）Remotionプロジェクト。すべてのモーションはフレーム駆動（タイマー/Date.now()/Math.random()なし）。
成果物 = レンダリングされたout/*.mp4（およびプロジェクト。ユーザーが新しい統計/アイコンで再レンダリングできるようにするため）。
期間はデータに依存（Nアイテム×アイテムあたりの予算）？calculateMetadataで計算し、手動では計算しない。

検証ループ — 静止画レンダリング → 検査 → エンコード。 最初に単一フレームをレンダリングし（安価、ビデオエンコードなし）、レイアウトと数字が正しいことを確認してからエンコードします。

# 1. フレーム正確な静止画 — SHIPPED propsを使用。各階層をキャッチするフレームを選択：
npx remotion still Infographic out/f-title.png --frame=20  --props='{"items":[...]}'  # タイトル + 最初のポップ
npx remotion still Infographic out/f-mid.png   --frame=90  --props='{"items":[...]}'  # 中間カスケード
npx remotion still Infographic out/f-end.png   --frame=149 --props='{"items":[...]}'  # 最終構成ホールド (= durationInFrames - 1)

# 2. 各PNGを検査 — FIDELITY (すべてのキーナンバーが正確、ラベル/キャプションが正しい、アイコンが正しいグリフ)
#    および ARTIFACTS (テキストオーバーフロー、アイコンがキャンバス外、セーフエリアがクリップされている、
#    フォント欠落、コネクタが間違ったアイテムを指している、階層が落ち着くはずの場所に半表示の要素がある)。

# 3. 静止画のチェックが通った後にのみ、エンコード：
npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'

npx remotion compositionsを使用してdurationInFrames/fpsを読み取ります。最終構成ホールドが最も重要なフレームです。意図的に見え、カスケードの途中ではないことを確認します。
データ駆動/バッチ：静止画で事前に1つの代表的なpropsセット（統計+ラベル）を検証してから、すべてのバリアントをバッチレンダリングします。カウンターまたはレイアウトのバグを1回キャッチし、N回繰り返さないようにします。
READMEデモGIFを無料で：npx remotion render Infographic out/demo.gif --codec=gif。

終了する前に：

npx remotion stillが、タイトル、中間カスケード、最終ホールドでクリーンにレンダリングされること — エラー、フォント/アイコンの欠落がないこと。
すべてのキーナンバーが正確（丸め、tabular-nums）であり、すべての要素が各フレームでセーフエリア内にあること。
フレーム駆動のみ — Date.now()/Math.random()/ライブラリタイマーなし（決定論性がCIで維持されること）。
出荷されたpropsが正しくレンダリングされること（defaultPropsだけでなく） — 正しい統計、正しいアイコン、正しいラベル。
完全なMP4がエンコードされ再生されること。（オプション）README用のGIFがレンダリングされること。

参考ファイル

references/sequenced-infographic.md — 完全で実行可能なRemotionシーン：スタガされたアイコンポップ、イージングされたカウントアップ統計、描画オンコネクタ、マスタータイミングマップ、およびデータ駆動（テンプレート×データ）propsパターンを備えた3ステップの「しくみ」インフォグラフィック。Remotion以外での使用のために依存関係のないインラインSVGバリアントも含まれます。

アニメーションインフォグラフィック