Webアプリ開発が変わる
🎥 今回の参考動画はこちら ▼
1. Vibe Coding（バイブコーディング）とは？
こんにちは、AIアーキテクトのOKIHIROです。今回は、Google AI Studioが提供する革新的な開発手法「Vibe Coding」を使って、実際にWebアプリケーションをゼロから開発し、公開するまでの全工程を解説します。
Vibe Codingとは、従来の1行ずつコードを書くスタイルではなく、「こんな感じ（Vibe）のアプリが欲しい」とAI（Gemini）に指示を出し、リアルタイムでプレビューを見ながら対話的に修正を重ねていく開発スタイルです。
本記事のゴールは、React + Tailwind CSSを使ったモダンなWebサイトを作成し、Web3Formsでバックエンド不要のお問い合わせフォームを実装、最後にHostingerのクラウドサーバーへデプロイすることです。
2. 必要な準備（ツール・環境）
このワークフローを再現するために、以下の3つのツールを使用します。
Google AI Studio
Googleの最新モデルGemini 3 Proなどを無料で試せる開発環境です。ここで「Vibe Coding」を行います。Googleアカウントがあればすぐに利用可能です。
Web3Forms
サーバーサイドのコードを書かずに、HTML/Reactフォームからメール送信機能を実現するAPIサービスです。無料プラン（月250通まで）があり、プロトタイプ作成に最適です。
Hostinger (VPS / Cloud Node.js)
作成したアプリを公開するためのホスティングサービスです。今回はNode.jsアプリケーションに最適化されたプランを使用します。Git連携による自動デプロイが可能で、開発効率が劇的に向上します。
3. Vibe Coding開発ワークフロー徹底解説
それでは、実際の開発プロセスを見ていきましょう。今回は「コンサルティング会社のWebサイト」をリデザインするというシナリオで進めます。
Step 1: 参照画像のアップロードとプロンプト
まず、既存のWebサイトや参考にしたいデザインのスクリーンショットを撮ります。Google AI Studioのプロンプト欄に画像をドラッグ＆ドロップし、以下のように指示を出します。
この画像を参考に、ブラジルのコンサルティング会社のWebサイトをリデザインしてください。モダンでクリーン、かつ技術的な印象を与えるデザインにしてください。
Gemini 3 Proが画像を解析し、Reactコンポーネントとしてコードを生成します。右側のプレビュー画面で即座にデザインを確認できるのが最大の特徴です。
Step 2: 対話的な修正（Vibeの調整）
生成されたデザインがイメージと違う場合は、チャット形式で修正を指示します。
デザインが少し古臭いです。角を丸くしすぎず、もっとシャープで現代的なフォントを使用してください。
このように、コードを一切触らずに、自然言語だけでUIをブラッシュアップしていきます。これが「Vibe Coding」の真骨頂です。
Step 3: 画像とロゴの適用
プレビュー上の画像はプレースホルダー（仮画像）になっていることが多いです。Chromeの検証ツールなどを使って元のサイトから画像のURLを取得し、Geminiに以下のように伝えます。
以下の画像URLを使用して、メインビジュアルとロゴを差し替えてください。[画像URLリスト...]
Step 4: Web3Formsによるフォーム実装
お問い合わせフォームを機能させるために、Web3Formsを統合します。
1. Web3Forms公式サイトでメールアドレスを登録し、Access Keyを取得します。
2. Google AI Studioにこう指示します：コンタクトフォームのセクションを作成し、Web3Formsを使って機能するようにしてください。私のAccess Keyは [あなたのキー] です。
Geminiは適切なfetch処理を含むReactコンポーネントを自動生成してくれます。
4. Hostingerへのデプロイと公開
アプリが完成したら、世界中に公開しましょう。今回はHostingerのCloud Node.jsプランを使用します。
デプロイのポイント
Hostingerの最新のコントロールパネルでは、GitHubリポジトリとの連携が可能です。Google AI Studioで生成したコードを自分のGitHubリポジトリにプッシュし、Hostinger側でそのリポジトリを選択するだけで、ビルドから公開までが自動化されます。
環境変数の設定: Web3FormsのAPIキーなどは、コードに直書きせず、Hostingerの管理画面から環境変数として設定するのがセキュリティ上のベストプラクティスです。
5. まとめ
Google AI StudioのVibe Codingを使えば、エンジニアでなくても、あるいはエンジニアがモックアップを作る時間を、劇的に短縮できます。
重要なポイント：
- 視覚的な指示: スクリーンショットを渡すことで、言葉で説明するよりも正確に意図をAIに伝えられます。
- 対話型開発: 一発で完璧を目指さず、「もっとこうして」と会話しながら完成度を高めましょう。
- クラウド連携: Hostingerのようなモダンなホスティングを使えば、公開作業も数クリックで完了します。
Gemini APIの可能性を、ぜひあなたの手で引き出してみてください。未来の開発体験は、すぐそこにあります🚀
この記事の自動化に使われた技術と思考法は、
すべて私の講座で「思考OS」としてインストールできます。
ツールを「使う側」から、AIを指揮して「創る側」へ。
あなたも自分だけの自動化システムを構築しませんか？
