見出し画像

【Google AI Studio】作成したアプリを公開する3つの方法ーAIアプリのデプロイで立ちはだかる壁とは？

ROROSUKE LABO

Google AI Studioで便利なアプリが作れたら、次にやりたくなるのが「みんなに使ってもらえるように公開すること」ですよね。

ということで今回は！
「Google AI Studioのアプリ公開術」
について解説していこうと思います🎉

それでは、早速まいりましょう！

追記：メニュー表示が大きく変わりました

2026年2月末に、Google AI Studioの表示メニューが大きく変わりました。本記事は、変わる前で書かれたものです。ただし、基本的には対応するメニューがあります。どのように変わったかは次の記事の「新メニューの「歩き方」―激変した機能と失われたボタン」で説明していますので、参考にしてください。

★追記：2026年6月に、最新環境に合わせて「完全改訂記事」を公開しました

同じ内容の最新記事となっていますので、ぜひご覧ください。


📝 アプリをWeb公開する3つの道

自作のAIアプリを公開するには、主に3つのルートがあります。

  1. シェア（Share）で共有する（もっとも手軽）

  2. デプロイ（Vercelなど）して公開する（本格的・正攻法）

  3. 単体アプリ（HTML）としてサーバー公開する（カスタマイズ重視）

それぞれの特徴と手順をまとめます。


✅１. シェア（Share）で共有する

もっとも手軽な方法です。Google AI Studioが用意した「プレビュー画面」をそのままURLで共有します。

  • メリット: 開発者の負担がゼロ。難しい設定も不要。

  • デメリット: 見た目が「Google AI Studioのツール画面」のまま。利用者がGoogleアカウントでログインする必要があります。

【開発者側の操作】

手順１： 右上の「Share app」アイコンをクリック

これをクリックします。

手順２： 「Publish your app」をオンにし、URLを「Copy」

URLがクリップボードにコピーされます。
※「Default to fullscreen」をオンにすると、
余計なパネルがないフル画面モードで起動します。

手順３： SNSやブログ、Noteなどにペーストして共有完了！

「Note」の場合、ペーストするとバナーリンクになります。


【開発者側の操作】

手順１：バナーリンクで「Continue」をクリック

これをクリックします。

手順２：アプリ起動

※アプリによって画面は変わります。



✅２. デプロイして公開する

現在のWeb開発における「正攻法」です。GitHub経由でVercelなどのホスティングサービスと連携させます。

  • メリット: 独自のWebアプリとして公開できる。コードを修正してGitHubに送るだけで、サイトが自動更新される。

  • デメリット: GitやVercelの設定など、初期学習コストがかかる。

【手順の流れ】

手順１：右上の「GitHubに保存」アイコンをクリック


これをクリックします。

手順２：リポジトリ名を入力し「Create Git repo」をクリック

リポジトリ名と説明文を記入します
「Create Git repo」ボタンを押します。
リポジトリが作られた時の表示です。

手順３：GitHubでリポジトリを確認する

リポジトリを確認します

手順４：Vercelにログインし「Add New」→「Project」から、先ほど作ったリポジトリを「Import」

「Add New」を押して「Project」を選択します。
リポジトリを「Import」します。

手順５：「Deploy」ボタンを押せば、世界中に公開された独自のURLが発行されます！

「Deploy」ボタンを押します。

手順６：ダッシュボードに進む

デプロイが成功すると表示されるメッセージです。
「Continue to Dashboard」を押してダッシュボードに進みます。

手順７：ドメインにアクセスするとアプリが表示される

「Domains」の下のリンクを押すとWeb公開されたアプリが表示されます。
※アプリによって画面は変わります。


📝デプロイってなに？

「えっと、んっと、で、デプロイってナニソレ🧐」

という方のために、ここで簡単に『デプロイ』とは何かを説明しましょう！

一言でいえば
「自分のパソコンの中にあるプログラムを、世界中の人がアクセスできる『Webサーバー』という場所に設置して、動かせる状態にすること」
です🎉

通常、自分のPC（ローカル環境）で作ったものは、自分にしか見えません。 それを「Vercel（バーセル）」や「Netlify（ネトリファイ）」といったサービスを使って、
インターネット上に「展開（Deploy）」することで、
専用のURLが発行され、誰でもスマホやPCからアクセスできるようになるのです！

一言でいえば、自分でWebサーバーを用意しなくても、すごくスムーズに「作ったアプリを、世界デビューさせること」とお考えください。


✅３. 単体アプリでサーバー公開する

「index.html」という1枚のファイルにすべての機能を詰め込み、自分のレンタルサーバーなどにアップロードする昔ながらの個人管理式の方法です。

  • メリット: 構造がシンプル。自分のドメインで運営できる。

  • デメリット: セキュリティ対策（APIキーの隠蔽）が難しく、中級者向け。

【手順の流れ】

手順１：プロンプトで「1枚のHTMLにして」と依頼する

Google AI Studioのチャット欄で、HTML/CSS/JSを1ファイルにまとめるよう指示します。次がプロンプト例です。
※この操作をする前に、必ずアプリのバックアップをとっておくことを忘れないようにしてください。

# 単一ファイル（Single-file HTML）アプリ作成依頼

以下の条件を厳守して、アプリケーションを作成してください。

## 1. 納品形態
- すべてのコード（HTML、CSS、JavaScript/React）を「index.html」という1つのファイルに集約してください。
- 外部の .tsx, .ts, .js, .css ファイルは一切作成せず、削除してください。

## 2. 技術スタックと実行環境
- 自前サーバー（共有レンタルサーバー等）のFTPアップロードで即座に動作する形式にします。
- ライブラリはすべてCDNから読み込んでください：
  - React 18 & ReactDOM 18 (UMD版)
  - Tailwind CSS (Play CDN)
  - Babel Standalone (ブラウザ内コンパイル用)
- TypeScript/JSXコードは `<script type="text/babel">` タグ内に直接記述してください。

## 3. アプリケーション構成
- index.html 内に以下の要素を含めてください：
  - `<div id="root"></div>`（Reactのルート要素）
  - `<style>` タグ（独自のCSSアニメーション等が必要な場合）
  - `<script type="text/babel">` 内に全てのReactコンポーネントとロジック

## 4. 注意事項
- サーバー側でのビルド（npm install や npm run build）は不要な構成にすること。
- ディレクトリ構成に依存せず、index.htmlをブラウザで開くだけで100%動作することを最優先してください。

手順２：ファイルを保存する

生成されたコードを「index.html」として保存。。
右上の「Download app」で
ZIP化されたファイル一式をダウンロードする方法もあります。

手順３：WebサーバーにFTPする

FTPツールを使ってindex.htmlをサーバーにアップロードします。
※アプリによって画面は変わります。


📝 AIアプリ公開の「最大の壁」。APIキーの扱い

ここからが一番大切なポイントです。

アプリには、AIを使用していない「非AIアプリ
」と、AIを使用している「AIアプリ」があります。このうち、「非AIアプリ」は特別問題はありません。問題は「AIアプリ」です。

AIアプリを公開しようとすると、必ずある問題にぶつかります。それが『APIキーの扱い』です🔑

APIキーは、いわば「銀行の暗証番号」のようなものです。これを他人に知られると、勝手にAIを使われ、高額な請求があなたに来てしまうリスクがあります。AIに何かしてもらうタイプのアプリであれば、必ずAPIキーが必要なので、嫌でもなにがしかの対策をしなければなりません。

公開方法によって、このリスクの回避の仕方が変わります。

✅ シェア（Google AI Studioの共有機能）の場合

  • 料金負担: 閲覧者が自分のGoogleアカウントでログインして、その枠が使用されます。通常は、利用者の無料枠が使用されますので、利用者の負担もありません。

  • 安全性: 開発者のAPIキーは完全に隠されているため、シェアすることで漏れることはなく、もっとも安全です。

  • 注意: あくまで「開発画面の共有」であり、独自のWebサイトとして公開できるわけではありません。

✅ デプロイ（Vercelなど）の場合

  • 料金負担: 「開発者（あなた）」の枠を消費します。

  • 安全性: Vercelの「環境変数」という機能を使えば、APIキーをコードの中に書かずに「金庫」の中に隠せるため、安全に運用できます。

  • 注意: 無料枠のAPIキーだけ使用していれば料金負担はありません。しかし、人気が出てアクセスが増えると、無料枠を使い切る可能性があります。有料枠に切り替えたときには、どれだけ使用されたかの定期チェックや、利用枠制限をすることが求められます。

✅ 単体アプリ（index.html）を自前サーバーで公開する場合

  • 料金負担: 設定次第ですが、公開するには「非常に高い壁」があります。

  • 最大の弱点: HTMLの中に直接APIキーを書き込んでしまうと、ブラウザの「ソースコードを表示」から誰でもあなたのキーを盗めてしまいます。

  • 「対策」にまつわる不都合な真実:
    よく「利用者に自分のキーを入力してもらう形式にすればいい」と言われます。しかし、Google AI Studioなどの開発ツールでは、セキュリティ上の理由（他人のキーを盗み取るフィッシング詐欺を防ぐため）から、APIキーを入力させるような画面やコードを作ることは厳しく制限されており、AIにお願いしても作成してくれません。

💡 結論

自前サーバーに index.html を置くだけの公開は、練習用には最適ですが、APIキーを守るのが非常に困難です。そのため、「環境変数」が使えるデプロイ（Vercelなど）を利用するのが、現在のAIアプリ公開における「鉄則」となっています。つまりは必然的に、料金負担は開発者のあなた、ってことになってしまいます（ただし、無料枠のAPIキーだけ使っていれば負担はゼロです）


📝 「ログインしてるなら勝手に使ってよ」ができない理由

えー！　デプロイするならAI利用料は、絶対開発者が出さないといけないの？
でもなんで？

たとえばの話、

ブラウザでGoogleにログインしてるんだから、デプロイしたアプリもそのときの利用者の情報を使って、支払いもそちらでしてくれたらいいのに？

なんて思いたくなりませんか？

ですが、ここにはインターネットの「安全を守るための鉄の掟（サンドボックス）」が立ちはだかっています。

サンドボックス（砂場）というルール

ブラウザには、「あるサイトが、別のサイトの情報（ログイン状態など）を勝手に覗き見してはいけない」という強力な壁があります。

もし、あなたがデプロイした my-ai-app.vercel.app というサイトが、勝手に google.com のログイン情報を抜き取れたら……。

「怪しいサイトをうっかり踏んだだけで、勝手に自分のGoogleアカウントで高額な買い物をされたり、メールを盗み見られたりする」というパニックが起きてしまいます😱

だからこそ、外部サイト（デプロイ先）でAIを動かすには、以下のどちらかを選ぶことになります。

  1. 開発者が代金を肩代わりする
    （APIキーをサーバー側の安全な場所「環境変数」に隠し、利用者に代わって支払う）

  2. 利用者に「自分のAPIキー」を入力してもらう
    （利用者が自分のキーを持ってきて、その場で入力する）

ここで「2の方法もあるんじゃん」と思うかもしれませんが、残念ながらGoogle AI Studio の開発環境では、事実上「1」の方式しか選べないようになっています。

これには理由があります。もし「2」のように、アプリの中に「あなたのAPIキーをここに入力してください」という入力欄を自由に作れてしまうと、悪意のある開発者が他人のAPIキーを盗み取る（フィッシング）ことが簡単にできてしまうからです。

そのため、Googleの厳格なセキュリティポリシーにより、この開発ツールではAPIキーを入力させる画面や、それを管理するコードを勝手に生成することは、安全のために固く禁止されています。

※何度か2の方法（利用者に「自分のAPIキー」を入力してもらう）ができないかとトライしてみましたが、Google AI Studioに強硬に拒否られましたー！😢

つまり、「APIキーは開発者が責任を持って安全な金庫（環境変数）に入れ、利用者に負担させない」というのが、この環境でアプリを公開するための鉄則なのです。


📝 結局どの方法がいいの？

結論、Google AI Studioにおいては「誰が代金を払うのか」を基準に選びましょう！

$$
\begin{array}{|c|c|c|c|} \hline
\text{公開方法} & \text{おすすめのケース} & \text{安全性} & \text{料金負担} \\ \hline
\text{シェア} &
\substack{\text{友人や特定のコミュニティで}\\{手軽に使いたい}} &
\text{非常に高い} &
\text{利用者} \\ \hline
\text{デプロイ} &
\substack{\text{自分のブランドで}\\{本格的なアプリとして公開したい}} &
\text{高い 設定次第} &
\text{開発者} \\ \hline
\text{単体アプリ} &
\substack{\text{自分のサーバーを使い込みたい}\\{実験したい}} &
\text{低い 要注意} &
\text{開発者 利用者} \\ \hline
\end{array}
$$



🚀 右上の「アプリをデプロイ（ロケットマーク）」ボタンを説明しなかった理由

ここまで来て、気になることはありませんか？　それは、Google AI Studioの画面右上にある「アプリをデプロイ」ボタンです。

アプリをデプロイ

「これを使えば、VercelやGitHubなんて面倒なことをしなくて済むのでは？」と思った方も多いはずです。実をいうと、この機能を詳しく解説しなかったのには理由（重大なリスク）があります。

ロケットボタンの正体

このボタンを押すと、あなたが書いたコードが、Google Cloudというプロ仕様の巨大なインフラに設置されます。
「ボタン一つで世界に公開できるなら、最強じゃないか！」
……そう、技術的には最強です。しかし、そこには初心者にとっての「3つの高い壁」が立ちはだかります。

壁①：利用料はすべてユーザーもち

アプリを公開すると、サーバーの維持費やAPIの使用料はすべてあなたの負担になります。そのため、ロケットボタンを使うにはクレジットカードの登録が必須。AIが回答を生成するたびに、チャリンとお金がかかる仕組みです（Googleの支払い方法は「後払い」しかありません。使ったら、その分請求されます）。 もし悪意のあるユーザーにあなたのアプリを見つけられ、APIを24時間フル回転で叩き続けられたら……。翌月の請求額を見て青ざめることになりかねません。

壁②：予算設定は「アラート」でしかない

Google Cloudには「予算設定」がありますが、これが勘違いポイント。これは「設定額を超えたらメールを送る」というただの通知機能です。つまり「設定額に達したら自動で止まる」ストッパーではありません。 メールに気づかずに寝ている間も、課金は止まることなく続いてしまいます。

壁③：「止める」設定がプロ級に難しい

課金を確実に止める「割り当て（Quota）」の設定画面は、極めてジャングルのように複雑です。プログラミングを始めたばかりの方が、この設定を正しく行うのは至難の業といっていいでしょう。 「使いすぎたら自動で止まるVercel」とは、安全性の設計思想が根本的に違います。

というわけで、Googleの有料サービスを安易に使うと、マジで痛い目にあいかねません。そのため、あえてロケットボタンではなく、Vercelを推奨したというのが真相です。

結論：ロケットボタンは「プロへの登竜門」

つまり、ロケットボタンが「ダメな機能」というわけでは決してなく、むしろプロ向けの「最高」のサービスです。Googleの強力なインフラを、ボタンひとつで構築できるのですから、これ以上優れた機能はありません。

しかし、上記のような理由から、初心者のうちは安易に利用するのは思いとどまったほうがいい、というのが私の個人的な見解です。

  • Vercelを勧める理由 「GitHubに保存」→「Vercelで公開」という流れなら、クレジットカード登録なしで始められ、無料枠を超えたらサイトが止まるだけ。「物理的にお財布が安全」です。

  • ロケットボタンを使うとき 「Google Cloudの予算管理やQuota設定も学びたい」「本格的なビジネスとして運用する覚悟がある」というフェーズに達した時、このロケットボタンは最高の相棒になります。

まとめ

「アプリでデプロイ」は、十分な知識のある熟練ユーザーもしくは企業向けと考えたほうがいいです。

プログラミングを学び始めたばかりの方は、まずは「安心・安全な港」であるVercelからデビューすることをお勧めします。ロケット発射は、インフラの管理を理解してからでも決して遅くはありません。



📝まとめ：さいごに

いかがでしたでしょうか🙌

Google AI Studioでのアプリ開発は驚くほど簡単になりました。そして、公開方法も複数あることがわかりました。

しかし、いざ「世界中に公開（デプロイ）」しようとすると、「利用料はすべて開発者のポケットマネーから出す」という厳しい現実が待ち受けているます。

実際問題、マネタイズの予定がない趣味のアプリで、見知らぬ誰かのAI利用料を肩代わりし続けるのは、あまりに負担が大きすぎです。もはや「蛇口を全開にして放置する」ようなものといえます。

なので、アプリ公開についての現実的なアドバイスとしてはこうなります。

  1. まずは「シェア」で楽しむ！
    「URLを知っている人だけが、自分のアカウントの範囲内で遊ぶ」。これが、あなたのお財布を一番傷めず、かつ安全にAIを届ける「賢い」方法です。

  2. デプロイは「勝算」ができてから。
    自分のブランドで公開するのは魅力的ですが、それは「広告を貼る」「少額の課金モデルを組み込む」「ポートフォリオとして就職に役立てる」など、支出に見合うリターンが見込めるようになってからでも遅くはありません。これは、かなり高いハードルといえるでしょう。

💡 もしデプロイに挑戦するなら（マネタイズのヒント）

  • 「利用制限」を設ける: 1人1日5回まで、といった制限をコードに組み込み、破産を防ぐ。

  • 「Buy Me a Coffee」等の寄付: 応援してくれるファンを募る（ただし、AI代金を賄うのは至難の業です）。

  • 「広告」や「BtoB」: 特定の企業の課題を解決するツールにして、月額費用をもらう。

Google AI Studioが「利用者にキーを入力させない（＝あなたに払わせる）」という鉄の掟を敷いている以上、「無理にデプロイしない」というのは、立派な戦略の一つです。

もし、デプロイしたいのであれば、
AI機能がないアプリだけにする
もしくは
無料枠のAPIキーだけ使う
のが賢明かと思われます。

なんだかなーという感じではありますが・・・🥰

以上！

いいなと思ったら応援しよう！

ROROSUKE LABO 記事なり、プログラムなりが役に立ったと思った方は、 チップの応援よろしくお願いいたします。 次の開発もがんばろうかな、という気になりますのだ （笑）