会社員エンジニアが作った、副業のお金の計算ツール

【PR】このページには広告（アフィリエイトリンク）が含まれます。

動画編集歴1年未満のエンジニアが、Claude Code で副業の動画を組み立てている方法（Whisper・HTML・FFmpeg）

2026年10月25日 ／ Aolsiq

副業で動画編集の仕事を受けています。経験は1年未満です。 編集ソフトの画面で一つずつ切ったり並べたりするのではなく、Claude Code にスクリプトを書かせて動画を組み立てています。 Premiere Pro も持っていて、仕上がりの確認や、編集のデータを渡すときには自分で触ります。

この記事では、その流れと使っている道具、確認の仕方、うまくいかなかったことを書きます。 初めての案件で何を任せたかは動画編集の初案件を AI と分担して納品するまでに書きました。こちらは仕組みの側の話です。

この方法で作った動画

自分のポートフォリオとして作った、業務アプリの紹介動画（約1分半）です。 アプリの操作の録画、タイトルやテロップ、BGM と効果音まで、この記事の方法で Claude Code が組み立てました。

先に結論（分担）

作業やる人
文字起こし、構成の表、テロップ・画面・音の組み立て、書き出しClaude Code（スクリプトを書いて動かす）
コマの一覧と音量の数字での確認、直しClaude Code
見た目の方向を決める、再生しての最後の確認私
Premiere でのデータの保存、クライアントとのやり取り私

編集の作業そのものはほとんど Claude Code が行い、私は「どう見せるか」の判断と、見て聞いての確認を受け持っています。 時給は、作業時間を短めに見積もったうえで、約1,800円〜約4,100円でした（詳しくは後で書きます）。

流れ

YouTube の解説動画（ナレーションの音声と台本が届くもの）の場合は、次の順に進みます。

  1. 届いた音声を手元の PC で Whisper にかけ、文字と、話している区切りごとの時刻を出す
  2. どの時刻に、どの画面・字幕・効果音を出すかを、スクリプトの中の表にまとめる
  3. 画面と字幕を HTML と CSS で描き、ブラウザで1コマずつ撮って画像にする
  4. FFmpeg で、画面・字幕・ナレーション・BGM・効果音を重ねて書き出す
  5. 要所のコマを並べた画像と音量の数字を Claude Code が見て直し、最後に私が再生して確かめる

全部がスクリプトなので、node build.mjs のように一つのコマンドで最初から作り直せます。 ここが、編集ソフトで作るときとの大きな違いです。

文字起こしは Whisper を手元で動かす

Whisper の small モデルを、transformers.js（@huggingface/transformers）で Node.js から動かしています。 音声を外のサービスに送らずに済むので、クライアントの素材を扱うときも安心です。 字幕は話している言葉の通りにし、漢字の使い分けは台本に合わせます。

import { pipeline } from '@huggingface/transformers';

// samples: 16kHz・モノラルにした音声（Float32Array）
const asr = await pipeline('automatic-speech-recognition', 'onnx-community/whisper-small', { dtype: 'q8' });
const res = await asr(samples, {
  language: 'japanese', task: 'transcribe',
  return_timestamps: true, chunk_length_s: 30, stride_length_s: 5,
});
// res.chunks: [{ text: '…', timestamp: [開始秒, 終了秒] }, …]

テロップや図は HTML で描く

字幕・タイトル・図解・表は、HTML と CSS で作ります。 書体の大きさ、縁取りの太さ、帯の位置などを数値で決められるので、クライアントの見本に合わせやすいです。 見本の動画からコマを書き出して、文字の大きさや位置を測り、その数値を CSS に入れます。 動きのあるテロップは、時刻を少しずつ進めながら1コマずつ撮影し、動画にします。

ブラウザで画面を録画すると、処理が重いところでコマが落ちます。 CSS のアニメーションを止めて、時刻を1コマ分ずつ進めて撮れば、重い場面でもコマが落ちません。撮影は Playwright で動かしています。

// アニメーションを止めて、時刻を1コマ分ずつ進めながら撮る
await page.evaluate(() => document.getAnimations().forEach((a) => a.pause()));
for (let f = 0; f < frames; f++) {
  await page.evaluate((ms) => document.getAnimations().forEach((a) => (a.currentTime = ms)), (f * 1000) / FPS);
  await page.screenshot({ path: `${dir}/${String(f).padStart(5, '0')}.png` });
}
// 撮った画像を FFmpeg で動画にする
// ffmpeg -framerate 30 -i %05d.png -c:v libx264 -crf 12 -pix_fmt yuv420p scene.mp4

音は FFmpeg で整える

ナレーションの音量は、最初は FFmpeg の loudnorm でそろえていました。 ところが、話していない部分の小さな音まで持ち上がってしまったので、決まった量だけ上げてからリミッターでピークを抑える形に変えました。 BGM は声より十分小さくし、仕上がりの音量は ebur128 で測って、クライアントの見本に近づけます。

Web サービスの紹介動画は、操作を Playwright で録画する

Web サービスの紹介動画では、画面の操作を Playwright のスクリプトで録画しました。 どこをクリックし、何を入力し、どこで止めるかをスクリプトに書くので、修正が来ても同じ操作で何度でも撮り直せます。 マウスの動きや文字の入力をゆっくりにして、見せたい画面では2〜3秒止めるようにしています。

注意点は、Playwright の録画の機能（recordVideo）は画質が低めなことです。 細かい点や、暗い背景のグラデーションが粗くなったので、本番では画質の高い撮り方に変えました。 ヘッドレスのブラウザでも PC の GPU で WebGL が動き、3D の画面も表示できました。

Premiere のデータを求められたとき

クライアントによっては、完成した動画と一緒に、Premiere Pro のプロジェクトのデータを求められます。 Premiere のプロジェクトのファイルをプログラムで一から作るのは危ないので、Final Cut Pro 7 の形式の XML を Claude Code に作らせています。 Premiere はこの XML を読み込めるので、私が Premiere で読み込み、再生して確かめてから保存します。 完成版の動画は、同じ編集の内容から FFmpeg で書き出します。

指示の例

最初の指示は、何を見本にし、どこまでやって、どう確かめるかを書きます。 例えば、解説動画なら次のような形です（ファイル名は例です）。

音声 narration.wav と台本 script.txt から、YouTube の解説動画を作ってください。
- 見本の動画 sample.mp4 からコマを書き出し、字幕の書体・大きさ・位置・帯の色を測って合わせる
- 字幕は話している言葉の通りに区切り、漢字は台本に合わせる
- 画面・字幕・効果音は、時刻ごとの表にして build.mjs に置き、node build.mjs で作り直せるようにする
- 書き出したら、字幕の切り替わりのコマを並べた画像と、音量（ebur128）を見て直す
- 台本にない数字や年は画面に出さない

一度うまくいった手順と決まりは、後で書く Skills にまとめておくと、次からは毎回書かずに済みます。

修正の回し方

クライアントから「5:20 の字幕を直してください」のような修正の依頼が来たら、その文をそのまま Claude Code に伝えます。 Claude Code は構成の表の該当する行を直し、動画を作り直します。 作り直した動画を私が再生して確かめ、納品します。 全部がスクリプトなので、修正の多い案件でも、直すたびに最初から同じ手順で作り直せます。

確認の仕方

  • 要所のコマ（字幕の切り替わり、場面の変わり目）を並べた一覧の画像を作り、文字のはみ出しや重なりを見る
  • 音量は ebur128 で測り、声と BGM の差、全体の大きさを数字で確かめる
  • 最後は必ず自分で再生して聞く。テンポや聞きやすさは、数字では分からないからです

うまくいかなかったこと

見た目の方向で、3回作り直した

Web サービスの紹介動画で、最初は暗い背景の演出で作りました。見てみると、いかにも AI が作ったような印象でした。 次に白い背景のシンプルな形にしたら、今度はシンプルすぎました。 最後に、大手の SaaS の製品紹介動画をいくつか参考にして、明るい背景に動きを付けた形に落ち着きました。

最初に参考の動画を見て方向を決めていれば、作り直しは要りませんでした。 今は、作り始める前に参考の動画を探し、方向を決めてから作るようにしています。

Premiere のプロジェクトが空のまま保存されていた

複数本の Premiere のデータを続けて作ったとき、保存したプロジェクトの一部が、XML を読み込めていない空のものになっていました。 別のプロジェクトに、XML を2回読み込んでしまったものもありました。 Premiere のプロジェクトのファイルは中身が gzip で圧縮した XML なので、Claude Code に開かせて確かめたところで気付きました。 今は1本ずつ、読み込む、保存する、Claude Code が中身を確かめる、の順で進めています。

時給と、PC の性能

作業時間はファイルの更新時刻から見積もったもので、実際より短めです。そのうえで、時給は次の通りでした。

  • YouTube の解説動画（約15分、継続の1本目）は約1,800円
  • Web サービスの紹介動画（複数本）は約4,100円

使っている PC は、CPU が Ryzen 7 9700X、メモリが32GB、GPU が GeForce RTX 5060 Ti です。 文字起こし・画面の撮影・書き出しを全部手元で動かしていて、この構成で足りています。

背景の画像について

解説動画の背景の画像に、画像生成 AI を使ったことがあります。 ただ、画像生成 AI を使ってよいかは依頼によって違います。 使う前に、募集文やクライアントの方針を確かめておくのがおすすめです。

Skills にまとめた

紹介動画の作り方（録画、HTML の場面、音、合成、確認）は、うまくいった手順を Claude Code の Skills にまとめました。 次に同じ種類の依頼が来たときは、そのスキルを読ませるだけで、同じ手順と決まりで作り始められます。 Skills については副業の作業を Claude Code で回している会社員エンジニアの使い方に書いています。

まとめ

  • 動画編集は、文字起こし（Whisper）→ 時刻の表 → HTML で描いて1コマずつ撮る → FFmpeg で合成、の流れでスクリプトにできる
  • 全部がスクリプトなので、修正が来ても一つのコマンドで最初から作り直せる
  • 見た目の方向は、作る前に参考の動画で決める。後から変えると作り直しになる
  • 確認は、コマの一覧と音量の数字を Claude Code に見せ、最後は自分で再生して聞く
  • Premiere のデータは XML を作って読み込む。保存したものは1本ずつ中身を確かめる

人に教わりながら始めたい場合

短い時間で人に教わりながら始めたい場合は、研修という選択肢もあります。 AI駆動開発協会の個人向けの Claude Code 研修は、オンラインのグループ講習で、2時間・43,780円（税込）です。 案内されているカリキュラムには、CLAUDE.md・Hooks・スキルが入っています。 私は受けていないので、内容や日程は公式のページで確かめてください。

AI駆動開発協会の Claude Code 研修（公式ページ）

形式・料金・カリキュラムは AI駆動開発協会の公式サイトで2026年10月25日に確認。

関連記事