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
- Freeze the evidence
- source artifact、取得日時、対象件数、測定境界を固定する。
- latencyは
1 request、serial total、fresh-process end to endなど、何を測った値か決める。 - 外部mediaを加工する場合は元URL、取得日、source相対path、SHA-256をmanifestへ記録し、生成前にhashを照合する。
- Design the story
- 1 GIFは1つの主張に絞る。長文説明は本文へ戻す。
- 入力 → 判断 → 次処理、before → after、比較 → 結論など、読み順を固定する。
- 狭いdecision gateが主題なら、accent色、太いoutline、中央配置、calloutのいずれかで視覚階層の主役にする。入力と出力を両側に置き、gateが決める値を箱内へ書く。
- 公式用語と作者独自の層・分類を同じ見た目で断定しない。独自モデルはasset内で
この記事での整理などscopeを示し、製品包含や成熟度に見える矢印・入れ子を避ける。
- Localize before rendering
- 説明UI、status、captionは読者言語へ合わせる。日本語記事に汎用英語UIを残さない。
- 製品名、API field、model IDなどの固有名詞は公式表記を保つ。
- 直訳調を避ける。例:
段階で採点ではなく定義した基準のどの段階に近いか。
- Make timing explicit inside the asset
illustrative:カード移動は演出（実測速度ではありません）を表示する。measured: 測定境界と単位を表示し、frame durationを実測値から作る。mixed:表示値は実測 / 棒・カードの動きは演出の両方を書く。
- Generate reproducibly
- generator script、GIF、静止fallback、必要ならsource snapshotを残す。
- 数値を手入力せずsource artifactから読む。
- 第三者動画は主張に必要な最小frame（例: before / operation / after）へ絞り、無関係なbrowser chromeを除く。出典と、ダミーデータ・未送信・筆者追加注記などの誤読防止情報をasset内で区別して表示する。
- 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- 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の所在を報告した。