Animated Infographic

When to Use

• JSON / CSV / benchmark resultsからGIFや動く図を作る。
• カード移動、ランキング、比較棒、状態遷移をアニメーションで見せる。
• 数値の正確性と、演出時間・実測時間の区別が重要な記事 / SNS資産を作る。

静止PNGだけならvisualize-as-infographic、既存動画の分析ならvideo-watch、編集可能な構成図ならdraw.io系workflowを使う。

Inputs

• Source artifact: JSON / CSV / text。測定値がある場合はこれをSSOTにする。
• Audience language and target medium: Japanese blog、X、slideなど。
• Timing mode:
  • illustrative: 動きは演出。処理速度を表さない。
  • measured: frame timingを実測timestampから作る。
  • mixed: 数値は実測、カードや棒の動きは演出。
• Output size。既定はblog/X向け1200x675、必要なら静止fallbackも作る。

Workflow

1. Freeze the evidence

• source artifact、取得日時、対象件数、測定境界を固定する。
• latencyは1 request、serial total、fresh-process end to endなど、何を測った値か決める。
• 外部mediaを加工する場合は元URL、取得日、source相対path、SHA-256をmanifestへ記録し、生成前にhashを照合する。

2. Design the story

• 1 GIFは1つの主張に絞る。長文説明は本文へ戻す。
• 入力 → 判断 → 次処理、before → after、比較 → 結論など、読み順を固定する。
• 狭いdecision gateが主題なら、accent色、太いoutline、中央配置、calloutのいずれかで視覚階層の主役にする。入力と出力を両側に置き、gateが決める値を箱内へ書く。
• 公式用語と作者独自の層・分類を同じ見た目で断定しない。独自モデルはasset内でこの記事での整理などscopeを示し、製品包含や成熟度に見える矢印・入れ子を避ける。

3. Localize before rendering

• 説明UI、status、captionは読者言語へ合わせる。日本語記事に汎用英語UIを残さない。
• 製品名、API field、model IDなどの固有名詞は公式表記を保つ。
• 直訳調を避ける。例: 段階で採点ではなく定義した基準のどの段階に近いか。

4. Make timing explicit inside the asset

• illustrative: カード移動は演出（実測速度ではありません）を表示する。
• measured: 測定境界と単位を表示し、frame durationを実測値から作る。
• mixed: 表示値は実測 / 棒・カードの動きは演出の両方を書く。

5. Generate reproducibly

• generator script、GIF、静止fallback、必要ならsource snapshotを残す。
• 数値を手入力せずsource artifactから読む。
• 第三者動画は主張に必要な最小frame（例: before / operation / after）へ絞り、無関係なbrowser chromeを除く。出典と、ダミーデータ・未送信・筆者追加注記などの誤読防止情報をasset内で区別して表示する。

6. Validate mechanically

python scripts/validate_animation.py output.gif `
  --expected-width 1200 --expected-height 675 `
  --timing-mode illustrative `
  --contact-sheet output-contact.jpg `
  --report output-validation.json

7. Inspect visually

• 開始・中間・終了frameを原寸とtarget embed幅（mobileは約360px）で確認する。
• text overlap、clip、順序、空白、読めない注記、英語UI残存を直して再生成する。

Timing Rules

• GIFの総再生時間がAPI latencyと一致するとは限らない。自動で同一視しない。
• 複数requestの合計は、並列か直列かを表示する。
• 比較対象の測定境界が違う場合は、model speedではなくobserved end-to-end timeとして扱う。
• 推定費用、正解率、token数もsource artifactと照合し、asset単体で誤読しない注記を入れる。

Done Criteria

• GIFがanimatedで、期待寸法・最小frame数を満たす。
• timing modeと測定境界がasset内に見える。
• source artifactの数値と表示値が一致する。
• 外部media由来ならsource URL / 取得日 / SHA-256がmanifestと一致する。
• 説明UIが読者言語に統一されている。
• 主題のdecision gateが最初に見え、何を受け取り何を返すか読める。
• 公式定義と作者独自の整理がasset単体でも区別できる。
• 開始・中間・終了frameとループ再生を確認した。
• target embed幅で文字が読める。
• generator、GIF、静止fallback、validation reportの所在を報告した。