マガジン

Replitでブラウザゲームを公開するまで:無料枠の範囲で

遊びをつくる

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

単独で動く小さなゲーム箱と、中央の装置へつながる複数のゲーム箱を並べた模型。
記事のテーマをもとに制作したAI生成イラスト。

Replitは、ブラウザだけで開発・実行・公開までをひとつの画面で完結できるクラウドIDE(統合開発環境)です。「インストール不要」「URLがそのまま共有できる」という手軽さから、ゲームジャムや個人制作の公開先として選ぶ人が増えています。 ただし、無料枠には制約があります。「公開したらすぐスリープして開けない」「ファイルサイズが足りない」といった問題に最初からぶつかると、ゲーム制作ではなく環境設定に時間を使ってしまいます。この記事では、無料枠で実際に何ができて何ができないかを整理したうえで、HTMLベースのブラウザゲームを公開するまでの手順と、つまずきやすいポイントを示します。

この記事の目次
  1. Replitの無料枠で「できること」と「できないこと」
  2. HTMLゲームをReplitに置くまでの手順
  3. スリープ問題への現実的な対処
  4. 無料枠で詰まりやすい3つのポイント
  5. 次の行動
  6. 参考資料

Replitの無料枠で「できること」と「できないこと」

Replitの無料プランは、Replが常時起動していない点が最大の制約です。一定時間アクセスがないとサーバーが停止し、次の訪問者が来たときに数秒〜十数秒の「コールドスタート」が発生します。静的なHTMLゲーム(JavaScriptとCSSだけで動くもの)でも、Replitはデフォルトでそのファイルをサーバー経由で配信するため、この制約は避けられません。

ストレージとCPU・メモリの上限については、公式サイトで最新の条件を確認してください。仕様はプランの改定とともに変わることがあります。一般的な目安として、軽量なパズルゲームやシューティングゲームのHTML+JSファイル一式であれば、無料枠の容量に収まるケースがほとんどです。大量のスプライト画像や音声ファイルを含む場合は上限に近づく可能性があります。

無料枠で安定してできるのは次の用途です。

  • HTML/CSS/JavaScriptだけで動く静的ゲームの開発と動作確認
  • 友人や少人数へのデモ共有(常時公開ではなく「確認してほしいとき」に起動する使い方)
  • AIが生成したコードをそのまま貼り付けて試す「動作確認環境」

逆に、不特定多数が同時にアクセスする想定の公開先として長期間使うには、スリープの問題が障壁になります。

HTMLゲームをReplitに置くまでの手順

1. Replを新規作成する

Replitにサインアップしてログインしたら、「+ Create Repl」から新しいプロジェクトを作ります。テンプレートの選択画面が表示されるので、「HTML, CSS, JS」を選ぶのが最も単純です。バックエンドが不要なゲームであれば、このテンプレートで十分です。

2. ファイルを配置する

テンプレートには最初から index.html が用意されています。AIで生成したゲームのコードが単一HTMLファイルにまとまっている場合は、この index.html の中身をそのまま貼り替えるだけで動作確認できます。

画像・音声・別JSファイルが分かれている場合は、左のファイルパネルからファイルをアップロードします。フォルダ構造もそのまま再現できますが、HTMLの src や href に書いてあるパスが実際のファイル配置と一致しているかを必ず確認してください。パスのずれはゲームが無音になったり画像が表示されなかったりする原因として最も多いトラブルです。

3. 動作確認と「Run」ボタン

ファイルを配置したら「▶ Run」をクリックします。右側のプレビューペインにゲームが表示されれば成功です。プレビューが真っ白だったり、コンソールにエラーが出る場合は、ブラウザの開発者ツール(F12)でエラーメッセージを確認するのが最短ルートです。

「Uncaught ReferenceError」はJSファイルの読み込み順が原因のことが多く、<script> タグの順番を調整すると解決するケースがあります。「Failed to load resource」はパスの問題です。

4. 公開URLを取得する

Runが成功するとプレビューペインの右上に「Open in new tab」ボタンが現れ、https://プロジェクト名.ユーザー名.repl.co 形式のURLが生成されます。このURLを共有すれば、Replitアカウントを持たない人でもブラウザで直接ゲームをプレイできます。

ただし前述のとおり、しばらくアクセスがないとスリープします。ゲームを送った相手が開いたときに「Loading…」が数秒続くのはこのためで、バグではありません。

スリープ問題への現実的な対処

無料枠のスリープを完全に回避する方法は、有料プランへの移行以外にありません。ただし、用途によっては次の工夫で実用上の問題を小さくできます。

「見てほしいとき」だけ起動する運用:共有する前に自分でURLを一度開いてウォームアップしておけば、受け取った相手がすぐに遊べます。少人数への共有やポートフォリオ的な見せ方なら十分機能します。

静的ホスティングへの移行を検討する:GitHub PagesやNetlifyなどの静的ホスティングサービスは、HTMLゲームの常時公開に向いています。Replitはあくまでも「開発・確認の場」として使い、完成したファイルは別サービスで公開するという役割分担が、無料で安定した公開を実現する現実的な選択です。

アソバースへの投稿:HTMLとアセットファイルをZIPにまとめてアソバースに投稿すると、スリープのない環境でゲームを公開できます。Replitで開発・動作確認を行い、完成物をZIPにして投稿するという流れは、ブラウザゲーム制作の手順として自然にフィットします。

無料枠で詰まりやすい3つのポイント

音声ファイルのサイズ:BGMを含むゲームはファイルサイズが急増します。MP3の品質を下げる、短いループ素材にする、効果音はWeb Audio APIで生成するなどの対策が有効です。

外部ライブラリのCDN読み込み:Phaser.jsやPixi.jsをCDNから読み込む書き方はReplitでも動作しますが、ゲームロード時に毎回外部へリクエストが発生します。ネットワーク環境によって体感速度が変わるため、ライブラリファイルをReplのプロジェクト内に置く方が安定することがあります。ただしファイルサイズが増えるとストレージ上限に近づくため、サイズとの兼ね合いで判断してください。

モバイル対応のテスト:Replitのプレビューペインはデスクトップ幅で表示されます。スマートフォンからのプレイを想定しているゲームは、公開URLを実機で開いて別途確認する必要があります。タッチ操作が効かない、画面が縦横で崩れる、といった問題はプレビューでは気づきにくいです。

次の行動

Replitで動作確認が取れたら、HTMLファイルとアセットをZIPにまとめてアソバース(https://aso-verse.com)に投稿すると、スリープなしで不特定多数に公開できます。Replitは「作って確認する場所」、アソバースは「届ける場所」として役割を分けると、無料の範囲でも安定した公開環境を整えやすくなります。まずReplitで小さく試し、完成度が上がったタイミングで投稿先を決める流れで進めてみてください。

参考資料

  • Replit 公式ドキュメント(Replit Docs)
  • Replit 料金・プラン比較ページ(Replit Pricing)