Google AI Studioでのバイブコーディング

使い方：例１

1. Google AI Studioのアプリ構築画面を開く

2. 2025年11時点では、おそらく、このアプリ構築画面は英語版しかありません。日本語インタフェースにしたい人は、たとえば、ChromeブラウザのGoogle翻訳機能で日本語を選んでおくといいと思います。

ChromeブラウザのGoogle翻訳機能は、外国語のウェブページを自動で翻訳したり、手動で翻訳したりできます。ページ上部に表示される翻訳アイコンをクリックするか、ページを右クリックして「日本語に翻訳」を選択することで利用できます。設定画面の「言語」設定から自動翻訳のオン/オフを切り替えたり、特定言語を自動で翻訳するように設定したりすることも可能です。 

3. 「Describe your idea（あなたのアイディアを書いて）」と記されたチャット入力窓で「4次元ポケット」のような感じで作りたいものを記入し、「Build（構築）」ボタンを押す

4. 完成するとPreview（プレビュー）画面が表示されるので、アプリの動作を試す

5. 改良したいところがあれば、対話窓で改良を依頼する。その際、対話窓の右下部の「鉛筆アイコン(Annotate appアイコン)」をクリックして、プレビュー画面上にアノテーションすることで、変更箇所と変更内容を直感的に指示することもできる。アノテーション操作は以下の通り：

   1. （初めてアノテーション機能を使うときは、アノテーション機能の解説動画や解説文が表示されるので、適当に見て、下部の「Continue（つづける）ボタン」を押す）

   2. コメント挿入、矢印挿入、テキスト挿入などのボタンが載ったパレットが表示されるので、（邪魔な場合は、邪魔にならない場所にパレットを移して、）適宜ボタンを押してコメントなどを挿入する（操作法は上記の解説動画を参照）。

   3. コメントなどを挿入すると、パレット上に「＋ Add to chat（チャットに追加）」ボタンが現れるので、それを押すと、チャット入力窓にスクリーンショットが添付され、「Apply the edits shown in the screenshot(s).（スクリーンショットで示した変更を加えて。） 」というプロンプトが自動記入されるので、その状態でチャット窓右下部の「↑アイコン：Send prompt（プロンプトを送信）」をクリック

6. 依頼に応じて変更されたアプリがプレビュー画面上に現れる

7. 適宜、改良依頼を繰り返す

8. 完成したら、画面右上部に「共有アイコン」（小さい〇3つが2本の線で結ばれたアイコン）があるので、適宜共有して下さい；他の人がアプリを動かせるためには、共有アイコンをクリックして現れる画面において、「Publish your app（アプリを公開する）」のスイッチをonにしておく必要があります。その上で、共有用のURLを「コピー」して共有して下さい。

使い方：例３

参考資料 Introducing vibe coding in Google AI Studio からの引用：

あなたの想像力を刺激するために、App Galleryを刷新し、Geminiでできることを網羅した、リッチでビジュアルなライブラリにしました。プロジェクトのアイデアを探り、すぐにプレビューし、スターターコードから学び、アプリをリミックスして自分だけの作品を作りましょう。 

例：Gemini Co-Drawingで遊んでみて、そこに自分のアイディアを加えて発展させる