1. はじめに
皆さん、こんにちは
株式会社うるるで、出張撮影OurPhotoの開発を担当しているdoueです！
Geminiをはじめ、日進月歩で進化を続ける生成AI。コードを書くのが速くなった、というレベルではなく、もはや開発の進め方そのものが変わろうとしているらしい。
EMとして、そろそろ本気でキャッチアップせねばと、会社からの圧を感じて「そろそろマジでちゃんと体験しよ」ということで記事を書きました。
（バイブコーディングとはなんぞや。を理解したい。）
なぜやろうと思ったか
昨今、 「AI駆動開発 (AI-Driven Development)」 という言葉を耳にする機会が増えました。
そこで今回は、「要件定義からUI実装、そしてWeb公開までの一連のプロセスを生成AIに任せてみたらどれだけ”爆速”でできるのか？」という疑問を、実際に手を動かして検証してみました。
今回作るもの
題材として、 架空のAIレストラン「AI’s Table」 のランディングページを制作します。
※Geminiに考えてもらったレストラン
技術スタック
- 要件定義: Claude Sonnet 4 (対話を通じて、プロジェクトの骨子を固めます)
- UI実装: Bolt.new (プロンプトからReactコンポーネントを高速生成します)
- デプロイ: Netlify (おなじみの鉄板ホスティングサービスでサクッと公開します)
2. 【ステップ1】Claudeと要件定義 – AIはWebディレクターになれるか？
まずは、Claudeを起動します。
さっそくヒアリングから始めてもらえました。
今回は架空のAIレストランをGeminiに考えてもらっているので、Geminiに回答を作ってもらってそのままClaudeへ流します。
すると簡単な要件定義を提案をくれました。
ランディングページ要件定義書
1. ページ構成・コンテンツ要件
・ほげほげ（以下略）...
2. デザイン・UI/UX要件
3. 機能要件
4. SEO・マーケティング要件
5. コンバージョン最適化要件
キャッチコピーやメインコンテンツ、デザインコンセプトから、マーケティングまで
幅広く提案してくれています。
この方向性で細かい要件定義書を作ってもらいます。
※この後、Boltに流す都合で、マークダウン形式で吐き出してもらいます。
右側の要件定義書も全てお見せしたいところですが
とんでもなく長いので割愛し、すごいところをギュッとまとめました。
Claudeの要件定義のすごいところ
✅ 1. ビジネスの起点となる「ペルソナ」の解像度が異常に高い
「年収800万以上」「体験価値重視」とか、ペルソナの解像度がめちゃくちゃ高い。めっちゃ具体的で、後工程のデザインや戦略の方向性が一貫しているのがさらにすごい
✅ 2. コンセプトを体現するUI/UXへの深い言及
「電子ブルー」といった具体的な色や、「グリッチエフェクト」などのアニメーションまで細かく指定してきてくれています。コンセプトをデザインに落とし込む能力が(素人目で)デザイナーみたいに感じます。
✅ 3. 「体験」を売るためのコンテンツ設計が秀逸
料理紹介に「あなたの体験は完全にオリジナルです」という注意書きを提案。今回のレストランのビジネスモデルの本質を理解し、顧客の期待値を巧みにコントロールできていてるのはすごい。人間でもなかなか思い付かん
✅ 4. Webサイト制作の枠を超えた「マーケティング戦略」を内包している
詳細なSEOキーワード戦略から、マイクロコンバージョンや離脱防止策まで提案。Webサイト制作の枠を超え、もはやWebマーケターの領域に踏み込んでいます。もうなんでもありです。
✅ 5. 作って終わりじゃない「事業の成功」を見据えたKPI設定
「予約コンバージョン率: 3%以上」など、具体的な数値で成功指標（KPI）を定義。Webサイトを「作って終わり」ではなく、事業成長見越した提案も織り交ぜてくれているところはやばいです。
結論
Webディレクターどころか、マーケター、UXデザイナーなどなどスーパージェネラリストですね…驚きです。
以上で、要件定義は終わり、いよいよBoltに流します。
3. 【ステップ2】Bolt.newでUI実装 – 要件を爆速で形にする
Claudeでマークダウン生成した要件定義所をそのままコピペすればOKです。
こんな感じでやればとりあえず生成が始まります。（時間は7分くらいかかりました）
できました！
※後ほどデプロイした後にリンクを貼ります
レストランのコンセプトをGeminiで作ったので
自分自身でもいまいちどんなレストランなのか分かってなかったですが
生成されたページを見て、すごいレストランできたじゃねーか！！と驚きました。笑
boltにつくらせたやばいところ
💡まず、ファーストビューがアニメーション付きでやばすぎる
💡雰囲気にあった画像を生成してくれていて、そのまま使えそう
💡しかも何気に、出店場所が恵比寿。お店のコンセプトにも合った地域を選んでるようですね
💡モーダルやフォームもしっかり動くので、ガチでそのまま使える
結論
要件をコピペして動作確認するだけ、10分くらいでできました。
ざっくりコンテンツと中身は問題ないので、このままデプロイしてみます。
4. 【ステップ3】Netlifyでデプロイ – 3分で世界に公開
Boltは、Netlifyと連携しているので、Netlifyのアカウントを事前に作成し
Setting > Applicationsから、Netlifyをconnectしてください
Bolt上で、Deployをすれば勝手にNetlifyへデプロイされます。
デプロイが完了しました。
URLも生成されます。（Netlify側の管理画面にも表示されます）
デモはこちらです！！
結論
ぽちぽちしたらすぐできる。
5. おわりに（まとめ）
今回の学び
Claudeの要件定義の精度とクオリティはマジでやばい。簡単なランディングページくらいなら、ちょっとディレクションをかじってるくらいの人間(=自分)が頑張って考えるよりも圧倒的に早く圧倒的にレベルが高い。本当にこれだけで終わる。
細かいところの調整はClaudeで対話しながらカスタムできるので、好きにしたらいいと思う。
要件定義をしっかりすればBoltでのUI生成もかなり精度が高くなるんだろうと感じる。
ちなみに今回、ClaudeとBoltは無料枠の範囲内で完結したのも地味に嬉しい。
複数ページのwebサイトの場合
別のテーマで複数のページが必要なサイトをBoltにつくらせてみたが、UIの動作がちょっと変だったりするのでBolt上での調整は必要になる。
Boltは生成に時間もかかるので、ちょっとめんどいが、自分でコード書くよりは早い。笑
Reactがかけるなら、一旦叩きで作らせてから自分でコーディングするという手もあるだろう。
アプリケーションを作る場合
バックエンドが必要なアプリケーションなどの場合は、別ツールも使わないといけないが
MCPの仕組みが揃ってるのでなんとかなりそう。
supabaseというBaaSが使えるらしいので、次はこちらをトライしたい。
決済はStripeを使えば、個人開発でマネタイズもできる。オカネホシイ。。。
ちなみに今回参考にしたYoutubeはこちらです↓
プログラミングチュートリアル
AIを使って爆速でアプリ開発を行うためのコーディングワークフロー【バイブ・コーディング/AI駆動開発】
https://youtu.be/3RFQZsgZ3nA?si=quGVAP30lIXH-3XH
結論、ランディングページくらいなら、「人間がやるべき部分」はほぼ無い。
考察
「AIは仕事を奪う」とよく言われるが
奪うどころの騒ぎではない。
「開発プロセスを加速させる最高のパートナー」になってしまったなと感慨深い。
人の代替だけで止めるにはあまりにももったいない。非常に高い精度で構造的かつ多角的な視点、尚且つ一貫性を持った提案をくれる。
生成AIにそこまで精通していなかった自分としては
マジですげーーーーーー。というギャルみたいな感想しか出てこない。
マジすごかった。
以上
Views: 0
