まず、私はプログラマーではありません。
でも今、自分で作ったWebアプリが公開されています。名前は NextPlay。積みゲーに悩む人に向けて、「今夜やる1本」をAIが選んでくれるゲームレコメンドアプリです。
この記事は「どうやって作ったか」の技術解説ではありません。非エンジニアが、AIを相棒に、ゼロからWebアプリを作り上げるとどうなるか——その体験記です。コードを書ける人にも、書けない人にも、読んでもらえると嬉しいです。
NextPlayって何？
一言でいうと「使うほど、自分好みに育っていくゲームレコメンドアプリ」です。
やることはシンプルで、時代・プラットフォーム・ジャンルを選ぶと、NextPlayが今の気分に合う1本を提案してくれます。提案されたゲームに「気になる」「遊んだ」「ブロック」「次へ」のどれかを返すと、その反応をもとに次の提案が少しずつ自分好みになっていく——という仕組みです。
Steam・PS・Switchなどプラットフォームをまたいで提案してくれるのが特徴で、「ゲームを探すのに無限スクロールしなくていい体験」を目指しています。
なぜ作ったのか
ゲームを探すとき、こういう体験をしたことありませんか。
ストアを開いて、新着を眺めて、ランキングを見て、レビューを読んで——そうやって30分使った結果、「まあいいか」でそのまま閉じてしまう。
「面白いゲームないかな」という気持ちはあるのに、候補が多すぎて選ぶ前に疲れてしまう。あの体験をどうにかしたくて作りました。
既存のまとめサイトや検索でも情報は取れるんですが、「自分の好みを知ったうえで、今の気分に合わせて1本だけ出してくれる」ものが見当たらなかった。だから作りました。動機はそれだけです。
「バイブコーディング」って何？
最近は更に進化して、コーディングエージェントと呼ばれるものもありますがく、ざっくりいうと
AIに話しかけながら、雰囲気でコードを作り進める開発スタイル
です。ChatGPTやClaudeに「こういう機能を作りたい」と伝えると、コードを出してくれる。それをコピペして動かす。詰まったらまたAIに聞く。この繰り返しです。
コーディングエージェントはこういったコピペ作業をも排除できます。
自分でコードを1から書く必要はほぼないんですが、「何を作りたいか」を正確に言語化する力は必要でした。AIへの指示が曖昧だと、的外れなコードが返ってきます。「誰が・何をしたとき・何が起きてほしいか」まで伝えると、精度が段違いに上がります。ここだけは人間の仕事でした。
開発の全体像：2026年2月〜の記録
開発期間はおよそ3週間。コミット履歴を振り返ると、こんな流れでした。
2/8〜：土台を最速で作る Next.js + Supabaseで骨格を組み、認証・ゲーム登録・一覧表示まで最短で通しました。完成度より「縦につながっていること」を優先した時期です。
2/14〜：プロダクトの軸を絞る 機能を増やしすぎてぼんやりしかけたところを、「次の1本を決めてくれる体験」という一点に絞り直しました。削ることに向き合った時期です。
2/17〜：AI推薦の品質を計測し始める 「なんとなく良さそう」の感覚評価をやめ、比較スクリプトを作って改善前後を数字で確認するようにしました。
2/22〜：サービスとしての体裁を整える デザインを刷新し、ランディングページ・利用規約・フッターを追加。「プロトタイプ」から「公開サービス」に変えた時期です。
詳しくは中編・後編で振り返ります。
使ったもの
- Next.js：Webアプリのフレームワーク。フロントとバックをまとめて扱える
- Vercel：アプリの公開（デプロイ）に使うサービス。GitHubと連携して、コードを更新すると自動で反映される
- Supabase：データベース＋認証をセットで提供してくれるサービス。無料枠が優秀
- Claude / ChatGPT：コードを書いてもらう相棒。詰まったらここに聞く
- RAWG API：ゲームデータベース。ゲーム情報はここから取得
- Tailwind CSS：スタイリング用。これもほぼAIが書いた
最初はこれらの名前すら知らなかったです。「何を使えばいいか」もAIに相談しながら決めました。
やってみたいと思ったら
バイブコーディングを試してみるとき、入門として手元に置いておきたい本を紹介します。
Webの仕組みをざっくり知っておく用
コードを暗記する必要はないですが、「HTMLって何」「APIって何」の雰囲気だけ知っておくと、AIへの指示の精度が段違いに上がります。
AIへの頼み方を磨く用
バイブコーディングの品質は「AIへの伝え方」で決まります。今回私はOpenAIのcodexでバイブコーディングしていますが、今からやるならこの本を読んでClaudeCodeで始めることがおすすめです。
次回：中編
中編では、最初の1週間で動くものを作る過程と、コア機能を実装する中でぶつかった壁を書きます。
AIが出してきたMVPは自分が作りたかったものと全然違った話、初めてのAPI連携、フィルタが空振りしてヒットゼロになった話——「動く」と「使える」は別物でした。
コメント