【Vibe Coding】Google AI StudioとNano Banana ProでWebアプリを数分で開発・公開する完全ガイド

1. Vibe CodingとNano Banana Proとは？

こんにちは、AIアーキテクトのOKIHIROです。今回は、開発者の常識を覆す新しい開発スタイル「Vibe Coding（バイブコーディング）」をご紹介します。

従来のアプリ開発では、プログラミング言語の文法を学び、エラーと格闘する必要がありました。しかし、Googleの最新開発環境であるGoogle AI Studioを使えば、「作りたいものの雰囲気（Vibe）と要件」をAIに伝えるだけで、コードが自動生成され、アプリとして動作します。

本記事では、Googleの最新画像生成モデル「Nano Banana Pro (Gemini 3 Pro Image)」を活用し、以下の2つのアプリを実際に作成します。

• Product Photo Enhancer: 素人が撮った商品写真を、プロ仕様のスタジオ品質に変換するアプリ
• Viral Thumbnail Generator: YouTubeでクリックされる「バズるサムネイル」を自動生成するアプリ

2. 必要な準備

開発を始めるために必要なものは以下の通りです。すべてブラウザ上で完結し、ハイスペックなPCは不要です。

• Googleアカウント: 必須です。
• Google AI Studioへのアクセス: aistudio.google.com にアクセスし、ログインしてください。
• GitHubアカウント: 作成したアプリを無料で公開（デプロイ）するために使用します。

特にNano Banana Proは、Gemini 3 Proをベースにした最新の画像生成モデルで、テキストのレンダリング能力や、プロンプトの理解力が飛躍的に向上しています。これをAPI経由で利用することで、高度な画像処理アプリが一瞬で構築できるのです。

3. アプリ開発実践：Product Photo Enhancer

では、さっそく1つ目のアプリを作りましょう。Google AI Studioを開き、新しいチャット（プロジェクト）を作成してください。

ステップ1: プロンプトの入力

画面下部のプロンプト入力欄に、以下の指示を入力します。

Build a web app with file upload for product photos, add a transform button that uses Nano Banana to convert basic product photos into professional studio quality images with perfect lighting and clean background. Add a prompt box in the app where images can be customized.

この指示だけで、Google AI StudioはHTML、CSS、JavaScriptを生成し、右側のプレビュー画面に実際に動作するアプリを表示します。ファイルアップロード機能や、Nano Banana APIを叩く処理もすべて自動で実装されています。

ステップ2: Vibe Codingによる修正（カスタマイズ）

生成されたアプリは既に動きますが、ここからが「Vibe Coding」の真骨頂です。コードを直接書き換えるのではなく、AIへの指示で修正を行います。

例えば、ボタンのテキストを変えたい場合、次のように指示します。

Change button text to say 'Make it professional' instead of 'Generate studio shot'.

また、生成される画像のスタイルを固定したい場合は、内部プロンプトの調整を指示します。

Change the Nano Banana prompt to always include: 'with dramatic shadows, and a pure white background'.

さらに、アプリのデザインを変更したい場合も、画面のスクリーンショットを撮り、「ここをもっとこうしたい」と丸で囲んで指示する（アノテーション機能）だけで、AIが意図を汲み取ってデザインを修正してくれます。今回は「ユーザー向けのプロンプト入力のコツ（Tips）」セクションを追加するよう指示し、UIをリッチにしました。

4. 応用実践：Viral Thumbnail Generator

次に、2つ目のアプリ「YouTubeサムネイル生成ツール」を作成します。新規チャットを開き、以下の要件を伝えます。

Build a web app for creating YouTube thumbnails. Add text inputs for video title and main text, a dropdown for style with options Bold, Minimal, Dramatic, and Playful. Use Nano Banana Pro to create 1280x720 viral style thumbnails.

重要なパラメータ調整

サムネイル生成において重要なのは、視認性とインパクトです。AIに対して、以下のパラメータをコードに反映させるよう指示します。

• 解像度: 1280x720 (YouTube推奨サイズ)
• スタイル強調: プロンプトに high contrast, bold colors, professional lighting を追加
• テキスト配置: ユーザーが画像のどこにテキストや自分の顔を配置したいか指定できる「アノテーションツール」の実装

驚くべきことに、「アノテーションツールを追加して」と指示するだけで、ユーザーが画像上に矩形を描いて配置場所を指定できる機能まで実装されました。これを手動でコーディングすれば数日はかかりますが、数秒で完了です。

5. GitHubへのデプロイと公開

完成したアプリを世界中に公開しましょう。これもGoogle AI Studioから直接行えます。

1. Google AI Studio画面右上の「Export」または「Download」ボタンをクリックし、プロジェクトをHTMLファイルとしてダウンロードします。
2. GitHubにログインし、新しいリポジトリ（New Repository）を作成します。名前は ai-product-enhancer など分かりやすいものにしましょう。
3. リポジトリ作成後の画面で「uploading an existing file」リンクをクリックし、先ほどダウンロードしたファイルをドラッグ＆ドロップします。
4. 「Commit changes」をクリックすれば完了です。

これで、あなたのコードはクラウド上に保存されました。さらにGitHub Pages機能を使えば、このリポジトリを実際のWebサイトとして無料で公開することも可能です。

6. まとめ

本記事では、Google AI StudioとNano Banana Proを組み合わせ、コードを1行も書かずに高度なWebアプリを開発する「Vibe Coding」の手法を解説しました。

重要なのは「どのようにコードを書くか」ではなく、「どんなアプリを作りたいか（Vibe）」を明確にAIに伝えることです。このスキルさえあれば、エンジニアでなくとも、アイデアを形にできる時代が到来しています。

ぜひ皆さんも、Geminiの力を借りて、自分だけのAIツールを開発してみてください🚀