Geminiビルドモード試行紹介

DevFest Kyoto 2025 2025-11-30 13:30-17:00 Build mode in Google AI Studio プロンプトから Webアプリ 最初の一歩 試行紹介 Noriko Takiguchi GDG Kyoto: Co-Organizer Programmer

Build your ideas with Gemini Google AI Studio Build の Start ページを開くと 目に飛び込んでくるセンテンス

何にしようか ～ アイデアのきっかけ 予定していること 大阪から名古屋まで行く方法？ 電車限定で 旅程を決める要因は他にもあるけど 運賃 高い 東海道 新幹線 時間 速い 安い ＞ 近畿特急 ＞ JR在来線 遅い

何にしようか ～ アイデアのきっかけ 運賃のみに着目 大阪-名古屋 JR在来線でより安く 運賃 安い 経験から JR在来線 時間 遅い 長距離乗車時、 途中下車（切符を分割購入） した方が安くなる

Start with Prompt ➢ プロンプトを作成 ● Start ページ入力エリアに説明を入力 ← 今回試行 ● 音声入力・ファイルアップロード指定も可能 ● 特定機能の追加指定可能 ■ [I'm feeling lucky]ボタンや Supercharge your apps with AI 一覧 ➢ プロンプトを実行 [Build] ボタン ● チャットパネルに応答あり ● Webアプリ自動作成 ■ デフォルトでは React Webアプリ

Step1 : アイデアを入力＆ Build 思いつくまま説明文を入力 → [Build]ボタン クリック 処理開始後、まずは「停車駅を調べます」といったメッセージが出た なかなか段取りいいなあといった感触

Step1 : 初期ファイル自動生成 Webアプリ自動生成 Gemini3 Pro Preview Ran for 25s 7種類のファイル生成 Codeタブ コード閲覧・編集可能

Step1 : 生成WebアプリPreview A ➢ アプリ名自動生成 JR Split-Fare Optimizer C ➢ HTML構成 ← 問題ない A. タイトル B. 入力エリア C. 検索ボタン D. 検索結果エリア B D 検索してみたら 運賃がおかしい 区間あり

Step1 : WebアプリPreview D 運賃がおかしい区間あり

Continue building ➢ プロンプトを作成 ● ● ● ● チャットパネルの下部の入力エリアを使う Gemini への修正依頼 内容を記載する ← 今回試行 音声入力・ファイルアップロード指定も可能 Preview画面での直接指示の適用も可能 ➢ プロンプトを送信 [↑] ボタン Make Changes, add new Features, ask for anything ● チャットパネルに応答あり ● 適宜ファイル自動更新 ■ Webアプリの入力エリア文言も自動整理されていく ↑

生成Webアプリ最新状況 プロンプト修正 5回 繰り返す 正しい分割区間の運賃 安い順 OK 他に安い分割例があるかは未検証 JR Split-Fare Optimizer 自動生成されたアプリ名 An intelligent travel assistant that calculates cost-saving split-ticket (bunkatsu) routes for JR lines using Google Gemini 2.5 Flash. JR分割運賃オプティマイザー Google Gemini 2.5 Flash を使用して、JR 線のコストを節約できる分割チ ケット (分割) ルートを計算するインテリジェントな旅行アシスタント。

入力エリア：自動整理された説明文 大阪から名古屋へ JR東海道本線（新快速）を利用して移動します。 直通運賃（約3410円）と比較して、京都、米原、岐阜などで分割購入（途中下車）することで安くな るルートを、安い順に 3つ提案してください。 【重要】 ・大阪-米原の運賃は 1730円ではなく1980円（JR西日本）、米原 -名古屋は1340円（JR東海）で計 算してください。 ・最新の運賃表を確認してください。

正しい区間運賃 安い順 見出し：複数駅名表示 Step4から 駅名英語表記に

Verified sources（検証済みの情報源） Google Search で現在の運賃を確認したサイト一覧 JRのサイトを 直接参照しているわけではない

まとめ～感想 Google AI Studio プロンプト入力による Build の試行限定 ➢ プロンプトの作成テクニックを磨く ● ● ● ● よき相棒だが 生成アプリの 検証は必要 目的、条件は正しく記載 具体的な参照先や指示 文章表現力（適格に） AIの間違いを指摘できる → Gemini は素直に応対 ➢ テーマ・アイデア ● 身近なことでも OK（個人情報は NG） ● まずはシンプルに試す → 汎用的なものにも挑戦

参考リンク ➢ Build mode in Google AI Studio ○ https://ai.google.dev/gemini-api/docs/aistudio-build-mode ➢ Gemini 3 Developer Guide ○ ➢ https://ai.google.dev/gemini-api/docs/gemini-3 Google AI Studio quickstart ○ https://ai.google.dev/gemini-api/docs/ai-studio-quickstart

• https://ai.google.dev/gemini-api/docs/aistudio-build-mode
• https://ai.google.dev/gemini-api/docs/gemini-3
• https://ai.google.dev/gemini-api/docs/ai-studio-quickstart

参考資料 プロンプト修正検討した内容

Step2 : Google Search Grounding 最新のJR東海運賃表参照を提示 → Google検索機能使用 に

Step2 : ファイル更新内容 Google検索機能 まだ効果少ない 不十分な条件設定のためか （JR東海の運賃表提示のみ） 運賃不具合多数

Step3 : ファイル更新内容 JR西日本と JR東海の区間内の駅を提示

Step3 : WebアプリPreview 入力エリアの記述が自動整理された

Step3 : WebアプリPreview 各区間運賃は正しくなった！ 他の分割例はないか？ 改善点：複数の分割駅名が見出しに表示されない

Step4 : ファイル更新内容 複数の分割駅名を表示して欲しいと提示

Step4 : ファイル更新内容 期待したが 運賃がバグってしまった 複数駅名表示は OK レイアウト調整あり 突然、駅名英語表記に

Step4 : WebアプリPreview トータル運賃がすべて安くなっていておかしい 分割駅名が複数表示できている 駅名英語表記

Step5 : ファイル更新内容 運賃計算のバグを指摘 大阪 -名古屋の直通運賃も提示

Step5 : ファイル更新内容 考慮された内容 大阪-名古屋直通運賃 岐阜駅の認識 検索ワード改善 検索クエリ更新

Step5 : WebアプリPreview 入力エリアの記述が自動整理された

Step5 : WebアプリPreview 大阪-米原 の運賃のみおかしい

Step6 : ファイル更新内容 大阪-米原 の運賃の誤りを指摘

Step6 : ファイル更新内容（最新状況） 考慮された内容 基準運賃の修正 不正値の対応 検索キーワード改善 初期クエリ更新