スマホ動画とPPTスライドを「イレルダケ」で講座動画を合成するツールを作った話
動画編集ゼロの総務部長からの相談をきっかけに、Claude Codeで1日以内にプロトタイプを完成させた講座動画合成アプリ。Electron + React + FFmpegで作った「イレルダケ」の全貌。
なぜこのツールを作ったか
きっかけは、知人の総務部長・Aさんからの相談でした。
上司から「社内向け講座の動画を作ってほしい」と頼まれたのですが、それまで動画編集を担当していた方が転職で退職。後任として白羽の矢が立ったAさんに届いたのは、スマホで撮った講師映像とPowerPointのスライド、そして「このタイミングでスライドを切り替えて」「ここは顔だけ映して」という箇条書きの指示メモだけでした。
Aさんの動画編集経験はほぼゼロ。Clipchampで動画の余分な部分をカットしたことがある程度です。
「初心者でも簡単に講座動画を作れるソフトはないですか？」
相談を受けた私も悩みました。私が使っているPowerDirectorを紹介するには習得コストが高すぎる。Clipchampは自分も深く使ったことがなく、一から教えるのが難しい。
そこで思ったのが「Claude Codeで作れないか？」。試してみると、プロトタイプは1日も経たずに完成。Aさんに実際に使ってもらいながら要望を聞き、改良を重ねてできたのが「イレルダケ」です。
イレルダケでできること
3ステップで講座動画を完成させる
Step 1: 素材を読み込む
講師映像（スマホ動画・MP4・MOVなど）と、スライド（PDFをそのままドロップ、またはスライドを画像として書き出したもの）を読み込みます。PDFはアプリ内で自動的に1枚ずつの画像に変換されます。
Step 2: クリップを並べる
動画を時間で区切り、各クリップに「どう見せるか」を設定します。
- 講師映像のみ：導入や解説の場面で講師の顔をフルスクリーンで表示
- PiP（ピクチャー・イン・ピクチャー）：スライドをメインに、講師の顔を隅に小さく重ねる
- スライド＋音声：顔は非表示でスライドのみ表示しながら音声だけ流す
クリップの切り替えはカット（瞬時）またはフェード（秒数を指定）から選べます。
Step 3: 書き出す
解像度（1080p / 1440p / 4K）を選んで書き出しボタンを押すだけ。進捗バーとETA（残り時間の目安）を見ながら待つと、MP4ファイルが完成します。
細かい設定も直感的に操作できる
PiPモードでは講師映像の表示を細かくカスタマイズできます：
| 設定項目 | 選択肢 |
|---|---|
| 表示位置 | 左上 / 右上 / 左下 / 右下 |
| 大きさ | 15〜50%（スライダーで調整） |
| 形状 | 四角形 / 丸型 |
| 装飾 | 境界線・影のオン/オフ |
また、会社やブランドのロゴをオーバーレイ表示する機能も搭載。作成したクリップ設定はJSONファイルとして保存・読み込みができるので、似たような構成の動画を繰り返し作る場合の手間も省けます。
体験版とフル版
体験版（無料）で試用できます。ただし：
- 書き出し動画にウォーターマーク（透かし）が入る
- 動画の長さは最大15分まで
フル版はプロダクトキーを入力してアクティベートすることで制限が解除されます。
Claude Codeで開発した話
このツールはElectron + React + TypeScript + Remotionで作られており、動画合成エンジンにはFFmpegを使用しています。
プロトタイプは1日も経たずに動くものができました。ただ実際にAさんに使ってもらいながら約1ヶ月・10回以上のセッションで改良を重ね、バージョンも v1.5 まで育てています。
「動く」から「使える」にするプロセスで一番大きかったのは、Aさんの実際の操作を見ながら要件を掘り下げられたことです。「クリップのタイミングを後から微調整したい」「PDFをそのままドラッグアンドドロップしたい」といった声は、実際に使ってもらうまで出てこなかったものばかり。Claude Codeがその反復を高速に回してくれたから、1ヶ月でv1.5まで到達できました。
まとめ
「イレルダケ」は、動画編集の知識がなくてもスマホ動画とスライドさえあれば講座動画が作れることを目指して開発したツールです。
- 難しい編集操作は不要
- スライドのタイミングや表示モードをクリップ単位で指定するだけ
- PDF対応でPowerPointから直接書き出したスライドがそのまま使える
「動画を作らなきゃいけないけど編集は苦手」という方に、ぜひ試してもらいたいと思っています。配布ページは近日公開予定です。
開発の詳細（設計の試行錯誤・詰まったポイント）については別途記事にする予定です。