AIにアプリ開発の相談をすると、ある時点で必ずこう言われます。

「データベースはSupabaseを使いましょう」 「公開はVercelが簡単です」

初めて聞いたとき、私の頭の中はこうでした。

「スーパベース……？」

AIは当たり前のように話を進めてくれます。 手順通りにやれば、動くものはできます。実際、できました。

でも、自分が何を契約して、どこに何を預けたのか分からないまま進むのは、正直けっこう怖かった。

今日は、あの頃の自分が知りたかったことをまとめます。 技術解説ではなく、「契約ボタンを押す前に分かっておきたいこと」の話です。

この記事で分かること
1

SupabaseとVercelがそれぞれ「何の係」なのか

2

無料プランの落とし穴（実体験あり）

3

登録前に決めておきたい3つのこと

アプリは「置き場所」と「保管庫」でできている

まず全体像から。

Webアプリは、ざっくり言うと2つの部品でできています。

Webアプリの基本構造を示した図。アプリ本体を置く場所（Vercelなどのホスティング）と、データを保管する場所（Supabaseなどのデータベース）の2つの役割に分かれている

**Vercelは「アプリの置き場所」**です。 作ったアプリをここに置くと、URLが発行されて、ブラウザから見られるようになります。お店でいえば、店舗を構える土地です。

**Supabaseは「データの保管庫」**です。 アプリに入力した記録は、ここに保存されます。お店でいえば、商品台帳や顧客台帳をしまっておく金庫です。

似たような役割のサービスは他にもあります（置き場所ならCloudflare、Netlify。保管庫ならFirebaseなど）。 AIがSupabaseやVercelを勧めてくるのは、無料で始められて、情報が多くて、組み合わせの実績が多いから。妥当な提案です。

ここまで分かっていれば、AIの説明は一気に読みやすくなります。 「いま土地の話をしてるのか、金庫の話をしてるのか」が分かるからです。

無料プランには「無料の理由」がある

どちらも無料で始められます。個人開発ならずっと無料の範囲で収まることも多いです。

ただし、無料には条件があります。 私が実際に踏んだ落とし穴がこれです。

Supabaseの無料プランは、しばらくアクセスがないと一時停止します。

家族用のアプリを作って、満足して、数週間あまり使わない時期がありました。 ある日開いたら、アプリがエラーで動かない。壊したかと焦りました。

原因は故障ではなく、仕様でした。 無料プランでは、一定期間アクセスがないとデータベースが「休眠」します。管理画面から再開ボタンを押せば戻りますが、知らなければ「壊れた」と思うやつです。

無料プランの主な注意点を示した図。一定期間使わないと一時停止する、容量や回数に上限がある、止まっても自分で気づいて再開する必要がある、の3点

他にも、無料プランには共通の性格があります。

  • 容量・回数に上限がある（個人利用なら普通は超えません）
  • 止まったときに誰も教えてくれない（自分で気づく必要がある）
  • 仕様は変わることがある（無料の範囲が狭くなることもある）

「無料で使える」は本当です。 ただ、「無料で、何もしなくてもずっと動き続ける」ではない。ここだけ覚えておくと、いざという時に焦りません。

登録前に決めておきたい3つのこと

実際に手を動かす前に、3つだけ決めておくことをおすすめします。

1. 何のデータを預けるのかを決める

保管庫に入れるのが「自分の読書メモ」なのか「家族の記録」なのかで、慎重さのレベルが変わります。

預けるデータに人の情報や健康の情報が入るなら、公開範囲とログインの設計はAI任せにせず、自分で理解できるまで聞いた方がいいです。 私が家族用アプリを一般公開しないと決めたのも、この理由からでした。

→ 非エンジニアがAIでWebアプリを作ったあと、一般公開しないと決めた理由

2. 登録用のアカウントを整理しておく

SupabaseもVercelも、GitHubアカウントで登録するのが標準的な流れです。 つまり実質、GitHub・Supabase・Vercelの3つのサービスと付き合うことになります。

どのメールアドレスで登録したかを、メモ1枚でいいので残しておいてください。 数ヶ月後の自分は、確実に忘れています（忘れました）。

3. 「秘密の鍵」の置き場所を最初に決める

SupabaseをつなぐとAPIキーという「秘密の鍵」が発行されます。 これをコードに直接書くと、コードを公開した瞬間に鍵ごと公開されます。

ルールは1つだけ。 鍵は .env というファイルに入れて、コードには書かない。

AIに「APIキーは.envに入れて、コードに直接書かないでください」と最初に言っておけば、そのように作ってくれます。 この一言を最初に言えるかどうかが、たぶん一番大事な分かれ道です。

登録前に決めておく3つのことを示した図。①何のデータを預けるか、②どのアカウントで登録するか記録する、③APIキーは.envに入れてコードに書かない

分からないまま進めず、AIに「説明係」もやらせる

最後に、一番使えるコツを。

SupabaseやVercelの設定中に分からない画面が出たら、その都度AIに聞いていいんです。

いまSupabaseの設定画面で「Row Level Security」というものが出てきました。 非エンジニアにも分かる言葉で、これが何で、オンにすべきか教えてください。

AIは開発の相談相手であると同時に、契約内容の通訳もしてくれます。 「とりあえずOKを押す」を減らせるだけで、あとから分からなくなる場面が激減します。

Claude Codeで開発を始めたときに感じた壁については、こちらで書いています。

→ 非エンジニアがClaude Codeでアプリを作るとき、最初に感じた壁

まとめ：道具の名前に怯まなくていい

  • Vercelは置き場所、Supabaseは保管庫。役割が分かれば怖くない
  • 無料プランは「使わないと止まる」ことがある。壊れたと焦らない
  • 預けるデータ・登録アカウント・鍵の置き場所。この3つだけ先に決める
  • 分からない画面は、AIに通訳させてから進む

カタカナのサービス名が並ぶと、それだけで「自分には無理かも」と感じます。 でも、中身は土地と金庫です。 名前に怯まず、役割で理解する。非エンジニアの開発は、それで十分回ります。

よくある質問

SupabaseとVercelは何が違うのですか？
Vercelはアプリ本体を置いて公開するサービス（置き場所）、Supabaseはデータを保存するサービス（保管庫）です。役割が違うので、組み合わせて使います。
無料プランだけで個人開発はできますか？
家族用・自分用の小さなアプリなら、無料の範囲で収まることが多いです。ただし「一定期間使わないと一時停止する」などの条件があるので、止まっても焦らず再開方法を確認しましょう。
APIキーとは何ですか？なぜコードに書いてはいけないのですか？
サービスに接続するための「秘密の鍵」です。コードに直接書くと、コードを共有・公開した時に鍵も一緒に漏れてしまいます。.envファイルに分けて保管するのが基本です。
登録にGitHubアカウントが必要と言われました。作るべきですか？
AIと一緒に開発を続けるなら、作っておくのがおすすめです。コードの保管場所として使うほか、SupabaseやVercelへのログインにも使えます。どのメールで登録したかは必ずメモしておきましょう。
設定画面の英語が分からないときはどうすればいいですか？
画面に出ている言葉をそのままAIに伝えて、「非エンジニアにも分かる言葉で説明して」と聞くのが確実です。とりあえずOKを押して進むのが一番危険です。