Vercelとは？初心者向け完全ガイド【2026年最新】
TRAIVEXWebサイトやアプリを作ったあと、「どこに公開すればいいか」という悩みは多いものです。この記事では、世界中で使われているVercelというサービスを、初心者向けにわかりやすく解説します。読み終えると、無料でWebサイトを公開できる仕組みや、GitHubとの連携方法、料金の注意点が理解でき、実際にVercelを使い始められるようになります。
Vercelとは？一言でわかる結論
Webサイトを公開できるサービスのこと
Vercelとは、コードをGitHubに置くだけで、Webサイトやアプリを世界中に自動公開（デプロイ）できるクラウドサービスです。サーバーの構築やインフラ設定をほとんど行わずに、本番環境を立ち上げられる点が最大の特徴です。言い換えると、自分でサーバーを用意しなくても、プログラムをVercelに託すだけで、インターネット上に公開される仕組みです。
無料でも始められる
Vercelの Hobby プランは無料で、月100GBの帯域幅が使えます。有効期限はなく、個人ブログやポートフォリオサイトなら、月間数万PV程度までなら完全無料で運用できます。
誰に向いているか
Vercelは次のような人に向いています：
- React・Next.jsでサイトを作った初心者
- 自動デプロイで手作業を減らしたい開発者
- 世界的に高速なサイト速度を実現したい人
- GitHubと連携してワークフローを効率化したい人
一方で、Vercelはフロントエンド特化型のため、重いバックエンド処理やデータベース管理がメインの場合は、他のサービス（AWS・レンタルサーバー）との組み合わせが現実的です。
Vercelの基礎知識と選ばれる理由
世界中で高速に表示できる仕組み
Vercelは、世界180以上の国にサーバーを配置するグローバルCDN（コンテンツ配信ネットワーク）を用いています。ユーザーが日本からアクセスしても、米国からアクセスしても、最寄りのサーバーから自動的にコンテンツが配信されるため、レイテンシ（遅延）が低く、ページが瞬時に表示されます。
GitHubと連携して自動で公開できる
開発者はソースコードをリポジトリにプッシュするだけで、Vercelが自動的にビルドとデプロイを行います。この自動化されたフローは、開発サイクルを加速し、リリースプロセスを効率化します。つまり、ローカルで作ったコードをGitHubにアップロードすれば、数秒～数分でVercel上に公開されます。手動デプロイの手間がゼロになります。
さらに、PRごとに固有のプレビューURLが自動生成されます。レビュアーがブランチをチェックアウトしなくても動作確認できます。
Next.jsとの相性が良い理由
Vercelは Next.js の開発元で、デプロイ支援とスケーリング機能を統合しています。フレームワークの開発元が同じVercel社であるため、Next.js独自の機能（サーバーサイドレンダリング、画像最適化、APIルート）が他のホスティングサービスより圧倒的に最適化されています。
Vercelの機能一覧
Vercelでできることを、基本機能と高度な機能に分けてまとめます。
| 機能 | 説明 | Hobby | Pro |
|---|---|---|---|
| 自動デプロイ | GitHubにpushするだけで自動ビルド＆公開。mainへのマージで本番反映 | ✓ | ✓ |
| プレビューURL | PRごとに専用URLが自動生成。本番を壊さずに確認可能 | ✓ | ✓ |
| HTTPS 自動対応 | SSL証明書の取得・更新が全自動。追加費用なしで https が使える | ✓ | ✓ |
| カスタムドメイン | 独自ドメイン（example.com等）を簡単に設定。DNSはGUI完結 | ✓（無限） | ✓（無限） |
| 環境変数管理 | APIキーやDB接続情報などを安全に管理・設定 | ✓ | ✓ |
| アナリティクス | ページビュー・Core Web Vitals（速度指標）をダッシュボード確認 | 基本のみ | 高度な分析可 |
| Serverless Functions | バックエンドAPIをサーバーなしで動かせる。Node.js/Python/Goなど対応 | 制限あり | 拡張可能 |
| チーム機能 | 複数メンバーで協力開発できる | ✗ | ✓ |
Vercelが得意・苦手な場合
Vercelを選ぶべき場合と、別のサービスを検討すべき場合をまとめました。
✅ Vercelが得意なこと
- Next.js、React、Vue.jsなどの静的・SSRサイト
- フロントエンドのデプロイ全般
- JAMstackアーキテクチャのWebアプリ
- APIルートを使った軽量バックエンド
- プレビュー環境の自動生成
⚠️ Vercelが苦手なこと
- 重いバックエンド処理（長時間実行）
- 常時起動が必要なサーバー
- 大量データのバッチ処理
- WebSocketによるリアルタイム通信
- カスタムサーバー設定が必要な用途
補足：苦手な部分は Supabase（データベース）や Railway（バックエンド）などと組み合わせることで解決できます。Vercelはフロント特化、と覚えておきましょう。
Vercelの始め方（登録から公開まで）
1. アカウントを無料で作る
1. Vercel公式サイト（https://vercel.com）にアクセス 2. 「Sign Up」をクリック 3. 「Continue with GitHub」を選択してGitHubアカウントでサインアップします。 4. GitHubへのアクセス権を許可（デフォルトはすべてのリポジトリ） 5. メールアドレスで確認後、アカウント作成完了
クレジットカード登録は無料プラン（Hobby）では不要です。
2. GitHubのコードをつなぐ
1. Vercelダッシュボードにログイン 2. 「Add New... → Project」をクリックし、GitHubリポジトリの一覧から、デプロイしたいリポジトリを選択して「Import」をクリックします。 3. プロジェクト設定画面が表示されます。Next.jsプロジェクトの場合、フレームワークやビルドコマンド、出力ディレクトリは自動検出されます。
3. ボタンひとつで公開する
1. インポート画面で「Deploy」ボタンをクリック 2. ビルドが開始（1～3分待機） 3. 「Visit」ボタンで公開サイトを確認
この時点で、Vercelが自動生成した vercel.app ドメインで、あなたのサイトが世界中に公開されます。
4. CLIを使ったデプロイ方法（補足）
GUI が主流ですが、ターミナルコマンドでもデプロイできます：
``` # 1. Vercel CLIをインストール npm install -g vercel
# 2. プロジェクトフォルダでデプロイ実行 cd my-next-app vercel
# 3. 本番環境へのデプロイ vercel --prod ```
この方法なら、デプロイ完了後に自動生成されたURLが表示されます。
【ここに案件リンクを貼る】
5. 独自のアドレスを設定する
Vercel無料プランでもカスタムドメインは無制限に設定でき、Vercel側の費用はゼロです。ドメイン自体の取得費用（年1,000～3,000円程度）だけ別途かかります。
手順： 1. ドメイン販売サービス（お名前.com、Xserver など）でドメイン購入 2. Vercelダッシュボード → プロジェクト → Settings → Domains 3. 購入したドメイン名を入力 4. DNS管理画面でVercelが指定するレコードを追加 5. 反映待機（数分～24時間）
HTTPS（セキュア通信）も Vercel が自動で設定するため、追加作業は不要です。
料金プランと無料枠の注意点
無料でどこまで使えるか
個人の非商用プロジェクトなら Vercel の Hobby プラン（無料）で十分運用できます。ただし「商用利用は一切NG」という見落としがちな制約があり、アフィリエイトサイトやフリーランスの実績公開サイトでも Pro プラン（$20/月）への移行が必要です。
Hobby プランの具体的な無料枠：
| 項目 | 無料枠 | 注意 |
|---|---|---|
| 帯域幅 | 月100GB | 超過で即停止 |
| Edge Requests | 月100万件 | 超過で即停止 |
| ビルド実行時間 | 月6,000分 | 制限なし（Proと同じ） |
| カスタムドメイン | 無制限 | 独自ドメイン買う代金だけ別途 |
| デプロイ | 無制限 | GitHub連携で自動 |
警告が出る目安：無料枠の上限に達した場合は、30日間その機能が使えなくなります。
有料に切り替える目安
Pro プラン以上が必要な場合として、商用利用が定義されており、プロジェクト関係者が金銭的利益を得ることを目的とした場合です。具体的には：
- 広告掲載（Google AdSense など）
- 有料商品・サービスを販売（ECサイト、オンライン講座など）
- 月間PVが3万～5万を超えている（帯域消費が加速）
- 大きなファイル（動画、高解像度画像）を大量配信している
- 複数人でのチーム開発が必要
Pro プラン は $20/月のプラットフォーム費用に$20の利用クレジットが含まれます。日本円では約3,100円/月（レート変動で前後）です。
公式で最新の料金を確認する
料金・仕様は定期的に変わります。最新は公式サイトで確認してください。
よくある失敗と対処法
公開に失敗するときの確認点
ビルドエラーが出た場合：
- GitHub上のpackage.jsonが最新か確認
- Node.jsのバージョンがVercelに対応しているか確認（目安：Node.js 18以上）
- next buildをローカルで実行してエラーがないか確認
デプロイ後、画面が真っ白・エラーが出る場合：
- Vercelダッシュボード → Deployments → ビルドログで詳細を確認
- 環境変数が設定されているか確認（Settings → Environment Variables）
無料枠を超えてしまうケース
最も多い原因は画像サイズです。1ページあたり4～5MBの画像を無圧縮で配信していた場合、100GBは2万～3万PV程度しかもたないという事例があります。
対策：
- 画像を圧縮（WebP形式推奨）
- 大容量ファイルは Cloudflare R2 など外部ストレージから配信
- next/image コンポーネントで自動最適化
SNSでバズると短期間で数十GBの帯域幅を消費する場合もあります。対策として、Vercelダッシュボードの使用量アラートを設定することが重要です。
日本語での情報が少ないときの探し方
Vercelの公式ドキュメントは英語が中心です。詳しく知りたい場合：
- 公式ドキュメント（英語）：https://vercel.com/docs
- Zenn・Qiita での日本語記事（検索キーワード：「Vercel」「Next.js」「デプロイ」）
- GitHub Discussions や Stack Overflow で先人の回答を検索
Google翻訳で英語ドキュメントを日本語化して読むのも有効です。
まとめ
- Vercel は、GitHub にコードを置くだけで世界中に自動公開できるサービスで、個人の非商用プロジェクトなら Hobby プラン（無料）で十分運用できます
- Hobby プラン（無料）は月100GB帯域・100万リクエストまで無制限に使えます
- 個人ブログ・ポートフォリオなら完全無料で運用可能ですが、商用利用はProプラン必須です
- Next.js との相性が最高で、フロントエンド開発者に最適
- アフィリエイト収入やSNSバズに備えて、Spend Management 設定と画像圧縮は初期段階で準備することが重要です
次に取るべき行動：GitHubアカウントを用意して、サンプルプロジェクトをVercelにデプロイしてみましょう。Hobby プランで個人プロジェクトをデプロイして、操作感を把握するのがおすすめです。無料なので、実際に手を動かして試してみるのが最短の学習方法です。
FAQ
Q. Vercelは本当に無料で使えますか？
はい、個人の非商用プロジェクトなら完全無料です。Hobby プランでは月100GB の帯域幅が無制限に使え、クレジットカード登録も不要です。ただし商用利用（広告収入・EC・アフィリエイト）は規約で禁止されているため、Pro プランへの移行が必須になります。
Q. プログラミング初心者でも使えますか？
使えます。ただしGitHub との連携が前提となるため、Git とGitHubの基本的な使い方（コミット・プッシュ）を学んでいることが推奨されます。Next.js やReact で作ったプロジェクトがあれば、数クリックでデプロイできます。
Q. Vercelとレンタルサーバーは何が違いますか？
Vercel はサーバーレス型で、自動スケーリングと自動デプロイが特徴です。一方、レンタルサーバーはサーバー管理が必要で、更新・セキュリティ管理が自分の責任になります。Vercel は開発者向け、レンタルサーバーはビジネス向けというイメージです。
Q. 日本語には対応していますか？
UI は日本語化されていますが、公式ドキュメントは英語が中心です。日本語の解説記事は Zenn・Qiita で充実しているため、困ったときはそちらを参照すると良いでしょう。
Q. 独自ドメインは設定できますか？
できます。Hobby プランでもカスタムドメイン設定は無制限に無料です。ドメイン自体の購入費用（年1,000～3,000円）だけ別途必要になります。SSL証明書（HTTPS）は Vercel が自動で設定します。
