Claude Codeでサービスの解説動画を3日で内製した方法

自社で提供しているスカウトプラットフォーム「ScoutOne」のサービスページに、約1分16秒の解説動画を載せています。柴犬のマスコット「oneくん（ワンくん）」が画面を指しながら、候補者データの集約から返信率の振り返りまで、スカウト業務の流れを説明する動画です。YouTubeでも公開しています。

この動画を作るのに、動画編集ソフトは一度も開いていません。キャラクターの絵も、声も、画面の動きも、Claude Codeが制作しました。Claude Codeは、指示を出すとコードを書いて実行までするAIのツールです。9月26日に作り始め、翌27日にはサービスページに載せています。

作り方は、想像していたよりずっと単純でした。AIが書き出した動画を見て、直してほしい点を言葉で伝える。これを繰り返しただけです。その代わり、確認では何度も失敗しました。直して書き出し直すたびに版の番号を1つ上げ、3日間で11版まで改訂しています。

用意したものと使った技術、3日間の進め方、なぜ言葉で伝えるだけで動画を直せるのか、11版までに失敗したことを順に書き、最後に技術的な内訳と、工程ごとに使えるプロンプトを載せています。

用意したものと使った技術

用意したものは多くありません。Claude Codeと手元のPC、音声合成・画像生成・音楽生成のサービスの利用登録、それに素材になるサービスページです。動画づくりに使うソフトのインストールも、Claude Codeに指示すれば実行してくれるので、プログラミングの経験がなくても始められます。自分がClaude Codeを使い始めた頃の話は、非エンジニアがClaude Codeでコーポレートサイトを作って運用している話に書いています。

使った技術と、試したものの途中でやめた技術、使わなかった技術は次のとおりです。

最低限必要なAPIキーと設定のしかた

ここでは、Claude Codeを使える環境がすでにあることを前提に、この方式で追加して設定が必要なものを説明します。APIキーは、AIのサービスを自分のプログラムから使うための合い言葉のような文字列です。この方式では、GeminiのAPIキーが1つあれば、声の合成、文字起こし、BGMの生成までを実行できます。

GeminiのAPIキーは、次の手順で用意します。この手順は、セキュリティを強く固めることよりも、使える状態になるまでの一般的な手順を示すことを優先しています。社内のセキュリティルールや、一般的なセキュリティ上の配慮は、ご自身の責任で行ってください。

※キーが漏れたかもしれないなどの場合は、念のため、Google AI Studioでそのキーを削除し、新しいキーを再発行することをおすすめします。

キャラクターの絵を画像生成AIで描く場合は、OpenAIのAPIの管理画面でAPIキーを作成し、OPENAI_API_KEY という名前で同じように登録します。

Claude Codeの代わりに、OpenAIのAIエージェントであるCodexを使う場合も、GeminiのAPIキーを設定すれば、同じ方式で動画まで作れるはずです。私たちは制作をClaude Codeで進めたため、Codexだけで通して作ったことはありません。ただ、キャラクターの部品の描き分けには、Codexから使える画像生成を利用しています。

3日間の進め方

解説動画を作り始める前日に、動きと場面の切り替えを多く入れた短い紹介動画を試作しました。見返すと落ち着かず、何を見ればよいか分からない仕上がりでした。そこで解説動画は、1つの場面で動かすものを1つに絞り、説明の流れを見せることを優先して制作しました。

自分は最初に、サービスページの本文を渡し、事実はそこに書いてあることだけで書くよう指示しました。動画とサービスページで説明が食い違うと、見た方はどちらを信じてよいか分からなくなるためです。AIは、その本文から台本を書き、場面ごとに画面に出す内容を決めています。採用広報の動画であれば、求人票や採用ページの記載がこの役割を担います。職業安定法第5条の4は、自社の募集に関する情報を広告等で出すときに、虚偽や誤解を生じさせる表示を禁じ、正確かつ最新の内容に保つよう定めています。採用広報で使う場合は、自社の労務担当や弁護士にも確認することをおすすめします。

見た目と声は、AIが候補を作り、自分が選びました。キャラクターの絵は画像生成AIが描いた5つの案から1つを、声は5つを聞き比べて1つを、BGMは音楽生成AIが作った3曲から1曲を選んでいます。

あとは、AIが動画を書き出し、自分が見て伝える、の繰り返しです。自分が「声が前の版より暗い」「締めの手振りがぎこちない」のように言葉で伝えると、AIが原因を調べて修正し、次の版を書き出します。サービスページには6版を9月27日に載せ、その後は9版、10版、11版に差し替えました。3日間の流れは次のとおりです。

動画そのものに、自分が手を入れたところはありません。それでも言葉で伝えるだけで11版まで改訂できた理由は、動画の作り方にあります。

なぜ言葉で伝えるだけで動画を直せるのか

動画は、少しずつ違う絵を1秒あたり数十枚の速さで切り替えて見せるものです。パラパラ漫画と同じ仕組みで、今回の動画は1秒あたり60枚の絵でできています。

この動画では、その1枚1枚を、動画編集ソフトではなくWebページとして描いています。「何秒目にどの字幕を出し、oneくんの腕を何度上げ、口をどれだけ開くか」をすべて計算で決めておき、時刻を60分の1秒ずつ進めながら、ブラウザの画面を1枚ずつ撮影してつなげます。oneくんも、腕、尻尾、目と口といった部品に分けておき、時刻ごとの角度や開き方を計算して動かしています。声は、台本を場面ごとの段落（節）に分けて合成し、字幕の時刻は声の長さから、口の開き方は声の音量から計算します。

絵を手で描き直しているわけではないので、字幕の1語や矢印の向きといった修正は、計算の元になるテキストファイルの書き換えで済みます。テキストの書き換えはAIに任せやすい作業なので、指摘を伝えてから新しい版が書き出されるまでが短く、初日だけで6版まで改訂できました。

反対に、実写や操作画面の録画が中心の動画には向きません。画面を一から描くことが前提の方式です。

11版までに失敗したこと

それぞれの失敗について、自分がしたことと、AIが行った処理を分けて書いています。

合成した声の読み違いと暗さ

途中で試した音声合成では、同じ文でも合成のたびに読み方が少しずつ異なり、「ワンくん」が「まんくん」と聞こえる合成が混じりました。これに対してAIは、節ごとに複数回合成し、それぞれを文字起こしして台本と照合し、一致するものだけを選ぶ処理を加えています。

2つ目に使った声については、自分が聞いて「振り返りまで」「候補者データの」といった語の高低に違和感があると伝えました。AIは、別の音声合成で5つの声の聞き比べ用の音声を用意し、自分がその中からGeminiのZephyrという声を選んでいます。

スカウト業務の全体像を説明する場面を追加した7版では、自分が「声が前の版より暗い」と伝えました。AIは、前の版と同じ区間の音量に差がないことを確かめたうえで、節ごとに声の高さを測りました。その結果、追加した節だけ声の高さが229Hzで、ほかの節は245〜300Hzの範囲に入っていると分かりました。

AIは、追加した節の合成を作り直して258Hzのものに差し替え、それ以降は、この範囲に入らない合成を選別の段階で落とす処理を加えています。「暗い」という感覚を数値の条件に置き換えてからは、声が暗いという指摘は出ていません。この範囲は今回の声と台本で測った値なので、別の声を使うなら、先に作った節の実測値から改めて設定することになります。

動かすと絵が欠けた

キャラクターを部品に分けると、止まっている絵では見えない欠けが、動かしたときに出てきます。

• 自分が、尻尾を振ると付け根に線の切れ端が見えると伝えました。AIは、尻尾の部品を胴の下に隠れる部分まで描き足し、胴の輪郭線の切れ端を取り除いています

• 自分が「締めの手振りがぎこちない」と伝えました。AIは、体ごと揺らしていた動きをやめ、腕を別の部品に描き分けて、肩を中心に回す形に変更しています

• 9版をサービスページに載せた後、動画を見た社内のメンバーから「左の前足を上げる仕草の時、後ろ足が消えちゃって違和感」と指摘を受け、自分がAIに伝えました。AIは、後ろ脚を新しい部品として描き足し、腕を上げる角度ごとの姿を並べた確認用のページを作っています

後ろ脚の欠けは、9版までの確認では、自分の目もAIの確認も通していました。立っている姿では見えていて、前脚を上げた瞬間だけ消えるためです。いまは、ポーズを変えたら脚の数を数える、という項目を確認の手順に入れています。

画面の見せ方と表示の不具合

自分が見せ方を指摘し、AIが修正したものが2か所あります。

• AIの判定結果の画面について、自分は、合否を判断する場面ではよい点に焦点を当てたいと伝えました。AIは、拡大する先を注意点からよい点に変更し、スコア、要約、よい点が1つの画面に収まるよう寄せ方を調整しています

• スカウト業務の全体像を描いた図について、自分は、振り返りから戻る矢印をすべて判定に接続するよう伝えました。振り返りで調整する対象は判定基準と文面で、最初の工程の集約は変わらないためです。AIは、矢印の経路を2番目の工程の「判定」に付け替え、注記が矢印の角に重ならない位置に移しています

反対に、AIが見つけた不具合もあります。画面上部に並ぶ工程の番号が4つのままで、全体像の図の5工程と食い違っていた点は、AIのコードレビューが見つけ、AIが5工程に統一しました。利用シーンを説明する3枚のカードが0.15秒ずつずれて出ていた点は、AIが見つけて報告しました。1枚だけ遅れて出ると、その1枚が特別に見えるので、自分が同時に出すよう伝え、AIが3枚を同時に出す形に変更しています。

静止画の確認では不具合が見えなかった

AIは途中まで、特定の時刻の画面を静止画で撮って確認していました。ScoutOneの動画の後に、同じ方式で別の解説動画を作ったところ、HTMLの閉じタグが1つ欠け、後半の場面とoneくんが丸ごと消える不具合が起きました。時刻を指定して1枚ずつ撮る静止画では再現せず、AIが書き出した動画のコマを並べて初めて見つけています。AIはこの後、書き出した動画のコマを並べて確認する手順と、画面の部品が正しい位置に入っているかを書き出しのときに自動で検査する処理を加えました。

ScoutOneの動画では、oneくんが画面の中央から左へ移る途中で字幕の吹き出しの幅が変わり、3行だった字幕が2行に組み直される不具合がありました。自分が再生して気づいて伝え、AIが吹き出しの幅を固定して解消しています。

人とAIの確認の分担

11版までの失敗を、見つけた側で分けると次のようになります。

自分が見つけたものは、再生して感じる違和感と、図や画面が何を意味するかの読み取りに集中していました。AIは、文字や数値として突き合わせられるものを見つけています。後ろ脚の欠けは、自分もAIも見逃し、作った本人ではない社内のメンバーが見つけました。

この経験から、確認の分担を次のように変更しました。

• 動画を再生して見る確認は人が、画面の文字や数値の突き合わせはAIが担う

• 人が感覚で出した指摘は、その場の修正で終わらせず、声の高さの範囲や脚の数のような、次から機械で確かめられる条件に置き換える

• 公開する前に、作った本人以外の人にも一度通して見てもらう

どれも特別な道具は要りません。1本目からこの分担にしておけば、私たちが3日かけて踏んだ失敗の多くは避けられると思います。

技術的な内訳

同じ方式で作りたい方に向けて、工程ごとの技術的な中身を書きます。どの工程も、作業はAIが行い、自分は候補の選択と確認を担っています。

撮影と書き出し

場面ごとにHTMLを書き、時刻を渡すとその瞬間の画面を描く関数を用意しておきます。この関数は、呼ぶ順番に関係なく、同じ時刻には同じ画面を描くように実装します。Playwright（ブラウザを自動で操作するツール）で1920×1080の画面を撮影し、ffmpeg（動画変換ツール）でコマをつないで、声とBGMを重ねます。

声

声は、節ごとに3回合成します。それぞれを文字起こしして台本と照合し、一致しない合成と、語尾に余計な「ね」が付いた合成を機械で落とします。残った合成のうち、声の高さが決めた範囲に入るものを採用し、最後に自分が通して聞きます。範囲に入る合成がなければ、合成を追加します。

声の候補を選んだ段階で、利用規約で商用利用ができるか、クレジット表記が必要かを確認し、クレジット表記が必須の候補は、AIが候補から外しました。BGMはGoogleの音楽生成AI（Lyria）で生成しています。声・BGM・絵は、どれも自社名義で公開する動画に使うので、利用条件は各サービスの規約の原文で確認が要ります。

キャラクター

AIは、選んだ基準の絵をもとに、目と口のない顔、尻尾のない胴、腕のない指差しポーズ、腕、といった部品を画像生成AIで描き分け、拡大しても線が荒れない形式（SVG）に変換しました。目と口は、元の絵から位置と大きさを測ってSVGで描き直し、話しているあいだの口の開閉とまばたきを付けています。

画面

画面は、実際の管理画面の画像と、図やカードで構成しています。字幕は読み上げの語の位置に合わせて出し、画面の強調の枠も、読み上げている語の位置から時刻を求めて付けています。場面の切り替えは、フェード1種類だけにしています。

実際の管理画面を映す場面では、社名とワークスペース名をぼかしてから載せています。画面に映っていた例示の社名が、実在の会社名と重なっていたためです。採用広報の動画で自社の管理画面を映すなら、候補者の氏名や取引先の名前が映り込んでいないかも確認が要ります。

書き出しと確認

AIは、書き出した動画から4秒ごとにコマを切り出して1枚に並べ、全部を確認しています。手を振る、場面が切り替わる、といった動きのある区間は、0.12秒刻みで確認します。画面の部品が正しい位置に入っているかは書き出しのときに自動で検査し、音量は-16 LUFS前後に調整しています。

工程ごとに使えるプロンプト

11版まで改訂する中で決まった声の種類と高さの範囲、手を振る速さ、字幕の幅、BGMの曲などは、oneくんの設定として1つのフォルダにまとめました。ScoutOneの動画の後に作った別の解説動画は、そこから複製して作り、声や動きの調整をやり直さずに、台本と画面の確認に時間を使うことができました。

同じ方式で1本目を作るときに、AIエージェント（Claude Codeなど）へ貼り付けて使えるプロンプトを、台本、キャラクター、音声の選定、アニメーションの4つに分けて載せておきます。上から順に使い、それぞれの結果を確認してから次へ進む想定です。私たちが実際に使っている手順から、社内の道具に依存する部分を除いています。各プロンプトの後に、うまくいかない可能性がある点を補足しました。

台本を作るプロンプト

下の「素材」をもとに、約1分の解説動画の台本を書いてください。

# 書き方
- 素材に書いてある事実だけで書く。素材にない機能、数字、効果は書かず、足りなければ私に質問する
- 台本に使う機能の説明は一覧にし、いま提供している機能かどうかを私に確認する
- 「ひとつの画面で」「〜で完結」のように、範囲を広げて聞こえる言い回しを使うときは、素材のどの記載に当たるかを示す
- 場面ごとの段落（節）に分け、節ごとに、読み上げる文と、画面に出す文字（字幕以外のカードや図の文字も含む）を書く
- 図で見せる内容は読み上げない。字数は1秒あたり約9字を目安にし、全体で1分を大きく超えないようにする

# 確認
- 読み上げる文と画面に出す文字をすべてテキストで並べ、素材と照合して、食い違いを報告する

# 素材
（ここに、動画で説明するサービスページや資料の本文を貼り付けてください）

次の点で、うまくいかない可能性があります。

• 台本には、素材より範囲を広く聞こえる言い回しが入ることがあります。私たちの動画では「ひとつの画面で」が、スカウトの送信まで同じ画面でできるように聞こえたため、掲載前に修正しました

• 画面のカードや図の文字は読み上げないので、動画を再生して見る確認では読み飛ばしやすくなります。台本の段階で、画面に出す文字もテキストとして確認しておくと安全です

• 素材そのものが古い、または誤っていると、素材との照合では一致してしまいます。私たちの場合、当時のサービスページの見出しにあった「ScoutOneで完結」を台本がそのまま使っていましたが、送信は各媒体の画面で行うため、言い過ぎでした。機能の説明は、提供している機能と合っているかを担当者に確認してください

キャラクターを作るプロンプト

解説動画に登場させるキャラクターを、画像生成で作成してください。

# 1. 案を出す
- 下の「キャラクターの設定」をもとに、絵柄の異なる案を5つ作り、1枚に並べて見せる。採用する案は私が選ぶ
- 動画で使うので、正面向き、全身、背景は単色、輪郭線ははっきりさせる

# 2. 動かす部品に描き分ける
- 選んだ案を基準の絵とし、動かす部品ごとに描き分ける（目と口のない顔、尻尾のない胴、腕のない胴、腕など）
- 部品は、ほかの部品に隠れる部分まで含めて、動かす範囲の全体を描く
- 拡大しても荒れないようSVGに変換し、部品ごとに回転の中心を決める

# 3. 確認
- 腕や尻尾を最大まで動かした姿を並べた確認用の画像を作り、付け根の隙間や線の切れ端がないかを報告する
- ポーズを変えた絵では、脚と腕の数を数えて報告する
- 使う画像生成サービスの利用規約を原文で確認し、生成した画像を商用利用できるかを報告する
- 既存のキャラクターやロゴに似ていないかを確認して報告する。採否は私が判断する
- 課金が発生する生成は、実行前に回数と費用の見込みを示し、私の承認を取る

# キャラクターの設定
（ここに、キャラクターの名前、モチーフ、性格、使う色を書いてください）

次の点で、うまくいかない可能性があります。

• 画像の一部だけを描き直させる編集では、思った形にならないことがあります。私たちの場合、腕を上げた絵を描かせると、腕が上がらなかったり、胴に塊が残ったりしました。全身のポーズを別の絵として描かせ、切り替えて使う方法に変更しています

• ポーズを変えた絵では、顔の位置や傾きが基準の絵とずれます。目と口の部品を重ねる前に、両目の位置を測って合わせる処理が要ります

• 部品の付け根の線の切れ端や、ポーズを変えたときに消える脚は、止まっている絵では見えません。必ず動かした状態で確認してください

音声を選ぶプロンプト

解説動画のナレーションに使う音声合成サービスと、BGMを作る音楽生成サービスの候補を調べ、一覧にしてください。

# 条件
- 自社名義で公開する動画（Webサイト、YouTube）に商用利用できる
- クレジット表記が不要。必要なものは、その旨を明記して一覧に残す
- 声ごとに個別の利用規約がある場合は、その内容まで確認できる
- 1分程度の動画を数十回作り直しても、費用が小さい
- 入力した台本が、サービス側の学習に使われない
- 試験提供（preview）のモデルを使う場合は、商用の制作に使ってよいかを確認できる
- AIで生成した音声や音楽であることの表示義務があるかを確認できる

# 調べ方
- 利用規約とライセンスは、各サービスの公式サイトの原文で確認し、該当する箇所のURLと確認した日付を添える。要約記事やまとめサイトを根拠にしない
- 料金は公式の料金ページで確認し、確認した日付を添える

# 出力
- サービス名、声の候補、商用利用の可否、クレジット表記の要否、料金の目安、根拠のURLを表にする
- 動画で読み上げる固有名詞（サービス名、キャラクター名など）を含む文を3つ用意し、声の候補ごとに合成した音声と、それを文字起こしした結果を並べる
- 採否は私が聞いて判断する
- 課金が発生する合成は、実行前に回数と費用の見込みを示し、私の承認を取る

次の点で、うまくいかない可能性があります。

• 利用規約の読み取りは、AIが誤ることがあります。商用利用とクレジット表記の条件は、AIが添えたURLの原文を、採用する前に人が確認してください

• 同じ文でも、合成のたびに読み方が変わる音声合成があります。私たちの場合、「ワンくん」が「まんくん」と聞こえる合成が混じりました。固有名詞を含む文で、複数回合成して確かめておくと安全です

• 文字起こしの照合では、声の印象までは分かりません。語の高低や声の暗さは、人が聞いて判断する必要があります

アニメーションを作るプロンプト

決まった台本、キャラクター、声で、約1分の解説動画を制作してください。

# 方式
- 画面は場面ごとのHTMLで作成し、時刻 t を渡すとその瞬間の画面を描く関数 window.__seek(t) を用意する。__seek は呼ぶ順番に関係なく、同じ時刻には同じ画面を描くようにする
- Playwrightでブラウザを開き、1920×1080・60fpsで1コマずつ撮影し、ffmpegで動画にする
- 字幕、強調、キャラクターの口の動きは、すべて時刻から計算する
- APIキーはこのプロンプトやファイルに書かず、環境変数から読み込む

# 声
- 選んだ声で、節ごとに3回合成し、文字起こしして、台本との一致率が高く余計な語が入っていないものを選ぶ
- 節ごとに声の高さの中央値を測り、ほかの節と近い範囲に入っているかを報告する。範囲に入る合成が出ないときは、上限を決めて合成を追加する

# 画面
- 1つの場面で動かすものは1つにし、場面の切り替えはフェード1種類にする
- 並列の項目は同時に表示する。強調は読み上げている箇所にだけ付ける
- 例に出す社名と人名は「サンプル企業A」のように実在と重ならない名前にする。実際の管理画面を映すときは、社名、人名、候補者の情報をぼかす
- 日本語の折り返しには word-break: auto-phrase と line-break: strict を指定する

# 書き出しと確認
- 書き出しのときに、各場面の要素が想定した位置に入っているかを自動で検査する
- 書き出した動画から4秒ごとにコマを切り出して1枚に並べた画像を作り、切り出したコマをすべて確認してから報告する。動きのある区間は0.12秒刻みで確認する
- 音量は -16 LUFS 前後に調整する

# 報告のしかた
- 制作したもの、判断したこと、私に判断してほしいことを分けて報告する
- 課金が発生する生成は、実行前に回数と費用の見込みを示し、私の承認を取る
- 決めた基準（声の種類と高さの範囲、動きの速さ、字幕の幅など）は、次の動画で再利用できるよう1つのファイルにまとめる
- 公開の前に、制作者以外の人にも一度通して見てもらうよう私に促す

次の点で、うまくいかない可能性があります。

• 特定の時刻の静止画だけで確認すると、書き出した動画でしか起きない不具合を見逃します。私たちの別の動画では、HTMLの閉じタグが1つ欠けて後半の場面が消えましたが、静止画では再現しませんでした

• 並べて出すカードや項目は、わずかなずれでも1枚だけ遅れて見え、その1枚が特別に見えます

• 字幕の吹き出しの幅が場面の途中で変わると、字幕の行数が組み直されて読みにくくなります

• 日本語は、指定がないと語の途中で折り返されることがあります

できないと思っていたことへの再挑戦

自分にとって動画づくりは、これまで手を出せない作業の一つでした。それが今回、編集ソフトを一度も開かずに、言葉で伝えるだけでサービスページに載せられる動画になっています。Claude Codeでコーポレートサイトを作ったときに続いて、AIで挑戦できることの閾値が、また一つ下がった気がしています。

失敗も多くありましたが、その多くは、人とAIの確認の役割を決めておけば避けられたと思います。今回の制作でも、初版で読み上げが遅く見送ったGeminiの音声合成を、話し方の指示の渡し方を直して試し直したところ、最終的に採用する声になっています。できないと思っていたことほど、もう一度挑戦してみることが重要だと考えています。私たちも、次の動画では確認の分担を最初から組み込み、見逃しがどこまで減るかを確かめていきます。

HRdevは、自社の業務でもAI活用に積極的に挑戦していて、今回の動画もその一つです。採用まわりでAIを活用してみたいことがあり、その支援をご希望でしたら、お問い合わせからお気軽にお声がけください。