Vercel無料枠の全制限2026｜超えたら即停止？対策も解説

1. Vercelとは — 無料プランの位置づけ

Vercel社はNext.jsの開発元で、同名のホスティングサービスを運営している。JavaScript/TypeScript系のWebアプリに特化しており、GitHubと連携するだけでビルド→デプロイ→CDN配信まで自動で走る。実際に使ってみると、初回デプロイまでの速さに驚く。無料プラン（Hobby）は個人の学習・ポートフォリオ用途を想定した枠だ。

対応フレームワーク

Vercel無料プランで使えるフレームワーク一覧。Next.js以外もゼロコンフィグでデプロイできる。

• Next.js（Vercel社開発。最適化の度合いが段違い）
• React（Create React App、Vite）
• Vue.js / Nuxt.js
• Svelte / SvelteKit
• 静的サイトジェネレーター（Hugo、Gatsby等）

Vercel無料枠（Hobbyプラン）の制限一覧

2. 無料プランのアカウント作成とGitHub連携

Step 1: Vercelにアクセス

vercel.com を開き、右上の「Sign Up」をクリック。

Step 2: GitHubでログイン

「Continue with GitHub」を選択し、連携を許可する。GitLab・Bitbucketも選べるが、GitHub連携が最もスムーズだ。

Step 3: Hobbyプラン（無料）を選択

プラン選択画面で「Hobby」を選ぶ。クレジットカード登録は不要。この無料枠だけで帯域100GB/月まで使える。

3. GitHubからの無料デプロイ手順

GitHubのリポジトリをVercelの無料枠でデプロイする流れ。Hobbyプランでもビルド→CDN配信までフルに動く。

Step 1: 「Add New Project」をクリック

Vercelダッシュボードの「Add New Project」を押す。

Step 2: リポジトリを選択

連携済みのGitHubアカウントからリポジトリを選び、「Import」をクリック。

Step 3: 設定を確認してデプロイ

Next.jsやReactならフレームワークが自動検出される。デフォルト設定のまま「Deploy」を押せばいい。

Step 4: デプロイ完了

ビルド完了後、your-project.vercel.app 形式のURLが自動発行される。無料プランでもこのURLは永続的に使える。

4. Vercel CLIでデプロイ

GitHub経由ではなくローカルから直接デプロイしたい場合に使う。無料プランでもCLIの全機能が使える。

Step 1: Vercel CLIのインストール

npm install -g vercel

Step 2: ログイン

vercel login

ブラウザが開くのでVercelアカウントでログインする。

Step 3: デプロイ実行

# プロジェクトディレクトリで実行
vercel

# 本番環境にデプロイ
vercel --prod

vercelでプレビュー環境に、vercel --prodで本番環境にデプロイする。どちらもVercel無料枠のビルド時間を消費する点に注意。

5. 自動デプロイとプレビュー

GitHub連携済みなら、以下が自動で動く。無料プランでも制限なし。

6. 無料枠でのカスタムドメイン設定

Vercel無料プランでもカスタムドメインは無制限に設定できる。Vercel側の費用はゼロ。ドメイン自体の取得費用（年1,000-3,000円程度）だけ別途かかる。詳しくはVercel独自ドメイン料金の検証記事を参照。

Step 1: ドメインを追加

Vercelダッシュボード → プロジェクト → Settings → Domains でドメインを入力し「Add」をクリック。

Step 2: DNSレコードを設定

ドメインのDNS管理画面で、Vercelが指定するレコードを追加する。

Step 3: SSL証明書は自動発行

DNS設定が反映されると、VercelがLet's Encrypt証明書を自動発行する。無料プランでもHTTPSが標準で有効になる。

7. 環境変数の設定

APIキーなどの機密情報は環境変数で管理する。Vercel無料プランでも環境変数の数に制限はない。

ダッシュボードから設定

1. プロジェクト → Settings → Environment Variables
2. 変数名（例: NEXT_PUBLIC_API_KEY）と値を入力
3. 適用環境（Production / Preview / Development）を選択
4. 「Save」をクリック

Vercel CLIで設定

# 環境変数を追加
vercel env add MY_API_KEY

# 環境変数を確認
vercel env ls

8. Hobby無料枠の上限と商用NGライン

Vercel無料プランの主要メトリクス（2026年6月時点）

無料枠を超えたらどうなるか

Vercelは使用量が上限の75%に達すると警告メールを送る。100%を超えた瞬間、プロジェクトが一時停止。訪問者には503エラーが返る。コードやデータは消えないが、翌月1日のリセットまでサイトは死んだままだ。

停止した場合の復旧手順

停止からの復旧は2パターンしかない。

1. 翌月まで待つ — 毎月1日にカウンターがリセットされ、自動復旧する。費用ゼロだが最大30日ダウンする
2. Proにアップグレード — ダッシュボードからプラン変更するだけで即復旧。月$20の日割り課金が始まる。緊急ならこちら一択

実際に停止後に慌ててProに上げた経験がある。ダッシュボードの「Upgrade」ボタンからカード登録→プラン確定まで約3分、その直後にサイトが復旧した。検証した限りダウンタイムは合計で4時間ほど。もう少し早く気づいていれば短くできた。

Vercel無料枠からPro移行を検討すべきライン

• 月間帯域80GB超え — 残り20GBはバッファ。バズ1回で吹き飛ぶ量だ
• ビルド回数が日10回超 — プレビューデプロイでビルド時間を食う
• チーム開発への移行 — Hobbyは1人限定。共同開発者を招待できない
• 収益が1円でも発生 — 広告・アフィリエイト・決済のいずれかが入った瞬間にPro必須
• Serverless関数のタイムアウト60秒で足りない — Proなら300秒まで延長可能

9. Vercel無料枠と代替サービスの比較

Vercelの無料プランが合わないケースもある。商用利用したい、帯域が足りない、Next.js以外がメインといった場合の代替候補を整理した。

3サービスを実際に半年以上並行で試してみた結論。自分ならこう選ぶ。

• Next.jsプロジェクト → Vercel一択。ISRのキャッシュ制御やEdge Functionsの安定性が他2サービスとは別次元だった
• 静的サイト・商用利用あり → Cloudflare Pages。帯域無制限・商用OKで、このブログ自体もCloudflare Pagesで動いている。ビルドは月500回まで制限があるが、静的サイトなら十分すぎる
• Netlifyは正直、選ぶ理由が薄くなった。帯域はVercelと同じ100GBで商用OKだが、ビルド時間が月300分と短い。Gatsby/Hugo専用で割り切るなら候補に残る

10. Vercel無料枠を長持ちさせる4つのテクニック

帯域100GBはそのまま使うと意外にあっさり溶ける。実際に試してみた以下の4つで消費量を半分以下に抑えられる。

{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}

11. よくある質問（FAQ）

12. まとめ — Vercel無料枠の判断基準

Vercel無料プランの本質は「Next.js開発者のための学習環境」だ。個人開発やポートフォリオの公開には十分すぎるスペックだが、収益化を始めた瞬間にProへの移行が必要になる。詳しいHobby vs Pro の料金比較も参考にしてほしい。

手元にGitHubリポジトリがあるなら、vercel.comでSign Up→Import→Deployの3ステップで公開できる。