記事のメインタイトル
Claude Codeでスライド動画作成
初めに
Claude Codeは、ターミナルで使う「AI開発パートナー」です。
チャットでやり取りするだけでなく、実際にコードを書いたり、
ファイルを作成したり、プログラムを実行したりできる「AI」というイメージです。
でも、ここで多くの人がこう思います。
「Claude Codeって便利だけど、実際にプログラミング初心者でも本格的なWebアプリって作れるの？」
そこで今日のゴール
「Claude Codeで初心者でもWebアプリケーションを構築できること」を
実際の開発プロセスとスクリーンショットで分かりやすく理解する
今回作ったもの：
- システム: マークダウンファイルからスライド動画を自動生成
- 技術: Next.js + Express + FFmpeg + 音声合成
- 開発: Claude Codeとの対話のみで完成
これを見ることで、初心者でもAI開発でどこまでできるかが分かります。
作ったWebアプリケーション
どんなシステム？
簡単に言うと：
- マークダウンファイル（.md）をアップロード
- 自動でスライド動画（MP4）に変換
- 音声ナレーション付き、日本語完全対応
使い方：
- マークダウンファイルをドラッグ&ドロップ
- 「動画を生成」ボタンを押す
- 完成した動画をダウンロード
完成した動画の内容
生成される動画には4つのスライドが含まれます：
1. タイトルスライド
- 「マークダウンからビデオへ」
- システムの説明
2. 主な機能スライド
- ファイルアップロード機能
- 自動スライド変換
- 音声ナレーション生成
- MP4動画出力
3. 使い方スライド
- ファイル準備からダウンロードまでの手順
4. 技術仕様スライド
- 使用技術の紹介（Next.js、Express、FFmpeg）
最終的な品質
動画の仕様：
- 解像度：1920x1080 Full HD
- 時間：約35秒
- ファイルサイズ：624KB
- 日本語完全対応、美しい紫グラデーション背景
開発プロセス：4つのステップ
ステップ1：基本システム構築
最初の相談：
マークダウンファイルからスライド動画を生成するWebアプリを作りたいです。
初心者でも理解できる構成で、モダンな技術を使って作ってください。
Claude Codeの提案：
- フロントエンド：Next.js（ファイルアップロード画面）
- バックエンド：Express.js（API処理）
- 動画生成：FFmpeg
- 音声合成：macOS say
実際の作業：
# プロジェクト作成
mkdir markdown-to-video
# Next.js セットアップ
npx create-next-app@latest . --typescript --tailwind
# Express サーバー構築
npm install express multer cors ffmpeg
結果： わずか数分で基本的なWebアプリの骨組みが完成
ステップ2：動画生成機能の実装
相談内容：
マークダウンの各セクションをスライドに変換し、
音声付きの動画にする方法を教えてください。
Claude Codeが作ってくれた機能：
マークダウン解析機能
// マークダウンを見出しごとに分割
function parseMarkdown(content) {
// H1、H2、H3見出しを認識
// リスト項目を抽出
// スライド用データに変換
}
スライド画像生成
// FFmpegでスライド画像を作成
async function generateSlideImage(text, index) {
// 背景色とテキストを合成
// 日本語フォント対応
// 1920x1080サイズで出力
}
音声付き動画作成
// 各スライドに音声を追加
async function generateVideoWithAudio(slides) {
// 音声生成（macOS say使用）
// 画像と音声を合成
// 全スライドを結合
}
最初の結果：
- 動画は生成されたが日本語が文字化け
- デザインも単調で改善が必要
ステップ3：日本語文字化け問題の解決
発見した問題：
日本語部分が四角い記号で表示され、英数字のみ正常表示
改善要求：
日本語が文字化けしています。
完全に日本語対応して、美しいデザインにしてください。
Claude Codeの解決策：
日本語フォント対応
// macOSの日本語フォントを指定
const fontPath = '/System/Library/Fonts/Hiragino Sans GB W3.ttc';
// 見出しレベル別のフォントサイズ
const fontSize = {
h1: 84, // メインタイトル
h2: 64, // セクション
h3: 42, // サブセクション
list: 36 // リスト項目
};
美しい背景デザイン
// 紫グラデーション背景
const backgroundCommand = `ffmpeg -f lavfi -i "color=c=0x6366f1:size=1920x1080:d=1"`;
結果： 日本語が表示されました。
ステップ4：レイアウト構造の修正
発見した問題：
VSコードでは縦に並んでいるリスト項目が、動画では横一列に表示
改善要求：
リスト項目が横並びになっています。
マークダウンの構造通りに縦配置で表示してください。
Claude Codeの解決策：
構造化レイアウト
function getTextPosition(type, itemIndex) {
const baseY = 200; // 基準位置
const lineHeight = 80; // 行間隔
switch(type) {
case 'h1': return 'x=(w-text_w)/2:y=(h-text_h)/2'; // 中央
case 'h2': return 'x=100:y=150'; // 左上
case 'list':
// リスト項目を縦に配置
return `x=200:y=${baseY + (itemIndex * lineHeight)}`;
}
}
結果： マークダウンの階層構造が正確に反映された読みやすいレイアウト
初心者でも成功したポイント
1. 段階的なアプローチ
✅ 良い例：
「基本的な動画生成システムを作ってください」
→ 動画ができてから
「日本語対応してください」
→ 日本語対応できてから
「レイアウトを改善してください」
❌ 避けるべき例：
「完璧な日本語対応の美しいレイアウトの動画生成システムを一度に作って」
2. 具体的な要求
✅ 良い例：
マークダウンファイルをアップロードして、各セクションを1つのスライドにして、
音声付きのMP4動画を生成するWebアプリケーションを作ってください。
フロントエンドはNext.js、バックエンドはExpressで。
❌ 曖昧な例：
動画を作るシステムを作って
3. 問題を具体的に報告
実際の問題報告例：
- 「日本語が四角い記号で表示されます」
- 「リスト項目が横一列になってしまいます」
- 「動画ファイルのサイズが0バイトです」
Claude Codeは具体的な問題ほど的確に解決してくれます。
まとめ
結論：初心者でもClaude CodeがあればWebアプリケーションを作ることができます。
重要なのは、明確な目標を持ち、段階的にアプローチすることです。