【はるフェス】はかせのバイブコーディングライブ! Claude Codeで何でも作る会！RemotionとMarpItで作る爆速動画生成装置

AICU春フェス2026もいよいよ最終日！急遽開催となったこのセッションでは、AICU代表 白井暁彦(しらいはかせ)による「バイブコーディング」の実演が行われました。今回のテーマは、Claude Code（クロード・コード）を駆使して、Markdownから動画を爆速で生成するシステムを構築すること。プログラミング未経験者でも「バイブス（熱量）」があれば、たった1時間で実用的なツールが作れる時代がやってきました。

X-Live動画視聴はこちら

https://x.com/i/broadcasts/1rGmqoVWovkGy

1. バイブコーディングとは何か？

かつてのホームページビルダーのような感覚で、AIと対話しながら「一言言うだけで勝手に作ってくれる」のが現代のコーディングです 。

爆速開発: WordPressなら1ヶ月かかるようなサイト移行も、実質5分〜2時間で完了可能 。

Day1のワークショップでは例として、会場となったクリプトラウンジGOXさんのサイトリニューアルを行いました。

元のサイト　https://cryptoloungegox.com/
1時間ほどの解説の裏側で出来上がったサイトは店長さんのリクエストで、スマホ対応・LINEお問い合わせ対応・現状のWordpressのデータを使った柔軟な移行を可能にしています。

https://akihiko.shirai.as/gox-sample/

未経験でも可能: 実際に2週間の講義を受けただけの学生たちが、多言語サイトやマイクラサーバー連携サイト、さらには楽曲の波形を表示する推し活サイトまで作り上げています。

https://akihiko.shirai.as/DHGSVR/DHGSVR25/

2. 爆速動画生成システムの構築実演

今回のデモでは、Marp（マープ）とRemotion（リモーション）を組み合わせたミュージックビデオ（MV）生成ツールを作成しました。

GitHubやセットアップ編についてはこちらをご参照ください

https://j.aicu.ai/MagV22

ステップ1：ブラウザ版Claudeでの要件定義

まずは、Claude（モデル：Opus 4.5）にざっくりとした「やりたいこと」を伝えます。

• プロンプト: 「これからミュージックビデオを作るツールを作ります。MarpItとRemotionを使って、動画と楽曲を合体させるツールです」。
• 対話を通じた仕様の具体化: AIからの「リリックビデオか、プレゼン風か？」といった質問に答えていくことで、MVP（最小限の機能を備えた製品）の設計図が即座に出来上がります。

ステップ2：開発環境への「引き継ぎ」と構造化

ブラウザで生成されたコードをローカル環境（Visual Studio Code）に展開します。ここで重要なのが、AIの「長期記憶」となるファイルの作成です。

• AGENTS.md: エージェント（AI）が守るべき仕様書。これを作成することで、開発方針のブレを防ぎます。
• skill.md: 一度成功した手順（ビルド方法や特定の操作）を「スキル」として定義し、再利用可能にします。

ステップ3：Claude Codeによる実作業

ターミナルから claude コマンドを起動し、日本語で指示を出します。

①日本語でお願い、これは何？
②ここから(or これまで)の作業を /docs/YYYY-MM-DD.md でブログにして
③じゃあそれで進めて
④もっと詳しく説明して
⑤次回の起動時に困らないように
⑥必要なツール(gh,node,...)のセットアップを進めて
⑦これをスキルにして　　これを対話的なスクリプトにして
アプリ版/Web版でのプロトタイプから..
⑧この作業をClaude Codeに引き継ぎたいので、
AGENTS.md込みで完璧に再現して実行するZIPを作って

• 指示: 「これは何？日本語で優しく説明して」「作業記録をブログ（YYYYMMDD.md）に残して」。
• フルオートモード: 初心者には非推奨ですが、信頼できる環境であれば「朝起きたら完成している」状態まで自動化可能です。

3. 実装された機能とツールの詳細

わずか1時間のセッション中に、以下の機能が次々と実装されました。

技術要素役割Marp (Markdown): 歌詞やスライド構成をテキストで記述。AIが最も読みやすい形式。Remotion (React): モーショングラフィックスをプログラムで制御。タイムライン編集を自動化。
FFmpeg: 動画のレンダリングと音声の合成を担当。yt-dlpYouTubeから（自社権利の）音源を抽出して開発に利用。

驚きの自動化テクニック

1. 音声分析: 楽曲（MP3）をAIが分析し、BPMやタイミングに合わせて歌詞を自動配置。
2. スタイル一括変更: 「中央下部に、赤文字・白縁・ゴシック体で」という指示だけでCSSを一新。
3. マルチアウトプット: 動画（MP4）だけでなく、同じ内容をパワーポイント（PPTX）形式でも書き出し。

4. まとめ：これからのクリエイターの姿

バイブコーディングの本質は「自分が学ぶこと」にあります。

AIに丸投げして終わりではなく、AIが書いたコードを通じて「Remotionならこう動くのか」「FFmpegのコマンドはこうなっているのか」を体験的に学習することで、個人のスキルが飛躍的に向上します。

「クリエイターがAdobe Premiereなどで人生を食い潰さないように、テクノロジーを標準装備してほしい」

というしらいはかせの言葉通り、面倒な作業はAIに、魂を込めるクリエイティブは人間に。そんな未来が、今まさにGitHubとClaude Codeの向こう側に広がっています。

次の一歩として：皆さんもぜひ、GitHubのアカウントを作成し、まずはClaudeに「これ、作れる？」とバイブスをぶつけるところから始めてみませんか？

次回のAICU Lab+勉強会は3/14(土)

ちょっと上のAIクリエイターを目指すアナタが仲間に出会える情報交流Zoom勉強会！

【セッション参加費】
定期購読[AICU Lab+] 参加者は無料＋アーカイブへのアクセス
(スポット参加は 5,500円)

次回内容(予定) 3/14(土)20:00- 開催予定です
・[ComfyJapan] 動画対応! 新型共有ComfyUIスタートガイド
・VibeCoding相談会

オンラインで参加して、講師に直接質問したり、特別な資料にアクセスできます。参加ご予約はこちら https://j.aicu.ai/LabYoyaku

Originally published at note.com/aicu on Mar 8, 2026.