【Google AI Studio】AIでwebアプリ作成～Build機能の使い方とデプロイの流れ～
生成AIを使用することで、本来であれば知識が必要な「webアプリの作成」を誰でも手軽にできるようになりつつあります。
「Google AI Studio」をはじめ、様々なAIツールの登場により、コードを書かなくてもwebアプリを簡単に作成・公開できるようになりました。
D-AMUSアプリ構築は全くの未経験ですが、Google AI Studioで日常業務に使えるアプリを作成し、Cloud Runへデプロイ（公開）までの一連の流れを試してみました。
この記事を見ていただいているということは、
- 初心者でもできるAIアプリ作成に興味がある
- 自分だけが使える簡単なアプリを作成・活用してみたい
- Google AI Studioでアプリ作成をしたが、公開の手順や注意点がわからない
というお悩みや要望があるのではないでしょうか？
今回この記事では「”Google AI Studio”の”Build機能”でアプリを作成したい方向け」に、アプリ作成の手順と公開までの流れを徹底的にお伝えしていきます。
是非参考にしてください！
”Google AI Studio”とは？
「Google AI Studio」は、Googleが提供する開発プラットフォームです。
プログラミングの知識がなくても、手軽に最新の生成AIモデル（主にGemini）を試したり、開発したりできます。
そして、主に下記に挙げた幅広い機能を無料で利用できます。
- チャット機能（テキスト・画像・動画・音声などのアップロードも可能）
- データ分析や文字起こし（PDFファイル/Youtube動画などの分析・要約や音声の文字起こし）
- 画像・動画などの生成や編集機能（最新モデルでの生成や画像編集）
- webアプリの作成・公開（Build機能での自動コーディングとデプロイ）
D-AMUS画像生成・編集で話題になった「Nano Banana」や最新の「Nano Banana Pro」などもGoogle AI Studio経由で使用できます。
※Nano Banana Pro（Gemini 3 Pro Image）は無料だと制限がありますが、Geminiで無料お試しができます。（※2025年11月時点）
商用利用の可否や料金プラン
「Google AI Studio」は、どの機能も基本的に無料で利用できます。
無料利用時の商用利用については、明確に禁止されているわけではありませんが、入力データや生成結果を開発に利用すると記されているため、クライアント案件での商用利用は避けた方が安心です。
本無料サービス（Google AI Studio や Gemini API の無料枠など）を使用する場合、 Google は使用者が本サービスに送信したコンテンツと生成された回答を使用し、 Google のプライバシー ポリシーに従って、 Google のプロダクト、サービス、機械学習技術 （Google の企業向けの機能、プロダクト、サービスを含む）の 提供、改良、開発を行います。
引用元：Gemini API 追加利用規約 | Google AI for Developers
品質の向上とサービスの改善を目的として、使用者が行った API 入出力に対して、人間のレビュアーが確認、 注記、処理を行う場合があります。このプロセスの一環として、Google は プライバシーを保護するための措置を講じます。措置には、 Google アカウント、API キー、およびクラウド プロジェクトからのデータの切り離しが含まれます。これらは人間のレビュアーによる読み取りや注記の前に 行われます。本無料サービスには、プライベート情報、機密情報、または個人情報を送信 しないでください。
引用元：Gemini API 追加利用規約 | Google AI for Developers
D-AMUS無料の場合は、あくまで「お試し開発」や「個人的な利用」といった使い方が良いかもしれません。
そして、APIキーを取得することで従量課金制の有料扱いになります。
Google Cloudで「請求先アカウントの作成」「課金有効化設定」をすることで「有料サービス」扱いになり、API使用料に応じた従量課金に切り替わります。
課金を有効にしても、無料枠があるので、必ず料金が発生するわけではありません。
サービスが有料で提供されている場合、それは有料サービス （「本有料サービス」）とみなされます。Cloud 請求先アカウントを有効化すると、 Gemini API および Google AI Studio のすべての使用は、 「Google による使用者のデータの利用方法」に関しては「有料サービス」となります。これは、無料で提供される本サービス （Google AI Studio、Gemini API の無料枠など）を使用する場合でも同様です。
引用元：Gemini API 追加利用規約 | Google AI for Developers
また、有料サービスでは、入力データをプロダクトの改善に使用しないと明記されています。
Gemini API の有料枠などを含む本有料サービスを使用する場合、 Google は、使用者のプロンプト（関連するシステム指示、 キャッシュに保存されたコンテンツのほか、画像、動画、ドキュメントなどのファイル）または 回答をプロダクトの改善に使用することはありません。 このプロンプトおよび回答は、 Google がデータ処理者となるサービスのデータ処理追加条項に沿って取り扱われます。
引用元：Gemini API 追加利用規約 | Google AI for Developers
D-AMUSGoogleでは、本格的なビジネス利用をしたい場合は「Vertex AI」の利用を推奨しています。（Google Cloudから利用可能）
Google Cloudでのアカウント作成・設定手順は、今回割愛させていただきますが、本格的な開発をしたいという方は、API取扱い時の注意点やGoogle Cloudでのセキュリティ対策・認証設定・費用管理などもしっかりと確認をしておきましょう。
”Google AI Studio”のBuild機能の使い方
それでは早速「Build機能」でwebアプリを作成してみましょう。
その前に下記を済ませておきましょう。
- 必須：Googleアカウントの取得
- 必須：Google AI Studioへのアクセス（ログイン）
- 任意：一般ユーザー向けに公開したい場合は、デプロイ先の設定
※詳細はこちら ▶
Google AI Studioへのアクセス手順は、別記事で簡単に紹介していますので、下記を参考にしてください。
1.Build機能でプロンプト入力
「Google AI Studio」にアクセスしたら、左メニューの「Build」をクリック。
もしくは、右上にある「+New app」でもOKです。
あとは、下記の赤枠内に作成したいアプリについてのプロンプトを入力するだけ。
必要に応じてモデル選択・変更も可能です。
プロンプトは日本語入力で問題ないです。
すでに詳細が決まっていれば詳しい指示を与えますが、今回は仮で簡易的なおみくじアプリを作成してみました。
入力した仮プロンプトは下記のとおり。
おみくじアプリ
くじの内容
-大吉
-中吉
-小吉
-凶
アプリのデザイン
-ポップテイスト
-若年層向け
実際にできあがったアプリが下記画像になります。
D-AMUS今回は細かい条件を指定していませんが、実際におみくじを引いて結果が出る状態のアプリが仕上がりました。
そして「TAP TO SHAKE」の水色ボタンはアニメーションでジャンプするような動きがついており、クリックを促してくれています。
2.プレビューで機能確認
仕上がったアプリは、そのまま「プレビュー（Preview）」で実際に試してみることがきます。
ちなみに、編集時に直接コードを触りたい場合は、上記画像の「Preview」と「Code」を切り替えることで編集可能です。
「TAP TO SHAKE」のボタンをクリックすると、下記画像のようになります。
画像ではわかりませんが、待っている間に赤い御神籤（おみくじ）イラストが振動するアニメーション付きです。
そして、小吉の結果が出ました。
今回は2～3回試しただけですが、結果はすべて「小吉」でした。おみくじの確率的にそうなるのは仕方ないですが、実際にアプリとしてリリースするなら、確率や1日でおみくじを引ける回数などの調整や差別化が必要かもしれません。
プレビューではパソコン表示だけでなく、スマホ・タブレットでの表示確認もできます。
右上に「Device」という表示があるので、確認したいデバイスを選択することで、表示確認ができます。
D-AMUS仮生成ですが、おみくじが入っている箱を実際に振っているようなアニメーションが実装されており、なかなかおもしろいです！
3.修正や機能追加をAIに指示してアプリ編集
最初に仕上がったアプリの状態から日本語の指示で編集を加えていくことができます。
指示をする場所は、下記画像の一番下の入力欄です。
試しに、少し編集してみましょう。
すでに上記画像に指示を入力していますが、少し文字の修正をします。
すると、指示した文字に変更してくれました。
「おみくじ」を1行で入るように調整したいので、再度修正をして、今回はこれで編集終了です。
アプリ実装後は、AIの提案を参考に編集をしてみても良いでしょう。（今回は内容を日本語に翻訳しています。）
希望の内容をクリックするだけで、実装を開始してくれます。
上述したとおり「コードの直接編集」も可能ですが、編集後は「保存」を忘れないようにしましょう。
右メニューにアイコンが並んでいますが「Save app」で保存できます。
4.アプリを公開（デプロイ）する
完成したアプリを他者と共有・公開したい場合には、いくつか方法があります。
主な方法として
- ”Google AI Studio”から”Cloud Run”にデプロイ（Google Cloudで課金有効化が必要）
- ”Google AI Studio”から共有（シェア）する
- コードのダウンロードやGitHub連携などで、外部サービスにてデプロイ（Vercel / Netlifyなど）
などがありますが、今回は「Google AI Studio（Google Cloud）」内で完結する①②を簡単に紹介します。
”Google AI Studio”から”Cloud Run”にデプロイ
すでに「Google Cloud」で課金設定を有効にしている場合は、デプロイ自体はすぐにできます。
デプロイすると、一般公開用のURLが発行されます。
URLを知っていれば誰でもアクセスできる状態になりますが、ユーザーのアクセス時にはアプリ作成者（自分）のAPIキーが使用されるため、コスト管理や「Google Cloud / Cloud Run」での認証設定などにも気をつけましょう。
新規でプロジェクトを作成します。
プロジェクトがすでに複数ある場合は、下記画像のように既存のプロジェクトをクリックすることで、新しいプロジェクトを作成できます。
プロジェクト名を入力し、請求アカウントとの紐づけをします。
請求アカウントの作成・支払い設定がまだの場合は、済ませてから作成したプロジェクトと紐づけをします。
左上メニューの「課金」もしくは「請求先アカウントを管理」から新規の請求アカウントが作成できるかと思います。
今回作成した「プロジェクト名（名前）」と「請求アカウント」が紐づいているかどうかも「自分のプロジェクト」タブから確認できます。
課金が気になる方は「課金」メニュー内で「予算とアラート」の設定ができるので、設定しておきましょう。予算を超える前に通知が来るように設定できますが、タイムラグが発生する可能性があるのと、予算オーバーをしたからといって勝手に機能を停止してくれるわけではありません。
「Google Cloud」でプロジェクトの作成が済んだら、「Google AI Studio」に戻り、APIキーを取得します。
アプリ内で生成AIの機能を使用している場合は、APIキーが使用されます。
「Google AI Studio」の左下にある「Get API Key」→「APIキーを作成」をクリックします。
まず、キーの名称を入力します。（プロジェクト名やアプリ名などでOKです。）
次に、先程Google Cloudで作成したプロジェクト名を選択します。
プロジェクトが表示されていない場合は「プロジェクトをインポート」で候補が表示されるので、そこから選びましょう。
キーの作成が済んだら、「APIキー」一覧の画面に作成したキーが表示されています。
左メニューの「Build」→「Your apps」からデプロイしたいアプリを選択します。
右上の「ロケットアイコン」がデプロイボタンなので、クリックしましょう。
APIキーの作成時と同様に「Google Cloud」で作成したプロジェクトを選択します。（日本語翻訳も掲載）
下記画像の赤枠内に表示されるプロジェクト名を確認し、右下の「アプリをデプロイする」をクリックしたら、しばらく待機。
正常にデプロイされれば、アプリURLが表示されます。
「アプリを表示」で実際のアプリを、「Google Cloudで開く」でCloud Runにデプロイしたアプリの詳細確認ができます。
実際にアプリを表示させ、使ってみました。
動作など問題ないため、これでデプロイは完了です。
Google Cloudの「Cloud Run」→「サービス」からデプロイしたアプリの詳細確認や認証設定などができます。
D-AMUSGoogle AI Studio経由で簡単にデプロイができました！
デプロイ後は、URLを知っていれば誰でもアクセスできる状態になっています。
アプリの目的に応じて制限をかけたい場合は、アクセス制限や認証設定をしておきましょう。
「Google AI Studio」での実装はあくまで試作や検証なので、お試しで「Cloud Run」にデプロイしただけであれば、プロジェクトの無効化や削除をすれば基本的に課金されることはありません。
プロジェクトを無効化・削除する場合は、元の状態に復元できない可能性があることに注意しましょう。（Google AI Studio内のアプリは削除されません。）
プロジェクトの無効化手順 ▶
プロジェクトの削除(シャットダウン)手順 ▶
アプリに制限をかけたり、セキュリティを強化したりするなら、必要に応じて下記の対策などを行うようにしましょう。
他にも対策方法はありますが、今回は実際に試したことのあるものを紹介します。
- IAMによるアクセス制御 ※URLからのアクセスができなくなります（後述します）
（Cloud Runの対象アプリを開き、「セキュリティタブ」→「認証」から設定し、権限付与）
参考はこちら ▶ - Secret ManagerでAPIキー等の管理
（「セキュリティ」→「Secret Manager」からシークレットを作成し、Cloud Runの対象アプリ内「新しいリビジョンの編集とデプロイ」から設定）
参考はこちら ▶ - APIキーへの制限
（「APIとサービス」→「認証情報」からAPIキーの制限を設定）
参考はこちら ▶
IAMによるアクセス制御後は、ブラウザからのアクセスができなくなってしまいます。
そのため、今回は「Cloud Shellでのプロキシ接続」を行い、無事アプリへの接続ができました。
右上アイコン「Cloud Shellをアクティブにする」から使用できます。（Cloud Runの対象アプリを開いておくと良いです。）
下記画像の赤枠内が対象アプリのプロジェクトIDになっているか確認をし、必要なコマンドを入力します。
コマンド例：「Cloud Run」のサービス名が[app] / プロジェクトIDが[ai-app-run]の場合
gcloud run services proxy app --project=ai-app-runロール付与などの権限設定ができていれば、コマンド入力後に表示されたURL（http://localhost:8080/）からアクセスできます。
参考記事：Cloud Runサービスを「認証が必要」に設定したらブラウザからアクセスできなくなった ▶
Google Cloudでは、「誰が・何を・どこまでできるか」を必要最低限に絞る「最小権限の原則」があり、過剰に権限を付与しないことでセキュリティリスクを防ぐことができます。
下記に今回参考にさせていただいた記事を掲載しておきます。
–プロジェクト運用前に知っておきたいIAMの考え方 ▶
–Google Cloud のサービスアカウントの役割とコンソールでの作成方法を解説 ▶
D-AMUSデプロイよりも、ロール選択・権限やサービスアカウントの仕組みに慣れるまでは戸惑いました。無事にアクセスできたので一安心です！
”Google AI Studio”でアプリを共有する
単純にアプリを共有したい場合は「シェア」することで、他の人にも触ってもらうことができます。
「シェア」の場合、アプリを共有されたユーザーは、ユーザー自身の「Google AI Studio」アカウントとAPIキーを使います。アプリを使ってみるだけでなく、コードを閲覧したりコピーしたものをユーザーが編集したりもできます。
デプロイ時同様、左メニューの「Build」→「Your apps」からシェアしたいアプリを選択します。
デプロイアイコンの右横にあるシェアボタンをクリックしましょう。
デフォルトの状態（チェック無し）でOKなので、リンクをコピーしてシェアしましょう。
使い方は「Google Drive」と同じ。
必要に応じて「高度な共有権限」からアクセス制限やユーザーの追加が可能です。
ちなみに、
- 自分のパソコンなどのローカル環境にダウンロード
- GitHubと連携（外部サービスでデプロイなど）
する場合は、同様に右上の各アイコンから可能です。
”Google AI Studio”からデプロイする際の注意点
「Google AI Studio」の「Build機能」を使うことで、簡単にオリジナルアプリの作成ができ、クリック1つで「Cloud Run」へのデプロイまでできました。
誰でも気軽に使えるようになった反面、注意点もしっかりとおさえておきたいところです。
APIキーの取扱いに注意
ソースコードに直接本物のAPIキーを書き込まないように注意しましょう。
誤って本物のAPIキーを記述したままGitHub連携などで公開してしまうと、APIキーの漏洩から不正利用・高額請求などに繋がる可能性があります。
「Google AI Studio」の「Build機能」では、AIが自動コーディングをしてくれますが、自分で実装をする場合などには注意するようにしましょう。
漏洩させないことはもちろんですが、万が一のことを考えて、「Google Cloud」でAPIキー自体にアクセス制限を設定しておくと安心です。
本番環境で利用する場合は、権限の付与範囲に注意
上述しましたが「最小権限の原則」を意識して、必要な権限のみをその都度付与するようにしましょう。
「Google Cloud」でも実際にロールの付与などを試すことができるので、学習として実践してみるのも良いでしょう。
外部サービスでデプロイする場合は、デプロイ先の規約も確認
例えば、作成したwebアプリを外部サービスにデプロイして商用利用したい場合などは、Googleの規約だけでなく外部サービスの規約も確認しておきましょう。
有料プランでなければ商用利用ができない外部サービスもあるので、注意が必要です。
まとめ：”Build機能”で簡単にwebアプリの作成を試せる
最後まで読んでいただきありがとうございます！
今回の記事では
- Google AI Studioとは？無料での商用利用は可能か？
- Google AI Studio「Build機能」の使い方やwebアプリ公開・共有の手順
- Google AI Studioから「Cloud Run」へのデプロイや「Google Cloud」での認証設定・注意点
以上、3点について解説させていただきました！
特に重要なポイントは、以下の3つです。
- 「Google AI Studio」の「Build機能」は無料で簡単にアプリ作成を試せるが、本格的な商用利用時の無料利用は避けた方が安心
- 「Google AI Studio」では、APIキーを取得することで有料サービス扱いになるが、必ず課金が発生するわけではなく無料枠がある
- 「Cloud Run」へのワンクリックデプロイは便利だが、一般公開されるので、APIキーの管理やアクセス制限など、コスト管理・セキュリティ対策への対応も必要
AIでお試しアプリを生成してみたい方や業務改善・効率アップに繋がるAIアプリを公開したい方の参考になれば幸いです！
今後もwebに関する運用情報を発信していく予定ですので、是非ご覧ください！
お問い合せはこちらから承っております。
写真素材を投稿しています！
AIで生成した画像も投稿中です ▼
この記事が気に入ったら
フォローしてね！
