【Google AI Studio Build × Vibe Coding】使い方をサクッと解説！

ここでは、Google AI Studio Buildで作ってみたアプリを紹介します！

作り方も合わせて！

随時、制作アプリをアップしてきます！

1.Google AI Studio Buildとは？

Google AI Studioの「Build」機能は、自然言語による指示（プロンプト）だけでAIアプリケーションを迅速に構築・デプロイするためのツールです。

以下に詳細を解説します！

Build機能の本質

• Vibe Codingの実現：コードを直接書かず、AIとの対話（例：「インベーダーゲーム風のアプリを作成して」）でWebアプリを生成

• Geminiモデル連携：Googleの最新AIモデル（Gemini 2.5 Pro/Flashなど）をバックエンドで活用

主な特徴

1. プロトタイピング速度

   • プロンプト入力→数分で動作可能なアプリを生成（例：JS Invadersゲームの作成）

   • 生成コード：JavaScript/HTML/CSSベースでTailwind CSSを採用

2. 開発支援機能

   • AIデバッグ支援：実行時のエラーをAIが分析し修正案を提案

   • リアルタイム編集：生成後のコードを内蔵エディタで直接カスタマイズ可能

   • マルチモーダル対応：画像アップロードによるUIデザイン生成（例：Figma連携）

3. デプロイオプション

   • Google Drive保存：共有設定でチーム協働

   • Cloud Run連携：ワンクリックで公開URL生成

   • ソースコード出力：Zipダウンロードして自社環境で運用

具体的な開発ワークフロー

1. プロンプト入力 「レトロな宇宙射撃ゲームを作成。自機は↓キーで移動、スペースで攻撃」

2. AIが生成

   • ドット絵風キャラクター（👾🦀）付きのHTML5ゲームを自動構築

3. カスタマイズ // AIが生成したコードを編集（例：スコア機能追加） let score = 0; function addScore() { score += 100; }

4. デプロイ
   Cloud Runで公開 → 即時ブラウザプレイ可能に

2025年の最新アップデート

• UI刷新：開発者ダッシュボードでAPIキー管理を一元化

• スターターアプリ拡充：10+のテンプレート追加（動画分析/共同描画など）

• 無料枠：個人利用は基本無料（Gemini APIの過剰利用時のみ課金）

代表的な活用例

• ゲーム開発：インベーダーゲーム

• ビジネスツール：動画教材から教育用クイズ生成

• UIプロトタイピング：画像→Figmaデザインの自動変換

2.Google AI Studio Build 使い方｜API連携も

Google AI Studio Build 使い方は簡単です！

ステップ1：Google AI studio buildにアクセス

APIキーなしで使う場合はステップ4に飛んで下さい！

ステップ2：APIキーを取得

Get API Keyをクリックする

APIキーを作成をクリック

これで、GeminiのAPIキーを取得。

ステップ3：プロジェクトをコピー

できたプロジェクト番号をコピーする

ステップ4：プロンプトを書く

プロジェクトを貼り付けて、以下のように指示

プロジェクトでAIチームビルダーのアプリをreactベースで制作してください。
仕様はミッションをユーザーに確認して、各メンバーを構成して、職種ごとに人のアイコン画像を作ってください。

3.Google AI Studio BuildでAIアプリ作ってみた！

随時、制作したものをアップしていきます！

どんなものが作れるのか、
どこまでいけるのか、
検証していきます！

1.AIチームビルダー

一つ目は、「AIチームビルダー」です。

＜使い方＞
1)ミッションを伝えると、チームメンバー構築
2)メンバーが指示に沿ってアウトプットつくる

＜ポイント＞
API連携しているので、自動でアウトプットを生成

例）ブログ記事やXの投稿など

想像したものが、数分で作れるの、やっぱ凄いですね！

画像生成もいけますね。

良かったら、良いね！❤️お願いします！

制作がんばれます！

2.わくわくお話メーカー

子供向けの絵本作成アプリです。

いろんなお話を作ってくれます！

3.ブログ自動執筆アプリ

キーワードを伝えると、ブログの記事タイトル、リード文、本文、まとめ文を作成します！

Google AI Studio Build よくある質問

Google AI Studio Buildに関するよくある質問をまとめました。

Q:そもそも「AI Studioのアプリ」って何？

Q:アプリはどうやって動いているの？サーバーは必要？

Q:Google AI studio buildではAPI利用できる？

Q:アプリを共有したら、自分のAPIキーが他の人に見えちゃう？

Q: 作ったアプリは誰に見られるの？

Q:Google AI Studioは無料で使えるの?

Q:AI Studioの外で、ちゃんとしたWebサービスとして公開できる？

Q:具体的な開発手順は？

Q:開発時間の目安は？

Q:生成されるアプリの技術は？

Q: モバイル対応は？

Google AI Studio Build 使い方 まとめ

AI Studioのアプリ機能は、アイデアを素早く形にして共有できる、非常にパワフルなツールです。

特にAPIキーの取り扱いという重要なポイントさえ押さえておけば、誰でも安全にAIアプリの開発と共有を楽しめます。

まずは簡単なツールから、作ってみてはいかがでしょうか？

最後に・・・

バイブコーディングで作ったものご紹介！

ツールだけでなく、LPやWEBサイト、ポートフォリオも簡単にできます。

↓参考にしてみて下さいね。

そして、もっと本格的にバイブコーディングを学びたい方は、こちら↓

バイブコーディングマガジンを書いています！
参考にして下さいね。

初心者がサイト公開できるまで、解説しています！

この記事が参考になった！
得たものがあった！
という方は、良いねをクリックてしてもらえると、励みになります！