animated-infographic

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

アイコン、いくつかの重要な数値、短いテキスト、シンプルな図形を、明確な視覚的階層に沿って配置した、デザイン性の高いインフォグラフィックを作成し、各要素が順番に際立つようにアニメーションを付けます。まず構成を練り、次に動きを付けます。静止した状態でも内容が伝わるレイアウトを作り、要素を段階的に表示して、視線を狙いどおりに導きます。

使用する場面

• 複数のレイアウトを組み合わせた解説：「Xを3つのステップで」「仕組み」「数字で見る」や、統計カードのグリッド。
• アイコン＋統計値＋ラベル＋コネクターを、デザインされたひとつのシーンとして順番に表示する場合。
• ピクトグラム／アイコンのアニメーション、重要な数値のカウントアップ、ステップ間をつなぐフローコネクター。

このスキルが扱うのは、構成されたインフォグラフィックです。コンテンツそのものがグラフである場合（棒グラフレース、アニメーション付きの折れ線／面グラフ、CSVを元にしたグラフ）は、chart-animationを使用してください。そのグラフをここでインフォグラフィックのひとつのブロックとして構成し、作り直さないようにします。

唯一のルール：まず静止フレームをデザインする

優れたアニメーション付きインフォグラフィックとは、動きが加わった優れた静止インフォグラフィックです。キーフレームをひとつでも追加する前に、アイコン、数値、ラベルをすべて最終位置に配置し、構成全体を整えてバランスを取ります。アニメーションで制御するのは、すでに配置した各要素が「いつ」表示されるかだけであり、レイアウトを決めることはありません。これにより、設計されていない位置へ要素が飛んでいき、最後の静止フレームが場当たり的に見えるという、よくある失敗を防げます。

範囲を絞り、30〜90秒で、ひとつの中心的な洞察と3〜5個の補足データポイントを伝えます。競合する要素が5つを超えると、連続表示が混乱して見えます。

視覚的階層 → 表示順

表示順がそのまま階層になります。視線は出現するものを追うため、レイアウト順ではなく重要度順に要素をアニメーションさせます。各要素を階層に割り当て、その階層ごとに表示します。

階層	要素	表示	動き
1	セクションタイトル／中心的な洞察	最初に単独で表示	フェード＋わずかに上昇
2	アイコン（各項目の基点）	項目ごとに、グループの先頭で表示	ポップ／スケールオーバーシュート
3	重要な数値（カウンター）	そのアイコンの直後に表示	カウントアップ、イーズアウト
4	ラベル／キャプション	数値の下に収まる	フェード、派手な動きは付けない
5	コネクター／フローライン	項目が完成するごとにつなぐ	線を描画（パスの長さ）

静止状態の階層にはサイズ、ウェイト、色を使い、アニメーションの階層にはタイミングと動きを使います。一度に目立たせる要素はひとつだけにします。2つの数値を同時にカウントアップさせてはいけません。

スタガー：連続表示

兄弟要素の間に一定の遅延（スタガー）を設けて表示すると、グループが一瞬で現れるのではなく、順序のある流れとして伝わります。すべての要素を現在のフレームから純粋関数として動かしてください。決定的なレンダリングにするため、実時間やライブラリのアニメーションループは使いません。

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

const STAGGER = 8; // frames between siblings (~0.27s @30fps)

function Item({ index, children }) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const local = frame - index * STAGGER;            // this item's own clock
  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 overshoots past 1 then settles → lively
<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),   // "settling on a number"
});
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つだけです。

ビート	時間
タイトルの表示（読み取れる時間を確保）	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()の純粋関数なので、シーク用の仕組みがなくても、ヘッドレスで任意の正確なフレームをレンダリングできます。インフォグラフィックには重要な数値が含まれるため、静止画の確認で誤った統計値やキャンバス外にずれて表示される要素を見つけられます。エンコードに時間をかける前に確認しましょう。

出力要件：

• シーンが登録されたRemotionプロジェクト（<Composition> + zodのschema + defaultProps）。すべての動きはフレーム駆動（タイマー / Date.now() / Math.random()は使用しない）。
• 納品物 = レンダリング済みのout/*.mp4（およびプロジェクト。ユーザーが新しい統計値やアイコンで再レンダリングできるようにします）。
• 長さがデータに依存する（N個のアイテム × アイテムごとの時間）場合は、手動で設定せずcalculateMetadataで計算します。

検証ループ — 静止画をレンダリング → 確認 → エンコード。 まず単一フレームをレンダリングします（低コストで、動画のエンコードは不要）。レイアウトと数値に問題がないことを確認してから、エンコードを1回だけ実行します。

# 1. Frame-exact stills — with the SHIPPED props. Pick frames that catch each tier:
npx remotion still Infographic out/f-title.png --frame=20  --props='{"items":[...]}'  # title + first pop
npx remotion still Infographic out/f-mid.png   --frame=90  --props='{"items":[...]}'  # mid cascade
npx remotion still Infographic out/f-end.png   --frame=149 --props='{"items":[...]}'  # final composed hold (= durationInFrames - 1)

# 2. Inspect each PNG — FIDELITY (every key number exact, labels/captions correct, icons the right glyph)
#    AND artifacts (text overflow, icon off-canvas, clipped safe-area, missing font, connector pointing
#    at the wrong item, half-revealed element where a tier should be settled).

# 3. Only after the stills check out, encode:
npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'

• npx remotion compositionsを使ってdurationInFrames/fpsを確認します。最後の全体表示が見せ場のフレームです。連続表示の途中ではなく、意図した仕上がりになっていることを確認します。
• データ駆動 / バッチ処理：すべてのバリエーションをバッチレンダリングする前に、代表的なpropsセット（統計値 + ラベル）を1つ選び、静止画で検証します。カウンターやレイアウトの不具合をN回ではなく1回で見つけられます。
• READMEのデモGIFを無料で作成：npx remotion render Infographic out/demo.gif --codec=gif。

完了前に確認すること：

1. npx remotion stillでタイトル、連続表示の途中、最後の全体表示をエラーなくレンダリングできること。フォントやアイコンが欠けていないこと。
2. すべての重要な数値が正確（丸め処理、tabular-nums）で、すべての要素が各フレームでセーフエリア内に収まっていること。
3. フレーム駆動のみであること。Date.now() / Math.random() / ライブラリのタイマーを使わないこと（CIでも決定性を維持します）。
4. 納品するpropsで正しくレンダリングされること（defaultPropsだけではなく、正しい統計値、正しいアイコン、正しいラベルで確認します）。
5. MP4全体がエンコードされ、再生できること。README用GIFのレンダリングは任意です。

参考ファイル

• references/sequenced-infographic.md — 完全に実行可能な Remotion シーンです。3 ステップの「仕組み」インフォグラフィックで、アイコンのポップ表示、イージング付きのカウントアップ統計、描画アニメーション付きのコネクター、マスタータイミングマップ、データ駆動型にするためのプロパティパターン（テンプレート × データ）が含まれています。Remotion を使用しない場合に使える、依存関係のないインライン SVG 版も含まれています。