概要
Vercelとは、「Webサイトやアプリを簡単に公開できるホスティングサービス」です。
想像してみてください。あなたが一生懸命作ったWebサイトを、 世界中の人に見てもらうには、サーバーを用意して、設定して、公開する必要があります。 でも初心者にとって、これはかなりハードルが高いですよね。
Vercelは、そんな面倒な作業をほぼ自動でやってくれます。GitHubにコードを push するだけで、 数秒後には世界中からアクセスできる状態になります。
Vercelはデータセンター上でWebサーバーを提供しています。 URLでアクセスできるようにするため、DNSと連携しており、 ドメインを入力するだけで自動的にDNS設定を行ってくれます。
💡 このサイトもVercelで動いています！https://itwords.jp は、Vercelを使って公開されています。
Vercelのデプロイフローを体験してみよう
下のデモでVercelのデプロイフローを確認できます。 実際に手を動かすことで、Vercelの動作が理解しやすくなります。
デプロイステップ
1. コードをプッシュ
GitHubにコードをpushします
2. 自動検知
Vercelが変更を自動検知します
3. ビルド開始
プロジェクトをビルドします
4. デプロイ
グローバルCDNにデプロイします
5. 完了
サイトが公開されました！
Vercelの特徴
1. Next.jsとの相性が抜群
Vercelは、人気のフレームワークであるNext.jsを開発している会社です。 そのため、Next.jsで作ったプロジェクトは、特別な設定なしで最適な状態でデプロイできます。
2. 自動デプロイ
GitHubにコードをpushすると、自動的にビルド・デプロイされます。 「デプロイ忘れた！」ということがありません。
3. プレビュー環境
プルリクエストを作ると、自動的にプレビュー用のURLが生成されます。 本番環境に影響を与えずに、変更内容を確認できます。
4. グローバルCDN
世界中にあるサーバー（CDN）から配信されるため、 どこからアクセスしても高速に表示されます。
5. 無料プランが充実
個人プロジェクトなら、無料プランで十分使えます。 商用利用でなければ、ほとんどの機能が無料で利用できます。
Vercelでデプロイする流れ
実際にVercelを使ってサイトを公開する手順は、驚くほど簡単です：
- Vercelアカウント作成：vercel.comにアクセスして、GitHubアカウントでサインアップ
- プロジェクトをインポート：「New Project」ボタンを押して、GitHubのリポジトリを選択
- 設定確認：Next.jsプロジェクトなら自動検出されるので、そのまま「Deploy」をクリック
- デプロイ完了：数十秒〜数分で、
https://your-project.vercel.appのようなURLが発行される
たったこれだけで、世界中からアクセスできるWebサイトが完成します！
Vercel vs 他のホスティングサービス
| サービス | 特徴 | 向いている用途 |
|---|---|---|
| Vercel | Next.jsに最適化、自動デプロイ、プレビュー環境 | Next.js、React、静的サイト |
| Netlify | 静的サイト特化、フォーム機能、関数機能 | 静的サイト、JAMstack |
| GitHub Pages | 完全無料、GitHubと統合 | 個人サイト、ドキュメント、ポートフォリオ |
| AWS / GCP | 高度な設定が可能、スケーラビリティ高い | 大規模アプリ、エンタープライズ |
Vercelの料金プラン
Hobby（無料プラン）
- 個人プロジェクト向け
- 無制限のWebサイト
- 100GB/月の帯域幅
- 自動HTTPS
- カスタムドメイン対応
Pro（$20/月）
- 商用利用可能
- 1TB/月の帯域幅
- パスワード保護
- アナリティクス機能
💡 ポイント：個人の学習や趣味のプロジェクトなら、無料プランで十分です。 このサイトも無料プランで運用しています！
⚠️ 注意：Vercelの料金プランは変更されることがあります。 最新の情報は公式サイトで確認してください。
（最終更新：2026年1月16日）
カスタムドメインの設定
Vercelでは、独自ドメイン（例：itwords.jp）を簡単に設定できます。
- ドメインを取得：お名前.comやGoogle Domainsなどでドメインを購入
- Vercelに追加：プロジェクト設定から「Domains」を開き、取得したドメインを入力
- DNS設定：Vercelが指示するDNSレコードを、ドメイン管理画面で設定
- SSL証明書：自動的にHTTPS化される（Let's Encryptを使用）
設定が完了すれば、https://your-domain.com でアクセスできるようになります。
環境変数の設定
APIキーやデータベースの接続情報など、公開したくない情報は環境変数として設定できます。
# .env.local ファイル（ローカル開発用）
NEXT_PUBLIC_API_KEY=your_api_key_here
DATABASE_URL=postgresql://...Vercelのダッシュボードから「Environment Variables」を設定すれば、 本番環境でも同じ環境変数が使えます。
Vercelのアナリティクス
有料プランでは、詳細なアクセス解析機能が使えます：
- ページビュー数
- 訪問者数
- デバイス別の統計
- 地域別のアクセス状況
- Core Web Vitals（ページ速度など）
無料プランでも、デプロイ履歴やビルドログは確認できます。
Vercelを使うメリット・デメリット
メリット
- 超簡単デプロイ： GitHubと連携するだけで自動デプロイ
- 高速： グローバルCDNで世界中から高速アクセス
- 無料で始められる： 個人利用なら無料プランで十分
- Next.js最適化： Next.jsの機能をフル活用できる
- プレビュー環境： PRごとに自動生成
デメリット
- 帯域制限： 無料プランは100GB/月まで（超えると課金）
- Next.js以外には弱い： 他のフレームワークだと少し不便
- サーバーレス前提： 常時起動のサーバーには不向き
