← マニュアル保管庫
AI VIDEO 02 / 2026-09-24

Claude CodeとRemotionで
ホワイトボード風の解説アニメを作る

線画の人物をペンで描いていく演出と、右下の語り手。YouTube の解説動画のようなアニメを作ります。 台本は ChatGPT と相談しながら作り、決まったら ChatGPT が「動画を作るプロンプト」と絵を出してくれます。 それを Claude Code に貼れば、声と動きのついた動画ができます。VYOND などのアニメ作成ツールは使いません。

YOU DO
4つだけ
AI の作業
約18分(30秒の動画)
追加の費用
0円
つまずき
7か所

WHYこうなります

右は、このページの手順どおりに「名刺をためこまないコツ」という題で、何も知らない AI に作らせた動画です(台本と絵は ChatGPT 役の AI、動画は別の AI が A だけを受け取って約18分・静止画の確認4回。語り手の絵は入れていません)。左は、同じ形で作った見本で、声と BGM を差し替えてあります。

見本:声は作った本人の声をもとにした AI の声、BGM は作曲 AI(約33秒)
このページの手順で作った動画:声は VOICEVOX(約29秒)

WHAT何をしているの

台本を決める所だけ、あなたと ChatGPT で話し合います。あとは AI と Mac の仕事です。

YOU × ChatGPT
台本を決める
質問に答えて台本を直す。
決まると、プロンプトと絵が出る
→
AI
Claude Code
声を作り、その長さに
合わせて画面を組む
→
YOUR MAC
手元のMac
1コマずつ描いて
動画に書き出す
MEMOこの形の正体

人気の解説アニメを Gemini で解析したところ、使われていたのは次の部品でした。白黒の線画/右下の語り手(ポーズが切り替わるだけ)/上の黒い帯と青い帯/ペンを持った手が描く演出/黒い円で閉じる場面転換。関節がなめらかに動くアニメではありません。だから、プログラムで同じものが作れます。この形は、ChatGPT に貼る文の中に書いてあります。

Remotion
動画をプログラムで作る道具。個人と3人以下の会社は無料で使えます。Claude Code が入れてくれます。
VOICEVOX
無料の読み上げソフト。これが動画の声です。使った声の名前(例「VOICEVOX:青山龍星」)を動画に出す決まりがあります。
壁打ち
AI に質問してもらいながら、考えをまとめていくやり方。ここでは台本づくりに使います。

YOUあなたがやるのは4つだけ

書き換えるのは「テーマ」と「見る人」の2行だけです。

1
道具をそろえて、作業用のフォルダを作る
15分 / 最初の1回だけ
なぜ:声は VOICEVOX が、動画は Claude Code が作ります。Claude Code は、選んだフォルダの中だけで作業します。
  1. Claude のデスクトップアプリを開き、上の「Code」を選ぶ(有料プランでログイン)
  2. VOICEVOX を公式サイトから入れて、起動したままにしておく
  3. デスクトップに空のフォルダ(例「解説アニメ」)を作り、中に images というフォルダを作る
  4. 自分のキャラクターの絵があれば、images に一緒に入れておく(ポーズ違いが何枚かあれば、文ごとに切り替わります)。無ければ入れなくて大丈夫です。そのときの語り手は、丸と線の簡単な人です
こうなればOK

VOICEVOX の画面が開いていて、デスクトップに「解説アニメ」フォルダと、その中の images フォルダがあります。

2
ChatGPT と台本を決めて、プロンプトと絵を出してもらう
10〜15分
なぜ:台本は、あなたにしか決められない所です。ChatGPT が質問してくれるので、答えていけば台本ができます。決まった台本から、動画を作るプロンプトと、動画に使う絵まで ChatGPT が出してくれます。
ChatGPT に貼る(テーマと見る人だけ書き換える)
YouTube の解説動画のような「ホワイトボード風の解説アニメ」(30秒くらい)の台本を、一緒に作ってください。

テーマ:【AIに仕事を任せる前にやっておくこと】
見る人:【AIを使い始めたばかりの50代】

■ 進め方
1. まず私に質問を3つだけしてください(①ランキングの何位にするか〈ランキングでなければ「なし」〉とシリーズの題 ②見る人が困っていること ③見たあとにしてほしいこと)
2. 答えをもとに、台本の案を出してください(6文前後。1文は40字くらいまで。話し言葉で)。題・青い帯の要点・手書きで書く大事な言葉も一緒に見せてください
3. 私が直してほしい所を言ったら直してください
4. 私が「これでOK」(「OK」「いいよ」でも可)と言ったら、次の2つを出してください
 A. 動画を作るプロンプト(下の「■ Aの形」の【】を埋めたもの。【】の記号は外す。「■ Aの形」という見出しは入れない。全部を1つのコードの枠に入れて、1回でコピーできるようにする。最後に「A は Claude Code に貼ってください(ChatGPT には貼らない)」と一言添える)
 B. 絵の注文(動画に使う線画を4〜5枚。1枚ずつ、何の絵かと、画像AIにそのまま頼める文で)
  ・必ず1枚は「黒いマーカーを握って描いている右手。ペン先は画像の左上、腕は右下の端で切れる」の絵にする
  ・どの注文にも、線画の決まりを書き込む:白黒の手描き風の線画。塗りはほぼなし(小物に少しだけ色を入れてよい)。背景は完全な白(透明にしない)。影・枠・文字は入れない(名刺や書類は、文字の代わりに横線)。正方形
5. Bを出したら、絵を1枚ずつ描いてください。1枚描いたら、私が何も言わなくても次の絵に進んでください

■ Aの形
ホワイトボード風の解説アニメを Remotion で作ってください。

題:【シリーズの題】/【第◯位(ランキングでなければ書かない)】【この回の題】
要点(青い帯に出す1行):【】
台本(1行=1文。声で読み上げる):
【】
手書きで書く大事な言葉:【◯文目= 】
各文で見せるもの:
【1文目: 】(images の線画は、中身を見てどれを使うか決めてよい)
声:VOICEVOX の【青山龍星】

画面の作り
・白い背景に白黒の線画(images フォルダの画像)。線画の背景が透明や白でないときは、白にそろえてから使う。images に「ペンを持った手」の絵があれば、それが線画を描いていくように出す
・上に黒い帯(左に赤字の「第◯位」、その右にシリーズの題を小さく、この回の題を大きく。第◯位が無ければ題だけ)。3文目から最後まで、その下に青い帯で要点
・右下に語り手。images に私のキャラクターの画像があればそれを使う(ポーズ違いがあれば文ごとに替える)。無ければ丸と線の簡単な人を描く
・大事な言葉は手書き風の文字で1字ずつ書く。吹き出しやラベルはポンと弾んで出る
・最後の文は、下に青い大きなテロップ。2文目と3文目のあいだで1回、黒い円が閉じて開く場面転換
・声の名前(例「音声:VOICEVOX:青山龍星」)を左下に小さく出す

作り方
・最初に VOICEVOX が動いているか確かめ、動いていなければ私に起動を頼む
・1文ずつ声にして、その長さに合わせて画面を動かす。読みは全文カタカナで見せる
・効果音はプログラムで作る。BGMはなし。1920×1080・30fps
・いきなり書き出さない。静止画を stills フォルダに保存して見せ、私が「OK」と言ってから書き出す。文字のはみ出しや重なりは静止画で確かめて直す
  1. 上の文の「テーマ」と「見る人」だけ書き換えて、ChatGPT に貼る
  2. ChatGPT の質問3つに答える。台本の案が出たら、直してほしい所を言う
  3. よければ「これでOK」と言う → A(動画を作るプロンプト)とB(絵の注文)が出て、ChatGPT が絵を描きはじめる
  4. 描けた絵を、フォルダの images に保存する(名前はそのままで大丈夫。どの絵をどこで使うかは、AI が中身を見て決めます)
  5. A をコピーしておく
こうなればOK

images に線画が4〜5枚(そのうち1枚はペンを持った手)入っていて、A をコピーしてあります。

画面絵が1枚で止まった/背景が透明の絵が出た›

続けて描かないときは、「次の絵も描いて」と頼んでください。

試したときは、5枚のうち1枚が背景の透明な絵で出てきました。ChatGPT の画面では白く見えるので、気づけません。

そのまま保存して大丈夫です。A に「背景が透明なら白にそろえてから使う」と書いてあり、試したときも問題なく使えました。

例試したときに出てきた A(題「名刺をためこまないコツ」)
ChatGPT が出した A(この形で出てきます)
ホワイトボード風の解説アニメを Remotion で作ってください。

題:ひとり仕事がラクになる習慣/第3位 名刺をためこまないコツ
要点(青い帯に出す1行):名刺は、その日のうちにメモして撮る
台本(1行=1文。声で読み上げる):
交流会のあと、名刺がカバンにたまっていませんか?
あとで見ても、誰だったか思い出せないんですよね。
コツは、その日のうちに片づけることです。
帰りの電車で、名刺の裏に話したことをひとことメモします。
スマホで撮ったら、紙の名刺は箱にまとめておくだけでOK。
今夜もらった名刺から、さっそく試してみてください。
手書きで書く大事な言葉:3文目=その日のうちに/4文目=ひとことメモ
各文で見せるもの:
1文目:名刺があふれたカバンの線画
2文目:名刺を持って首をかしげる人の線画
3文目:手書きで「その日のうちに」
4文目:手書きで「ひとことメモ」
5文目:スマホで名刺を撮る手元の線画 → 名刺をまとめた箱の線画
6文目:名刺をまとめた箱の線画。下に青い大きなテロップ(この文)
(images の線画は、中身を見てどれを使うか決めてよい)
声:VOICEVOX の青山龍星

画面の作り
・白い背景に白黒の線画(images フォルダの画像)。線画はペンを持った手の絵が描いていくように出す
・上に黒い帯(左に赤字の「第◯位」、右に題)。3文目から、その下に青い帯で要点
・右下に語り手。images に私のキャラクターの画像があればそれを使う(ポーズ違いがあれば文ごとに替える)。無ければ丸と線の簡単な人を描く
・大事な言葉は手書き風の文字で1字ずつ書く。吹き出しやラベルはポンと弾んで出る
・最後の文は、下に青い大きなテロップ。途中で1回、黒い円が閉じて開く場面転換
・声の名前(例「音声:VOICEVOX:青山龍星」)を左下に小さく出す

作り方
・最初に VOICEVOX が動いているか確かめ、動いていなければ私に起動を頼む
・1文ずつ声にして、その長さに合わせて画面を動かす。読みは全文、ふつうのカタカナで見せる
・効果音はプログラムで作る。BGMはなし。1920×1080・30fps
・いきなり書き出さない。静止画を見せて、私が「OK」と言ってから書き出す。文字のはみ出しや重なりは静止画で確かめて直す
3
Claude Code でフォルダを開き、A を貼る
AI の作業 約20分
なぜ:A には、台本と画面の作り(帯・語り手・手の演出・場面転換)が全部書いてあります。貼るだけで、声を作って画面を組むところまで進みます。
  1. Claude Code の画面で「解説アニメ」フォルダを選ぶ
  2. A を貼って送る
こうなればOK

AI が読み(カナ)の一覧と、場面ごとの静止画を見せて、「これでよいですか?」と聞いてきます。

画面「VOICEVOX を起動してください」と言われた›

VOICEVOX を閉じていると、声が作れません。試したときも、ここで一度止まりました。

VOICEVOX を起動してから、「起動した」と返してください。

画面「このコマンドを実行してよいですか?」が何度も出る›

道具を入れる・声を作る・静止画を書き出すたびに、許可を求められます。作業用のフォルダの中での作業なら、許可して進めて大丈夫です。

画面npm audit fix --force を実行してと出る›

道具を入れたあとに出る警告です。実行しないでください。道具の版がずれて、動かなくなる場合があります。

無視して先へ進めて大丈夫です。

画面「Remotion is free for teams of up to 3」と出る›

Remotion の利用条件の案内です。個人と、3人以下の会社は無料です。4人以上の会社で使うときは、Remotion の有料の利用権が要ります。

4
読みと静止画を見て、直す所を言葉で伝え、「OK」と言う
5分 / 書き出しは約1分
なぜ:いきなり全体を書き出すと、直すたびに書き出し直しです。静止画で見て直してから書き出すのが、いちばん早い道です。
  1. 読み(カナ)の一覧を見て、読み間違いがあれば「◯◯は△△と読んで」と伝える
  2. 静止画を見て、気になる所を言葉で伝える(例「✕が文字に重なっている」「手書きの文字をもう少し大きく」)
  3. 直ったら「OK。書き出して」と言う
こうなればOK

作業用フォルダの中に MP4 ができて、AI がその場所を教えてくれます。

画面読みが「エエアイ」「メエシ」のように出る›

VOICEVOX の読みの書き方では、伸ばす音が「エエ」のように書かれます。これは読み間違いではありません。発音どおりに書くので、メイシは「メエシ」と出ます。

本当に読み間違えていた例は、「毎週かならず」が「マイシュウカ/ナラズ」と変な所で切れた1か所でした。読ませる文だけ「毎週必ず」に変えて直りました(画面の字はそのまま)。

画面最初の書き出しで、何かのダウンロードが始まった›

書き出しに使う Chrome(約94MB)を、最初の1回だけダウンロードします。待てば進みます。作業用フォルダは、道具を含めて600MBほどあります。

REF参考動画を渡して作りたいとき

「この動画のような形で」と参考動画を渡す方法もあります。渡すなら、こういう動画が向いています。

向いている動画探すときの言葉(YouTube)取れるもの
本の要約・ランキングの解説アニメ「本 要約 アニメ」「ベスト3 解説 アニメ」上の帯・語り手・線画の出し方
手が描いていく動画「ホワイトボードアニメーション」「手書きアニメ 解説」ペンの動き・描く速さ
サービスや手順の説明アニメ「サービス紹介 アニメ」「使い方 解説 アニメ」場面の区切り方・文字の出し方
参考動画を渡すとき(A の最初に足す)
この動画の画面の作り(帯・文字の出し方・キャラクターの置き方・場面の切り替え)だけをまねてください。話の中身・絵・キャラクター・ロゴは使わないでください。
参考:【動画のURL】(【0:40〜1:40】の区間だけでよい)

CARE気をつけてください

  • 参考動画は、作りをまねるだけ。話の中身・絵・キャラクター・ロゴは使いません。
  • VOICEVOX の声を使ったら、声の名前を動画に出す。A で左下に出るようにしてあります。消さないでください。
  • 実在の人や会社の情報を、見本に入れない。名刺や書類の絵は、文字の代わりに横線で描いてもらいます。

MONEY費用

Claude(有料プラン)と ChatGPT の契約の範囲で作れて、追加の費用はかかりませんでした。VOICEVOX は無料、Remotion は個人と3人以下の会社なら無料です。

Q&Aよくある質問

Q台本はもう決まっている

ChatGPT に「台本はこれで決まっています」と台本を貼れば、質問を飛ばして A と B を出してもらえます。

QBGM は入れられる?

入れられます。A の「BGMはなし」を曲のファイル名に書き換えて、曲をフォルダに入れてください。作曲 AI で作った曲には、人の声(笑い声や掛け声)が混ざった曲が出ました。使う前に一度聞いてください。

Q自分の声にできる?

できます。左の見本は、作った本人の声をもとにした AI の声(Gemini)です。ただ、自分の声から声を作る機能は、Gemini の有料プランでしか使えませんでした。

Qもっと長い動画は?

試したのは30秒前後(6文)です。長くするときは、1回で全部ではなく「第3位」「第2位」のように区切って作ってつなげると、確かめる量が少なくて済みます。