AIアプリ公開ガイドAI Studio → GitHub → Vercel 浦山学園に戻る はじめる

初心者向け 画面を順番に押すだけ

AI Studioで作ったアプリを、
世界に公開しよう。

Google AI Studioの作品をGitHubに保存し、VercelでWebサイトとして公開するまでを、むずかしい言葉をできるだけ使わず説明します。

手順をはじめる まず全体像を見る
  • ターミナル操作なし
  • 無料プランで開始可能
  • 約30〜45分
My AI App
YOUR APP IS LIVE
✦Google
AI Studio
◆保存する
GitHub
▲公開する
Vercel

まずは、ここだけ理解

3つのサービスの役割

「作る・保管する・公開する」と覚えれば大丈夫です。

01
✦

作る場所

Google AI Studio

AIと会話しながらアプリを作る作業場。完成したコードをGitHubへ送ります。

02
◆

保管する場所

GitHub

アプリの設計図（コード）を安全に保存する倉庫。変更履歴も残ります。

03
▲

公開する場所

Vercel

GitHubのコードからサイトを組み立て、誰でも見られるURLを発行します。

たとえるなら：AI Studioが「工房」、GitHubが「設計図の金庫」、Vercelが「お店」です。GitHubを間に置くと、修正するたびにVercelが自動で新しいサイトへ更新してくれます。

ここから一緒に操作

公開までの5ステップ

上から順番に進めてください。終わった項目にはチェックを入れられます。

STEP 0

所要時間 約5分

3つのアカウントを準備する

最初に、同じブラウザで次のサービスへログインしておくとスムーズです。まだアカウントがないサービスは無料で作成できます。

POINT

Vercelは必ず「Continue with GitHub」を選ぶのがおすすめです。あとでGitHubとの接続が簡単になります。

未登録のサービスだけ開いて、順番に進めてください。

STEP 1

Google AI Studio

アプリを作って、実際に遊ぶ

  1. 1

    「Build」を開く

    Google AI StudioへGoogleアカウントでログインし、左側メニューのBuildを選びます。Buildは、日本語で指示するとコードと動作画面を作ってくれる開発モードです。

  2. 2

    作りたいものを日本語で伝える

    入力欄に次の例を貼り付け、送信ボタン（矢印）を押します。30秒〜数分待つと、右側に操作できるプレビューが現れます。

    そのまま使えるプロンプト例

    高校生向けの英単語クイズWebアプリを作成してください。
    【要件】
    1. 学年（高1・高2・高3）を選んでスタートできる。
    2. 4択クイズで、回答後すぐ正解・不正解がわかる。
    3. Geminiによる語源・覚え方・例文を表示する。
    4. 10問後に結果発表を表示する。
    5. スマホでも押しやすいカード型デザインにする。

  3. 3

    プレビューで遊び、追加注文する

    ボタン、入力、画面移動、AIの返答を一通り試します。気になるところは会話するように追加で頼めます。

    「ダークモードにして」「間違えた問題を復習できるようにして」「結果に励ましメッセージを出して」
    Preview
    APP PREVIEW
  4. 4

    公開前の動作確認をする

    最初から最後まで操作し、空欄、戻るボタン、スマホ幅なども試します。うまくいかない場合は「○○を押すと△△になるので直して」と具体的に伝えます。

  5. 5

    Gemini APIを使うアプリか確認する

    AI Studioで作ったアプリでも、すべてにAPIキーが必要なわけではありません。公開したあともGeminiに質問や生成を依頼する機能があるかどうかで判断します。

分かれ道

あなたのアプリはどちらですか？

「AIに作ってもらったか」ではなく、完成したアプリの中でAIが返答・生成するかを見ます。

A　APIキー不要

決まった処理だけで動くアプリ
  • じゃんけん・神経衰弱などの単純なゲーム
  • 問題が最初から入っているクイズ
  • 電卓・タイマー・診断・抽選アプリ
  • 入力内容を並べ替えるだけのツール

✓Secretsにキーがなくても正常です。
STEP 3の環境変数設定は飛ばせます。

B　APIキー必要

アプリの中でGeminiを使うもの
  • 入力した質問にAIが答えるチャット
  • AIが解説・文章・問題をその場で作る
  • AIが画像・アイデア・要約を生成する
  • 実行するたびにAIの返答が変わる機能

!Settings → Secretsで
GEMINI_API_KEYを確認します。

【B：APIキー必要】GEMINI_API_KEYが自動作成されていない場合

AI StudioのGet API keyを開き、Create API keyからキーを作成します。発行後はアプリのSettings → Secretsに、名前を GEMINI_API_KEY として登録してください。Vercelでも同じ名前で登録します。

キーを通常のメモ帳へ長期保存することは推奨しません。パスワード管理ツールなど安全な場所へ一時保存し、GitHub・チャット・メール・SNSには貼らないでください。

Bのみ

APIキーは家の鍵と同じです。コードへ直接書いたり、スクリーンショットやSNSへ載せたりしないでください。VITE_などブラウザへ渡す変数名にも変更しません。

Bのみ

他の人が公開アプリを使った分も、あなたのAPI利用量として数えられます。有料モデルを使う場合は料金が発生する可能性があるため、利用量・請求設定も確認してください。

STEP 2

AI Studio → GitHub

コードをGitHubへ保存する

おすすめ AI Studioから新しいリポジトリを作る方法
  1. 1

    「Settings」を開く

    AI Studioのアプリ編集画面で設定アイコンを押し、GitHubタブを選びます。

  2. 2

    GitHubを接続する

    初回だけGitHubへの接続確認が表示されます。内容を確認してAuthorize（許可）します。

  3. 3

    新しいリポジトリを作る

    Create new repositoryを選び、名前を半角英数字で入力します。例：my-ai-app。公開範囲を選べる場合は、最初はPrivate（非公開）がおすすめです。

    Repository namemy-ai-app✓ 英小文字・数字・ハイフンがおすすめ（空白は使わない）

    ※ 個人のPrivateリポジトリはVercelへ接続できます。GitHub組織のPrivateリポジトリをVercel Hobbyで使う場合は制限があるため、個人所有で始めるのが簡単です。

  4. 4

    変更をGitHubへ送る

    Create GitHub repositoryまたはPush Changes / Push to GitHubを押します。「何を変更したか」を表すメッセージは自動生成されたもので構いません。In Syncと表示され、GitHubのページにファイルが並んでいれば成功です。

すでにGitHubリポジトリがある場合

SettingsのGitHubタブで既存のリポジトリへリンクする選択肢を使います。対象が一覧に出ない場合は、GitHub側でAI Studioにそのリポジトリへのアクセス権を与えてください。

ZIPでダウンロードして手動アップロードする方法もありますが、更新のたびに作業が増えるため、最初はGitHub連携がおすすめです。

成功の目印

GitHubで package.json、src などのファイルが見えます。.env やAPIキーの文字列が公開されていないことも確認します。

STEP 4

公開後

アプリを修正・更新する

1AI Studioで
アプリを修正
→
2GitHubへ
Push
→
3Vercelが
自動で再公開

公開後の更新は簡単です。AI Studioで変更したあと、GitHubタブからPushします。VercelはGitHubの変更を見つけて自動的に新しい版を公開します。

覚えておこう

同じURLのまま内容だけが新しくなります。通常はVercelで毎回Deployボタンを押す必要はありません。

GitHub側で変更した内容をAI Studioへ戻すには？

AI StudioのSettings → GitHubタブからPullします。AI StudioとGitHubの両方で同じ場所を変更すると競合（conflict）が起きることがあります。その場合は比較画面で、残したい側の内容を選びます。

あわてなくて大丈夫

よくあるエラーと直し方

エラーメッセージを読めなくても、まず次を順番に確認します。

01Vercelの画面にGitHubの作品が出てこない

Vercelにリポジトリを見る権限がありません。VercelのImport画面にある「Adjust GitHub App Permissions」を押し、GitHubで対象リポジトリを許可します。個人アカウントのリポジトリは、原則として所有者本人が接続します。

02Deployが赤い「Failed」になった

VercelでDeployments → 失敗した項目 → Build Logsを開き、下の方にある最初の Error: とその前後をコピーします。AI Studioへ戻り、次のように送ります。

AI Studioへ送る文

「Vercelで次のビルドエラーが出ました。原因を調べ、安全なサーバー側Secretの構成を保ったまま修正してください。修正後にビルドも確認してください：
［ここにエラーを貼る］」

修正後にPush Changesを押せば、Vercelが自動で再ビルドします。あわせて次も確認します。

  • GitHubに package.json がある
  • Root Directoryがアプリのあるフォルダを指している
  • Framework PresetやBuild Commandをむやみに変更していない

ログにキーや個人情報が含まれていたら、その部分を伏せてから貼り付けてください。

03【APIキーを使うアプリ】画面は開くが、AIが返事をしない

単純なゲームなど、APIキー不要のアプリにはこの確認は必要ありません。AI機能がある場合は、Vercelの Project → Settings → Environment Variables で、GEMINI_API_KEYのスペルと値を確認します。修正後はDeploymentsからRedeployしてください。

VITE_GEMINI_API_KEYへ変更する方法は使いません。VITE_を付けた値はブラウザへ組み込まれ、閲覧者にキーを取得される危険があります。AI Studioへ「Gemini APIの呼び出しをサーバー側にし、GEMINI_API_KEYを環境変数から読むように直して」と依頼してください。

04更新したのにサイトが古いまま

AI Studioで変更しただけではGitHubへ届きません。GitHubタブからPushしたか確認します。次にGitHubの最新更新時刻と、VercelのDeploymentsが「Ready」になっているか確認してください。ブラウザの再読み込みも行います。

05APIキーをGitHubへ載せてしまった

すぐにそのAPIキーを無効化（削除）し、新しいキーを発行してください。ファイルだけ消しても過去の履歴に残る可能性があります。新しいキーはAI StudioのSecretsとVercelのEnvironment Variablesだけに登録します。

06403・429・利用上限のエラーが出た

403はキーの権限・制限・利用可能地域など、429は短時間の利用回数や割り当て上限が原因のことがあります。AI StudioのAPI Keysでキーの状態を確認し、Google Cloud側の請求設定・上限・Gemini APIへの制限も確認します。連打せず、少し待って再試行してください。

最後の確認

公開チェックリスト

5つすべてにチェックが入れば完了です。

  • ✓VercelのURLを別のブラウザでも開ける
  • ✓スマートフォンでも画面が崩れない
  • ✓AIの機能が最後まで動く
  • ✓APIキーが必要なアプリか判定した
  • ✓APIキーを使う場合、GitHubにキーが載っていない
  • ✓APIキーを使う場合、利用量・料金の条件を確認した
  • ✓個人情報やテスト用データが残っていない
コピーしました