技術ブログから YouTube 動画を自動生成！GitHub Copilot Agent Skills × Gemini API × VOICEVOX で作るコンテンツ自動化パイプライン

はじめに

こんにちは！横浜情報機器株式会社のインターン生ロホマンシャヒンです。今回はこの大矢隆晟さん（日本マイクロソフト）の記事を参考にさせていただき、弊社の技術ブログから自動で YouTube 動画を生成する Skills を作成してみましたので構築します。

簡単に自己紹介します。Microsoft 学生アンバサダー / Github Copilot User Group Japan の学生運営をしております。資格は Azure Solutions Architect Expert を取得しており、Azure と Github Copilot が大好きな大学二年生です。

大矢さんの記事「GitHub のアップデートを、Youtube ショート感覚でダラダラ見られる動画にしてみた」を読んで、「これ弊社のブログ記事でもできるじゃん！」ってなったのがきっかけです。GitHub Copilot Agent Skills × VOICEVOX × Remotion というスタック、すごくきれいにまとまっていて、読みながらワクワクしました。

ただ弊社の場合はすでに WordPress 向けの記事生成自動化の仕組みがあって、その延長で「記事からそのまま動画も作れたら最高じゃないか」という方向で組みました。大矢さんの設計思想（Agent Skills で台本生成 → ツール群でメディア変換）はそのまま参考にしつつ、スタックは Python + Gemini API + VOICEVOX + FFmpeg に寄せています。

このシステムで何ができるの？

技術ブログの記事（article.md）を渡すと YouTube アップロード用の MP4 が出てくる、それだけです。

裏で走っているのは4ステップで、

Gemini API が記事を読んで台本 JSON を生成
VOICEVOX（ずんだもん）がシーンごとの音声を合成
Pillow でスライド画像を作り、FFmpeg で音声と合成して MP4 に
YouTube 用のタイトル・概要欄・チャプター・サムネイルも同時に出力

入力は URL か記事ディレクトリの2パターン。blog_to_video.py が URL 版、article_to_video.py がローカルファイル版です。

全体アーキテクチャ

アーキテクチャを整理すると、大矢さんの「放送作家・声優・動画編集マンを監督が束ねる」構造とほぼ同じ考え方です。

役割	担当ツール	やること
監督	GitHub Copilot Agent Skills	全工程のオーケストレーション
台本作家	Gemini API (gemini-2.5-flash)	記事を読んで解説台本を生成
声優	VOICEVOX（ずんだもん）	シーンごとの音声を合成
動画編集	Pillow + FFmpeg	スライド生成・音声結合・MP4 出力

大矢さんは Remotion（React ベースの動画フレームワーク）を使っているのに対し、こちらは Python の Pillow で直接スライド画像を生成して FFmpeg でつなぐ構成にしました。Web フロントエンドの知識がなくても Python だけで完結するのが選んだ理由です。

GitHub Copilot Agent Skills の設計

このプロジェクトの核心は .github/skills/ 以下に置いた SKILL.md ファイル群です。大矢さんの記事で「プロンプトをコードと同じ作法で育てられる」と書いていた部分がまさにここで、Git で差分が取れて、チームで改善を積めるのが強みです。

作ったスキル一覧

wordpress-article/SKILL.md — 記事生成の司令塔

WordPress 向けの技術ブログ・セキュリティニュース・手順書・YouTube 動画生成を担うメインスキルです。Conductor → Sage → Detective という3つのサブエージェントを呼び出して、フェーズごとに役割分担しています。

フェーズ0.5 Detective : 動画を解析してシーン一覧を取得
フェーズ1   Sage      : ドラフト (draft.md) を作成
フェーズ2   Detective : 画像・スクショを抽出
フェーズ3   Sage      : 最終原稿 (article.md) を完成
フェーズ3.5 Company Reviewer : 社内ルール適合チェック
フェーズ4   Conductor : WordPress 用に画像パスを URL へ書き換え
フェーズ5   Conductor : Markdown → HTML 変換

directory-and-branch-creator/SKILL.md — ディレクトリ管理

記事ごとのディレクトリ（articles/blog/<slug>/）と Git ブランチを作るスキル。スラッグ生成と Input/ フォルダの準備まで自動でやってくれます。

wordpress-image-conversion/SKILL.md — 画像変換

ローカル画像を WordPress にアップロードして HTML の src を置き換えるスキル。

動画生成パイプラインの詳細

`blog_to_video.py` — URL から動画を生成

記事の URL を渡すと Web スクレイピング → 台本生成 → 音声合成 → 動画生成まで一括でやってくれるスクリプトです。

.venv\Scripts\Activate.ps1
python scripts/youtube/blog_to_video.py --url "https://yjk365.jp/blog/example/" --out example-article

処理の流れはこうなっています：

URL から記事本文・画像を取得（BeautifulSoup でスクレイピング）
Gemini API に記事本文を渡して台本 JSON を生成（gemini-2.5-flash）
台本の各シーンのテキストを VOICEVOX に渡して WAV ファイルを生成
Pillow でスライド画像を生成（背景 + 見出し + 箇条書き + キャラクター）
FFmpeg でスライド・音声・字幕を合成して MP4 を出力

`article_to_video.py` — ローカル記事から動画を生成

すでに article.md と Images/ が揃っている場合はこちらを使います。generate_blog_and_video.sh を叩くだけで最新記事を自動検出して動画を生成してくれます。

bash scripts/generate_blog_and_video.sh
# または特定のディレクトリを指定
bash scripts/generate_blog_and_video.sh articles/blog/my-article

出力ファイル

scripts/output/<slug>/
├── final_video.mp4     ← YouTube アップロード用（1280×720 HD）
├── thumbnail.png       ← Gemini が生成する 16:9 サムネイル
├── youtube_meta.txt    ← タイトル・概要欄・チャプター・タグ
├── script.json         ← 台本データ（内容を編集して再生成も可）
├── slides/             ← シーンごとのスライド画像
└── audio/              ← シーンごとの WAV ファイル

実際に作成してみた動画

実際に作成してみた動画はこちらです：

台本生成プロンプトのポイント

大矢さんの記事で「最初は narration が『公式ドキュメントの棒読み』だったのですが、Skill の Markdown に台本ルールを足しただけで一気に解説動画っぽさが出ました」という話があって、これはめちゃくちゃ共感しました。

article_to_video.py の中で Gemini API に渡す台本生成プロンプトもかなり工夫しています。ざっくり言うと：

オープニング→本題→まとめ の構成を固定する
各シーンに「ナレーション（喋るテキスト）」と「スライドのポイント（箇条書き）」を分けて出力させる
キャラクター（ずんだもん）の口調（語尾が「〜なのだ」「〜なのだ！」）を指定する
長すぎるシーンを分割するルールを書く

プロンプトを Markdown ファイルとして Git 管理できるのが Agent Skills の強みで、「このシーンの説明が長すぎる」「もっと丁寧に説明してほしい」みたいな改善を commit の形で積んでいけます。

VOICEVOX の音声合成まわり

VOICEVOX はローカルで動く HTTP API で、テキストを送ると WAV が返ってくる仕組みです。キャラクターが豊富で、ずんだもんを使っています（VOICEVOX 音源利用規約に従ったクレジット表記が必要です）。

# VOICEVOX API を呼ぶ部分（article_to_video.py より抜粋）
voicevox_url = "http://localhost:50021"
# 1. テキストをクエリに変換
query = requests.post(
    f"{voicevox_url}/audio_query",
    params={"text": narration_text, "speaker": 3}  # speaker=3: ずんだもん
).json()
# 2. 音声を合成
wav_bytes = requests.post(
    f"{voicevox_url}/synthesis",
    params={"speaker": 3},
    json=query
).content

Windows で実行する場合は VOICEVOX アプリを起動してから実行します。WSL2 環境の場合は Windows ホスト IP を自動検出して接続先を切り替える処理も入っています。

スライド生成まわり

動画の各シーンは Pillow で生成します。レイアウトは大矢さんの記事と同じ「3レイヤー」構造です。

┌────────────────────────────────────┐
│  背景（記事の画像 or 暗いグラデーション） │
│                                    │
│  見出し + 箇条書きテキスト           │
│                                    │
│                         ┌────────┐ │
│  字幕テロップ              │ ずんだ │ │
│                         │ もん   │ │
│                         └────────┘ │
└────────────────────────────────────┘

動画解像度は 1280×720（HD）、FPS は 30 固定。各シーンの最小尺は 4.0 秒です。

参考にした記事・ツール

大矢隆晟（日本マイクロソフト）「GitHub のアップデートを、Youtube ショート感覚でダラダラ見られる動画にしてみた」 — 本記事の設計思想の元ネタです。GitHub Copilot Agent Skills × VOICEVOX × Remotion という組み合わせのアーキテクチャ、めちゃくちゃ参考にさせていただきました。
GitHub Copilot Agent Skills 公式ドキュメント
VOICEVOX 公式
Gemini API（Google AI Studio）

まとめ

GitHub Copilot Agent Skills を使って技術ブログ → YouTube 動画の自動生成パイプラインを組んでみました。

組んでみて一番感じたのは、「台本の品質はプロンプトで決まる」という当たり前の事実を、Git の差分で確認しながら改善できるのがすごく良いということです。「このシーンの説明が雑すぎる」と思ったら SKILL.md に1行追加してコミット、それだけで次の動画から反映される。

LLM に任せるのは「記事を読んで台本を書く」部分だけにして、音声合成・動画合成はルールベースのスクリプトに任せる分離設計も、大矢さんの記事から学んだポイントでした。ブログを書いたら1コマンドで動画素材まで揃うのは、情報発信のハードルが下がる感覚がありました。

大矢さんの記事がなかったらこの設計にたどり着けなかったと思います。改めてリスペクトを込めて、参考にさせていただきありがとうございました！

今後の展望

ここまでで自動化できたのは大きく2つです。

動画 → 記事：収録した動画から GitHub Copilot Agent Skills が記事ドラフトを自動生成
記事 → 解説動画：article.md を渡すと Gemini × VOICEVOX × FFmpeg が YouTube 用 MP4 を自動生成

次にやりたいのは git push → WordPress 自動投稿 です。記事を書いてプッシュしたら、GitHub Actions が WordPress REST API を叩いて下書き投稿まで走る、そこまで繋がれば「書く → 動画にする → 公開する」がほぼワンフローになります。実現したらまたブログに書きます。

YJKにセキュリティ対応を相談する