第一回Vibe-Coding1グランプリで銀メダル取った方法全部書く

はじめに

先日開催された第一回V-1グランプリ(V-1)で､ありがたいことに銀メダルを頂きました。

主催はAIエンジニアとして都知事選にも名乗りを上げて話題を集めている安野さん。錚々たる参加者の中でメダルを手にできたこと、本当に光栄に思っております。

もっとも今回はパイロット版で、参加者は6人の小規模な大会です。なので銀メダルと言っても大したことはないんですが、それでもメダルはメダルなので、大いにvibe-coding有識者として知見を語りたいとこの記事を書いています。

記事を読んでわかるのは2つ。

1. 第一回V-1がどんなものだったか。

2. そこで銀メダルを取ったvibe-codingのやり方。

皆さんの役に立ち、楽しんでいただければ幸いです。

作ったゲーム 10‑Second City

10-second city | ともき

10秒間で絵文字を並べて､高得点を狙うゲームです｡

evame.tech

第一回V-1グランプリ

第一回V-1グランプリは安野さんの以下のポストで幕を開けました。

たまたまこのポストを見かけて面白そうなので入ってみたところ、X Realをかけた猛者が二人いて、直感は間違ってなかったと確信しました。

タイムテーブル

・ルール決め: 20:00-20:15

・競技をやる: 20:15-21:15（一旦初回は1hで）

・審査をする: 21:15-21:45

・知見の共有: 21:45-22:00

ルール決めでは、「ゲームを作り、観覧者も含めて一人2票で投票」と決まりました。この時点で、技術ではなく面白さの勝負になると判断しました。

1hで技術的に凄いゲームを作るのは無理ゲーです。Vibe-Codingの場合､知らないコードだらけになるので､予期せぬバグで時間が溶けるリスクが高いです｡

なので、コアとなる実装は10分あればできる程度のもので、アイディアとUIにこだわり、ユーザーを楽しませることで勝負しようと決めました。

私のVibe‑Codingのやり方

私は適当なものを作るときは以下三段階で作ります｡

1. アイデア出し（約 10 分）

使ったモデル: o3
当時もっとも頼れるブレーンと判断し、ブレスト相手になってもらいました。お題は「ブラウザで遊べて一時間くらいで作れてコンテスト受けするゲームアイディア」。

ChatGPT上で何度も話し合った結果､以下のアイディアが出ました｡

どれも面白そうだったんですが､この中から10‑Second Cityにしました｡

理由は以下です｡

1. 外部 API 依存ゼロ

2. 絵文字で画面が映える

3. シムシティが好き

2. 実装フェーズ（約 10 分）

まずはリポジトリを作成。コマンドや環境構築は手で打ったほうが早いと思っているので､ここは人力です｡並行してo3 にコード生成を頼み、出力を cursor へ貼り付けます。この時点でゲームのコアとなる部分は動いていました｡o3の一発で動くコードを出す力は本当にすごいです｡

何度かプレイしてみると､採点基準が謎で運ゲーになっている､ボタンや点数が見にくい､UIが崩れている､等､足りない部分がいくつもありました｡

一旦vercelにデプロイし、ここからはcursorで､UIに強いsonnet3.7と一緒にブラッシュアップをすることにしました｡

3. ブラッシュアップ（残り 40 分）

ここでいくつもハプニングが起こります｡

• cursorが存在しないファイルを編集しまくり何度やってもエラー

• vercelでビルドエラー

• UIが永遠に崩れたまま

• 存在しないライブラリの存在しないAPIを使い始める

• cursorのapiが落ちる

vibe-codingは大体できたところからが本当に長いです。

TIPS:よく使われていて自分が知ってるライブラリに限定すると無限デバッグ地獄は減る｡

結果発表

• 🥇金メダル: 青山さん — キーワードに関連した絵文字が表示され、早押しでキーワードを当てるゲーム

  

• 🥈銀メダル: 私 — 10‑Second City

  

• 🥉銅メダル:安野さん — 量子テトリス（落下ブロックが量子状態で重ね合わせ）

  https://t.co/qlk7CD2SNP

まず驚いたのは､1hしかないにも関わらず､皆さんのゲームが普通に遊べるものになっていたことです｡今のツール環境なら、チームを組んで 1 日あれば売れるレベルのゲームが作れそうだと感じました。

また､個人的には安野さんの量子テトリスは非常に面白かったです｡(難しすぎましたが｡)

加えて､最もvibes高かったで賞を西尾さんに捧げたいと思いました｡西尾さんは開始直後から会話でDevinに指示を出してリポジトリの作成やデプロイを開始し、半端ねえvibesを感じましたし､その後も大会中ずっと会話で支持をしていてvibes半端ねえと感じたからです。

学んだこと

1. 採点ロジックをvibes任せにすると抜け穴だらけのvibesゲームになる｡

2. 何があっても大丈夫なvibesでいないとvibe-codingはできない｡

3. ライブラリの探索をvibes任せにすると､数年前に止まったライブラリでバグ地獄に陥る｡

デベロッパー向けまとめ

vibe-codingをしばらくやってわかったのは､AIが得意なところとそうじゃないところを見極めるのが重要だということです｡

例えば今回で言えば以下です｡

AIが苦手なこと

1. UI崩れの修正

2. 面白そうなルールの考案

AIが得意なこと

1. たたき台を作る

2. 全体のロジック修正

この辺の勘所さえわかっていれば､AIに無理なことをさせて無駄な時間を溶かすことも少なくなるはずです｡

おわりに

V‑1 グランプリは 「1hでも面白いゲームは作れる」 ことを証明してくれました。

次はもっとvibes上げて金メダルを狙います。

Evame グローバル開発者コミュニティのご案内

このサイトは、私が開発している開発者向けグローバルコミュニティ、Evameです。

開発者が､これまで開発したプロジェクトや､記事を投稿すると､自動でAIが多言語に翻訳します｡

まだまだ開発中なので､色々バグありますが､ぜひ使ってみてほしいです!