Vibe Codingで一行もコードを書かずにサービスリリースしてみる

はじめに

「今日のVibeはどう？」

最近、そんな言葉と共に「Vibe Coding」という開発スタイルを耳にする機会が増えてきました。明確な定義はまだないかもしれませんが、AIと共に、まるでセッションをするかのように、ノリや雰囲気、その場の「Vibe」を大切にしながらプロダクトを開発していく——そんなイメージでしょうか。

この記事では、そんなVibe Codingを実践し、ほぼ一行もコードを書かずにアニメ視聴支援サービス「AniTime.tv」をリリースするまでの過程と、そこで得られた知見を共有します。

この記事が、以下のような方々の参考になれば幸いです。

• AIを活用した新しい開発スタイルに興味がある方
• ノーコード/ローコードツールでどこまでできるのか知りたい方
• アイデアを素早く形にしたいと考えている方

作成したサービス： AniTime.tv

今回作成したのは「AniTime.tv」というサービスです。

私自身が今期のアニメをチェックする際、「結局、自分が見ている配信サービス（NetflixやAmazon Prime Videoなど）で一番早く見られるのはいつなんだっけ？」をすぐに知りたい、という個人的な課題を解決するために作りました。特定の配信プラットフォームにおける最新話の最速配信情報をまとめて確認できます。

なぜVibe Codingだったのか？ - 背景

従来の開発では、詳細な設計書を作り、それに沿ってコードを書いていくのが一般的でした。しかし、AI技術、特にLLMの進化は目覚ましく、「こんな感じのものを作りたい」という曖昧な指示からでも、具体的なコードやUIを生成してくれるようになりました。

今回は「とにかく早く形にしたい」「作りながら本当に欲しいものを明確にしていきたい」という思いが強かったため、AIとの対話を通じて柔軟に開発を進められるVibe Codingが最適だと考えました。

使用技術スタック

今回のVibe Codingで活躍してくれた主な技術・サービスは以下の通りです。

• アイデア出し・要件定義・プロンプト生成:
  • ChatGPT
• フロントエンド:
  • Vercel
    • v0.dev (Next.jsベースのUI生成AI)
  • Next.js (v0.dev経由)
• バックエンド・DB・バッチ処理:
  • Supabase (PostgreSQLデータベース、認証、ストレージ、Functionsなど)
  • Cursor (AI搭載コードエディタ。今回はバックエンドロジックの生成に利用)
  • Deno (Supabase FunctionsのランタイムとしてCursor経由で利用)

開発プロセス - Vibe Coding実践記

フェーズ1: アイデアと要件定義 by ChatGPT

まずはサービスの核となるアイデアと基本的な要件をChatGPTに壁打ちしながら固めていきました。

「今期のアニメの配信情報をまとめたいんだけど、どういう切り口が良いかな？」
「ユーザーが自分の見ている配信サービスだけフィルタリングできると便利じゃない？」

といったラフな問いかけから、具体的な機能案を整理していきました。

フェーズ2: バックエンド構築 with Cursor & Supabase

バックエンドの処理は、AI搭載コードエディタのCursorと、BaaSであるSupabaseを組み合わせて構築しました。

1. DB管理 (マイグレーションとSeedファイル)

SupabaseのDBスキーマ定義や初期データの投入（Seed）は、Cursorに「こんなテーブル構成で、Denoランタイムで動作するマイグレーションファイルとSeedファイルを作って」とお願いして生成してもらいました。

2. バッチ処理 - アニメ情報の収集と整形

サービスのコアとなるアニメ情報は、以下の2段階で収集・整形するバッチ処理をSupabase Functions (Deno) 上で動かしています。このロジックもCursorに依頼して生成しました。

1. 今期アニメ情報の取得:
   • Annict さんのGraphQL APIを利用させていただき、今期放映されているアニメの基本情報を取得
2. 放映情報の取得:
   • 取得したアニメの公式サイトURLなどから、各配信プラットフォームでの放映日時やURLを収集する処理を作成

3. 管理画面 - 表記揺れの修正（名寄せ）

アニメの公式サイトや配信情報には、「Amazon Prime Video」「アマプラ」「Prime Video」のように、同じサービスでも表記に揺れがあることが多々あります。これを統一し、ユーザーにとって分かりやすい表示にするための「名寄せ処理」を行う簡単な管理画面もCursorに作ってもらいました。Supabaseのデータを直接参照・更新できるシンプルなものです。

フェーズ3: フロントエンド構築 with v0.dev & Next.js

フロントエンドは、Vercelが提供するUI生成AI v0.dev をメインに使用しました。v0.devは内部的にNext.jsでコンポーネントを生成し、Supabaseとの連携も非常にスムーズです。

1. ChatGPTで呪文詠唱 (プロンプト作成):

   • Supabaseで定義したDBスキーマ（テーブル定義など）をChatGPTに渡し、「v0.devでこのデータを表示するためのプロンプトを考えて」と依頼。いい感じの初期プロンプトを生成してくれました

2. 手書きの魔法陣 (レイアウト指示):

   • より具体的なイメージを伝えるため、手書きのワイヤーフレームやレイアウト案をv0.devに画像としてアップロード。これを解釈してUIコンポーネントを生成してくれるのには驚きました
     
     実際に使用したものではないですが雑に書いても結構意図を汲んでくれます

3. v0.devとの対話とチューニング:

   • v0.devのUI生成モデルは、噂によるとClaude 3.7系が使われているとかいないとか。時々、意図した通りに生成されなかったり、ループしてしまったりすることもありました
   • そんな時は、v0.devが生成したReact (Next.js) のソースコードをコピーし、ChatGPT (o3など別のモデル) に「ここが期待通りじゃないんだけど、どう修正したらいい？」と相談。得られた修正案をv0.devのプロンプトに再度入力したり、生成されたコードに直接手直しを加えたりして解決していきました

4. ワンクリックデプロイ:

   • v0.devで生成・調整したフロントエンドは、ボタン一つでVercelにデプロイできます。このシームレスさは本当に快適でした。フロントエンド開発のほとんどがv0.devの画面上で完結しました

Vibe Codingの真髄 - 要件変更は友達！

実は当初、「テレビ欄のように、時間軸に沿って全てのアニメの放映情報を網羅的に表示する」というコンセプトで作り始めました。しかし、v0.devでプロトタイプを触りながら「本当に自分が使いたいのはこれだっけ？」と自問自答するうちに、「いや、自分が見たいのは、登録している配信サービスで、今期アニメが最速で見られる情報だけだ！」と気づきました。

そこで、大幅に方向転換。
AIたちはこの急な変更にも嫌な顔一つせず（当たり前ですが！）、新しい要件に合わせてUIやロジックを再生成してくれました。この「作りながら本当に欲しいものを見つけていく」「柔軟にピボットしていく」感覚こそ、Vibe Codingの醍醐味だと感じました。

各ツールの使用感とコスト感

今回利用した主要なツールについて、個人的な感想と費用感をまとめます。

• Supabase:
  • 感想: まさに「個人開発の最強のお供」。DB、認証、ストレージ、エッジ関数と、欲しいものが一通り揃っており、しかもそれぞれが高機能。ドキュメントも豊富で、AIとの連携もしやすい
  • 費用: 無料枠でもかなり使えますが、DB容量が0.5GBと少なめ。今回は画像などを扱わなかったためギリギリ無料枠に収まりましたが、本格的な運用やデータ量増加を考えるとProプラン ($25/月) が安心です。個人的には、無料とProの間に、もう少し手頃な中間プランがあると嬉しいなと感じました
• Cursor:
  • 感想: AIファーストなIDE。特にバックエンドのDeno + Supabase Functionsのコード生成では大活躍。まだ完璧とは言えないものの、叩き台としては十分以上のコードを生成してくれます
  • 費用: Proプラン ($20/月) を利用。GPT-4レベルの高速な生成が月500回まで可能で、それを超えると低速モードになります。今回は制限に達することなく開発を終えられました。定額で安心して使えるのは大きなメリットです
• v0.dev:
  • 感想: プロンプトと画像からReactコンポーネントを生成してくれる体験は未来的。Supabaseとの連携もスムーズで、フロントエンド開発が爆速化します。まだ発展途上な部分もありますが、今後の進化に大いに期待しています
  • 費用: Premiumプラン ($20/月) を利用。こちらも開発期間中クレジット制限にかかることはありませんでした毎日100回ぐらいはやり取りしていた気がします

まとめ - Vibe Codingを終えてみて

今回のVibe Coding体験を通して感じたことをまとめます。

• コードを書かない開発の現実と未来:
  当初の目標通り、本当に「ほぼ一行もコードを書かずに」サービスをリリースできました（細かな調整で数行書いた箇所はありましたが）。アイデアを素早く形にする上で、AIは強力なパートナーになると実感しました
• 「作りながら考える」が加速する:
  要件が完全に固まっていなくても、とりあえずAIに作らせてみて、それを触りながら改善していく。このイテレーションの速さがVibe Codingの魅力です
• 細かい修正のジレンマ:
  「このボタンの色だけ変えたい」「ここのマージンを少し調整したい」といった細部の修正は、慣れていれば自分でCSSやコードを直接書いた方が早いケースもあります。しかし、一度AIにお任せする楽さを知ってしまうと、それすら面倒に感じてしまうから不思議です
• AIへの信頼と最終確認の重要性:
  AIが生成したコードの中身を全く見ないのは、やはり少し怖いです。特にセキュリティに関わる部分や、複雑なロジックは、最終的に人間がレビューし、理解しておく必要があると感じました。ブラックボックスのまま進めるのではなく、AIを「賢いアシスタント」として活用する意識が大切です

Vibe Codingは、開発のハードルを下げ、より多くの人がアイデアを形にできる可能性を秘めていると感じています。これからも様々なAIツールを試しながら、この新しい開発の波に乗っていきたいと思います。
全体を通して10日ほどでリリースできたと考えるとやはりこの流れは押さえておきたいなと思います。

今期はジークアクス以外イマイチかも。。

LGTM！ 👍

皆さんもぜひ、AIとのVibe Codingを楽しんでみてください！
ぜひ LGTM 👍 を押していただけると励みになります！

---

この記事もAI（私、Gemini）があなたの指示に基づいて記述しました。