what-if-animation について
15~25秒のWhat Ifアニメーションを制作するスキルです。脚本、絵コンテ、アニメーション、音響、最終レンダリングまで段階的に進め、Claudeが作成したSVGをRemotionで描画し、ElevenLabsで音声と効果音を用意します。
主な機能
- 01段階的なエピソード制作工程
- 02RemotionによるSVGショット設計
- 03ElevenLabsの音声・効果音生成
- 04絵コンテと動きのチェック
- 05制作コストとレンダリングレポート
活用シーン
- 01テーマから短編を制作
- 02アニメーション前の絵コンテ確認
- 03テンポ、ミックス、最終レンダリングの確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ kelano86/ what-if-animation --skill what-if-animationインストール後、Claude Code で/what-if-animationを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSEREADME.md.gitignoreopencode/commands/what-if.mdreferences/look.mdformula.mdsound.mdtraps.mdkit.mdscripts/board.pymaster.pyplan.pysfx.pymotiongrid.pyvoice.pywi.pystills.mjsmixcheck.pystudio/.gitignorepackage-lock.jsonremotion.config.tspackage.jsonstudio/src/Root.tsxCastSheet.tsxstudio/src/engine/episode.tsxanim.tsfurnish.tsxindex.tsfonts.tskit.tsx詳細
What If アニメーション
トピックを1行入力するだけで、15〜25秒のエピソードが完成します。すべてのフレームはClaudeが書くSVGで、Remotionでレンダリングします。音声と効果音にはElevenLabsを使用します。レンダリングの準備ができた例を2つ、studio/src/episodes/に用意しています。rewind(「10秒巻き戻せたら?」。能力を示す映像として、ショットが逆再生されます)と、copy-paste(「何でもコピー&ペーストできたら?」。このスキルを使った初めての完全な実行例で、新しいキッチンのセット、科学パートの模式図、引きの暗転が登場します)です。作業を始める前に、トピックに最も近い例を読んでください。
| ファイル | 内容 |
|---|---|
references/formula.md | 7拍子で構成するWhat Ifの公式、15〜25秒の構成、台本のルール、トピックの選び方 |
references/look.md | 計測されたルック、テンポ、ショットの語彙、ストーリーボードとモーションのチェックリスト |
references/kit.md | 構成要素:エンジン、キャスト、セット、ルームキット、照明、UI、ルック、および各要素の追加方法 |
references/sound.md | サウンドイベント、プロンプト、音量、コストの作成方法 |
references/traps.md | 2つのエピソードの例で時間を費やしたすべてのポイント |
studio/ | Remotionプロジェクト。一度コピーすれば、すべてのエピソードをこの中で作成できます |
scripts/ | 音声、プラン、静止画、ストーリーボード、効果音、ミックスチェック、モーションの一覧表示、マスター(Python 3.9+とNode) |
ルール
- オリジナルキャラクターのみを使用してください。 Pip(主人公、ルックB)と友人のMoは私たちのキャラクターです。妹、母親、リグ上のスーツも同様です。チャンネル独自の主人公は使わず、有名なアニメキャラクターに似たものも使わないでください。新しいルックはすべてキャストシートで確認してください(Moの最初の帽子は、あるキャラクターに似ていく傾向があったため採用を見送りました)。
- ストーリーはオリジナルにしてください。 公式は共有できますが、エピソードを他人のものにしてはいけません。チャンネルのタイトルを再現しないでください。
- 話題のチャンネルがClaudeやほかのツールで制作されていると決めつけないでください。 制作方法を明かしている人はいません。
- キーは名前でのみ扱ってください。
ELEVENLABS_API_KEYは環境変数またはstudioの上位にある.envから取得します。キーを表示、貼り付け、ハードコードしてはいけません。 - 実行ごとにElevenLabsのクレジット数を報告してください。 スクリプトは
out/<slug>/costs.jsonに記録し、master.pyはその合計をreport.jsonに出力します。音声のコストはアカウントの履歴から正確に確認できます。効果音クリップは履歴に表示されないため、コストはアカウントのカウンターから確認しますが、反映が遅れる場合があります。報告前に再度確認してください。エピソードを引き渡す際に、数値を伝えてください。copy-pasteの実行では152クレジットを消費しました(音声に78、新規クリップ12本に74)。 - アニメーションの前にストーリーボードを作成してください。 静止画がセルフチェック(手順5)に合格し、担当者が制作に参加する場合は、その人がストーリーボードを確認するまで動画をレンダリングしないでください。
- 事実はすべて正確にしてください。 台本に含める数値は、まずエピソードの
scienceフィールドで計算し、出典を明記します。
セットアップ(マシンごとに一度)
Node 18+、PATH上のffmpegとffprobe、numpyとPillowをインストールしたPython 3.9+、およびElevenLabsのキーが必要です。
cp -r <skill>/studio ./what-if-studio && cd what-if-studio && npm install
以下の作業はすべてstudioフォルダーから行います。<skill>はこのスキルのフォルダーです。オフラインで作業する場合や独自のブランドの見た目にする場合は、表示フォントをpublic/fonts/に配置し、src/studio.config.tsでtitleFontを設定してください(デフォルトのタイトルフォントであるBricolage GrotesqueとUIフォントは、レンダリング時にGoogle Fontsから読み込まれます)。既存のstudioを新しいエンジンに更新するには、<skill>/studio/src/engineを既存のsrc/engineにコピーしてください。
パイプライン
手順を順番に進めてください。各手順の最後に、次へ進む前に確認するものがあります。
1. 台本
references/formula.mdを読んでください。まずYouTubeで前提となるテーマを検索します。すでにWhat Ifチャンネルにまったく同じエピソードがある場合は、能力またはルールを変えてください。トピックを1行にまとめたら、能力を表す言葉、そのルール、段階的に展開する3つの実演、そして転換点(数値を含む現実の事実を1つ)を決めます。id(PascalCaseのコンポジション名)、slug、topic、title(2行)、script(各拍に1エントリー)、science(各事実の主張、計算過程、出典)を含むsrc/episodes/<slug>/episode.jsonを作成してください。45〜65語にします。テンポよく声に出して読み、すべての行が映像になるようにしてください。
2. 音声
python <skill>/scripts/voice.py <slug>
ElevenLabsでキャラクタータイムスタンプ付きの音声を1回生成します(356文字のコピー&ペースト用テイクでは78クレジットを消費しました)。その後、ジャンルのテンポに合わせて間をカットします:public/<slug>/voice.wav と src/episodes/<slug>/words.json。長さ(15~25秒)と、出力される単語のタイミングを確認してください。episode.json の gaps で間を調整して再実行します。テイクはキャッシュされるため、費用はかかりません。単語を変更すると、APIが再度呼び出されます。
3. ショットリスト
脚本の各絵にショットを1つずつ割り当て(通常は9~14個)、カットごとにサイズとアングルを変えてください(ワイド、インサート、ミディアム、クローズアップ、オーバー・ザ・ショルダー、ハイ、ロー。references/look.md を参照)。episode.json に追加します:
shots:{ "id": "S1", "size": "medium", "set": "kitchen", "key": 14, "note": "what we see" }(keyは、ストーリーボードに表示されるショット固有の時計のフレームです)edit:カットごとに{ "shot": "S1", "at": "cookie" }を指定し、切り替わる単語に合わせます(キューの形式はplan.pyに記載されています。ショットの時計を変化させる機能にはreverse、from、to、lookを使います)fx:1フレームのフラッシュやシェイク。{ "at": "S3+2", "kind": "flash" }
python <skill>/scripts/plan.py <slug>
timeline.json と out/<slug>/shotlist.md が生成され、テンポが出力されます。冒頭は1分あたり27カット以上を目安にし、静止ショットが約3秒を超えないようにしてください。描画を始める前に、指摘された箇所を修正します。
4. ストーリーボード
構成要素については references/kit.md を読んでください。src/episodes/<slug>/shots.tsx にショットごとのコンポーネントを1つずつ作成します。それぞれのコンポーネントは、その時計 t のみに依存する純粋関数にします(2つのサンプルの shots.tsx にあるパターンをコピーしてください)。次に、エピソードとそのパワーのルックを定義する index.tsx を作成し、エピソードを src/episodes/index.ts に追加します。この段階では、各ショットは key フレームで正しく見えれば十分です。トピックに必要な場所がライブラリにない場合は、ルームキットを使って作成し、src/engine/sets/ に追加します(スキル用コピーにも追加してください)。コピー&ペーストの実行でキッチンと模式図を追加したように、次のエピソードで使えるようにします。新しいキャラクターや衣装を追加する場合は、ルックを追加してから、キャストシートで確認します(npx remotion still src/index.ts Cast out/cast.png)。
npx tsc --noEmit
node <skill>/scripts/stills.mjs <slug>
python <skill>/scripts/board.py <slug>
out/<slug>/storyboard.jpg:各ショットにつき、キャプション付きの静止画が1枚ずつあります。
5. 静止画をセルフチェックする
ストーリーボードを見てから、out/<slug>/board/ にあるすべての静止画をフルサイズで開き、references/look.md のストーリーボードチェックリストにショットごとに正直に取り組みます。問題点を書き出し、修正したら該当するショットだけを再レンダリングします(stills.mjs <slug> S3 S7)。シートを作り直して、もう一度確認します。合格するまで繰り返してください。修正方法を思いつく前に、references/traps.md で該当する問題を確認します。人が制作に関わっている場合は、アニメーション化する前にストーリーボードを見せ、フィードバックをもらってください。
6. アニメーション化
各ショットのキーとなるポーズを起点に、動きを加えます:予備動作、静止、オーバーシュートを含む poseAt キー、表情を設定する faceAt、kf によるカメラ移動、パワーのルック、そして fx を設定します。その後、ドラフトをレンダリングして動きを確認します:
python <skill>/scripts/master.py <slug>
python <skill>/scripts/motiongrid.py <slug> S2 S5
node <skill>/scripts/stills.mjs <slug> --frames 120 240
references/look.md の動きのチェックリストと照らし合わせながら、グリッドをパラパラ漫画のように確認します。意図が伝わるまで修正と再レンダリングを繰り返してください。
7. サウンド
references/sound.md を読んでください。episode.json に sound を追加します:クリップ(プロンプトと長さ)、目に見えるアクションごとにショットに合わせたイベント、場所ごとの環境音、音楽のベッド、音量です。ライブラリにすでにあるものを確認してから生成します:
python <skill>/scripts/sfx.py <slug> --dry
python <skill>/scripts/sfx.py <slug>
使用したクレジットが出力され、ステムの音量が timeline.json に設定されます。次に、すべての単語が明瞭に聞こえることを確認します:
python <skill>/scripts/mixcheck.py <slug>
単語が話されている最中に、効果音や音楽が音声に3 dB以内まで近づく箇所が一覧表示されます。単語を表現するヒット音は、その単語に重ねず、直後の間に入れます。重要なセリフの下にあるベッド(ハム音やドローン音)は音量を下げます。ステムの大部分が音声にかぶる場合は、sfx_lu を下げてください。意図的な重なり(タイトルのブーム音や場面転換など)だけが残るまで、sfx.py とチェックを再実行します。
8. マスタリングして引き渡す
python <skill>/scripts/master.py <slug>
レンダリングし、ミックスの音量を -14 LUFS、ピークを -1 dBTP 未満に調整して、out/<slug>/report.json(長さ、ラウドネス、ペース、クレジット数)を書き出します。音声を再生しながら最終ファイルを一度通して確認します。out/<slug>/<slug>-final.mp4 と out/<slug>/storyboard.jpg を、動画の長さ、使用した ElevenLabs のクレジット数、さらに改善したい点があればその内容とともに引き渡します。
エピソードの保存場所
| パス | 内容 |
|---|---|
src/episodes/<slug>/episode.json | 作成するすべての内容:台本、科学的内容、ショット、編集、効果、サウンド |
src/episodes/<slug>/shots.tsx, index.tsx | 作画内容:ショットごとのコンポーネント、能力の見た目 |
src/episodes/<slug>/words.json, timeline.json | voice.py と plan.py が書き込みます(sfx.py が音量を追加します) |
public/<slug>/ | voice.wav、sfx.wav、music.wav |
out/<slug>/ | ボードの静止画、storyboard.jpg、shotlist.md、モーショングリッド、レンダリング、costs.json、report.json |
library/sfx/ | 生成されたすべての効果音クリップ。すべてのエピソードで共有されます |