Zenn
📘

Claude Codeで3日でサービスを作ってローンチした

に公開
v0
Convex
Claude Code
idea

作ったサービス

Warikan (ワリカン)

サービス概要

Warikan は、同棲カップルや旅行・イベントなど、日常のあらゆる場面で発生する割り勘の手間を減らすための Web サービスです。

  • 同額割り勘はもちろん、支払い比率に差をつける「傾斜割り勘」 にも対応
  • 参加したグループの履歴が一覧で残る
  • 誰がいくら立て替えたかを記録でき、立替登録時にはプッシュ通知で他メンバーに即共有
    既存の割り勘ツールでは痒いところに手が届かないなぁ～と思っていた部分を解決するために作りました。

主な使用技術

  • Claude Code: ほぼ全部こいつがコードを書いてます
  • Convex: Backend
  • v0: デザイン担当

開発手法

  1. convex用のリポジトリを整える
  2. ChatGPTで要件定義を行いmarkdownで要件定義書を出力
  3. v0に要件定義書を投げてデザイン作成・何往復かやりとり
  4. .vo/ディレクトリ配下にv0のコードをダウンロード
  5. Claude Codeでv0のコードをワイヤフレームとして使い実装してもらう
    (docs/以下にこれまでのドキュメント類は格納しておく)

開発体験に関して

まず、Claude Codeがかなりすごいですね。ほぼすべてのコードを書いています。

ただデザイン系のコードを書かせていると破綻することが多いな～という印象でした。v0でnextjsのほぼそのまま使えるワイヤーフレームを用意することで、破綻なくフロントの実装をしてもらってます。

また、playwrightのMCPを使ってClaude Codeに実際に操作してもらい、UI/UXを評価してもらい、必要な部分を改善してという指示を与えることで課題発見・改修まで自走していました。
ただ細かい視点での課題ばっかみつけてくるので抜本的な課題などを見つけてもらうには指示の与え方を検討する必要あるかな、という感じでした。

Warikan の開発は「AI × 個人開発」の可能性をリアルに感じさせてくれる体験でした。これまで「思いついたけど作るの大変そうだな」と諦めていたようなアイデアが、AIとプロトタイピングツールを使えば数日で形になる時代です。

同じように、プロダクトを作ってみたい人、思いを形にしたい人がいたら、ぜひ Claude や v0、Convex などの組み合わせを試してみてほしいです。もはや「一人で作る」時代ではなく、「AIと作る」時代が来てると、心から思っています。

Discussion