Google AI StudioのBuild機能とは｜経費アプリの作成から修正指示までを試した

プログラミングの知識がない状態からでも、Webアプリケーションの作成を支援するツールとしてGoogle AI Studioが提供されています。その中でも「Build機能」を利用すると、画面上で対話するだけでアプリケーションの構築が可能です。

本記事では、Google AI StudioのBuild機能の概要から、実際の画面構成、料金体系、そして活用例までを網羅的に解説します。さらに、領収書から経費データを自動抽出するアプリを実際に作成してみてわかった使用感も紹介するので、ぜひ参考にしてみてください。

✍️Google AI StudioのBuild機能とは？

Google AI StudioのBuild機能は、自然言語の指示をもとに、AIアプリやWebアプリを構築できる開発機能です。様々な機能が搭載されており、単なる画面生成にとどまらず、フルスタック構成のアプリ開発も可能です。ここでは、Build機能の基本的な考え方と、どのようなコード構成でアプリが生成されるのかを解説します。

自然言語でアプリを構築できる「Vibe Coding」

Build機能の最大の特徴は、自然言語を用いて要件を伝えるだけで、アプリケーションのたたき台を生成できる点にあります。ユーザーは「どのようなアプリを作成したいか」を文章で指示し、生成された結果を確認しながら修正を繰り返すことで、スムーズに開発を進めることが可能です。

Build機能で生成される構成の詳細は以下の通りです。

【コード構成】

• クライアントサイド：Webフロントエンド（デフォルトはReact）
• サーバーサイド：Node.jsランタイム
• 追加機能：npmパッケージの利用、シークレット管理、安全なAPI呼び出し など

Google AI Studioの他メニューとの違いと連携

Google AI Studioには、Build機能以外にも目的の異なる複数の機能が搭載されています。これらを組み合わせることで、開発効率が向上します。

各機能の役割とBuild機能との関係は以下の通りです。

【各メニューの特徴】

• Playground：
  主にプロンプトのテストやAIモデルとの単発のチャットを行う場所です。ここで最適な指示文（プロンプト）を検証し、その結果をBuild機能の開発に活かします。
• Build：
  アプリケーションのUIとロジックを統合して開発するメインの作業環境です。Playgroundで得た知見を元に、実際のプロダクトを形にします。
• Apps：
  作成したアプリを一覧で管理するメニューです。ここからアプリの編集やデプロイといった操作も可能です。
• Gallery：
  他のユーザーやGoogleが作成したテンプレート集です。「Discover & Remix」機能を使い、既存の優れたアプリのコードやプロンプトをコピーしてBuild機能で拡張できます。

⭐YoomはAIを使った業務を自動化できます

Google AI Studioなど、AIを利用することで日々の業務は効率化します。しかし、プロンプトの入力、生成結果の転記や通知などは、手作業で行っていませんか？そうした作業プロセス全体を自動化し、AIを使った業務のさらなる効率化を図れるのがYoomです。

[Yoomとは]

Yoomを利用することで、AIを使った以下のような業務をノーコードで自動化できるので、ぜひ試してみてください。

• Gmailで受信したメールをAIワーカーが解析し、対応優先順位の判定と最適な返信案を自動作成してSlackに通知する
• Google Driveに企画要件ファイルがアップロードされたら、AIワーカーでGoogleドキュメントにホワイトペーパーを作成する

🖊️【実例4選】Build機能を活用して開発できる業務アプリケーション

Build機能を活用すると、単純な情報表示画面から外部システムと連携する複雑なツールまで、幅広いWebアプリケーションを構築できます。ここでは、具体的なユースケースを4つ紹介します。

社内業務ツールやダッシュボードのプロトタイプ作成

Build機能は、社内向けの管理ツールやデータを可視化するダッシュボードの試作に最適です。複雑な要件定義をスキップし、現場のニーズを即座に形にできます。

具体的には以下のようなツールを数分で作成できます。

【アプリの例】

• タスク管理アプリ：ドラッグ＆ドロップで進行状況を管理できるカンバンボード
• データ集計ダッシュボード：入力された数値をグラフ化し、傾向を可視化する画面
• 在庫管理表：商品ごとの入出庫履歴を一覧表示し、検索や絞り込みができるUI

エンジニアの工数を確保する前に、実機で動くプロトタイプを作成して要件をすり合わせる用途で非常に効果的です。

社内FAQやカスタマーサポート向けAIチャットボットの構築

Geminiモデルの自然言語処理能力を直接組み込んだチャットボットアプリケーションも簡単に作成できます。

チャットボットの構築においては、以下のような要素が自動生成されます。

【アプリの例】

• 対話インターフェース：ユーザーの入力欄と、吹き出し形式のメッセージ履歴表示画面
• Gemini APIとの統合：入力されたテキストをAIモデルに送信し、応答を受け取る通信ロジック
• リアルタイム応答：タイピングしているかのようにテキストを表示するストリーミング処理

System Instructions（システム指示）に自社のFAQデータを設定することで、社内からの問い合わせに自動応答するカスタマーサポートツールを作成することも可能です。

画像や音声を活用したマルチモーダルアプリの開発

テキストだけでなく、画像や音声といった複数のデータ形式（マルチモーダル）を扱うアプリケーションの開発も可能です。

実装できるマルチモーダル機能の例は以下の通りです。

【搭載できる機能】

• 画像認識・分析：アップロードされた写真からテキストを抽出（OCR）したり、写っている物体を判定したりする機能
• 音声入力インターフェース：マイクからの音声入力をテキストに変換し、AIに指示を出す機能
• 画像・動画生成の統合：テキストプロンプトからサムネイル画像やショート動画を自動生成し、画面に表示する機能

これにより、手書きメモのテキスト化や、音声による議事録作成アプリなどを直感的な操作で構築できます。

Google Maps等の外部APIと連携したアプリケーションの作成

Build機能は、Googleのエコシステムと親和性が高く、Google Mapsなどの外部データと連携したアプリケーションも作成できます。

外部API連携によって実現できるアプリの例は以下の通りです。

【Google Mapsの活用例】

• ロケーションベースの検索：ユーザーの現在地を取得し、周辺の店舗や施設を地図上にマッピングするアプリ
• 経路案内ツール：指定した2点間の最適ルートを計算し、テキストと地図で案内する機能
• 地域情報の要約：特定のエリアに関するWeb上の情報を収集し、要約して提示する情報ダッシュボード

AIが地図APIの複雑な呼び出し処理を自動で構築するため、開発のハードルが大きく下がります。

⚙️【基本ガイド】Build機能の画面項目と主要機能

Build機能を効果的に使いこなすためには、画面構成と設定項目を正しく理解する必要があります。ここでは、開発画面の主要な設定機能について解説します。

Advanced Settingsで設定できる項目

開発画面の右側にある「Advanced Settings」を展開すると、AIモデルの挙動や生成されるコードの土台となる設定を細かく調整できます。

設定可能な主な項目は以下の通りです。

【設定項目の特徴】

• Select model for chat：アプリ生成に使用するGeminiモデルを選択できます。タスクの複雑さに応じて最適なモデルを切り替えることが可能です。
• System instructions：アプリ全体の方向性や、AIに振る舞ってほしい役割（ロール）を事前定義するシステム指示です。
• Framework：生成するWebアプリの土台となるフレームワークをReact、Next.js、Angularから選択できます。
• Microphone source：音声入力によるプロンプト指示を行う際の、オーディオデバイスを設定します。

アプリ作成のチャット欄とAI Chips（サジェスト機能）の活用法

左側のチャット欄は、自然言語でアプリの仕様を指示する中核機能です。入力の手間を省き、機能を追加しやすくする仕組みが備わっています。

チャット欄で活用できる便利な機能は以下の通りです。

【チャット欄で利用できる機能】

• I'm feeling lucky：ランダムなアプリのアイデアを自動入力し、即座にサンプルアプリを生成する機能です。ツールの挙動を確認する際に便利です。
• AI Chips（サジェスト機能）：入力欄の上に表示される機能追加の提案ボタンです。クリックするだけで要件が追加されます。AI Chipsには以下のようなメニューがあります。
  • Convert text to speech：音声読み上げ機能の追加
  • Use Google Search data：検索結果を活用した情報取得機能の追加
  • Add database and auth：データベースとユーザー認証機能の追加
  • Use Google Maps data：地図データの活用機能の追加

リアルタイムプレビューとコード確認機能

チャット欄から指示を送信すると、画面の右側に作成されたアプリが表示されます。そこで動作やコードを確認しつつ、改善作業を進めることが可能です。視覚的なプレビュー画面とソースコードの確認をスムーズに行き来できるため、試作と修正のサイクルを効率的に回しやすい点が大きな特徴です。

プレビュー画面で利用できる主な機能は以下の通りです。

【プレビュー画面の機能】

• リアルタイムプレビュー：プロンプトの指示内容が反映されたアプリの動作画面を、その場で即座に確認できます。
• コード表示・編集：生成されたコードは、右側の「Code」タブから確認可能です。必要に応じて、直接コードを編集しながら微調整を行うこともできます。
• 外部開発環境への移行：作成したコードは、ZIP形式でのエクスポートやGitHubへの出力に対応しており、他の開発環境へスムーズに移行できます。

✅利用時の制限と注意点

Build機能を利用する際は、加入しているプランに応じて異なる料金プランや制限が適用されます。また、実際にアプリを作成してデプロイする際に注意すべきこともあります。ここでは利用時の制限や注意点について解説します。

プランごとの料金と利用制限

Build機能自体に専用の固定料金が設定されているわけではありません。無料で利用することもできますが、利用上限や選択できるモデルなどは、以下のようにプランによって変わるため注意が必要です。

【無料プラン】

• 料金：無料
• 利用可能モデル：一部のAIモデルのみ利用可能
• 利用制限：モデルごとに1日のリクエスト数（RPD）・1分あたりのリクエスト数（RPM）・1分あたりのトークン数（TPM）が決められています。
• 入力データ：Googleのプロダクト改善に活用される可能性

【有料プラン】

• 料金：Gemini APIの料金表に基づく
• 利用可能モデル：利用可能なすべてのAIモデル
• 利用制限：各AIモデルの上限が無料プランより緩和される
• 入力データ：Googleのプロダクト改善の目的には使用されない

【Enterprise】

• 料金：要問い合わせ
• 利用可能モデル：利用可能なすべてのAIモデル
• 利用制限：各AIモデルの上限が無料プランより緩和される
• 入力データ：Googleのプロダクト改善の目的には使用されない

主要モデルの無料枠と有料プランの料金プランは以下の通りです。

セキュリティと商用利用時のデータ取り扱いにおける注意点

ビジネス用途でBuild機能を使用する場合、機密情報の取り扱いや生成されたコードの安全性に配慮する必要があります。

主なセキュリティ上の注意点は以下の通りです。

【注意点】

• データ利用の制限：
  無料プランでは、プロンプトに入力した情報がモデル改善に利用される可能性があります。そのため、個人情報や顧客データ、社外秘の機密情報はプロンプトやチャット欄に絶対に入力しないでください。
• APIキーの管理：
  外部APIと連携する際、APIキーを自動生成されたフロントエンドのJavaScriptコード内に直接書き込むと、悪意のあるユーザーに漏洩する危険があります。必ず環境変数を利用する設計に変更してください。
• コードの正確性検証：
  AIが生成したコードはセキュリティ上の脆弱性を含んでいる場合があるため、本番運用前には必ず人間によるコードレビューを実施してください。

🤔Build機能を使って領収書・レシートの経費データ化アプリを作ってみた！

ここからは、実際にBuild機能を利用して「領収書・レシートの経費データ化アプリ」を作成する手順を解説します。画像のアップロードから構造化データの出力までを検証します。

アプリの要件定義

経費精算の入力作業を効率化するため、スマートフォンのカメラで撮影したレシート画像やメールなどで受信した領収書ファイルから必要なデータを自動で読み取るツールを作成します。

【検証アプリの要件】

• アプリの目的：領収書やレシートの画像から、経費精算に必要な情報を高精度に抽出してデータ化する
• 機能：画像アップロード機能、AIによるOCRおよびデータ抽出、結果の表表示とJSONデータ出力
• 抽出項目：日付、店舗名、合計金額、税率ごとの内訳

このアプリにより、手入力によるミスを減らし、他のシステムへデータを連携しやすいフォーマットで出力することを目指します。

Advanced Settingsの設定

AIモデルに対し、単なるテキスト生成ではなく「経費処理の専門アシスタント」として振る舞うよう、System instructionsを設定します。これにより、出力データの正確性とフォーマットの安定性が向上します。

【System instructionsの記述】

あなたは経費精算を処理する優秀なアシスタントです。アップロードされた領収書やレシートの画像から、日付、店舗名、合計金額、税率ごとの内訳を抽出し、正確なJSON形式の構造化データとして出力してください。推測や不要な会話は含めず、データのみを返してください。

※その他の設定はデフォルトの状態としました。

アプリの作成

要件とデザインの指示を1つのプロンプトにまとめ、チャット欄から送信します。一度に詳細な指示を出すことで、無料枠のトークン消費を節約し、開発を効率化できます。

【検証プロンプト】

領収書やレシートの画像から経費データを自動抽出するWebアプリを作成してください。以下の要件を満たすUIと機能を実装してください。
1.画面構成
・ヘッダーに「経費データ化アプリ」と表示
・左側にデータ入力エリア、右側に抽出結果エリアを配置する2カラムレイアウト
2.入力エリアの機能
・画像ファイルをドラッグ＆ドロップ、またはクリックでアップロードできるエリア
・抽出を実行する「データを抽出する」ボタン
3.抽出結果エリアの機能
・抽出した情報（日付、店舗名、合計金額、税率ごとの内訳）を見やすい表形式で表示
・他システムへの連携用に、生のJSONデータをコピーできるテキストエリアを配置
4.デザイン
・白と青を基調とし、業務ツールとして見やすいシンプルなデザインにしてください。

上記の指示を送信すると、以下のようにアプリが作成されました。

挙動を確認するために、以下の領収書を読み取ってもらいました。

【検証用の領収書】

内容を正確に読み取り、指示通りの挙動を確認できました。

アプリの修正

作成されたアプリの修正作業も検証してみました。今回は、追加で購入品目や但し書きをファイルから読み取ってもらうようにします。

【修正指示のプロンプト】

購入品目や但し書きデータも抽出し、表示してください。

※複数の修正要望がある場合は、1回のメッセージにまとめて送信するとリクエスト回数を節約できます。

プロンプトを送信すると、UIを維持したままアプリの仕様が更新されました。先ほどの領収書を再度アップロードして確認すると、但し書きを読み取っていることが確認できました。

検証結果

Build機能を使ってアプリを作成してみて、以下のことがわかりました。

• テキストの指示のみで、AI搭載アプリを約2分で作成できた
• UIは英語だが、日本語の指示を正確に理解して漏れなく反映してくれた
• Geminiの「Canvas」や「Gems」の「いいとこどり」の機能

【圧倒的なスピードと正確な日本語理解】

非エンジニアでも、テキストで指示を出すだけで高度なAI搭載アプリを簡単に構築できることが、わかりました。今回の検証では、要件を満たしたアプリの作成が約2分、追加の修正も1分未満という驚異的な処理速度で完了しました。操作画面（UI）自体は英語表記ですが、入力した日本語の指示を的確に理解し、要望を漏れなくアプリへ反映してくれるため、プログラミング知識がない方でも安心して開発を進められます。

【無料プランの適用範囲とツールの優位性】

無料プランであっても、文章を処理するマルチモーダルAIを用いたアプリ開発を気軽に体験できるのは嬉しいポイントです。ただし、検証時点では画像や動画を生成する機能を持つアプリを作成する場合は有料プランが必要だったため、目的に応じたプランの検討が必要です。

また、Geminiの「Canvas」機能はAI搭載アプリを作るハードルが高く、「Gems」機能はアシスタントは作れてもアプリ化には対応していません。Build機能はこれらの課題をクリアした「いいとこどり」のツールであり、手軽かつ効率的に自社用AIアプリを作成したい方に最適な選択肢と言えます。

📌作成したアプリのデプロイとソースコードの活用方法

Build機能を使って作成したアプリは、生成されたソースコードを利用して実際の運用環境へ移行することができます。アプリを活用・公開する手順は以下の通りです。

【活用方法】

• ZIPエクスポート：「ダウンロード」ボタンから作成されたファイル一式をZIP形式でダウンロードし、必要に応じてローカル環境や他の開発環境で編集できます。
• シェア：「Share」ボタンからアプリのURLをコピーして共有できます。共有先のAPI呼び出しは所有者の使用量上限にカウントされ、有料モデル利用時は所有者に費用が発生する場合があります。
• 直接デプロイ：「Publish」ボタン内のメニューから、Google Cloud Runへシームレスにデプロイします。Google Cloud Starter Tierでは課金設定なしで最大2つのアプリを公開でき、それを超える運用には課金設定済みプロジェクトが必要です。
• GitHubへの直接プッシュ：「Publish」ボタンのメニューから作成したコードをGitHubのリポジトリへ直接プッシュする機能も備わっています。

📉まとめ

Google AI StudioのBuild機能は、自然言語による指示だけでUIからロジックまでを含めたWebアプリケーションを構築できます。設定項目の調整やプロンプトの工夫次第で、経費データ化アプリのような実用的な業務ツールも短時間で形にすることが可能です。

ただし、無料プランで利用する場合は、利用モデルや回数の制限に特に注意が必要です。また、セキュリティ上の注意点にも配慮する必要があります。これらを踏まえて、まずは社内の課題解決に向けたプロトタイプ開発に挑戦してみてください。

💡Yoomでできること

Google AI Studioは、独自のアプリをゼロから手軽に構築できる魅力的なツールです。しかし、毎日の定型業務に時間をとられてしまうと、アプリ作成に十分な時間を確保できません。こうした課題を解決できるのがYoomです。

Yoomを利用すれば、ノーコードで以下のような定型業務を簡単に自動化できます。これにより、アプリ作成に多くの時間を割けるようになるため、ぜひ普段の業務が自動化される環境を体験してみてください。

• Google スプレッドシートにトピックを追加したらAIワーカーで深層リサーチを行いレポートを作成する
• Googleフォームの回答からAIワーカーで競合を自動分析する

👉今すぐYoomに登録する

【出典】

Google AI Studio／Build with Google AI Studio／Build apps in Google AI Studio | Gemini API／Gemini Developer API pricing