週末にほぼAI (v0・Claude Codeなど) が作った比較サイトをリリース - ほぼ2日で完成した個人開発の裏側

個人開発は楽しいですが、ゼロからすべて作ると週末だけではなかなか終わりません。
今回は、UI生成AI「v0」と「Claude Code」などを活用し、従来なら2日では終わらなかった開発を土日だけでリリースできた工程を紹介します。

このアプリの約9割はLLM（コーディングエージェント）による実装です。
人は仕様や品質ルールを考え、実装はAIに任せる――そんな進め方で短期間リリースを実現しました。

作ったのはこちら

https://www.shimizu-okini.com/

この記事では、使ったツールのセットアップから完成までの流れをまとめます。

また、コードやプロンプトの詳細より「どう進めて短期リリースしたか」という工程に絞って紹介してます。

作りたかったもの

一言で言えば、自分だけのおすすめ商品をまとめた比較サービスです。
日頃から「それの何が良いのか、買ってどうだったのか」を人に話すことがあり、その記録を Notion に溜めていたのですが、「公開してもいいかも」と思ったのがきっかけです。

いざ作るなら、一覧ページではカテゴリごとに絞り込みや価格順ソートをできるようにしたい、
詳細ページでは上記のエピソードをしっかり書けるようにしたいと考えました。
また、紹介動画も載せたかったので、動画URLの項目も追加しました。

あとの要件は以下くらいでしょうか。

• データは商品名・リンク・コメント・画像・動画・価格・カテゴリ・評価を保持
• 機能は並べ替え・カテゴリ別/星数絞り込み・検索機能に対応
• データはAPIベースで取得し、CMSから管理

どーやって作ったのか

まず全体像です。初回のみ行うセットアップと、その後に繰り返す開発サイクルを分けて図解しました。人が担う判断・設計と、v0やClaude Codeが担う実装がどの工程で作用しているかがわかります。

図のように、「つくるものを決める」から始まり、行う環境構築を経て、以降は Claude Codeなどが規約（コンテクスト）に基づいてコーディングを行い修正、ビルド、デプロイ、確認・改善指示というループを繰り返しました。

何を作るかを決める工程は人が意思決定を担いつつ、その後は v0 がUI生成で支援してもらい、コーディング部分も主にAI（Claude Code など）にやってもらいました。

作業時間の約9割はLLMとの対話でした。「コードを書く」というよりも、「仕様を正確に伝える仕事」に近い感覚でした。

技術構成

• フロントエンド: Next.js 15（App Router） + React 19
• ホスティング: Vercel（ドメイン取得もVercelを利用）
• 解析ツール: @vercel/analytics
• スタイリング: Tailwind CSS 3.4.17 + Shadcn UI（Radix UIベース）
• アニメーション: framer-motion
• CMS: microCMS

使用したAIツールは以下

• ChatGPT5: 作りたいもののイメージを具体化
• v0.dev: UI生成
• Claude Code や Cursor: コード生成

v0でUIを生成

今回使用したプロンプトは以下の通りです。

目的
自身が使って良かったモノを比較・推薦するサイトを作成したい。

データ構造の案
| フィールド | 型 | 備考 |  
| --- | --- | --- |  
| 商品名 | string | 必須 |  
| 商品リンク | string(URL) | アフィリエイトリンク対応 |  
| 推薦コメント | string | 体験ベース |  
| 写真URL | string(URL) | 複数でもOK |  
| 動画URL | string(URL) | YouTube URL |  
| 価格 | number | 税込み価格を想定 |  
| カテゴリ | string[] | 家電、本、ガジェットなど複数可 |  
| 評価（星） | number | 1〜5、ステップ1 |  

ほしい機能  
- 並べ替え（価格・評価順など）  
- 絞り込み（カテゴリ別、星の数など）  
- フリーワード検索（検索バー）  

v0に渡すプロンプトは、事前にChatGPTで要件を固めて一緒に下書きしました。

このプロンプトから生成された結果がこちらです。

コードが生成されていました。

微調整もしましたが最終的に「コードダウンロード」からコードを取得し、その後、ローカル環境へ移行し、shadcn addでコンポーネントを追加。

Claude Code やCursor でセットアップと改修

プロジェクト直下にCLAUDE.mdを置き、コーディング規約や開発コマンドを記載。

実装を会話形式で進行させて進めました。

CMS設定（microCMS）

実装手順については、解説記事が多数あるため、詳細は割愛します。

主にやったことは、microCMS上で「商品」スキーマを作成し、フィールドには以下を設定。

商品名、商品リンク、推薦コメント、画像URL、動画URL、価格、カテゴリ、評価（星）。

次に、作成したAPIのエンドポイントURLとAPIキーを取得し、Next.js プロジェクトの.env.local に環境変数として設定。

API経由でデータを取得できるようになり、一覧ページでは商品をカテゴリや価格順に並べ替えたり、詳細ページでは各商品の推薦コメントや画像・動画を表示するなど、基本的な構造がほぼ完成させました。

https://document.microcms.io/tutorial/next/next-top

デプロイ（Vercel）

一通り開発が終わったら、Vercelにデプロイします。

今回、ドメインは、Vercelの「Domains」機能を利用して取得しました。
Vercel上でDNS設定からSSL証明書の発行まで一括で管理できるので設定が簡単でした。

なお、このあたりの設定手順も、ドキュメントがあるため、詳細は割愛します。

https://vercel.com/docs/domains/working-with-domains/add-a-domain

コミット履歴ハイライト

行った作業内容のハイライトです。主要な変更点を抜粋し、要点のみを短くまとめました。

• microCMS 連携
• ESLint×Prettier連携と保存時フォーマットでコードスタイル自動化
• microCMSクライアント導入と一覧・詳細APIを集約
• カテゴリ / ☆☆☆☆☆評価 / ソートとURLの同期
• カードUIの修正
• react-icons を導入し、商品詳細ページに LINE 共有機能を実装
• モバイル対応
• sitemap/robots.tsの追加
• favicon/アイコンの追加
• framer-motion と LoadingAnimationの追加
• NotFound(404) を追加
• ドメイン変更対応
• プライバシーポリシーページを作成
• フッターに運営者情報を追加
• Footer を主要ページへ追加
• Playwright の追加
  • CLAUDE.mdにPlaywright MCPの使用ルール追記
  • リリース前の確認を自動実行する手順・期待値・事後処理・エラーハンドリングのガイドを追加
  • playwright-config.json を追加

見るとわかりますが、UI作成は v0 による生成を利用しているため、UI部分の開発は微調整の程度に収められ、工数を圧縮できました。

まとめ

AIの活用によって、プロトタイプから初期リリースまでの開発スピードを短縮できました。今後は、さらに人の工程をAIに任せながら、質を維持したままスピードを高める方法を検証していきます。

また、開発プロセスをMermaidで可視化したことで、どの工程から効率化すべきかが明確になりました。今回の整理を通じて、次の改善につながる振り返りができた点も大きな成果でした。

AIに実装を任せてみてわかったのは、初期設計の作り込みが大事かもしれないということでした。
例えば、プロンプトの具体性を上げるほど、コード精度が上がり、要件の具体性を上げるほど、テストのしやすさなどに影響すると思うからです。曖昧な仕様や中途半端な命名は混乱の元なので、ここは人間が丁寧に詰める必要があると感じました（それは人も同じか）。

また、当たり前かもしれませんが、効率を最大化するには、やっぱり人の手が挟まる箇所を必要最小限に抑えたプロセス設計が有効だと感じました。そういう意味でも、工程を可視化するのは良かったかもしれません。