「アプリを作ってみたいけれど、プログラミング学習で挫折してしまった」
「⁠業務効率化ツールが欲しいけれど、開発を依頼する予算がない」

そんな悩みを解決する新しい開発手法として注目されているのが「バイブコーディング」です。

本記事では、バイブコーディングを試せる「Google AI Studio（グーグルエーアイスタジオ）」の使い方を、2回にわたって解説します。

本連載は5月12日（火）に発売予定の『Gemini AI活用 最強の教科書』に書ききれなかった応用的な内容や最新のアップデートについて解説します。書籍をあわせて読むとさらに理解が深まることでしょう。

今話題の「バイブコーディング」とは

バイブコーディングとは、AIと対話しながらアプリを作っていく新しい開発スタイルのことです。

従来のようにプログラミング言語を習得し、一行一行コードを入力する必要はありません。人間が「何を作りたいか」を言葉で指示し、生成されたアプリを確認しながら修正していきます。実際にコードを書くのはAIの役割です。

バイブコーディングで重要になるのは、プログラミング知識そのものよりも「何を作りたいか」を具体的な言葉にする力です。

たとえば「家計簿アプリを作りたいが、プログラミング学習の途中で挫折した」という方でも、日本語の指示だけでアプリの試作を進められます。

また、現役エンジニアにとってもメリットがあります。「⁠社内ツールのモック作成に時間がかかる」「⁠環境構築が面倒」といった悩みを減らし、すぐに動くプロトタイプを作れるからです。

簡単なプロトタイプなら数分で試作でき、ある程度の機能を持つものでも数時間で形にできます。

このように、従来のプログラミングとは異なり、専属プログラマーに指示を出す「ディレクター」のような立ち位置で開発を進められるのが、バイブコーディングの特徴です。

では、この「ディレクター体験」を始めるには何が必要でしょうか。

用意するのはGoogleアカウントだけです。そして、その試行場となるのが「Google AI Studio（グーグルエーアイスタジオ）」です。

なぜGoogle AI Studioを選ぶのか？

Google AI Studioは、Googleが提供するブラウザベースの開発者向けツールです。Googleアカウントがあれば、GeminiなどのAIモデルを使い、プロンプトの検証やアプリのプロトタイプ作成をブラウザ上で行えます。

Geminiアプリが「AIを使うためのツール」だとすれば、AI Studioは「AIで何かを作るためのツール」です。具体的には、以下のようなことができます。

• プロンプトの作成・テスト（テキスト、画像、音声などマルチモーダル対応）
• 自然言語によるアプリのプロトタイプ構築（バイブコーディング）
• 生成されたコードの確認やローカル環境へのエクスポート
• 外部アプリと連携するためのAPIキー発行

Google AI Studioの利用には、無料枠と有料枠（クレジットカード登録）があります。基本的なAIのテストやアプリの試作は、無料でも始められます。まずは無料枠を利用して、バイブコーディングがどんなものか試してみるとよいでしょう。

Google AI Studioへのログイン手順

早速、Google AI Studioにアクセスしてみましょう。ブラウザ上で利用するため、面倒なソフトのインストールは不要です。

手順1

Google AI Studioにアクセスし、画面右上の「Get Started」をクリックします。

手順2

初回アクセス時は画面上に利用規約の同意画面が表示されるので、内容を確認してチェックを付けて「続行」をクリックします。

Google AI Studioの基本画面

ログインすると、左端にメニューが表示されます。画面は英語ですが、構造はシンプルなので、少し触ればすぐに慣れると思います。入力するプロンプトは日本語にも対応しているので安心してください。

メニューの中で、メインで使うのは「Playground」と「Build」の2つです。

Playground（プレイグラウンド）

Playgroundは、GeminiなどのAIモデルを試す場所です。AIと対話しながら、テキストからの文章生成や画像生成、動画生成、要約、分析などが可能です。

Geminiアプリと似ていますが、AI Studioでは最新モデルの試行やパラメータ調整など、より開発者向けの細かい制御が可能です。

Build（ビルド）

Buildは、自然言語でアプリを作る場所です。「⁠こんなアプリがほしい」と文章で伝えるだけで、AIがコードを生成し、画面右側にプレビューが表示されます。

今回のバイブコーディングでは、このBuild画面を使います。

※以前のAI Studioでは目的ごとにページを移動する必要がありましたが、2026年3月〜4月のアップデートで大幅に刷新されました。「⁠Playground」はテキスト・画像・音声の機能が1画面に統合。「⁠Build」も画面上での直接修正や、Firebaseによるデータベース連携に対応しました。「⁠プロンプトを試すツール」から「アプリを丸ごと作れるプラットフォーム」へと進化しています。

実践！ 文章校正アプリを5分で作ってみよう

それでは、ここからは実際に簡単なアプリを作成してみましょう。今回は、日本語文章の誤字脱字や、不自然な表現をチェックする「文章校正ツール」を作成します。

手順1

Google AI Studioの左メニューから「Build」をクリックした状態で、画面右上の「設定」（⁠歯車）ボタンをクリックします。

手順2

「Select model for chat」で、利用可能なモデルを選択します。モデル名は時期によって変わります。ここでは「Gemini 3.1 Pro Preview」を選択しました。

手順3

今回は、プロンプト欄に以下のように入力します。

日本語の文章校正ツールを作成してください。

入力したら「Build Ctrl」ボタンをクリックするか、「⁠Ctrl」キーを押しながら「Enter」キーを押します。なお、Geminiアプリでは「Enter」キーで送信できますが、Google AI Studioは「Ctrl」キーを押しながら「Enter」キーで送信です。

手順4

少し待つと右側にアプリのプレビューが作成されます。

テキストエリアに、「⁠朝早く起きれれたら連絡します。」のような不自然な文章を入力してテストしてみましょう。

「校正する」ボタンをクリックして、校正結果が表示されるか確認します。

なお、同じプロンプトを入力しても、その都度回答を生成するため、全く同じ結果が表示するわけではありません。

アプリのUIと機能をブラッシュアップしてみよう

プロンプトを一度入力しただけで、必ず理想どおりのアプリが完成するわけではありません。むしろ、AIが作ったものに対して「ここをこうして」と修正を重ねるプロセスを楽しむのが、バイブコーディングの醍醐味です。

追加の指示は、左下のプロンプト欄に入力して送信します。

たとえば、次のような指示が使えます。

・修正箇所はハイライトで分かりやすく示してください。
・入力した文章と生成後の文字数をカウントする機能を、テキストエリアの右下に追加してください。
・校正のトーンを「ビジネス向け」か「カジュアル」かを選択できるボタンを追加してください。
・結果表示エリアの背景色を、薄い黄色に変更してください。

Google AI StudioのBuild画面では、テキストで指示するだけでなく、画面上の要素を選びながら修正を依頼することも可能です。

文字の変更や色の変更など、「⁠どの部分を変えたいか」を画面上で指定できるため、言葉だけでは伝わりにくい修正に便利です。

画面右上にある「Edit tool」ボタンをクリックしてみましょう。

すると、画面下部に「Annotate mode」と「Focus mode」のボタンが表示されます。

どちらも画面上で直接指示を出すための機能ですが、用途によって以下のように使い分けます。

たとえば、空欄が目立つ場所がある場合、「⁠Annotate」ボタンをクリックしてざっくりと丸で囲み、「⁠ここに使い方の説明を入れてください。」とプロンプト欄に入力して送信します。

一方、特定の要素に対して変更を加えたいときは、「⁠Focus」ボタンをクリックします。

たとえば、ボタンの絵を変更したい場合は、対象のボタンをクリックして選択し、「⁠このアイコンを鉛筆のアイコンに変えてください。」と指示するだけです。

このように、空間や配置をざっくり変えたいときは「Annotate⁠」⁠、特定の要素を変えたいときは「Focus」といった具合に使い分けます。

また、コード編集も可能です。プレビュー画面上部の「Code」ボタンをクリックすると、単なる1枚のHTMLではなく、package.jsonやsrc/App.tsxなどを含む、本格的なプロジェクト構造が表示されます。

「大枠のUIはAIに作らせて、複雑なロジックは手動で書き換える」といった使い方も有効です。

生成されたコードをローカル環境に移行して、本格的な開発を続けることも可能なので、現役エンジニアの方にもおすすめです。

画像やグラフからアプリを作る

ここからは、文章校正ツール以外の活用例を2つ紹介します。

【1】画像からUIを生成する

プロンプト入力欄の「＋」から「Upload Files」または「Drive」を選択すると、画像を添付できます。

手書きのワイヤーフレームや既存ツールのスクリーンショットをアップロードし、次のように指示するだけで、デザインの意図を汲み取ったUIを生成できます。

この画像と同じレイアウトの入力フォームを作ってください。

【2】ダミーデータでダッシュボードを試作する

従来、バックエンドやデータベースが完成するまで画面のテストができないこともありました。しかしAI Studioなら、ダミーデータを使ってグラフを含む画面を素早く試作できます。

たとえば、プロンプト欄に次のように入力します。

カフェの月間売上と客数の推移がわかるダッシュボードを作成してください。30件のダミーデータを自動生成して、Chart.jsの「棒グラフ」で表示してください。グラフには、スムーズに動くアニメーションを必ずつけてください。

すると、グラフを含めた画面が作成されます。グラフのアニメーションは初回読み込み時の1回だけ再生される場合がありますが、プレビュー画面上部の更新ボタンをクリックすると、再度確認できます。

これならバックエンドが未完成でも、本番に近い画面の動作確認や顧客向けのデモンストレーションができます。

作成したツールは、画面左のメニューにある「Build」の「Apps」から確認でき、あとから編集可能です。

Google AI Studio利用にあたっての注意点

バイブコーディングを使えば、自分の言葉で直接アプリを試作できます。「⁠エンジニアに要件が伝わらない」といったもどかしさから解放され、試作と改善のサイクルを速く回せるのがメリットです。

ただし、便利な一方で以下のような注意点もあります。

【1】情報の取り扱いに注意する

Google AI Studioでは、基本的なAIのテストやアプリの試作を無料枠から始められます。

ただし、無料枠では、入力や出力などのコンテンツがGoogleのサービス改善に使用される可能性があります。そのため、会社の機密情報、顧客の個人情報、パスワード、APIキーなどは入力しないよう注意しましょう。

業務データをそのまま貼り付けるのではなく、匿名化したサンプルデータや架空のデータでお試しください。

【2】コードを鵜呑みにせず⁠、本番前はレビューを行う

AIが生成したコードは完璧ではありません。バグや脆弱性、不自然な実装が含まれることがあります。そのため、本番環境で運用する前には、必ず人間がコードを確認しましょう。

特に、次のような点は重点的に確認が必要です。

• APIキーやパスワードがコードに直接書かれていないこと
• 個人情報の取り扱いに問題がないこと
• 認証・権限管理に不備がないこと
• エラー処理が適切に実装されていること
• 生成されたコードが、連携する外部ツールやシステムの仕様に沿っていること

【3】用途に合わせてツールを使い分ける

AI Studioは、手軽に試作できる強力な実験環境です。一方で、本格的な運用フェーズに入る場合は、料金、セキュリティ、認証、データ管理、監査ログなども考慮する必要があります。

業務システムとして本番運用する場合は、「⁠Gemini Enterprise Agent Platform（旧称Vertex AI⁠）⁠」への移行を検討しましょう。認証・権限管理・ログ管理・データ保護などを含め、より実運用に適した設計がしやすくなります。

なお、利用できるモデルや無料枠の上限、料金条件は変更される可能性があります。実際に使う前に、Google公式サイトで最新情報を確認してください。

本記事のまとめ

今回はバイブコーディングの基本から、Google AI Studioの「Build」機能を使ったアプリの作成手順、AI Studioの利用にあたっての注意事項を解説しました。

次回は、より効果的なプロンプトの書き方、APIキーの設定、作成したツールをWebアプリにする方法を解説します。

まずは本記事を参考に、Google AI Studioにログインし、「⁠文章校正ツール」を作りながらバイブコーディングを体験してみてください。