はじめに
設計はClaude、実装はUIが得意とされるv0。
この分担で、架空アーティスト向けの公式サイトをお試しで作ってみた。
NEWS・LIVE・ディスコグラフィなどを、管理画面から自分で更新できるサイト。
📌 お試しで作成したサイト: https://createartistpage.vercel.app/
環境
- 要件定義〜設計: Claude
- 実装: v0
- フロントエンド: Next.js / TypeScript / Tailwind CSS
- バックエンド: Supabase（DB・認証・画像保存）
- ホスティング: Vercel
※ 独自のAPIは作らず、Next.jsがサーバー側でSupabaseから取得、管理画面はブラウザから直接Supabaseを読み書きするシンプル構成
開発の流れ
① Claudeと要件定義・設計
② 設計書をもとにv0で実装
③ Claudeでレビュー・修正
1. Claudeと要件定義・設計
実装前に、Claudeと壁打ちしながら要件定義・設計を進め、ドキュメントにまとめた。
整理内容から、主なものを抜粋（細かい部分は割愛）。
- デザインの雰囲気: モダン・ミニマル、モノトーン＋アクセントカラー1色
- ページ構成: TOPは縦スクロール1枚、NEWS・LIVEなどは一覧ページ、ディスコグラフィ画面、お問い合わせ
- 必要な機能: 各種情報の表示だけでなく、自身で管理（メンテナンス）できる機能
- DB設計、管理画面でできること
2. v0で実装
v0を使ってみた意図
- 「こんな画面を作りたい」を指示 → 画面生成 → プレビュー → 動作確認を、ブラウザだけで完結できる体験をしてみたかった
- バックエンドもだいぶ対応できるようになったらしいので、どんな感じか見てみたかった
使ってみて
成果物のクオリティとしては、依頼通りでそれなりのものはできた印象。
（というより、デザイン面はあまり細かく指示していなかったところは反省点...）
ただ、設計書に書いたことは、ほぼ修正指示なしで実装してくれた。
初回実装後、実施したのは「見た目の細かい調整を指示 → 実装」の繰り返しくらいで、機能観点で言うとしっかり実装してくれた印象。
※ 複雑な機能ではない、というのもあると思う
3. Claudeでレビュー・修正
ただ、Claudeで最終チェックしてみると、上記のv0に対する「見た目の細かい調整を指示 → 実装」の繰り返しによる負債が結構あった。
- 不要なCSS定義
- 使われていないパッケージ
- ちょっとした不具合
全体を見て、影響を考えながら直すのはClaudeの方がいいかなと思ったので、修正はClaudeに任せた。
まとめ
正直、Claudeでもいい感じのデザインのサイトは作れるので、v0のメリットはそこまで大きく感じなかった。
ただ、ブラウザだけでWEB UIのたたき台を作る用途なら、ありだと思う。