投稿する
マガジン
著者：アソバース編集部公開：更新：約8分で読めます

VercelとNetlifyでゲームを公開する：どちらが向くか

遊びを届ける

執筆にClaudeを使用しています。

開いた箱から小さなゲームの模型を展示台に移す風景。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

ブラウザゲームを作り終えたとき、「どこで公開するか」は意外と迷う問題です。VercelとNetlifyはどちらも静的ファイルを無料でホスティングできる定番サービスで、HTMLとJavaScriptだけで動くゲームとの相性が良いとされています。しかし「どちらでも同じ」かというとそうではなく、ゲームの構成やデプロイの習慣によって向き不向きが変わります。 この記事では両者の違いを「ゲームを公開する」という用途に絞って整理します。どちらを選べばよいか迷っている人が、読み終えた後に自分のケースで判断できることを目標にしています。

この記事の目次
  1. ゲーム公開の用途で比べたときの基本的な違い
  2. どちらを選ぶか：用途別の判断基準
  3. Netlifyで公開する手順
  4. Vercelで公開する手順
  5. 無料枠と制限について注意すること
  6. 次の行動
  7. 参考資料

ゲーム公開の用途で比べたときの基本的な違い

VercelとNetlifyはどちらも、GitリポジトリをつなぐだけでHTMLファイルを世界に公開できます。無料枠でカスタムドメインも使えます。この点では対等です。

大きな違いが出るのは、ゲームにサーバーサイドの処理が必要かどうか、そしてデプロイの起点をどこに置くかという二点です。

Vercelはもともとフロントエンドフレームワーク（特にNext.js）との連携を前提に設計されています。サーバーレス関数（Edge FunctionsやAPI Routes）を同一プロジェクトで管理しやすく、スコアをサーバーで検証したいゲームや、ランキングAPIを自前で持ちたいケースで選ばれやすいです。一方でビルド設定のカスタマイズはやや独自の作法があり、素のHTML+JSゲームをそのまま置くだけなら少し設定が多く感じることがあります。

Netlifyは静的サイトの公開を出発点に設計されており、HTMLファイルをドラッグ＆ドロップで即座に公開する「Netlify Drop」を公式が提供しています。Gitを使わない開発者でも試しやすく、ゲームジャムの提出や試作版の共有に向いています。フォームやリダイレクト、Basic認証などの小機能も設定ファイル一枚（netlify.toml）で制御できます。

どちらを選ぶか：用途別の判断基準

ゲームの構成で選ぶ

  • HTML + CSS + JSのみ（サーバーなし）、向くサービス：どちらでも可。Netlifyの方が手順が少ない
  • WebAssembly（Unityエクスポートなど）を含む、向くサービス：どちらでも可。大容量ファイルの扱いは無料枠の上限を要確認
  • スコア検証・マッチメイキングAPIを自前で持つ、向くサービス：Vercelのサーバーレス関数が一元管理しやすい
  • ゲームジャム等で素早く試作を共有したい、向くサービス：Netlify Drop が最速

開発フローで選ぶ

Gitで管理していて、プッシュのたびに自動デプロイしたい場合はどちらも対応しています。ただし、Vercelはvercel.json、Netlifyはnetlify.tomlという独自の設定ファイルを持ち、書き方はそれぞれ異なります。すでにどちらかを使ったことがあるなら、その経験を活かす方が早いです。

どちらも使ったことがない場合、ゲームジャムや短期間の試作ならNetlify Drop、Gitと組み合わせて継続運用するならどちらでも大差なし、APIやサーバー処理が必要になる可能性があるならVercelという基準で選ぶと判断が速いです。

Netlifyで公開する手順

  1. Netlify Drop を使う場合：netlify.com/drop を開き、ゲームのフォルダ（または単一HTMLファイル）をブラウザにドラッグ＆ドロップします。数秒で固有のURLが発行されます。アカウント登録なしでも試せますが、登録すると後から編集できます。
  2. Gitリポジトリと連携する場合：Netlifyにログインし「Add new site → Import an existing project」を選びます。GitHubやGitLabのリポジトリを選択し、ビルドコマンドとパブリッシュディレクトリを指定します。素のHTML+JSゲームならビルドコマンドは空欄、パブリッシュディレクトリはファイルが置かれたフォルダ名（例：dist や .）で動きます。
  3. netlify.toml の活用：SPAのようにURLのルーティングを制御したい場合、[[redirects]] ルールをtomlファイルに書きます。例えばゲームのルーティングをすべてindex.htmlに向けるには以下のように書きます。
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

キャッシュヘッダーの設定も同ファイルで管理できるため、アセットの更新が正しく反映されない問題を防ぐのに役立ちます。

Vercelで公開する手順

  1. CLIを使う場合：Node.jsがインストールされた環境で npm i -g vercel を実行してVercel CLIを導入します。ゲームのディレクトリに移動し vercel と打つと対話形式でデプロイが進みます。
  2. Gitリポジトリと連携する場合：Vercelにログインし「Add New → Project」からリポジトリを選びます。フレームワークの自動検出が走りますが、素のHTML+JSゲームは「Other」を選び、出力ディレクトリを指定します。
  3. vercel.json の活用：ヘッダー制御やリライトを設定したいときはvercel.jsonを使います。Cross-Origin Isolation（SharedArrayBufferを使うゲームで必要になるケース）のヘッダーを付けたい場合もここで記述します。
json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
      ]
    }
  ]
}

UnityやGodotのWebGL出力で SharedArrayBuffer が必要な場合、このヘッダー設定がVercelで比較的書きやすいのは実用的な利点です。Netlifyでも同様の設定は可能ですが、書き方の作法が異なります。

無料枠と制限について注意すること

両サービスとも無料枠の帯域・ビルド時間・リクエスト数には上限があります。数値は頻繁に改定されるため、現時点の正確な上限は公式サイトで確認してください。ゲームのアセットが重い場合（WebGLビルドや高解像度の画像・音声が多い場合）、デプロイサイズの上限と帯域の上限の両方を事前に調べておくことをお勧めします。

また、Vercelの無料プランは商用利用の条件が定められています。個人制作のゲームでも収益化や広告表示を検討しているなら、利用規約を確認してから選ぶ必要があります。Netlifyにも同様に利用条件があります。どちらも公式の利用規約ページで最新の内容を確認するのが確実です。

次の行動

試作段階であれば、まずNetlify Dropにゲームフォルダをドラッグして動作確認することをお勧めします。継続して公開・更新する予定があり、スコア送信などサーバー処理を将来追加するかもしれないならVercelとGitの連携を最初から組んでおくと後から移行する手間が省けます。完成したゲームはアソバースにZIPまたはHTMLファイルとして投稿することもできます。VercelやNetlifyで公開済みのURLをアソバースに登録する形でも配信できるため、公開先を一本化せず用途に合わせて使い分けることも選択肢に入れてみてください。

参考資料

  • Netlify 公式ドキュメント（netlify.com/docs）
  • Vercel 公式ドキュメント（vercel.com/docs）
  • Netlify 利用規約（netlify.com/legal/terms-of-use）
  • Vercel 利用規約（vercel.com/legal/terms）
マガジン一覧に戻る