Motion Skills
← Skills
Premium解説

ホワイトボード解説

マーカーの落書きが自ら描かれ、ラベルが一歩ずつ書き込まれます。

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/whiteboard-explainer/install.md を読んで手順どおりに「whiteboard-explainer」スキルをインストールし、それを使って最初の動画を作ってください。

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

プロンプト例
Use the whiteboard-explainer skill: title "Why we use feature flags", steps "Ship: Code goes out dark | Test: Turn it on for a few | Launch: Flip it for everyone", takeaway "Deploy ≠ release."
スタイルプロンプト(Claude Motion または Opus 5.5)
Make a 20-second 16:9 whiteboard explainer for [who will watch, e.g. non-technical colleagues], playing [where, e.g. the internal wiki]. Use only the title, three steps and closing line below; don't add claims. Clean white board, black and blue marker.

Scene 1: the italic handwritten-style title writes itself letter by letter and a blue marker underline sweeps under it. Scene 2: three stations draw themselves in black marker (an outlined arrow, a box with a blue tick, a light bulb with blue rays), each with its label, connected by curved gray arrows. End frame: the closing line writes in blue at the bottom and a blue marker loop circles it.

Title: [e.g. "How a cache makes apps fast"]
Three steps: [e.g. "Ask — The app asks for data", "Check — The cache answers if it already knows", "Remember — Otherwise fetch once, keep a copy"]
Closing line: [e.g. "Fast = not asking twice."]

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

この Skill で作った作品