先日、AIエディタのCursorを用いて「バイブコーディング（AIに身を任せる開発）」に挑戦してみました。
今回のお題は「誕生日サプライズサイト」。恋人や友人にURLを送るだけで、お祝いメッセージや思い出の写真を楽しんでもらえるWebサイトです。
1. 開発環境と使用技術
まずは準備として、以下の環境を整えました。
エディタ: Cursor（Proプラン / 月額$20）
Claudeと迷いましたが、エディタ一体型の操作性とスピード感を重視し、まずはCursorを選択しました。
技術スタック:
Next.js (App Router)
Tailwind CSS
Lucide React（アイコンライブラリ）
2. 構築の手順
① Vercelの準備
インフラには、モダンなWeb開発に特化したホスティングサービスであるVercelを採用しました。AWSに比べて設定がシンプルで、デプロイまでの自動化が非常に強力です。
② Cursor Agentへの指示
CursorのAgent機能（Composer）に対し、以下のプロンプトで指示を出しました。
「Next.js (App Router), Tailwind CSS, Lucide Reactを使って、[彼女の誕生日お祝いサイト] のプロトタイプを作って。ディレクトリ構成も任せる。」
これだけで、ディレクトリ構造からUIの実装まで一気に生成されました。この段階で、ローカル環境ではすでに完成に近いUIが確認できる状態になりました。
③ GitHubへのプッシュ
作成したソースコードをGitHubのリポジトリに紐づけます。これにより、コードのバージョン管理が可能になるだけでなく、次に説明するVercelとの自動連携が可能になります。
④ Vercelでのデプロイ
Cursor上で「Vercelを使ってデプロイして」と指示。すると、Vercel CLIを通じた環境変数の設定、サーバー構築、GitHub連携をAIが自動で代行してくれました。
発行されたURLにアクセスするだけで、世界中どこからでもサイトが見られる状態になります。
3. 完成したサイト
完成したプロトタイプのイメージがこちらです。
まとめと今後の展望
初めて「バイブコーディング」を体験してみましたが、開発のスタートラインに立つまでの圧倒的な速さに驚きました。
ここからは、Cursorと「壁打ち」しながら、より詳細な仕様の詰めや機能追加を行い、完成度を高めていきたいと思います。
次はClaudeとの比較も兼ねて、AIモデルを切り替えながら最適な開発スタイルを模索する予定です。これからも継続してアウトプットを続けていきます！