Vercel料金最適化ガイド【個人開発者のコスト削減術を徹底解説】

Vercelの料金体系を正しく理解する【2026年最新プラン解説】

Vercelの3つの料金プラン概要

VercelはHobby（無料）・Pro（$20/月）・Enterprise（カスタム）の3つのプランを提供しています。2025年9月の大幅リニューアルにより、以前のプラン体系から大きく変わりました。

まず全体像を把握しましょう。

ここで最も重要なのは、Hobbyプランは商用利用不可という点です。個人開発でも広告収益やサブスクリプション課金があるプロダクトは、Proプラン以上が必須になります。

2025年9月の料金体系リニューアルで何が変わったか

Vercelは2025年9月に大幅な料金体系の変更を実施しました。主な変更点は以下の3つです。

• クレジットベースの課金導入：Proプランに月$20のクレジットが含まれ、超過分に適用できるようになった
• Enterprise機能のPro降格：SAML SSO（$300/月アドオン）やHIPAA BAA（$350/月アドオン）がProプランでも利用可能に
• 帯域幅の名称変更：「Bandwidth」から「Fast Data Transfer」に名称が変更され、計測方法も統一された

この変更により、Proプランのコスパは以前より向上しています。月$20のクレジットで小規模な超過分はカバーされるため、実質的な追加費用が発生するのは中〜大規模のプロジェクトからです。

見落としがちな「超過料金」の仕組み

Vercelの料金で最も注意すべきなのが超過料金です。Proプランの場合、含まれる枠を超えた分は従量課金されます。

特に危険なのは帯域幅（Fast Data Transfer）です。1 TBを超えると$0.15/GBが発生し、例えば月1.5 TBの転送量だと超過分500 GBで$75の追加費用になります。月額$20のプランのはずが、合計$95になる計算です。

Hobbyプランの隠れた制約——Fair Use Policy

Hobbyプランは無料ですが、VercelのFair Use Policy（公正利用ポリシー）が適用されます。具体的には以下の制限があります。

• 帯域幅100 GB/月を超えるとサイトが一時停止される
• 商用利用が発覚した場合、強制的にProプランへの移行を求められる
• 関数のメモリは1 vCPU / 2 GB固定で変更不可
• 同時ビルドは1つまで

無料だからといって商用プロダクトを運用していると、ある日突然メールが届いてプランアップグレードを迫られる——ということが実際に起きます。

無料プラン（Hobby）でどこまでできるか——制限と活用法

Hobbyプランで個人開発を始めるメリット

とはいえ、Hobbyプランは個人開発のスタートには最適です。以下のようなケースなら、完全無料で運用できます。

• ポートフォリオサイトやブログ（月間PV 5万以下程度）
• 収益化前のMVP・プロトタイプ
• 個人の学習・実験用プロジェクト
• オープンソースプロジェクトのドキュメントサイト

100 GB/月の帯域幅は、1ページあたり1 MBと仮定すると約10万PV/月に相当します。月間1〜2万PVの個人ブログなら余裕で収まります。

Hobbyプランの具体的な制限値

Hobbyプランの制限を正確に把握しておくことが重要です。

Hobbyプランの「商用利用不可」を正しく理解する

Hobbyプランで最も誤解されやすいのが「商用利用不可」のルールです。Vercelの定義では、以下のいずれかに該当すると商用利用とみなされます。

• 広告収益を得ているサイト（Google AdSenseなど）
• 有料商品・サービスを販売しているサイト
• サブスクリプション課金があるSaaS
• 企業・法人のコーポレートサイト

逆に、アフィリエイトリンクが一切なく、収益化していない純粋な個人ブログやポートフォリオはHobbyプランで問題ありません。ただし、将来的に収益化する予定があるなら、最初からProプランで始めておくと後の移行がスムーズです。

Hobbyプランから卒業すべきタイミング

以下のいずれかに該当したら、Proプランへの移行を検討しましょう。

• 帯域幅が月80 GBを超えた（上限の80%）
• プロダクトから1円でも収益が発生し始めた
• チームメンバーが2人以上になった
• 関数のメモリ不足でタイムアウトエラーが頻発し始めた
• Preview Deploymentのパスワード保護が必要になった

僕（ぶべ）の場合、ShiftBのサイト開発を始めた当初はHobbyプランで運用していましたが、受講生の申し込みフォーム（＝商用利用）を設置した時点でProプランに切り替えました。月$20は個人開発者にとって決して小さくない額ですが、商用利用でのTOS違反リスクを考えると必要な投資です。

課金が跳ね上がる3大要因と対策

要因1：帯域幅（Fast Data Transfer）の超過

Vercelで最もコストが跳ね上がりやすいのが帯域幅です。以下のようなパターンで想定以上の転送量が発生します。

• 大きな画像の直接配信：最適化されていない画像（1枚2〜5 MB）をVercelのCDN経由で配信すると、100 PVで200〜500 MBを消費
• 動画ファイルの配信：動画をVercelから配信すると、1本10分の動画（約100 MB）が100回再生されるだけで10 GBを消費
• バズ・トラフィックスパイク：SNSでバズると短期間で数十GBの帯域幅を消費。Hobbyプランの場合はサイト停止、Proプランの場合は超過料金が発生

対策：大きなファイル（画像・動画・PDFなど）はCloudflare R2やAWS S3などの外部ストレージから配信しましょう。Cloudflare R2はエグレス（転送）料金が無料なので、帯域幅コストを大幅に削減できます。

要因2：サーバーレス関数の実行時間

Vercelのサーバーレス関数はCPU時間・メモリ・呼び出し回数の3つの軸で課金されます。以下のような処理が高コストの原因になります。

• 外部API待ち：AI APIの呼び出し（数秒〜十数秒）を含む関数は、待機時間分もCPU時間にカウントされる場合がある
• PDF生成・画像処理：サーバーサイドでの重い処理はCPU時間を大量消費
• N+1クエリ：データベースへの非効率なクエリで関数の実行時間が伸びる

対策：VercelのFluid Computeを有効化しましょう。Fluid Computeは関数インスタンスを再利用し、実際のコード実行時間のみ課金する仕組みで、20〜30%のコスト削減が見込めます。新規プロジェクトではデフォルトで有効ですが、既存プロジェクトは設定から手動で有効化する必要があります。

要因3：画像最適化とEdge Middlewareの見えないコスト

意外と見落とされがちなのが、画像最適化とEdge Middlewareのコストです。

画像最適化のコスト構造：

• ソース画像の変換：$0.05/1,000変換
• 画像キャッシュ読み取り：$0.40/100万回
• 画像キャッシュ書き込み：$4/100万回

例えば、ECサイトで1,000枚の商品画像をNext.jsのImageコンポーネントで表示する場合、初回アクセス時に1,000回の変換が発生し、レスポンシブ対応で複数サイズ生成されると実際は3,000〜5,000変換になることも。

Edge Middlewareの罠：Edge Middlewareはすべてのリクエストの前に実行されます。認証チェックやA/Bテスト、リダイレクト処理をEdge Middlewareで行っている場合、ページビューの数倍のリクエストが発生し、気づかないうちにコストが膨らみます。

対策：画像は事前にTinyPNGなどで圧縮し、10 KB以下の小さなアイコンにはNext.jsのunoptimizedプロップを使いましょう。Edge Middlewareは必要最小限のパスにのみ適用するよう、matcher設定を厳密に定義してください。

実際の「請求ショック」事例

ShiftBの受講生から報告された実際の事例を紹介します。

• ケース1：ブログ記事がバズり、1日で帯域幅50 GBを消費。Proプランの月$20に加えて追加$7.50が発生（$20のクレジットで一部相殺）
• ケース2：画像ギャラリーサイトで画像最適化が月30,000変換に。追加$1.50（少額だが毎月積み上がる）
• ケース3：Edge MiddlewareでBot対策を実装し、全リクエストを処理。月間Edge Middleware呼び出しが5,000万回を超え、追加$26が発生

個人開発者向けコスト最適化テクニック10選

テクニック1：静的生成（SSG）をデフォルトにする

Next.jsのページは、可能な限り静的生成（SSG）にしましょう。SSGページはビルド時にHTMLが生成され、Vercelのエッジネットワークからそのまま配信されるため、サーバーレス関数が一切呼ばれません。

// 良い例：静的生成（コスト最小）
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

// 悪い例：毎回サーバーサイドレンダリング（コスト大）
// export const dynamic = "force-dynamic"; // これは避ける

テクニック2：ISRの再検証間隔を最適化する

ISR（Incremental Static Regeneration）を使う場合、再検証間隔（revalidate）の設定がコストに直結します。

• revalidate: 60（1分ごと）→ 1時間あたり60回の関数実行
• revalidate: 3600（1時間ごと）→ 1時間あたり1回の関数実行

つまり、再検証間隔を1分から1時間に変更するだけで、関数実行コストが60分の1になります。ブログやドキュメントサイトなら、revalidate: 3600（1時間）以上で十分なケースがほとんどです。

// ISRの再検証間隔を最適化
// app/blog/[slug]/page.tsx
export const revalidate = 3600; // 1時間ごとに再検証

// さらにコスト削減するなら、オンデマンド再検証を使う
// app/api/revalidate/route.ts
import { revalidatePath } from "next/cache";
import { NextRequest } from "next/server";

export async function POST(request: NextRequest) {
  const { path } = await request.json();
  revalidatePath(path);
  return Response.json({ revalidated: true });
}

テクニック3：Fluid Computeを有効化する

Fluid ComputeはVercelが提供するサーバーレス関数の最適化機能で、有効化するだけで20〜85%のコスト削減が期待できます。仕組みは以下の通りです。

• 関数インスタンスをリクエスト間で再利用（コールドスタートの削減）
• I/O操作（DB問い合わせ、API呼び出し）の待機中はCPU時間にカウントしない
• 1つのインスタンスで複数リクエストを同時処理

Vercelダッシュボードの Settings → Functions → Fluid Compute から有効化できます。新規プロジェクトではデフォルトで有効ですが、2025年9月以前に作成したプロジェクトは手動で有効化が必要です。

テクニック4：画像を外部サービスで最適化する

Next.jsのImageコンポーネントはデフォルトでVercelの画像最適化APIを使いますが、これに課金されます。以下の代替手段があります。

• 事前最適化：アップロード前にTinyPNGやSquooshで圧縮し、unoptimizedプロップを使用
• 外部ローダー：Cloudflare ImagesやCloudinaryをNext.jsのカスタムローダーとして設定
• セルフホストの最適化：sharpをインストールし、ビルド時に画像を最適化

// next.config.ts で外部画像ローダーを設定
const nextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./lib/image-loader.ts",
  },
};

// lib/image-loader.ts
export default function cloudflareLoader({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality?: number;
}) {
  const params = `width=${width},quality=${quality || 75},format=auto`;
  return `https://your-domain.com/cdn-cgi/image/${params}/${src}`;
}

テクニック5：大きなファイルはVercel外で配信する

動画、PDF、大きな画像（1 MB以上）、ダウンロード用ファイルは、Vercelから配信すると帯域幅を大量に消費します。

• Cloudflare R2：エグレス料金無料。S3互換APIで使いやすい。月$0.015/GB/月のストレージ料金のみ
• AWS S3 + CloudFront：大規模配信向け。CDN経由で$0.085/GB程度
• YouTube/Vimeo埋め込み：動画は外部プラットフォームに任せるのが最もコスト効率が良い

テクニック6：Edge Middlewareのmatcherを限定する

Edge Middlewareをすべてのリクエストで実行するのは、コスト面で非常に非効率です。matcher設定で必要なパスのみに限定しましょう。

// middleware.ts
// 悪い例：すべてのリクエストで実行
export function middleware(request: NextRequest) {
  // 認証チェック
}

// 良い例：必要なパスのみに限定
export const config = {
  matcher: [
    "/dashboard/:path*",
    "/api/:path*",
    // 静的アセット・画像・faviconは除外
    "/((?!_next/static|_next/image|favicon.ico).*)",
  ],
};

テクニック7：prefetchを制御する

Next.jsのLinkコンポーネントはデフォルトでプリフェッチが有効です。つまり、ビューポート内に表示されたリンク先のページを事前に読み込みます。これはUXの向上には効果的ですが、不要な関数呼び出しと帯域幅消費の原因になります。

// 重要でないリンクはprefetchをオフに
import Link from "next/link";

// ナビゲーションの主要リンクはprefetch有効（デフォルト）
<Link href="/dashboard">ダッシュボード</Link>

// フッターやサイドバーのリンクはprefetch無効
<Link href="/terms" prefetch={false}>利用規約</Link>
<Link href="/privacy" prefetch={false}>プライバシーポリシー</Link>

テクニック8：Vercelのスペンド管理を設定する

Proプランではスペンド管理（Spend Management）機能が使えます。月の予算上限を設定しておけば、超過料金が一定額に達した時点でアラートを受け取ることができます。

• ダッシュボードの Settings → Billing → Spend Management から設定
• Hard Limitを設定すると、上限に達した時点でリソースが制限される
• Soft Limitを設定すると、メール通知のみで動作は継続

個人開発者なら、まずはHard Limitを$50/月に設定しておくことをおすすめします。Proプランの$20 + 超過$30で、最大$50/月に抑えられます。

テクニック9：不要なPreview Deploymentを削減する

VercelはデフォルトですべてのGitブランチ・PRに対してPreview Deploymentを作成します。これはビルド時間を消費し、Hobbyプランの100時間/月を圧迫します。

• Vercelダッシュボードの Settings → Git で、Preview Deploymentの対象ブランチを限定
• vercel.jsonでgithub.enabled: falseを設定し、手動デプロイに切り替え
• 開発中はローカルでvercel devを使い、不要なデプロイを避ける

テクニック10：キャッシュ戦略を最適化する

適切なキャッシュ設定は、帯域幅とサーバーレス関数の両方のコスト削減に直結します。

// APIルートでキャッシュヘッダーを設定
// app/api/posts/route.ts
export async function GET() {
  const posts = await getAllPosts();

  return Response.json(posts, {
    headers: {
      // CDNキャッシュ：1時間、クライアントキャッシュ：5分
      "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=300",
    },
  });
}

s-maxageはVercelのCDNキャッシュ期間、stale-while-revalidateはキャッシュ期限切れ後もバックグラウンドで更新しつつ古いキャッシュを返す設定です。これにより、同じデータへのリクエストで関数が呼ばれる回数を劇的に減らせます。

Vercel vs 他のホスティング——コスト比較

主要4サービスの料金プラン比較【2026年4月最新】

Vercelと主要な競合サービスの料金を比較します。為替レートは1ドル＝150円で換算しています。

帯域幅コストで比較すると？

月間1 TBの帯域幅を使った場合のコストを比較してみましょう。

帯域幅だけで見ると、Cloudflare Pagesが圧倒的に安いのは明らかです。ただし、Next.jsとの互換性やDX（開発体験）を含めた総合評価では話が変わってきます。

Next.jsとの相性で比較する

VercelはNext.jsの開発元であり、Next.jsのすべての機能が設定ゼロで動作します。他のサービスでは、一部のNext.js機能に制限がある場合があります。

結局どのサービスを選ぶべきか——ケース別ガイド

僕（ぶべ）の結論は以下の通りです。

• Next.jsメインの個人開発 → Vercel一択。DXの良さと機能の完全対応が圧倒的。月$20は「時間を買う」投資
• 静的サイト・帯域幅重視 → Cloudflare Pages。帯域幅無制限・月$5からは破格。ただしNext.jsの一部機能に制限あり
• コスト最優先・機能は最低限でOK → Cloudflare Pages Free。無料で無制限帯域幅は他にない
• バックエンド込みのフルスタックアプリ → Railway。データベースもコンテナも1つのプラットフォームで完結。ただし帯域幅コストに注意

Next.jsプロジェクトの最適化でVercel費用を削減する方法

レンダリング戦略の見直しで関数実行を最小化

Next.jsのレンダリング戦略は、Vercelのコストに直結する最重要ポイントです。各レンダリング方式のコスト効率を理解しておきましょう。

鉄則：まずSSGで作れないか考える → 更新が必要ならISR → リアルタイム性が必要な部分だけSSR。この優先順位を守るだけで、関数実行コストを80%以上削減できるケースがあります。

ISRの実践——Fast Origin Transferを95%削減した事例

あるブログサイトの事例では、すべてのページをSSRで配信していたところ、90人の訪問者でFast Origin Transfer（旧帯域幅）が約280 MBに達していました。これをISRに切り替えたところ、同じトラフィックで15 MB以下に削減できました。95%の削減です。

具体的な設定変更は以下の通りです。

// Before: SSR（毎リクエストでサーバー処理）
export const dynamic = "force-dynamic";

// After: ISR（1時間ごとに再検証）
export const revalidate = 3600;

// さらに最適化：オンデマンド再検証
// コンテンツ更新時のみ再検証をトリガー
// app/api/revalidate/route.ts
import { revalidateTag } from "next/cache";

export async function POST(request: Request) {
  const { tag } = await request.json();
  revalidateTag(tag);
  return Response.json({ success: true });
}

バンドルサイズの最適化でCDN転送量を削減

JavaScriptバンドルサイズの削減は、帯域幅コストに直接効きます。以下のチェックリストで最適化しましょう。

• @next/bundle-analyzerで分析：npm run build後にバンドルの内訳を可視化
• Dynamic Importの活用：ページ読み込み時に不要なコンポーネントはnext/dynamicで遅延読み込み
• 不要なライブラリの除去：moment.js → date-fns、lodash → lodash-es（tree-shakable版）に置き換え
• フォントの最適化：next/fontを使ってフォントをセルフホスト化し、外部リクエストを削減

バンドルサイズを100 KB削減できれば、月間10万PVのサイトで約10 GB/月の帯域幅節約になります。

APIルートの最適化——不要な関数呼び出しを減らす

APIルートの設計もコストに影響します。以下のパターンに気をつけましょう。

• ポーリングをWebSocketに置き換え：1秒ごとのポーリングは1日86,400回の関数呼び出しを生む。リアルタイム通信はSupabase RealtimeやPusherを使う
• バッチ処理：複数のAPI呼び出しを1つにまとめる。5回のAPIリクエストを1回にすれば、関数呼び出し回数が80%減
• クライアントサイドキャッシュ：SWRやReact QueryのstaleTimeを適切に設定し、不要な再フェッチを防ぐ

// SWRでキャッシュを最適化
import useSWR from "swr";

function Dashboard() {
  const { data } = useSWR("/api/stats", fetcher, {
    refreshInterval: 60000,     // 1分ごとに更新（5秒ではなく）
    dedupingInterval: 30000,    // 30秒間は重複リクエストを防ぐ
    revalidateOnFocus: false,   // タブフォーカスでの再検証を無効化
  });

  return <StatsDisplay data={data} />;
}

ShiftBの実例——月額コストの推移と最適化の記録

ShiftBのVercel利用状況

ShiftB（このサイト）はNext.js + Vercel Proで運用しています。コンテンツは記事、コースページ、受講生用ダッシュボードなど、約200ページ以上あります。

現在のVercel月額コストは以下の通りです。

この記事で紹介した最適化テクニックを実践した結果、Proプランの基本料金$20だけで収まっています。超過料金はゼロです。

最適化前後の比較——何をしたか

実は最適化前は月額$35〜45程度かかっていました。以下が改善のタイムラインです。

• 2025年6月：ShiftBをVercel Proで運用開始。月額$20 + 超過$10〜15程度
• 2025年8月：記事ページをSSR → ISR（revalidate: 3600）に変更。関数実行コスト50%減
• 2025年10月：画像をCloudflare R2経由で配信するよう変更。帯域幅30%減
• 2025年12月：Fluid Computeを有効化。関数コストさらに25%減
• 2026年1月：Edge Middlewareのmatcherを限定。Edge呼び出し70%減
• 2026年3月：バンドルサイズ最適化（moment.js除去、Dynamic Import導入）。帯域幅15%減

これらの積み重ねで、月額$35〜45 → $20固定に削減できました。年間換算で約$180〜300（約27,000〜45,000円）の節約です。

個人開発者として学んだ3つの教訓

ShiftBの運用を通じて学んだ教訓を共有します。

• 教訓1：最初からSSGファーストで設計する——後からSSRをSSGに変更するのはリファクタリングコストが高い。最初から「このページは本当にSSRが必要か？」と問いかける習慣をつける
• 教訓2：スペンド管理は初日に設定する——Proプランに切り替えたらその日のうちにHard Limitを設定。僕は$50に設定しており、一度も超えていない
• 教訓3：Vercelダッシュボードの使用量グラフを週1で確認する——異常なトラフィックや関数実行を早期発見できる。月末に請求書を見て驚くのではなく、週次で監視する

よくある質問（FAQ）

Q1. Vercelの無料プラン（Hobby）で商用サービスを運営できますか？

いいえ、できません。Hobbyプランは明確に商用利用不可です。広告収益、有料プラン、サブスクリプション課金など、1円でも収益が発生するサービスはProプラン（$20/月）以上が必須です。違反が検出されると、プランアップグレードを求める通知が届き、応じない場合はサービスが停止される可能性があります。

Q2. Vercel Proプランの$20/月で本当に足りますか？

多くの個人開発プロジェクトでは足ります。Proプランには1 TB/月の帯域幅と$20/月の超過クレジットが含まれます。月間PVが10万以下で、この記事の最適化テクニックを実践すれば、基本料金$20だけで運用可能です。ShiftBも実際に$20/月で収まっています。ただし、画像が多いECサイトや、サーバーレス関数を多用するアプリは追加料金が発生しやすいので注意が必要です。

Q3. VercelからCloudflare Pagesに移行すべきですか？

Next.jsを使っているなら、基本的にはVercelのままが良いでしょう。VercelはNext.jsの全機能を設定ゼロで使える唯一のプラットフォームです。ただし、静的サイトがメインで帯域幅コストが問題なら、Cloudflare Pagesへの移行は合理的な選択です。特に月間帯域幅が1 TBを超えるサイトでは、帯域幅無料のCloudflare Pagesに移行することで数十〜数百ドル/月の節約が可能です。

Q4. Vercelの請求が予想より高い場合、どう対処すればいいですか？

まずダッシュボードのUsageページで原因を特定しましょう。以下の手順で対処できます。

• Settings → Usage で各リソースの使用量を確認
• 帯域幅が原因なら大きなファイルを外部配信に切り替え
• 関数実行が原因ならSSGやISRへの移行を検討
• Spend ManagementでHard Limitを設定して再発を防止
• Vercelサポートに連絡して、一時的な課金のクレジット付与を相談（対応してくれるケースがある）

Q5. 個人開発者がVercelに支払う平均月額はいくらですか？

ShiftBの受講生データでは、平均$15〜25/月（約2,250〜3,750円）です。内訳としては、約40%がHobbyプラン（$0）、約50%がProプラン（$20）、約10%がProプラン+超過料金（$25〜50）です。ほとんどの個人開発者はProプランの基本料金で収まっています。

Q6. Vercelの料金は今後値上げされますか？

可能性は十分あります。2025年9月の料金改定ではProプランの機能が強化されましたが、同時にEnterprise向けアドオン（SAML SSO: $300/月、HIPAA BAA: $350/月）が追加されています。AIモデルのホスティング需要の高まりとともに、特にサーバーレス関数周りの料金体系が変更される可能性があります。年間プランで現行料金をロックインするのが一つの対策です。

Q7. Vercelの料金を経費として計上できますか？

はい、個人事業主・法人なら可能です。Vercelの利用料は「通信費」または「ソフトウェア利用料」として全額経費計上できます。Proプラン年間$240（約36,000円）をはじめ、超過料金もすべて経費です。ドルでの決済になるため、支払日のレートで円換算して記帳します。確定申告の際はクレジットカード明細とVercelの請求書を両方保管しておきましょう。