無料の「Google AI Studio」で爆速開発！ 要望を伝えまくったら、早くもアプリが完成してしまった

　石丸氏は、アプリ開発の最初に使うツールとして「Google AI Studio」を指定した。

　「Google AI Studio」は、非エンジニアがつまずきそうな環境構築が不要なのがありがたいところ。早速、Google AI Studioにアクセスし、画面左側のメニューから［Build］を開く。中央にはチャット欄があり、ここにやりたいことを入力するだけでよいらしい。

　まずは手始めに、石丸氏への相談なしで、筆者の思うがまま「飲んだウイスキーの記録を付けるアプリを作って」とだけ入力し、［Build］ボタンを押してみると、63秒でいい感じのWebアプリが完成した。

飲んだウイスキーの記録を付けるアプリを作って。

　出来上がったアプリでは［ファイルを選択］をクリックして写真をアップロードすることはできたものの、登録しようとしたら商品情報を手動で入力するように求められた。

　見た目はいい感じなのだが、考えていたアプリではない。さすがに、シンプルなプロンプトで「こちらの意図を察しろ」というのは無理があった。そこで石丸氏に質問すると、「まずは作りたいアプリの設計図（プロンプト）を用意すること」というアドバイスをいただいた。

「GeminiなどのチャットAIに相談して『Google AI Studioでこういうアプリを作りたいから、指示出し用のプロンプトをマークダウン形式で書いて』と頼んでみてください」（石丸氏）

　通常のGeminiなら、毎日何時間も使っているので大得意だ。「AIに指示するための指示をAIに書かせる」というのはバイブコーディングっぽくて楽しくなってきた。自分で完全な指示を出す自信がないので、Geminiに逆質問させるように指示してみた。

Webアプリを作りたいので設計書を作ってください。情報が足りない場合は、私に質問してください。私に寄り添わず、最高のプロダクトを作るために、重箱の隅をつつく質問をし続けてください。十分に情報が集まったら、設計図を作成してください。作りたいのは、ユーザーが飲んだウイスキーの情報を登録するSNSです。写真をアップロードしたら、Geminiで分析させ、検索させ、銘柄や関連情報を調べてきて利用します。もちろん、コメントや飲んだ店の情報なども登録できるようにします。ほかにどんな情報が必要ですか？

　すると、さまざまな質問が投げかけられた。

　Webアプリか、ネイティブアプリかといったプラットフォームの想定、外部サービスへのシェア機能やデータの書き出し（CSVなど）の必要性、解析対象の枚数、解析失敗時の挙動、低画質写真への対応、表記揺れの処理（AI側で自動吸収してよいか）、ボトラーズや海外限定品をどこまで許容するかという情報の網羅性、プライバシー設定、言語対応、非同期処理の導入など、多角的に突っ込まれたので、すべて希望を伝えてみた。

　システム関連以外にも、ウイスキーのボトラーズ（瓶詰め業者）の扱いをどうするか、アルコール度数が通常のものとカスクストレングス（樽出し）をどう特定させるかなど、ウイスキー好きがこだわるポイントを聞いてくるのには感心した。

　ただし、唯一「『マスターDB』の考え方：既存のウイスキーデータベース（外部API等）は存在しないに等しい（特に日本語やボトラーズ）です。最初は『AIが検索して持ってきた情報を、その場で新しいマスターとしてDBに蓄積していく』という自律成長型DBの設計にしてもよろしいですか？」という質問にだけはどう返答してよいのかわからず、保留にさせてもらった。

　実際にアプリを作る際は、エンジニアが自分でこれらの情報を詰めていくのだろう。そこをGeminiに手助けしてもらえるのはすごく助かる。最後に「マークダウン形式で出力して」と指示すると以下のテキストが得られた。

# Whisky Log MVP: AI Analysis Prototype## 1. プロジェクトの目的バックエンドを構築せず、フロントエンドからGemini APIを直接呼び出し、ウイスキーボトルの写真解析と結果表示のUXを検証する。## 2. 実装範囲（Scope）- **カメラ・ファイル入力**: スマホカメラでの撮影、または画像ファイルを選択するUI。- **Gemini API 連携**:    - フロントエンドから直接、または簡単なAPI Route経由でGemini 2.0 Flashを呼び出し。    - 画像をBase64またはバイナリで送信し、構造化されたJSONデータを取得。- **解析結果の動的表示**:    - AIが抽出した情報をカード形式で表示。    - 確信度が低い（候補がある）項目を「チップ（ボタン）」として並べ、ユーザーが選択できる対話型UI。- **テイスティング・サジェスト**:    - AIが推測したフレーバータグを画面に並べ、タップでON/OFFを切り替えるUI。## 3. Geminiへのプロンプト定義（埋め込み用）AIへのシステム指示文：「あなたは世界一のウイスキー専門家です。提供された画像から以下の情報を抽出し、JSON形式で返してください。1. 銘柄・商品名（英語と日本語の両方）2. 蒸留所名3. ボトラー名（オフィシャルならその旨）4. 年数（熟成年数または蒸留年）5. アルコール度数（%）6. カスク（樽）の種類7. フレーバーのヒント（最大5つ、日本語のタグ形式）8. 確信が持てない項目がある場合、ユーザーに問いかけるための『質問文』と『選択肢の候補』を生成してください。」## 4. UI/UXフロー1. **Upload**: ユーザーが写真を撮る。2. **Thinking**: 「解析中...」のアニメーション表示。3. **Interactive UI**:    - 解析された基本情報を表示。    - 「このボトルの度数は55.2%で間違いないですか？」といったAIの問いかけと選択肢ボタンを表示。4. **Summary**: 最終的なボトルのスペックを画面に美しく表示（保存ボタンはダミーで可）。## 5. 技術スタック（推奨）- **Framework**: Next.js, Vercel- **Styling**: Tailwind CSS, Shadcn/ui（モダンなUIパーツ集）- **AI SDK**: Google AI SDK for JavaScript（@google/generative-ai）

　長々と相談した割には短く感じたが、プロンプトが完成した。

　石丸氏に見てもらったところ、AIモデルが古かったり、過去に使われていたSDKが指定されたりするなど、細かく見るとプロンプトに課題があるそう。それでも「とりあえずこのテキストをそのままでよい」とアドバイスをいただいたので、Google AI Studioのプロンプトに投入。すると、41秒でアプリが作成された。

　画面の印象は、先ほど作ったアプリに似ているが、きちんと日本語になっている。カメラを有効にするような画面で許可を押し、画像をアップロードする。数秒「解析中…」と表示され、調査結果が表示された。

　画面上部には、アップロードした画像の一部がイメージとして表示され、ウイスキーの商品名や蒸留所、熟成年数、アルコール度数、そして選択式のテイスティングタグまで表示されている。試しに、筆者が家で飲んでいたウイスキーの小瓶をアップロードしたのだが、正確に認識していた。

　設計図を作り込んだとはいえ、40秒ほどで動くアプリが完成したのには本当に驚いた。筆者の想定では、連載内でこのレベルに到達するまでに数カ月はかかると考えていたのだ。

　あまりの完成度に「もうこれで完成でいいのでは？」と浮かれ気分でテストを続ける筆者だったが、あるボトルを読み込ませたときに熟成年数や蒸留年が間違っているのを見つけた。

「これはハルシネーション（幻覚）や文字認識の誤り、あるいは熟成年数と蒸留年などの情報の取り違えが原因だと考えられます。画像内の文字が小さすぎたり、反射やピントのズレで情報が曖昧だったりすると、AIが根拠の弱い部分を推測で補ってしまい、結果としてもっともらしい誤りが出ることがあります」（石丸氏）

　やはり、人間のチェックは必要になりそうだ。そこで、この問題を修正しようと試みる。ここからが「バイブコーディング」の真骨頂。コードを書き換えるのではなく、チャット欄に自然言語で要望を伝えるのだ。

認識が間違っているときに、ユーザーが正しく修正できるように情報を入力し、再解析する機能を作ってください。

　すると、AIは即座にコードを修正し、画面右側のプレビューが更新された。

　数秒後には「間違っていますか？ 正しい情報を入力してください」というフォームが出現。そこに正しい情報を入れると、AIが再考し、正しいスペックが表示された。まるで隣に優秀なプログラマーがいて、口頭で指示を出しているかのようなスピード感だ。

　調子に乗った筆者は次々と要望を出していく。「テイスティングの感想を自由に入力できる欄が欲しい」「日付を設定できるようにして」など、思いつくままに指示を出すだけで、アプリがどんどんリッチになっていく。

　しかし、言葉だけで画面の修正指示を出すのは難しいこともある。「右上のあのボタンを……」と説明するより、指を差した方が早い。そんなときに便利な機能を石丸氏が教えてくれた。

「チャット欄にある選択ツールを使ってみてください。プレビュー画面上の修正したい部分を直接囲んで『ここを直して』と指示が出せます」（石丸氏）

　試してみると、これがとても便利だった。

　修正したい箇所をマウスでドラッグして囲み、「この部分のデザインを変えて」と入力するだけ。内部的にどのコードが対応しているのかをAIが自動で判断してくれるため、誤解が生じにくいのだ。

　続けてGoogle AI Studioに要望を伝えまくったところ、1時間もしないうちに、画像の認識から詳細データの表示、ユーザーによる修正機能、感想コメントの入力欄まで実装された。

　見た目は完全に、筆者が夢見ていた「ウイスキー記録アプリ」そのものだ。「すごい！ これもう完成してますよね」と興奮する筆者に、石丸氏は冷静に告げた。

「ブラウザーの更新ボタンを押してみてください」（石丸氏）

　言われるがままにリロードすると、先ほどまで入力していたウイスキーの記録はきれいさっぱり消滅していた。

「Google AI Studioで作ったこのプロトタイプは、あくまで『フロントエンド（見た目と動作）』だけなんです。データを永続的に保存する『データベース（バックエンド）』がつながっていないので、画面を閉じたり更新したりすれば、データは消えます」（石丸氏）

　なんと、これはまだ「張りぼて」なのだ。

　MVP（Minimum Viable Product：実用最小限の製品）として、機能の検証をするためのもので、実際に記録を残していくためには、裏側でデータを預かる金庫のような仕組みが必要になる。

「データベースを作る前に、まずはスマホでの動作確認をして、フロントエンドをある程度仕上げてしまいましょう。次回は、AI Studioで生成したコードをGitHubで管理して、差分管理や外部ツールへの引き継ぎができる状態にします。その後、データベースなどのバックエンド開発に入ります」（石丸氏）

　次回は、プロトタイプをスマホで開いてフロントエンドを完成させる。そして、GitHubと連携させるという。AIと石丸氏におんぶに抱っこの筆者は、果たしてデータベースという強敵を攻略できるのか。

（第3回へ続く）

IT・ビジネス関連のライター。キャリアは26年目で、デジタルガジェットからWebサービス、コンシューマー製品からエンタープライズ製品まで幅広く手掛ける。近年はAI、SaaS、DX領域に注力している。日々、大量の原稿を執筆しており、生成AIがないと仕事をさばけない状態になっている。

・著者Webサイト：https://prof.yanagiya.biz/

プロと実践！ ゼロから始めるバイブコーディング 記事一覧

柳谷智宣のAI ウォッチ！ 記事一覧