「ローカルなら動くのに」はもう終わり。
CursorやGoogle Antigravityで作ったWebアプリを、サーバー契約なし・コスト0円で世界中に公開する方法を完全解説。
VercelとGitHubを使い、スマホで動くアプリとして友人にシェアするまでの「最後の1マイル」を埋める、非エンジニア専用のデプロイ手順書です。
【この記事のスペック】
- 所要時間: 約15分（アカウント作成含む）
- 対象: Cursor / Google Antigravity ユーザー
- 前提条件: PC、Googleアカウント、作りかけのAIアプリ
- ゴール: 自作アプリをURL化し、友人のスマホで動かす
- コスト: 完全無料（クレジットカード登録不要）
序章：あなたのアプリが「PCの中」だけで眠っているのは、最大の損失である
「せっかく作ったのに、スマホで見れないなんて。」
Google AntigravityやCursorの登場は、私たち非エンジニアにとって間違いなく「革命」でした。
プログラミング知識ゼロの私たちが、AIと対話するだけで「LINEスタンプ全自動生成ツール」や「業務効率化アプリ」を爆誕させることができる。黒い画面にコードが走り、ブラウザの中で自分のアイデアが動いた瞬間の感動は、何度味わっても鳥肌が立つものです。
しかし、多くのAIクリエイターが、その歓喜の直後に「見えない壁」に激突します。
それが、「デプロイ（Web公開）の壁」です。
「localhost」という名の孤島
あなたのPCで完璧に動いているアプリ。ブラウザのアドレスバーには http://localhost:3000 と表示されているはずです。
あなたはこう思うかもしれません。「よし、完璧だ。これを友人のスマホで見てもらおう」と。
かつて、私がAI（当時はCursorが出始めの頃でした）を使って初めて「LINEスタンプ生成ツール」を完成させた時もそうでした。自信満々でそのURLを友人のLINEに送りつけ、ワクワクしながら返信を待っていたのです。
しかし、返ってきた言葉は、残酷なほどあっけないものでした。
「これ、開けないんだけど？」
当然です。localhost とは「自分のPC自身」を指す言葉。友人から見れば、そのURLは何の意味も持ちません。私の作った素晴らしいアプリは、世界から隔絶された孤島（私のPC）の中に閉じ込められていたのです。
私は慌てて「Webアプリ 公開 方法」と検索しました。しかし、そこには「レンタルサーバーの契約」「FTPソフトでの転送」「Apacheの設定」「SSL証明書の取得」といった、呪文のような言葉が並んでいました。
「……面倒くさい。まあ、自分のPCで動くからいいか」
そうして私は、そのツールを Project_Backup_Final_v2 というフォルダの奥底にそっと封印しました。誰にも触ってもらえないまま、情熱と共にハードディスクの肥やしにしてしまったのです。
はっきり言います。これは最大の損失です。
アプリやツールは、他人に使ってもらい、フィードバックを得て初めて「生命」を持ちます。「ここがボタンだと分からなかった」「スマホだとレイアウトが崩れるよ」——そんな生の声を浴びて修正するプロセスこそが、ただの「AIで遊んでいる人」を「エンジニア」へと引き上げるのです。
サーバー契約もFTPも、もういらない
「でも、Web公開なんて難しそう…」
「サーバー代も馬鹿にならないし…」
かつての私のように、そう思って尻込みしているなら、朗報です。その知識は、もう古すぎます。
今の時代、個人開発レベルのアプリを公開するのに、レンタルサーバーの契約も、月額費用も、面倒なFTP設定も一切不要です。Google AntigravityやCursorのような「AI開発ツール」を使っているあなたには、それに見合った「AI時代の公開方法」が存在します。
それが、今回紹介する「Vercel（バーセル）」を使った手法です。
- 初期費用・維持費：0円
- コマンド操作：ほぼ不要（Cursor/Antigravity連携で完結）
- 所要時間：最短3分
なぜ、レンタルサーバーではなくVercelなのか？
それは、VercelがAIが書き出すコード（ReactやNext.jsなど）にとっての「実家」のような存在だからです。古いサーバーが「借家」だとすれば、VercelはAIコードが最も快適に動くように設計された、モダンな専用住宅なのです。
あなたがやるべきことは、「localhostからの卒業」を決意することだけ。
さあ、あなたのPCに閉じ込められたアプリを、世界という大海原へ解き放ちましょう。そのための「パスポート」の発行手順を、これから余すことなくお伝えします。
なぜ「レンタルサーバー」ではダメなのか？Antigravity世代のホスティング戦略
「Webサイトを公開する」と聞いた時、あなたの頭にはまず何が浮かびましたか？
おそらく、「レンタルサーバー」と「ドメイン契約」、そして「FTPソフト」ではないでしょうか。
もしあなたがWordPressでブログを運営しているなら、それは正解です。しかし、今回のように「AI（CursorやGoogle Antigravity）で作ったWebアプリ」を公開する場合、その常識は捨ててください。
なぜなら、AIが生成するモダンなコードを従来のレンタルサーバーで動かすのは、「最新のテスラ（EV）を、ガソリンスタンドで充電しようとする」ようなものだからです。動かないことはありませんが、あまりにも非効率で、その真価を発揮できません。
「FTP」という名の苦行から解放されよう
私がまだプログラミング初心者の頃、自作のツールを公開するために月額1,000円程度のレンタルサーバーを契約しました。「FFFTP」という転送ソフトを使い、ファイルを一つずつサーバーにアップロードする日々。
しかし、ここには致命的な罠がありました。
コードを1行修正するたびに、毎回手動でファイルをアップロードし直さなければなりません。ある深夜、眠い目をこすりながら作業していた私は、誤って設定ファイルを削除してしまい、アプリが真っ白（ホワイトスクリーン）になりました。バックアップも取っておらず、復旧に丸3日。まさに悪夢です。
従来のレンタルサーバー方式は、以下のような「三重苦」を抱えています。
- 更新が面倒: 修正のたびに手動アップロードが必要。
- 設定が複雑: SSL（https化）やサーバー設定を自分でやる必要がある。
- コストがかかる: 使っても使わなくても毎月固定費が発生する。
AIを使って爆速で開発しているのに、公開作業で足踏みしていては本末転倒です。
Antigravity世代の標準「Vercel」とは何か
そこで登場するのが、Vercel（バーセル）をはじめとする「フロントエンドクラウド」です。
難しい技術用語は抜きにします。Vercelを一言で言えば、「GitHub（コードの保存場所）と連動して、勝手に公開作業をやってくれるロボット」です。
その違いを比較表にしてみました。
| 特徴 | 従来のレンタルサーバー | Vercel (モダンホスティング) |
|---|---|---|
| アップロード | FTPソフトで手動転送 | GitHubに保存するだけで全自動 |
| SSL (鍵マーク) | 自分で申請・設定が必要 | 完全自動・標準装備 |
| APIキー管理 | .env管理が複雑・危険 | ダッシュボードで安全に管理 |
| コスト | 月額500円〜1,000円 | 0円 (個人・非商用ならHobbyプラン) |
私が初めてVercelを使った時、最も感動したのは「修正の容易さ」です。
エディタでコードを直し、「保存（Commit & Push）」ボタンを押す。たったそれだけで、Vercelが変更を検知し、数分後には世界中のWeb上のアプリが最新版に書き換わっているのです。FTPソフトを立ち上げる必要すらありません。
なぜ「AI開発」にVercelが最適なのか？（3つの技術的理由）
「無料なら何でもいい」わけではありません。私がAI開発者に特にVercelを推すのには、技術的な理由があります。
1. AIコードにとっての「実家」である
CursorなどのAIツールは、基本的に「React」や「Next.js」といったモダンなJavascriptフレームワークを使ってコードを書こうとします。
VercelはNext.jsの開発元そのものが運営しています。つまり、「AIが書きがちなコード」を、世界で一番理解し、最適に動かしてくれる場所なのです。設定ファイルすら不要で、AIが吐き出したコードをポンと置くだけで動く。この「相性の良さ」は圧倒的です。
2. AntigravityのHTMLも即公開
最近話題の「Google Antigravity」で生成されるような、プレーンなHTMLやJavaScriptだけのシンプルなアプリとも相性抜群です。複雑なビルド設定なしで、ドラッグ＆ドロップ（またはGit連携）だけで即座に公開URLが発行されます。「とりあえず動くものを見せたい」というニーズに最速で応えてくれます。
3. 「APIキー流出」の恐怖からの解放
これが最も重要です。
AIアプリ開発では、GeminiやOpenAIの「APIキー」を使います。これをコードに直接書いて公開してしまうと、悪用されて高額請求が来るリスクがあります（通称：APIキー死）。
従来のサーバーではこの管理が面倒でしたが、Vercelなら管理画面（ダッシュボード）にキーを入力するだけで、コード内に書くことなく安全にアプリから呼び出せます。このセキュリティの高さこそ、AI開発者がVercelを選ぶべき最大の理由かもしれません。
「無料」の裏側と、私たちが選ぶべき戦略
「タダより高いものはないと言うけれど、本当に大丈夫？」
そう不安になる方もいるでしょう。
正直に言います。Vercelの無料プラン（Hobbyプラン）には制限があります。
- 商用利用不可: 営利目的のサイトには使えません（Proプランへのアップグレードが必要）。
- リソース制限: アクセスが爆発的に増えると制限がかかります。
しかし、Vercelには「将来の顧客を育てるため、個人開発者は徹底的に優遇する」という明確な戦略があります。だからこそ、個人の学習や実験、ポートフォリオ公開においては、驚くほど高機能な環境が無料で使えるのです。
私の運営戦略としての結論はこうです。
- ブログ（アフィリエイト・商用）: 従来のレンタルサーバー（WordPress、SEO重視）
- AI自作アプリ/実験ツール: Vercel（開発スピード、コスト、セキュリティ重視）
適材適所です。AIでアプリを作るという新しい挑戦には、それにふさわしい新しい場所を用意してあげましょう。
【準備編】AI開発者こそ「GitHub」を恐れるな。それは最強のバックアップだ
※ここからの操作は、Cursorを例に解説しますが、Google Antigravityを使用している方も基本的に同じ操作（VS CodeベースのSource Control画面）で進められます。
「GitHub（ギットハブ）のアカウントを作ってください」
そう言われた瞬間、ブラウザを閉じようとしたあなた。ちょっと待ってください。
その気持ち、痛いほどわかります。「Git」とか「コマンド」とか「黒い画面（ターミナル）」とか……エンジニア特有の”マウントを取ってくる専門用語”に見えますよね。
かつての私もそうでした。
「英語だし、画面は真っ黒だし、何か呪文（コマンド）を間違えたらPCが爆発するんじゃないか」と本気で怯えていました。
しかし、断言します。
Google AntigravityやCursorを使っている今のあなたに、難しい「黒い画面」の操作は一切不要です。
ここでは、AI開発者が絶対に避けて通れない、けれど実はとても優しい「GitHub」との付き合い方について、私の経験を元に「美味しいとこ取り」の方法を伝授します。
GitHubは「最強のセーブポイント」である
そもそも、なぜ面倒な思いをしてまでGitHubを使う必要があるのでしょうか？
Vercelと連携するため？ もちろんそれもあります。しかし、AI開発者にとっての最大のメリットは別にあります。
それは、「いつでも過去に戻れるタイムマシン（セーブポイント）機能」です。
AI開発あるあるを思い出してください。
「この機能を追加して」とAIに指示したら、盛大にコードを書き換えられ、今まで動いていた機能まで動かなくなったことはありませんか？
私は何度もあります。「Ctrl+Z」で戻ろうとしても限界があり、結局どこが壊れたのか分からず、プロジェクトを最初から作り直す……という絶望。
GitHubを使っていれば、この悲劇は100%防げます。
ゲームでボス戦の前にセーブするように、大きな変更を加える前に「Commit（コミット）」ボタンを押すだけ。もしAIがコードを破壊しても、1クリックで「正常に動いていた5分前の世界」に戻ることができます。
つまり、GitHubとはコードの置き場である以上に、AIという暴れ馬を乗りこなすための「命綱」なのです。
「フォルダのコピー」によるバックアップは卒業しよう
もしかして、あなたのPCの中にこんなフォルダはありませんか？
- 📂
my-app - 📂
my-app_v2 - 📂
my-app_final - 📂
my-app_final_fix_2024 - 📂
my-app_honto_ni_saigo
……ありますよね。これは「エンジニアになりきれていない人」の典型的な特徴です（過去の私です）。
どれが最新かわからないし、容量も無駄。何より「あの時のあの機能だけ復活させたい」といった器用なことができません。
GitHubを使えば、フォルダは常に1つ（my-app）だけ。
「v2」や「final」といった履歴はすべて裏側でGitHubが管理してくれます。部屋が散らからない、スマートな開発ライフの始まりです。
「黒い画面」は捨てろ。Cursorで完結する3ステップ
「理屈はわかったけど、あの黒い画面にコマンドを打つのが嫌なんだ！」
安心してください。現代の最強エディタ「Cursor」を使えば、キーボードでコマンドを打つ必要すらありません。すべてマウス操作だけで完結します。
以下に、私が毎日やっている「最短手順」を記します。これだけで、あなたのコードはGitHubという安全地帯へ転送されます。
Step 1: 「Source Control」を開く
Cursor（またはAntigravity）の左端にあるメニューから、枝分かれしたようなアイコン（Source Control）をクリックします。これがGitの操作盤です。
初めての時は「Initialize Repository（リポジトリの初期化）」というボタンがあるはずなので、迷わずクリックしてください。
Step 2: 変更を「コミット」する（セーブ）
ファイル一覧の上にメッセージ入力欄があります。ここに「first commit」や「ボタン修正」など、適当なメモを入力します。
そして「Commit」ボタン（またはチェックマーク✓）をクリック。
これで、あなたのPC内に「セーブポイント」が作られました。
Step 3: 「Publish Branch」で世界へ（アップロード）
最後に、画面上の「Publish Branch（ブランチを公開）」という青いボタンをクリックします。
ここが運命の分かれ道です。慎重に進めてください。
- 認証画面: 初回だけ、突然ブラウザが立ち上がりGitHubの認証ページが開きます。驚かないでください。「Authorize…」という緑のボタンを押して、エディタに戻る許可を出せばOKです。
- 公開設定（最重要！）: 画面上部にメニューが出ます。ここで必ず「Private Repository（非公開リポジトリ）」を選択してください。
Public（公開）：世界中の誰もがあなたのコードを見れます。APIキーが漏れる危険性があります。Private（非公開）：あなたと、あなたが招待した人しか見れません。最初は必ずこちらを選びましょう。
……え、これだけ？
はい、これだけです。
これであなたのコードはGitHubという堅牢な金庫（Privateリポジトリ）に格納されました。黒い画面で git add . だの git push origin main だのと打つ必要は、もうどこにもありません。
【実践編】Cursorから3クリックで世界へ。Vercel連携の全手順
さあ、いよいよクライマックスです。
あなたのPC（ローカル）にある、GitHubという金庫に入れた大切なコードを、Vercelという「世界への発射台」に乗せる時が来ました。
「発射台」なんて言うと、NASAの管制室のような複雑なスイッチ操作を想像するかもしれません。
しかし、Vercelの凄さはその「拍子抜けするほどの簡単さ」にあります。カップラーメンにお湯を入れて3分待つよりも簡単です（冗談抜きで）。
ここでは、私が実際に毎日行っている手順を、画面の向こうのあなたと一緒に進めるつもりで解説します。タイトルには「3クリック」と書きましたが、実際にはそれすら感じる暇もないほど一瞬です。
Step 1: Vercelへの「入場パス」を手に入れる
まずは Vercel公式サイト にアクセスします。
右上の「Sign Up」ボタンを押すと、「何でログインしますか？」と聞かれます。
ここで最大のポイントがあります。
必ず、「Continue with GitHub」を選んでください。
メールアドレスやGoogleアカウントでも登録できますが、絶対にGitHubを選んでください。なぜなら、これを選ぶだけで「GitHubにあるコードを読み込む権限」が自動的に連携されるからです。これ以外の方法だと、後でSSH鍵の設定や権限付与といった「迷路」に迷い込むことになります。
「GitHubでログイン」を選ぶ。これだけで、面倒な手続きの9割は完了したと思ってください。
Step 2: リポジトリを「インポート」する
ログインすると、黒を基調とした洗練されたダッシュボード（管理画面）が表示されます。
ここでの操作はシンプルです。
- 画面上の「Add New…」という白いボタンをクリック。
- 「Project」を選択します。
- 「Import Git Repository」という画面が表示されます。
ここを見てください。先ほどあなたがGitHubにアップロード（プッシュ）した my-app（あなたのアプリ名）がリストに並んでいるはずです。
まるで魔法のように連携されていますよね？ これが「Continue with GitHub」の威力です。
その横にある「Import」という白いボタンをクリックしてください。
Step 3: 設定は「AI任せ」でOK（※エラーが出ても焦らない！）
「Configure Project（プロジェクトの設定）」という画面に移ります。
ここで初心者が一瞬固まるのが「Framework Preset」という項目です。
「Next.js? Vite? Create React App? ……私のアプリはどれ？」
安心してください。Vercelは非常に賢いので、あなたのコードの中身（package.jsonなど）を自動で解析し、「あ、これはNext.jsで作られてますね」と勝手に判断して最適な設定を選んでくれています。
Google Antigravityで作ったプレーンなHTMLサイトの場合も、「Other」などを自動で選んでくれます。
基本的には、ここにある項目は何も触らなくてOKです。
【重要】ここで一旦手を止めてください
ここに「Environment Variables（環境変数）」という項目があります。「GeminiのAPIキーとかここで入れるのかな？」と思った勘のいい方、正解です。
しかし、ここではあえて「空欄」のまま進めます。
なぜか？
APIキーの設定は、一歩間違えると流出事故につながる危険な作業だからです。流れ作業でパパッとやるのではなく、次のセクションで「安全な金庫への入れ方」としてじっくり解説します。
準備ができたら、画面下の「Deploy」ボタンを、祈りを込めてクリックしてください。
⚠️ ここで「Build Failed（赤文字）」が出た方へ
焦らないでください。APIキーが必要なアプリの場合、キーが入っていないので当然エラーになります。
「よし、正常に失敗した！」と思ってください。エラー画面が出たということは、Vercelとあなたのコードが正しくつながった証拠です。キーさえ入れれば動きます。
Step 4: 至福の「紙吹雪」を浴びる
エラーが出なかった場合（あるいは静的サイトの場合）、画面が切り替わりログが流れ始めます。
これはVercelのロボットたちがあなたのアプリを組み立て（ビルド）ている様子です。
「Building…」
「Installing dependencies…」
この時間は、だいたい1分〜2分程度。
そして、すべての処理が終わると、画面いっぱいにWeb上の紙吹雪（コンフェティ）が舞い散ります。
「Congratulations!」
その文字と共に表示されるサムネイル画像をクリックしてみてください。
あなたのブラウザの新しいタブで、あなたのアプリが開きます。
URLを見てください。 localhost ではありません。https://my-app-xi-three.vercel.app のような、世界に一つだけのURLが表示されているはずです。
おめでとうございます。あなたのアプリは今、世界デビューを果たしました。
スマホでそのURLを開いてみてください。友人にLINEで送ってみてください。ちゃんと動くはずです。
なぜこれが「魔法」なのか？ —— CI/CDの衝撃
しかし、Vercelの本当の凄さは、デプロイが終わった「後」にあります。
もし、公開したアプリに「誤字」を見つけたらどうしますか？
従来のサーバーなら、ファイルを修正して、FTPソフトを開いて、該当ファイルを探して、上書きアップロードして……という手順が必要でした。
Vercelの場合、手順はこう変わります。
- エディタ（Cursor/Antigravity）で誤字を直す。
- Git画面で「Commit」して「Sync（Push）」を押す。
……以上です。
Vercelの画面を開く必要すらありません。
GitHubに変更が届いた瞬間、Vercelがそれを検知し、「おっ、更新があったな。新しいバージョンを作らなきゃ」と勝手に再デプロイを開始します。
数分後、先ほどのURLにアクセスすれば、もう誤字は直っています。
専門用語でこれを「CI/CD（継続的インテグレーション/継続的デリバリー）」と呼びますが、名前なんて覚えなくていいです。
「保存すれば、勝手にWebサイトも書き換わる魔法」と覚えてください。
この「修正の心理的ハードル」が限りなくゼロになることこそが、私たちがVercelを選ぶ最大の理由であり、Antigravity世代の開発スタイルなのです。
さて、ここで最後の仕上げです。
「動いた！完璧だ！」と喜んでいる方、あるいは「エラーで動かない！」と嘆いている方。
どちらの方も、まだ「エンジンの鍵（APIキー）」をセットしていません。
このままでは、アプリはただの張りぼてか、あるいはあなたのクレジットカード情報を危険に晒す時限爆弾になりかねません。
紙吹雪を浴びた直後の今こそ、気を引き締めてください。
次のセクションで、AI開発者が絶対に知っておかなければならない「APIキーの鉄壁の守り方」について解説します。これを知らずに公開し続けるのは、現金を道端にばら撒くのと同じです。
【注意点】APIキー流出を防げ！AI開発者が陥る最大のセキュリティ・ホール
「デプロイ完了！動いた！」と歓喜しているあなた。
あるいは、「Build Failedと出て止まっている」と不安なあなた。
どちらの方も、今すぐ、キーボードから手を離して聞いてください。
ここからの話は、アプリが動く・動かない以前の、あなたの「銀行口座」を守るための話です。
もしあなたが、GeminiやOpenAIの「APIキー」をコードの中に直接書き込んでGitHubに上げているなら、今あなたのアプリは「クレジットカード番号を道路にばら撒いている」のと同じ状態です。
これは脅しではありません。
GitHub上には、誤って公開されたAPIキーを24時間365日スキャンし続ける「悪質なBot」が巡回しています。コードにキーを直書きして公開（Public）した場合、盗まれるまでの時間は「数秒」と言われています。
翌月、あなたの元に数十万円、数百万円の請求が届く……いわゆる「APIキー死」。
これを防ぐために、AI開発者が絶対に知っておくべき「環境変数（Environment Variables）」の設定方法を解説します。
なぜコードに書いてはいけないのか？
初心者がやりがちなのが、以下のような書き方です。
// 絶対にやってはいけない例（API Key Deathへの入り口）
const apiKey = "AIzaSyD..."; // ←ここに直接書いている！
これをGitHubに上げると、コードは全世界に公開されます。「誰も私のコードなんて見ないだろう」という油断が命取りです。人間は見なくても、Botは見ています。
では、どうすればいいのか？
コードの中には「変数名（参照用の名前）」だけを書き、「本物のキー（中身）」はVercelの厳重な金庫の中に保管するのです。
これが「環境変数」という仕組みです。
Vercelの「金庫」にキーをしまう手順
手順は非常にシンプルです。Vercelのダッシュボードで行います。
- Settingsを開く:
Vercelのプロジェクト画面上部にある「Settings」タブをクリックします。 - Environment Variablesを選択:
左メニューから「Environment Variables」を選びます。ここが金庫の入り口です。 - キーと値を入力:
- Key: コードで使う名前（例:
GEMINI_API_KEY） - Value: 本物のAPIキー（
AIza...で始まる長い文字列）
- Key: コードで使う名前（例:
- Save:
「Save」ボタンを押します。これで暗号化されて保存されました。
【超重要】設定したら「再デプロイ」が必要！
ここで9割の人がつまずきます。
環境変数を設定しただけでは、現在公開されている（またはビルド失敗している）アプリには反映されません。
「Deployments」タブに行き、最新のデプロイの横にある3点リーダー（…）から「Redeploy」を選択してください。
これで初めて、金庫の中身がアプリに組み込まれ、エラーが出ていた人は正常に動き出します。
🚨 【緊急】もし、既にコードに書いて公開してしまっていたら？
この記事を読む前に、うっかりAPIキーを直書きしてGitHubにプッシュしてしまった方。
あるいは、「Privateリポジトリだから大丈夫」と思って直書きしている方。
そのキーは、もう「死んでいる」と思ってください。
GitHubには「履歴」が残ります。後から慌ててコードを消しても、Botは「過去のコミット履歴」まで遡ってキーを盗み出します。
今すぐ以下の手順を行ってください。
- Google AI Studio（またはOpenAI）の管理画面に行く。
- 該当のAPIキーを削除（Delete/Revoke）する。
- 新しいキーを再発行する。
「見なかったことにする」のが一番危険です。キーさえ再発行すれば、前のキーはただの無意味な文字列になります。漏れたら即無効化。 これが鉄則です。
⚠️ AI開発者への警告：その金庫、透明じゃない？
ここで、少し専門的ですが命に関わる話をします。
AIで作ったアプリ（特にReactなどのフロントエンド単体で動くもの）の場合、環境変数の扱いに注意が必要です。
もしあなたが、Next.jsなどで NEXT_PUBLIC_ という接頭辞がついた環境変数を使っている場合、あるいはViteなどで単純に環境変数を読み込んでいる場合、そのキーはブラウザの「検証ツール（F12）」で見えてしまう可能性があります。
ブラウザ（クライアントサイド）で動く以上、APIキーは必ずブラウザに渡されるからです。これはVercelを使っても防げない、Webの仕組み上の限界です。
どうすれば完全に隠せるのか？
「サーバーサイド（バックエンド）を経由する」のが唯一の正解です。
……と言われても、「バックエンドなんて作れないよ！」と思いますよね。
安心してください。ここでこそAIを使います。
CursorのAIに、以下のプロンプトを投げて指示してください。
VercelのAPI Routes（またはServerless Functions）を使って、
APIキーを隠蔽してGeminiにリクエストを送るバックエンドのコードを作成してください。
フロントエンドからは直接Geminiを叩くのではなく、
そのバックエンド経由でデータを取得するように修正してください。
難しく考える必要はありません。「キーを隠すための中継所を作って」とAIに頼めば、Next.jsの app/api/route.ts などの安全な場所でキーを使うコードを書いてくれます。
これこそが、専門性の高いプロのAI開発者のやり方です。
ローカル開発（自分のPC）での守り方
最後に、自分のPCでの開発時の注意点です。
Vercel上では設定画面を使いますが、ローカルでは .env というファイルを使います。
ここでも「順序」が命です。逆にすると事故ります。
- まず
.gitignoreを確認・追記する:
プロジェクト直下の.gitignoreファイルを開き、*.envや.env.localが記述されているか確認します。なければ追記します。これが「GitHubにアップロードしないリスト」です。 - その後に
.envを作成する:
安心して.envファイルを作り、中にGEMINI_API_KEY=AIza...と書きます。
これなら、誤ってGitHubにキーが送信されることはありません。
最後の砦：「予算アラート」を設定しよう
セキュリティは、開発者の「シートベルト」です。
しかし、どんなに気をつけてもミスは起こります。
万が一のために、Google CloudやOpenAIの管理画面で「予算アラート（Budget Alert）」を設定しておきましょう。
「もし使用料が500円を超えたらメールを送る」という設定にしておけば、最悪の場合でも早期発見できます。
さあ、これであなたのアプリは鉄壁の守りを得ました。
次はいよいよ最終章。安全になったアプリのURLをQRコード化し、友人に自慢するための「応用テクニック」を紹介します。
応用：URLをQRコードに。友人のスマホで自分のアプリが動く感動を
お疲れ様でした。
長い旅路の果てに、あなたのアプリは今、Vercelという名のインターネットの海に浮かんでいます。
しかし、PCの画面で眺めているだけでは、まだ「半分」しか楽しめていません。
最後の仕上げとして、このアプリを「現実世界」に持ち出しましょう。
「これ、俺が作ったんだ」と言える瞬間
PCのブラウザ（Chrome）で、あなたのアプリのタブを開いてください。
アドレスバー（URL欄）の右端にある「共有アイコン」をクリックし、「QRコードを作成」を選んでみてください。
画面に現れたモザイク模様。
これをスマホのカメラで読み取った瞬間、あなたの手元で、あなたがAIと作ったアプリが動き出します。
私が初めてこれを体験した時、すぐに近所のカフェにいた友人の元へ走りました。
「ちょっとこれ見てよ」
友人のスマホでQRコードを読み取ってもらう。
「え、何これ？ アプリ？ お前が作ったの？」
この瞬間です。localhost という孤島にいた頃には味わえなかった、「自分の作品が他人の手に渡る」という震えるような感動。これこそが、デプロイという面倒な作業を乗り越えた者だけが得られる報酬です。
ぜひ、家族や友人に見せてみてください。
「すごい！」と言われるかもしれないし、「ここが使いにくい」と言われるかもしれません。そのすべての反応が、あなたのクリエイターとしての糧になります。
次のステップ：アプリを「ホーム画面」に常駐させる（PWA）
さらに欲張りなあなたへ、一つヒントを置いておきます。
スマホでWebサイトを開くと、アドレスバーやブラウザの枠が邪魔ですよね。これを消して、まるでApp Storeからダウンロードした「本物のアプリ」のように見せる裏技があります。
それが「PWA（プログレッシブ・ウェブ・アプリ）」です。
難しそう？ いいえ、これもAIに頼めば一瞬です。
Cursorにこう聞いてみてください。
このアプリをPWA対応させて。
スマホのホーム画面に追加した時、アイコンが表示されて全画面で動くようにしたい。
manifest.jsonとアイコン画像の作成、必要な設定を全部やって。
これを実装してデプロイし直すと、ユーザーのスマホにアプリとしてインストールできるようになります。
※注意：iPhoneユーザーの友人に見せる場合
Androidでは「ホーム画面に追加」ボタンが出やすいですが、iPhone（Safari）の場合は少し手順が違います。友人にこう伝えてください。
「画面下の『共有ボタン（四角から矢印が出ているアイコン）』を押して、下の方にある『ホーム画面に追加』を選んでみて」
これで、友人のiPhoneのホーム画面に、あなたのアプリのアイコンが輝きます。
さらなる「プロ」の世界へ：独自ドメインという野望
ここまで来ると、気になってくるのがURLです。my-app-xi-three.vercel.app ……ちょっと長いし、「借り物感」がありますよね。
もしあなたが、このアプリを本気で広めたいと思ったら、次は「独自ドメイン」の取得をおすすめします。
年間1,000円〜2,000円程度で、my-awesome-tool.com のようなオリジナルの住所を持てます。
Vercelなら、取得したドメインを設定画面に入力するだけで、あっという間に切り替わります。
自分のドメインでアプリが動いた時、あなたは名実ともに「個人開発者」の仲間入りを果たします。この高揚感は、何物にも代えがたいですよ。
結び：あなたはもう、ただの「AIユーザー」ではない
最後に。
この記事を読み始めた時、あなたは「AIでなんかすごいことができるらしい」という、ただの好奇心旺盛なユーザーだったかもしれません。
しかし、今のあなたは違います。
黒い画面への恐怖を回避し、Gitという履歴管理を使いこなし、Vercelという最新鋭のプラットフォームにデプロイを完了させました。
このスキルセットは、実は世の中の「プログラミングスクール卒業生」レベルに匹敵、あるいは部分的には凌駕しています。
なぜなら、あなたは「教科書の書き写し」ではなく、「自分が欲しいもの」をゼロから形にして公開まで持っていったからです。
「作って終わり」にしない。
その壁を越えたあなたには、もう「作れないもの」はありません。
さあ、次は何を作りますか？
もしアプリが完成したら、ぜひX（Twitter）などでシェアしてください。
「#Antigravity世代」などのタグをつけてくれれば、私も必ず見に行きます。
あなたのアイデアが世界に公開される日を、楽しみに待っています。
まとめ：AIアプリ開発は「公開」して初めて完結する
長らくお付き合いいただき、ありがとうございました。
ここまで読み進め、実際に手を動かしたあなたは、もう「PCの中で動かして満足するだけの人」ではありません。
最後に、今回紹介した「Antigravity世代のデプロイ術」の要点を整理します。
開発に行き詰まった時や、新しいアプリを公開する時は、このチェックリストに戻ってきてください。
【保存版】Vercelデプロイ・完全攻略チェックリスト
AI開発において、公開手順は「暗記」する必要はありません。「流れ」さえ掴んでおけば、あとはAIが助けてくれます。
- 脱・レンタルサーバー
- AIアプリ（Next.js/React）の公開に、有料のレンタルサーバーやFTPは不要。
- Vercel（Hobbyプラン）を使えば、SSL付き・高速・無料で公開できる。
- GitHubは「命綱」
- 黒い画面は使わず、Cursor（Antigravity）の「Source Control」から操作する。
- こまめに「Commit（セーブ）」し、何かあったら時間を巻き戻す。
- 最初は必ず「Private（非公開）」リポジトリを選ぶ。
- Vercel連携の鉄則
- アカウント作成時は必ず「Continue with GitHub」を選ぶ。
- フレームワーク設定はAI（Vercel）の自動判別に任せる。
- セキュリティ（最重要）
- APIキーはコードに直書きしない。
- もし直書きして公開してしまったら、即座にキーを「Revoke（無効化・削除）」し、再発行する。
- Vercelの「Environment Variables」に設定し、必ず「Redeploy」する。
- フロントエンドで見えてしまう場合は、AIに「バックエンド（API Routes）を作って」と頼む。
- 現実世界へ
- QRコードやPWA化（ホーム画面追加）を活用し、スマホで動かす感動を味わう。
- 慣れてきたら「独自ドメイン」を取得し、プロの装いを手に入れる。
AIと共に、クリエイターのその先へ
私がプログラミングの知識ゼロから、プロンプト生成ツール「Prompt Architect」や、LINEスタンプを一括生成する「Stamp Factory」を開発・公開できたのは、間違いなくVercelとCursorのおかげです。
昔なら、Linuxサーバーの黒い画面（SSH）で設定だけに1週間悩み、謎のエラーログと睨めっこして挫折していたでしょう。
しかし今は、インフラ（サーバー）のことなど忘れ、純粋に「何を作るか」「どう楽しんでもらうか」というアイデアの部分だけに全精力を注げる時代です。
Google AntigravityやGemini 3 Proといった最新モデルは、あなたの頭の中にあるイメージをコードに変えてくれます。
そしてVercelは、そのコードを一瞬で世界中に届けてくれます。
道具は揃いました。パスポートも発行しました。
あとは、あなたが「船出」を決めるだけです。（もちろん、最初は小さな筏（いかだ）で大丈夫です。沈んでもお金はかかりませんから）
あなたの作ったアプリが、世界の誰かの役に立ち、あるいは誰かを笑顔にする未来を想像してみてください。localhost からの卒業おめでとうございます。
新しい「Webエンジニア」としての旅路が、素晴らしいものになりますように。
▼あわせて読みたい：私がAIで作ったツールの開発記録
この記事へのコメントはありません。