Motion Skills
← Skills
無料データ

データチャート・ストーリー

ひとつの結論を伝える、アニメーションの棒グラフまたは折れ線グラフ。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

必要なもの: Node.js 22+、FFmpeg、Chrome。API キー不要。

ほかのテーマと画面比率

データチャート・ストーリー · エレクトリック · 9:16
テーマ: エレクトリック · 9:16
データチャート・ストーリー · インク · 1:1
テーマ: インク · 1:1

同じテンプレートをテーマと画面比率を変えてレンダリングした最終フレームです。

5つのテーマ

  • インク
    ink
  • ペーパー · デフォルト
    paper
  • エレクトリック
    electric
  • ノワール
    noir
  • サンド
    sand

プロンプトでテーマ名を指定するだけで切り替わります。アクセント色・背景色・文字色を自分で指定することもできます。

インストール用プロンプト
https://claude-motion.com/skills/data-chart-story/install.md を読んで手順どおりに「data-chart-story」スキルをインストールし、それを使って最初の動画を作ってください。

Claude Code、Codex、Cursor など Skill に対応したエージェントに貼り付けてください。

プロンプト例
Use the data-chart-story skill with our signups: "W1: 320 | W2: 410 | W3: 640 | W4: 980", title "Weekly signups", line chart, insight "3x in a month".
スタイルプロンプト(Claude Motion または Opus 5.5)
Make a 9-second 16:9 animated bar chart for [who will watch, e.g. investors], playing [where, e.g. the monthly update]. Use only the numbers I attach or list below; don't round or change any of them. Warm off-white background, bold geometric sans.

The title fades in at the top left. A baseline draws across and faint gridlines appear. The gray bars grow one after another with their values counting up above them; the last bar is orange-red with its value in the same accent. End frame: a black pill with an orange dot slides in near the last bar with the takeaway, held for 2 seconds.

Title: [e.g. "Monthly active teams"]
Data: [your labels and values] (e.g. Jan–Jun: 120, 168, 214, 290, 352, 498)
Takeaway: [e.g. "4x growth in six months"]

インストール不要:Claude Motion(Team または Enterprise)に貼り付けるか、Opus 5.5 に渡すと近い雰囲気になります。結果は実行ごとに変わります。Skill なら毎回同じ結果です。

この Skill で作った作品