コードで動く高品質な動画を、話すだけで作る
完成すると手に入るもの
自分でレンダリングした MP4 動画ファイル1つ(YouTube にそのまま上げられる画質)
Claude Pro 以上のプラン必須
バイブコーディングの頭脳です。まずは Claude Pro($20/月)で十分始められます。毎日たくさん作るなら Max プランが余裕があります。無料プランでも体験はできますが、すぐに上限に達します。
パソコン(Windows か Mac)必須
スペックはほとんど関係ありません。ネットにつながるノートパソコンで十分です。
Node.js(LTS 版)必須
コードを動かすエンジンです。nodejs.org で「LTS」と書かれた安定版を入れます。インストールはステップ1で一緒に行います。
VS Code(Visual Studio Code)必須
無料のコードエディタです。ここに Claude Code 拡張を入れて「AI と話しながらコーディング」します。Microsoft の Visual Studio(別の重い IDE)とは違うので名前に注意してください。
Remotion は「コードで動画を作る道具」です。React という Web 技術で画面を描くと、それを毎秒30枚つなげて動画に書き出します。難しそうですが、自分でコードを書くわけではありません。
あなたは Claude に「黒い背景に黄色い文字でタイトルが浮かび上がるイントロを作って」のように言うだけです。Claude がコードを書き、横の Remotion Studio に結果がリアルタイムで映ります。気に入らなければ「文字を大きく」「色を青に」と言い直すだけ。これがバイブコーディングです。
ヒント
このページ上部のイントロ動画も Remotion で作ったものです。最後まで進めれば、こんな動画を自分で作れます。
まずコードを動かすエンジン Node.js を入れます。nodejs.org にアクセスし「LTS」と書かれた大きいボタンからインストーラを入れ、「次へ」を押し続けます。
入ったか確認します。VS Code を開き、メニューのターミナル → 新しいターミナル(または Ctrl + `)を開いて、下のコマンドを1行ずつ入力し Enter を押します。
$node -v$npm -v
v20.18.0 10.8.2
こう出れば成功
v20.18.0 のようなバージョン番号が2つ出れば成功です。数字は違っても構いません。数字が出ること自体が「インストール済み」の意味です。
エラーが出たら？
code.visualstudio.com から VS Code を入れます。左の四角4つ(拡張機能)アイコンを押し、「Claude Code」を検索してインストールします。
サイドバーに Claude アイコンが出ます。クリックして「Sign in」を押し、開いたブラウザで Claude アカウントにログインすると、Pro/Max のサブスクが連携されます。これ以降は VS Code 内で Claude と話しながらコーディングします。
ヒント
Claude Code には日本語で話して大丈夫です。「なぜエラーになったの?」「ここをもっときれいに」と普段の言葉で頼めます。
エラーが出たら？
動画プロジェクト用の空フォルダを作ります。ターミナルに下を入力すると、デスクトップに my-video フォルダができてその中へ移動します。
またはエクスプローラーでフォルダを作り、VS Code のファイル → フォルダを開く でそれを開いて新しいターミナルを開いてもよいです。大事なのは「以後のコマンドをこのフォルダ内で実行する」点です。
$cd Desktop$mkdir my-video$cd my-video
注意
スペースや日本語が多く入ったパスは時々問題を起こします。できれば英語のフォルダ名(my-video)をおすすめします。
では Remotion を入れます。ターミナルに下の1行を入力し Enter を押します。少しすると質問が数個出ます。
プロジェクト名を聞かれ、テンプレートを選びます。矢印キーで「Hello World (recommended)」を選び Enter。必要なファイルを自動でダウンロードして入れます(1〜3分)。
$npx create-video@latest
┌ Welcome to Remotion! │ ◇ What would you like to call your video? │ my-video │ ◇ Choose a template │ ● Hello World (recommended) │ ◇ Installing dependencies... └ Done! Created your project.
こう出れば成功
最後に「Done! Created your project.」のような文が出れば成功です。フォルダ内に src などのフォルダと複数のファイルができています。
エラーが出たら？
入れたフォルダ内で下のコマンドを入力します。作業中ずっと開いておく「プレビュー画面(Remotion Studio)」を立ち上げるコマンドです。
少しすると「Server ready - Local: http://localhost:3000」のような行が出ます。ブラウザが自動で開くか、その住所を自分で開きます。サンプル動画が再生される Studio が現れます。
$npm run dev
> remotion studio Server ready - Local: http://localhost:3000
こう出れば成功
左に動画一覧、中央にプレビュー、下に再生タイムラインがある画面が Remotion Studio です。ここで作った動画をすぐ確認します。
ヒント
このターミナルは作業中は閉じないでください。閉じるとプレビューが止まります。別のコマンドが要るときはターミナルをもう一つ開きます。
エラーが出たら？
VS Code の Claude に作りたい動画を言葉で説明します。最初から大きくせず、1場面ずつ頼みます。例えば:
「黒い背景の中央に『VibeCampus』という白い大きいタイトルがゆっくり浮かび、その下に黄色いサブタイトルが続く5秒のイントロ場面を作って。」
Claude が src のファイルを直すと、開いた Remotion Studio が自動で更新され結果がすぐ見えます。気に入らなければ「タイトルをもっと大きく」「背景に紫の光のにじみを追加」と直し続けます。この反復がバイブコーディングの全てです。
ヒント
一度に一つずつ変えましょう。「大きく+色変え+音楽」を同時に頼むと、どこが変わったか分かりにくいです。小さく頼み、確認し、また頼むリズムが最速です。
エラーが出たら？
動画が気に入ったら本物の動画ファイルに書き出します(レンダリング)。ターミナルをもう一つ開き(Studio は開いたまま)下を入力します。MyVideo の所には Studio 左の一覧に見える動画名を入れます。
--crf=12 は画質設定です。数字が低いほど高画質で、このチャンネルは12に固定して最高画質で書き出します。進捗が100%になると out フォルダに video.mp4 ができます。
$npx remotion render MyVideo out/video.mp4 --codec=h264 --crf=12 --pixel-format=yuv420p
Bundling video... 100% Rendering frames... 100% (900/900) Encoding... 100% + out/video.mp4 (24.1 MB)
こう出れば成功
最後に「+ out/video.mp4」のような行とファイル容量が出れば完成です。ダブルクリックで再生し、そのまま YouTube に上げられます。
ヒント
縦ショート(1080×1920)が要るなら、横動画を作ってから ffmpeg で切り、上下にぼかし背景を入れる方法を Claude に聞いてください。このチャンネルもそうしています。
エラーが出たら？
おめでとうございます。コードを一行も書かずに高画質動画を作り書き出しました。これが本当のバイブコーディングです。
次は字幕、BGM、効果音、場面転換、データのアニメグラフまで全部同じ方法で頼めます。作った動画は VibeCampus の Studio や Launchpad に上げて、他のバイブコーダーと共有しましょう。
