バイブコーディングRTAとは
マリオのRTAの動画を見ていて思いついた。これをバイブコーディングでやってみようと、
と言うことで、バイブコーディングRTAというのをやってみた。
RTAはスピードランのこと。バイブコーディングRTAは、AIをフル活用してWebサイトをどれだけ早く・それっぽく作れるかを競う遊びだ。
ただ、早さだけ追いかけると当然UIUXがぶち壊れたものができあがる。なので今回は「早さ」と「完成度」の両方を重視するというコンセプトにした。そのためにルールも事前に決めた。
ルール
今回のルールはこんな感じ。
完成条件：localhostで動くこと
計測開始：Desktopに新規フォルダを作成した瞬間
計測終了：動くのが確認できた瞬間（結構定義はあいまい）
開発ルール
- つかうAIは自由、バイブコーディング前提
- 人間による修正・デバッグもOK
- ただし、UIUXの基本構成の主導権は人間が持つこと（丸投げ禁止）
- 「どんなイメージで作ったか」を自分の言葉で説明できること
- 事前に準備したコードの持ち込み禁止
禁止事項
- UIが崩壊した状態で「仕様です」は通らない
- 実在企業のロゴを盗む
- 実在人物を勝手にCEOにする
必須ページ
| ページ | 要件 |
|---|---|
| TOP | 会社の顔。株価・謎統計・未来感を置け |
| ABOUT | CEOの思想を語れ |
| PRODUCTS | 雑AI製品一覧。適当そうだけど便利そうに見せろ |
| IR | 意味不明でもいいから株価を爆上げしろ |
| CAREERS | 狂った採用ページを作れ |
| CONTACT | 問い合わせフォーム。とりあえず動けばいい |
これを基に今回のRTAをやった。
作る会社：SlopAI Inc.
お題の会社はこれ。
理念：「0% Accuracy. 100% Deployment.」
ティッカー：SLLLLLLLLLOP
時価総額：$5T
前年比成長率：+8,000%
製品
- SlopChat
適当に返事する企業向けAIチャット - DeckForge
それっぽい資料を3秒で生成 - ReplyFast
メール返信を高速雑自動化 - MeetingSlop
会議内容を雰囲気で要約 - VisionMaybe
たまに全然違うものを認識する画像AI - InfiniteDraft
永遠に下書きを生成し続けるAI
"If users notice the bugs, we simply deploy faster."
（バグに気づかれたら、さらに速くデプロイするだけです。）
このふざけた会社のWebサイトを作成するというのが今回の案件。
特に記述がないところは自由に考えていいルール。
実際の制作過程
最初の10分：Codexと壁打ち
とりあえず最初はCodexを使用。
コードを書き始める前に、まずCodexとひたすら壁打ちをした。「どんなサイトにしたいか」「カラーはどうするか」「どんな雰囲気か」を会話しながら詰めていく作業。
ここで決まったのが、ブラック×シャンパンゴールドの高級感あるデザインに、カオスなコピーを平然と載せるというトーン。ページ構成や各セクションの配置もここで固めた。
一応NVIDIAと戦える時価総額がある会社なので王者感を出したかった。
重要
ここで気づいたこと：「こういうアプリを作ってください」とプロンプトを入れるよりも、「こういうものを作りたいんだけどどうすればいいか」と壁打ちを重ねて情報を溜めてから仕様書を書かせる方が、イメージ通りのものができる。最初から指示するのではなく、まず会話してから仕様に落とす、という順番が大事だと思った。
次の25分：GPT Image 2.0で画像を作る
コンセプトが固まったので、GPT Image 2で画像を生成した。
ヒーロービジュアル、ABOUT、IR、CAREERS、PRODUCTS、ロゴの6枚。Codexに画像を見せながら「こっちの方が合う」「もう少しダークに」と調整しながら進めた。
正直ここが一番時間かかった。 画像生成は難しい。自分は画像を作るのが得意ではないし、理想のビジュアルをプロンプトで表現するのがなかなか難しかった。結果的に6枚揃えるのに20分かかった。画像は制作工程の中でかなり重い作業だと改めて感じた。
残りの20分：Claude Codeで実装
画像が揃ったところで開発に入ろうとしたら、Codexのトークンが尽きそうになっていた。
なのでここからはClaude Codeに切り替えた。切り替える前にここまでの進捗と仕様なんかをCodexで作らせておいて、仕様書としてまとめた。それをそのまま「これでサイト作って」と伝えたら、あとはClaude Codeがそのまま実装してくれた。途中で画像パスが壊れたり微調整が必要な場面もあったけど、確認して修正指示を出すだけでスムーズに進んだ。
この20分は思ったよりずっとスムーズだった。 仕様書がしっかりしていたからだと思う。AIを途中でスイッチするのは少し不安だったけど、問題なかった。
記録：55分
完成タイムは55分。これが早いのか遅いのか正直わからない。
ただ自分はここの分野に関しては何もできないのでHTML/CSSを書いたら半日はかかると思う。今回はフレームワークなしのHTML/CSS/JSで6ページ、英語版と日本語版の2言語対応のサイトが55分でできた。外見だけのサイトではあるけど、見た目はかなりいいものができたと思っている。RTAで決めた要件も一通り満たせた
GitHubでも公開中：https://github.com/darudaruma/VibeCodingRTA
完成品
こんな感じのができた。よく見ると意味わからん。
ぜひやってみてほしい
このRTAのルールブックはこのリポジトリに入っている（RTA.md）。
誰でも同じ条件でチャレンジできるようにしてある。あなたが使っているバイブコーディングツールで何分で作れるか、ぜひ試してみてほしい。検討を祈る。