はじめに
こんにちは。PythonをメインテーマにUdemyでいくつかのコースを公開している個人講師です。
コース制作は好きな仕事ですが、長い間ずっと悩みを抱えていました。「もっとコースを量産したいのに、1本作るだけでへとへとになる」 という問題です。
転機になったのは Claude Code との出会いでした。「これがあれば、自分の教材制作の仕組みをまるごと自動化できるんじゃないか」と直感したんです。そこから、AI × Python で教材制作パイプラインを構築するプロジェクトが始まりました。
なお、このパイプラインで制作したコースはまだリリースしていません。現在も構築・改善を進めている途中です。
この記事では、何が課題だったのか・どう設計したのか・何を作ったのかを、体験談を交えながら紹介します。
本記事は AI の支援を受けて執筆しています。ただし、掲載する情報の選定・構成・内容の確認はすべて筆者自身の判断と方針のもとで行っています。情報の正確性については最善を尽くしていますが、ご利用の際はご自身でもご確認いただくようお願いします。
教材制作の何が大変なのか：16の課題
まずは現状の課題を正直に書き出してみました。数えたら16個ありました。
企画・設計フェーズ
| # | 工程 | 課題 |
|---|---|---|
| 1 | 企画 | テーマ選定（トピック・ターゲット・競合調査・差別化）に時間がかかる |
| 2 | 設計 | カリキュラム構成を考えるのに時間がかかる |
| 3 | 設計 | 小テスト・コーディング演習のネタ考案に時間がかかる |
| 4 | 設計 | 説明しやすいサンプルプログラムの考案に時間がかかる |
制作フェーズ
| # | 工程 | 課題 |
|---|---|---|
| 5 | 制作 | スライド作成に時間がかかる |
| 6 | 制作 | スライドの図解・図の作成に時間がかかる |
| 7 | 制作 | スクリーンキャプチャ＋赤枠などのスライド加工作業が大変 |
| 8 | 制作 | ナレーションの台本作成に時間がかかる |
| 9 | 制作 | ナレーション録音時にどもり・かみ・声かすれが発生するため、撮り直しに時間がかかる |
| 10 | 制作 | ブラウザで演習環境を操作しながらのナレーション録音が大変 |
| 11 | 制作 | エディター操作しながらのナレーション録音が大変 |
| 12 | 制作 | プロモーションビデオ作成に時間がかかる |
| 13 | 制作 | 完成した教材のUdemyへのアップロード作業が煩雑 |
公開・運営フェーズ
| # | 工程 | 課題 |
|---|---|---|
| 14 | 公開 | コース紹介文の作成に時間がかかる |
| 15 | 公開 | プロモーション活動に十分な時間をかけられていない |
| 16 | 運営 | 受講生からの質問回答が負担 |
特につらかったのは 9番「録音の撮り直し」 です。台本通りに読もうとすると緊張してどもる。何度撮り直しても同じところで噛む。1レクチャー15分の動画を撮るのに2〜3時間かかることも珍しくありませんでした。
また 10番・11番 も地味に大変でした。iPhone で音声を流しながら PC を操作するという謎の技を駆使して収録していました。
「このままでは量産できない」——そう結論付けたのが、このプロジェクトのスタートです。
解決方針：4フェーズで段階的に取り組む
16の課題を一度に解決しようとするのは無謀です。そこで、自動化の難易度と優先度に応じて4つのフェーズに分けました。
自動化の3段階
まず、各課題を以下の3段階に仕分けました。
| 記号 | 定義 |
|---|---|
| ◎ | AIが主体となって自動化できる |
| ○ | スクリプト・ツールで自動化できる（AIが主体ではない） |
| △ | 部分的にしか自動化できない |
重要なのは、人間が確認・判断する箇所を意図的に残している点です。全部を自動化すればいいわけではなく、品質を守るために人間が介在すべきポイントがあります。これを「ヒューマン・イン・ザ・ループ」と呼んでいます。
4フェーズの全体像
Phase 1: AIスキル
（企画・設計・文章生成）
↓ すぐ着手できる・効果が大きい
Phase 2: 動画制作パイプライン
（スライド録画・音声・演習環境）
↓ Phase 1完成後に設計・構築
Phase 3: 補助ツール整備
（スクリーンキャプチャ加工・アップロード自動化）
↓ Phase 2完成後に着手
Phase 4: 公開・運営の効率化
（SNS投稿・質問回答支援）
上流（企画・設計）から固めることで、下流の制作工程がスムーズになる——という考え方です。
Phase 1：AIスキルで企画〜台本を効率化
Claude Codeのカスタムスキルとして実装
Claude Code には「カスタムスキル」という仕組みがあります。Markdownファイルで手順を定義しておくと、「/スキル名」と呼び出すだけでAIが一連の処理を実行してくれます。
このスキルを使って、企画から台本生成まで9本のスキルを実装しました。
実装済みスキル一覧
| # | スキル | 工程 |
|---|---|---|
| 1 | /udemy-theme-research |
テーマ選定・競合調査 |
| 2 | /udemy-course-intro |
コース紹介文生成 |
| 3 | /udemy-curriculum |
カリキュラム構成生成 |
| 4 | /udemy-sample-program |
サンプルプログラム生成 |
| 5 | /udemy-validate-samples |
サンプルコード検証 |
| 6 | /udemy-long-content |
長文コンテンツ生成 |
| 7 | /udemy-slides-narration |
スライド＋ナレーション台本生成 |
| 8 | /udemy-quiz |
小テスト生成 |
| 9 |
/udemy-exercise（予定） |
演習ネタ生成 |
スキル間の連携フロー
実際に使ってみてどう変わったか
以前は「テーマ選定→競合調査→カリキュラム設計→サンプルコード考案→台本執筆」という工程が、それぞれ数時間〜数日かかっていました。
スキルを使うようになってからは、企画〜台本の一通りを1〜2日で完成させられるようになりました。AIが叩き台を作ってくれるので、人間はレビューと修正に集中できます。
Phase 2：動画制作パイプラインを構築した
設計原則
パイプラインの設計にあたり、4つの原則を定めました。
| # | 原則 |
|---|---|
| 1 | 音声が基準タイムライン — 音声を先に完成させ、映像はそれに追従する |
| 2 | 最終単位はレクチャー — 1レクチャー = 1動画ファイルとして出力する |
| 3 | [CLICK]マーカーで制御 — アニメーションのトリガーは台本に [CLICK] として明示する |
| 4 | 人間の介在は確認・定義のみ — 演習環境の操作手順定義と各工程のレビューを除き自動化する |
スライドツールに Slidev を採用
スライドツールには Slidev（slidev.dev）を採用しました。
Slidev は、Markdown でスライドを書けるプレゼンテーションツールです。Vue.js ベースで動作し、Web ブラウザ上でスライドをレンダリングします。PowerPoint や Keynote と違い、テキストファイルで管理できるのが最大の特徴です。
Udemy 教材制作との相性が特に良い点は以下の3つです：
- AI がスライドを生成できる — Markdown なので、Claude などの AI がそのまま出力できる（Phase 1 のスキルと自然に連携できる）
-
サンプルプログラムを行単位でハイライトできる — コードブロックに
{1|2|3}と記述するだけで、説明のステップに合わせて特定の行を順番にハイライトできる。プログラミング教材での説明に非常に効果的 - Playwright でブラウザ制御・録画できる — Slidev はブラウザ上で動作するため、Playwright を使ってスライド操作を自動化・録画できる。動画埋め込みにも対応できる
PowerPoint や Keynote では自動録画の仕組みを作るのが難しいですが、Slidev なら Web 技術として扱えるためパイプラインに組み込みやすいです。
用語補足
TTS（Text-to-Speech） とは、テキストを音声に変換する技術のことです。本パイプラインでは Google Cloud TTS の Gemini Flash モデルを使い、ナレーション台本から自動でナレーション音声を生成します。人間が録音する必要がなくなります。
強制アライメント（Forced Alignment） とは、音声ファイルとテキストを突合し、「このセリフが音声の何秒後に発話されているか」をタイムスタンプとして取得する技術です。映画の字幕生成などで広く使われています。本パイプラインでは Whisper を使って実現しており、スライドのクリックタイミングを自動算出するために利用しています。
3つのパイプライン
以下の3種類のパイプラインを実装しました。
┌─────────────────────────────────────┐
│ スライド動画パイプライン │ ◎ 自動化
│ 台本 → TTS → アライメント → 録画 → マージ │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ 演習環境動画パイプライン │ △ 部分自動化
│ 操作スクリプト（人間定義）→ 録画 → マージ │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ インフォグラフィック生成パイプライン │ △ 部分自動化
│ スライドMD → 画像生成 → 壁紙加工（目視確認） │
└─────────────────────────────────────┘
スライド動画パイプラインの詳細
メインとなるスライド動画パイプラインを詳しく説明します。
全体フロー
① /udemy-slides-narration スキル
スライドMD + ナレーション台本（[CLICK]マーカー入り）を生成
↓
② TTS（Google Cloud TTS Gemini Flash / Iapetus）
[CLICK]を除去したテキストをレクチャー単位で一括送信
→ 音声ファイル 1本（WAV）
↓
③ Whisper（強制アライメント）
音声を文字起こし × 台本と突合
→ クリックタイムスタンプリスト（例: [3.2s, 6.8s, 11.4s]）
↓
④ Playwright（Slidev制御・録画）
タイムスタンプのタイミングで自動クリック → 映像ファイル（MP4）
↓
⑤ ffmpeg
映像 + 音声をマージ → 完成動画（レクチャー単位 MP4）
ポイント①：[CLICK]マーカー方式
従来の手動収録では、台本に「★」マークを書いて「ここでクリック」というタイミングを自分で管理していました。これをそのままデジタル化したのが [CLICK] マーカーです。
スライドを表示します。[CLICK]
次に、このコードを見てください。[CLICK]
1行目では変数を定義しています。[CLICK]
AI（スキル）がナレーション台本を生成する際に、スライド切り替えや箇条書きアニメーションのタイミングに自動で [CLICK] を挿入します。
ポイント②：TTS でレクチャー単位一括生成
音声生成には Google Cloud TTS の Gemini Flash（話者: Iapetus）を採用しています。
重要なのはレクチャー単位で1本まとめて生成する点です。スライド単位に分けて生成すると、スライドをまたぐたびに声色が微妙にブレます。1本にまとめることで音質の一貫性を確保しています。
ポイント③：Whisper強制アライメント
「この音声ファイルの何秒後に次のスライドへ進むか」を自動で算出するのが、強制アライメント（Forced Alignment）という技術です。
- 音声ファイルを Whisper で文字起こし → 単語レベルのタイムスタンプを取得
- 台本を
[CLICK]で分割 → 各区間のテキストを抽出 - 各区間の末尾テキストが Whisper タイムスタンプのどこに対応するかを突合
- クリックタイムスタンプリストを出力
この結果として [3.2, 6.8, 11.4] のようなリストが得られます。「3.2秒後に1回目のクリック」という指示です。
ポイント④：Playwright で Slidev を自動録画
Playwright というブラウザ自動操作ライブラリで Slidev（スライドツール）を制御しながら録画します。③で算出したタイムスタンプのタイミングで自動的にキーを押すため、人間がクリックする必要はありません。
演習環境動画パイプラインの詳細
演習環境動画パイプラインは、ブラウザ上で実際にコードを書いて実行する様子を録画するためのパイプラインです。冒頭の課題表の 10番・11番（演習環境・エディター操作しながらのナレーション録音）に対応します。
Slidev 録画ではなく、JupyterLab を Playwright で直接操作して録画する別系統のパイプラインとして実装しました。Google Colab や Udemy コースラボは自動化リスク（クロスオリジン・アカウント剥奪）があり対象外としたため、ローカル JupyterLab に一本化しています。
全体フロー
① Playwright Codegen でブラウザ操作を記録
↓
② codegen_output.py（操作の正本）
↓ Haiku変換
③ script.md（操作行のみ）
↓ 人間がナレーション行（💬）を追記
④ script.md（完成版・唯一の入力）
↓ Haiku変換
⑤ script.json（narration / action の順番リスト）
↓ ↓
TTS生成 Playwright録画
（chunk_*.mp3） （narration は再生＋開始時刻を記録）
（action は DOM 操作・CLICKは赤枠）
video.mp4 + timestamp_log.json
↓ ↓
ffmpeg合成（timestamp_log.json の offset_ms で配置）
↓
output.mp4
ポイント①：台本フォーマット（💬/🤖 マーカー）
台本は Markdown で書きます。ナレーション行とブラウザ操作行を交互に並べる形式です。
# レクチャー3：変数の代入
## コードを入力して実行する
- 💬 x に 10 を代入します。
- 🤖 コードエディタに以下を入力する[^1]
```python
x = 10
print(x)
```
- 🤖 Shift+Return を押す
- 💬 結果を確認します。
[^1]: .cm-content
-
- 💬→ ナレーション（TTS で読み上げ） -
- 🤖→ Playwright が実行する操作 - セレクタは
[^1]形式の脚注に追い出し、本文は自然言語で読めるようにする
ポイント②：Codegen 連携・正本方式
Playwright の Codegen（ブラウザ操作を記録してコード化する機能）を使い、出力された codegen_output.py を操作の正本として保持します。ここから Claude Haiku が script.md の操作行部分を自動生成します。
台本を手で編集して構造が壊れた場合でも、codegen_output.py から script.md を作り直せる設計にしています。
ポイント③：録画中の「実測タイムスタンプ」方式
スライド動画パイプラインでは Whisper の強制アライメントで事前にタイミングを計算していましたが、こちらは方式を変えています。
Playwright 録画中に narration の再生開始時刻を timestamp_log.json に書き出し、録画後に ffmpeg で adelay として流し込みます。
方式を変えた理由は、Gemini TTS が非決定的で、同じナレーションを2回繰り返した音声を生成することがあるためです。事前計算では対応しづらいため、実測して合成する方式に寄せました。
インフォグラフィック生成パイプラインの詳細
インフォグラフィック生成パイプラインは、スライドに埋め込む図解・背景画像を自動生成するパイプラインです。冒頭の課題表の 6番（スライドの図解・図の作成に時間がかかる）に対応します。
1本のコースで数十〜百枚近い図解が必要になるため、ここを自動化できると制作時間が大幅に短縮できます。
全体フロー
① レクチャー原稿（long_content）を読み込む
↓
② Claude Haiku がインフォグラフィック用プロンプトを生成
（スタイル指示・要約・コード解釈を付与）
↓
③ Gemini 3.1 Flash Image で画像生成
- 1920×1080（full・スライド全体背景用）
- 960×1080（half・スライド右半分用）
↓
④ Pillow で壁紙加工（明度調整・白オーバーレイ）
↓
⑤ 目視確認（NG なら --slide-index で再生成）
↓
⑥ Slidev スライドに組み込み
ポイント①：シリーズスタイル統一
一番のこだわりは、コース全体で絵柄・配色・キャラクターを統一することです。レクチャーをまたいでも同じ世界観に見えるように、Claude Haiku が生成するプロンプトに以下のスタイル指示を毎回埋め込みます。
| 要素 | 指定 |
|---|---|
| 配色 | 紺（#1E3A5F）・水色（#4FC3F7）・白（#FFFFFF）の3色 |
| キャラクター | 青色ロボット（丸目・アンテナ）を毎回同一デザインで配置 |
| レイアウト | 左キャラクター・右コンテンツ（テキスト・コード・図解） |
| 背景 | 白または薄い水色グラデーション |
完璧な一貫性は出せませんが、**「同じコースの一連の図解に見える」**レベルの統一感は確保できています。
ポイント②：Pillow で壁紙加工
full サイズはそのままだと色が濃く、スライドに重ねるとテキストが読みづらくなります。そこで Pillow で明度を上げ・白オーバーレイをかけて、背景として使える薄いトーンに加工します。
python wallpaper.py course --name {コース名} \
--pattern gray_light --brightness 1.10 --white-alpha 0.90
加工前の鮮やかな画像と加工後の薄いトーン画像を両方保存しておき、スライドに応じて使い分けます。
ポイント③：Slidev 組み込み（public/シンボリックリンク方式）
Slidev の background: frontmatter は v52 で自動適用されず、相対パスも CSS では解決できません。そのため、public/ 配下にシンボリックリンクを作成して絶対パス /infographic/... で参照する方式を採用しました。
mkdir -p output/udemy_slides/{コース名}/public
ln -s ../../../../03_projects/udemy_infographic/output/{コース名} \
output/udemy_slides/{コース名}/public/infographic
スライド側はこう記述します。
---
layout: image-right
image: /infographic/{lecture_id}/half/slide_{XX}_half.png
---
図解は「△ 部分自動化」という位置付けです。完全な自動化は諦めて、人間の目視確認ステップを残す方式にしました。
技術スタック
| コンポーネント | 採用技術 |
|---|---|
| AIスキル実行環境 | Claude Code（カスタムスキル） |
| スライド生成 | Slidev（Node.js） |
| 台本・コンテンツ生成 | Claude（Sonnet / Haiku） |
| TTS | Google Cloud TTS Gemini Flash（Iapetus） |
| 強制アライメント | Whisper small モデル |
| ブラウザ制御・録画 | Playwright（Python） |
| 動画合成 | ffmpeg |
| インフォグラフィック画像生成 | Gemini Image |
| 画像加工 | Pillow（Python） |
おわりに
Claude Code に出会い「これで自動化の仕組みが作れる」と感じたところからスタートして、Phase 1・Phase 2 の実装が完了しました。スライド動画・演習環境・インフォグラフィックの3系統が揃い、一番つらかった録音の撮り直し・図解作成・演習環境の操作収録がほぼゼロになりました。台本レビュー・画像の目視確認など、人間が判断すべき工程は意図的に残しています。
ただし、これで終わりではありません。Phase 3（補助ツール整備）・Phase 4（公開・運営の効率化）はこれからです。また、各パイプラインの実装詳細（コード・設計判断・ハマりどころ）については、今後の記事で個別に深掘りしていく予定です。
辛い作業は IT・AI の力で楽にして、コース制作そのものを楽しめるようにしていきたいと思っています。
続編記事では、スライド動画パイプライン・演習環境パイプライン・ターミナル録画パイプラインそれぞれの実装詳細を公開予定です。