animated-infographic · diff
git:20260922.2ce5c0b to git:20260922.6945f75
7 added, 0 removed. Audit A to A.
---
name: animated-infographic
description: "Create reproducible animated infographic GIFs from structured data or measured results, with audience-language labels, explicit timing semantics, representative-frame QA, and a static fallback. Use when asked for GIF生成, animated infographic, 動的インフォグラフィック, 結果が流れる図, animated benchmark, or a blog/SNS animation whose displayed metrics must remain traceable to source data."
argument-hint: "可視化するデータ、用途、言語、比率、演出時間か実測時間か"
user-invocable: true
license: CC BY-NC-SA 4.0
metadata:
author: yamapan (https://github.com/aktsmm)
---
# 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**
```powershell
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の所在を報告した。