JavaScriptだけでゲームをApp Storeに出す方法――Phaser・Three.js + Capacitor 完全ガイド

ゲーム制作技術

WebエンジニアがJavaScriptだけでゲームを作れる時代

「自分はHTML/CSS/JavaScriptしか書けない。でもApp StoreやGoogle Playにゲームを出してみたい」――そう思ったことはありませんか？

少し前なら、モバイルゲーム開発といえばUnityでC#を書くか、Swift/Kotlinでネイティブ開発するかの二択でした。Webエンジニアにとってはどちらも「新しい言語とツールチェーンを丸ごと覚え直す」ことを意味し、かなり高いハードルだったはずです。

ところが2026年の今、状況は大きく変わっています。JavaScriptだけでゲームを作り、そのままApp StoreとGoogle Playに出すことが現実的な選択肢になりました。使うのは、2DゲームならPhaser.js、3DゲームならThree.js。そしてアプリ化のツールとしてCapacitorを組み合わせます。

この記事では、「ブラウザで動くゲームは作れるけど、アプリとして出す方法がわからない」というWebエンジニアに向けて、JSゲーム開発からストアリリースまでの全体像を解説します。

JSゲームの選択肢：Phaser（2D）とThree.js（3D）

JavaScriptでゲームを作るためのライブラリは数多くありますが、実績とコミュニティの厚さで選ぶならPhaser.jsとThree.jsの2つが鉄板です。

Phaser.js ― 2Dゲームの定番

Phaser.jsは、HTML5で2Dゲームを作るためのフレームワークです。スプライト管理、衝突判定、物理演算（Arcade Physics / Matter.js統合）、アニメーション、サウンド管理まで、2Dゲームに必要な機能がひと通り揃っています。

  • タイルマップベースのRPG、プラットフォーマー、パズル、カードゲームなどに最適
  • Canvas / WebGLどちらのレンダラにも対応しており、モバイルブラウザでも軽快に動作する
  • ドキュメントとチュートリアルが豊富で、日本語情報も多い
  • npmでインストールでき、TypeScriptにも対応

「ブラウザゲームを作ったことがある」という人の多くがPhaserを触った経験があるのではないでしょうか。2Dカジュアルゲームをアプリにしたいなら、最も堅実な選択肢です。

Three.js ― 3Dをブラウザに持ち込む

Three.jsはWebGLベースの3Dライブラリです。3Dモデルの表示、ライティング、カメラ制御、アニメーションなど、3Dシーンの構築に必要なAPIを提供しています。

  • GLTFモデルの読み込みに対応しており、Blenderで作ったモデルをそのまま使える
  • ローポリスタイルのカジュアル3Dゲームならモバイルでも十分実用的
  • 物理演算が必要な場合はcannon-esやAmmo.jsなどを別途組み合わせる
  • r3f（React Three Fiber）を使えばReact開発者にもなじみやすい

ただし、Three.jsはあくまで「3D描画ライブラリ」であって「ゲームエンジン」ではありません。シーン管理やゲームループ、UI、サウンド管理などは自分で実装するか、別のライブラリと組み合わせる必要があります。とはいえ、Webエンジニアにとってはその自由度こそが魅力でもあります。

どちらを選ぶか

項目 Phaser.js（2D） Three.js（3D）
得意なジャンル パズル、RPG、プラットフォーマー ローポリ3D、レースゲーム、空間演出
学習コスト 低い（ゲーム用APIが揃っている） やや高い（3Dの概念理解が必要）
モバイル負荷 軽い 最適化が必要
物理演算 内蔵（Arcade Physics） 外部ライブラリが必要

迷ったら、まずはPhaserで2Dゲームを1本作ってアプリ化するのがおすすめです。成功体験を得てから、必要に応じてThree.jsに挑戦するのが効率的です。

CapacitorでブラウザゲームをAndroid/iOSアプリに変換する

ここからが本題です。ブラウザで動くJSゲームを、どうやってApp StoreやGoogle Playに出せるアプリに変換するのか。答えはCapacitorです。

Capacitorとは

CapacitorはIonic社が開発したオープンソースのランタイムです。Webアプリ（HTML/CSS/JavaScript）をiOS/Androidのネイティブアプリとしてパッケージングしてくれます。

仕組みはシンプルです。

  • iOSではWKWebViewの中でWebアプリが動く
  • AndroidではChromium WebViewの中でWebアプリが動く
  • カメラ・GPS・プッシュ通知などのネイティブAPIには、JSブリッジ経由でアクセスできる
  • 「Electronのモバイル版」だと思えばイメージしやすい

つまり、ブラウザで動くゲームはCapacitorでそのままアプリになるということです。コードの書き直しは基本的に不要です。

セットアップの流れ

既存のWebゲームプロジェクトにCapacitorを追加する手順は、驚くほどシンプルです。

# Capacitorをインストール
npm install @capacitor/core @capacitor/cli

# 初期化（プロジェクト名とパッケージIDを指定）
npx cap init "MyGame" "com.example.mygame"

# プラットフォームを追加
npm install @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios

# Webアプリをビルドしてコピー
npm run build
npx cap sync

# Android Studioで開く
npx cap open android

これだけで、Android StudioやXcodeでビルド可能なネイティブプロジェクトが生成されます。あとはビルドしてAPK（またはIPA）を作るだけです。

Phaser公式もCapacitor統合を推奨

Phaserの公式サイトには、「Bring Your Phaser Game to iOS and Android with Capacitor」というチュートリアルが公開されています。また、Capacitorの公式ドキュメントにもゲーム向けガイドが存在します。つまり、「JSゲーム + Capacitorでアプリ化」は公式が想定しているユースケースなのです。

GitHubのCapacitorリポジトリのディスカッションでも「Three.js + GLTF + WebGLはCapacitor上で動くか？」という質問に対して、コミュニティから「動く。ただし最適化は必須」という回答が寄せられています。

パフォーマンスの現実：どんなゲームなら動くか

「ブラウザで動くならアプリでも動くでしょ？」――残念ながら、話はそう単純ではありません。CapacitorでアプリにしたときのパフォーマンスはPCブラウザとはかなり異なります。ここが最大の落とし穴です。

端末クラス別の挙動

AndroidのWebViewが使うGPUドライバは端末ごとにバラバラです。同じSnapdragonチップでも、メーカーのドライバ実装次第でWebGLの描画パフォーマンスが変わります。

端末クラス 具体例 Phaser（2D） Three.js（3D）
ハイエンド Pixel 8, Galaxy S24 60fps 問題なし 60fps（最適化すれば）
ミドルレンジ Pixel 7a, Galaxy A54 60fps 問題なし 30fps以上（最適化必須）
ローエンド RAM 3GB未満の廉価モデル おおむね動作 厳しい

ここで注目してほしいのは、Phaser（2D）はほとんどの端末で問題なく動くという点です。2Dゲームは描画負荷が圧倒的に軽いため、WebView経由でも十分なパフォーマンスが得られます。

Three.jsのボトルネック：draw call

Three.jsを使う場合、最も気をつけるべき指標はdraw call（GPUへの描画命令の回数）です。デスクトップブラウザでは1000以上のdraw callでもスムーズに動くシーンが、モバイルWebViewでは100を超えた時点でカクつき始めることがあります。

renderer.info.render.callsで現在のdraw call数を確認できます。

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  // 開発中はdraw callを常にモニタリング
  console.log('Draw calls:', renderer.info.render.calls);
}

Three.jsで必須の最適化テクニック

モバイルでThree.jsゲームを動かす場合、以下の最適化は必須と考えてください。

1. ジオメトリ統合でdraw callを削減

同じマテリアルを使うオブジェクトはmergeGeometries()でまとめて、draw callを1回に集約します。

import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';

const geometries = meshes.map(m => m.geometry);
const merged = mergeGeometries(geometries);
const singleMesh = new THREE.Mesh(merged, sharedMaterial);
scene.add(singleMesh);

2. InstancedMeshで同一オブジェクトを効率描画

木、岩、敵キャラなど同じモデルを大量に配置する場合、InstancedMeshを使えばdraw callを1回に抑えられます。

const mesh = new THREE.InstancedMesh(geometry, material, count);
const matrix = new THREE.Matrix4();

for (let i = 0; i < count; i++) {
  matrix.setPosition(Math.random() * 100, 0, Math.random() * 100);
  mesh.setMatrixAt(i, matrix);
}
scene.add(mesh);

3. Draco圧縮でGLTFモデルを軽量化

Googleが開発したDraco圧縮により、GLTFモデルのファイルサイズを60〜90%削減できます。初回ロード時間の短縮とメモリ使用量の低減に直結します。

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');

const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load('model.glb', (gltf) => {
  scene.add(gltf.scene);
});

4. テクスチャ圧縮（KTX2）

PNGやJPEGはCPUでデコードしてからGPUに転送されますが、KTX2形式のGPU圧縮テクスチャなら、GPUが直接読めるためメモリ使用量を1/4〜1/6に削減できます。

これら4つの最適化を組み合わせれば、draw call 100以下・テクスチャメモリ256MB以下という目標を達成でき、ミドルレンジ端末でも30fps以上を維持できる可能性が十分にあります。

App Store・Google Play審査の注意点

ゲームが動くようになったら、次はストアへの提出です。ここにもWebViewアプリならではの注意点があります。

Google Play：比較的通りやすい

Google PlayにはWebViewアプリに対する明示的な禁止規定がありません。クラッシュしない、応答性がある、基本的な品質基準を満たしている――これらをクリアしていれば、WebViewベースであっても審査に通ります。

Capacitor + JSゲームをAndroidに出す場合、Google Play側のハードルは低いと考えて問題ありません。

Apple App Store：ガイドライン4.2に要注意

問題はApple側です。Appleの審査ガイドラインには「4.2 Minimum Functionality」という項目があり、「Webサイトを単にラップしただけのアプリ」はリジェクトされる可能性があると明記されています。

ただし、ゲームの場合はWebサイトとは明確に異なるインタラクティブ体験を提供するため、単純なWebサイトラッパーとは見なされにくい傾向があります。それでも念のため、以下の対策を講じておくと安心です。

  • プッシュ通知を実装する：Capacitorにはプッシュ通知プラグインがあり、実装コストは低い。これを1つ入れるだけで「アプリとして成立している」と判断されやすくなる
  • オフライン動作に対応する：Service Workerでアセットをキャッシュし、ネット接続なしでもゲームが起動するようにする
  • ネイティブAPIを1つ以上使う：ハプティクスフィードバック（振動）やGame Center連携など、ブラウザでは使えないAPIを活用する

特にプッシュ通知の実装は効果的です。「新しいステージが追加されました」「ランキングが更新されました」のような通知を送れるだけで、アプリとしての存在意義がレビューアに伝わりやすくなります。

その他のストア提出Tips

  • APKサイズ：Capacitor + JSゲームなら5MB程度から始められる（Unityは空プロジェクトでも50MB超）
  • スクリーンショット：ストアに掲載する画面写真は、ゲームのベストシーンをキャプチャする。WebView感が出ないよう、ステータスバーは非表示にする
  • プライバシーポリシー：Google Play・App Storeともに必須。個人情報を収集しない場合でも「収集しない」旨を記載したページが必要

結論：「JSゲーム → Capacitorでアプリ化」は現実的か

ここまでの内容をまとめます。

現実的なパターン

やりたいこと 技術スタック 現実度
2Dカジュアルゲームをアプリ化 Phaser + Capacitor 十分実用的。中低端末でも安定動作
ローポリ3Dゲームをアプリ化 Three.js + Capacitor 最適化すれば現実的。draw call管理が鍵
本格的な3Dアクションゲーム Capacitorでは厳しい 素直にUnityやGodotを検討すべき

最大のメリット：Web版とアプリ版を同じコードで出せる

Capacitorの最大の強みは、Web版とアプリ版でコードベースを共有できることです。itch.ioやGitHub Pagesでブラウザ版を無料公開しつつ、App Store/Google Playにもアプリ版を出す。同じゲームを2つのチャネルで展開できるのは、個人開発者にとって大きなアドバンテージです。

「JSしか書けない」はもう制約じゃない

かつて「モバイルゲームを出すにはC#かSwift/Kotlinが必要」と言われていた時代は終わりました。2026年の今、JavaScriptの知識だけで以下のことが可能です。

  • Phaserで2Dゲームを作る
  • Three.jsでローポリ3Dゲームを作る
  • Capacitorでネイティブアプリにパッケージング
  • 同じコードでWeb版も公開
  • プッシュ通知やハプティクスなどのネイティブ機能も追加可能

もちろん、Unityのような本格エンジンに比べれば制約はあります。フォトリアルなグラフィクスや大規模なアクションゲームには向きません。しかし、カジュアルゲームを1本ストアに出してみたいというWebエンジニアにとって、Phaser/Three.js + Capacitorは最も現実的で、最もハードルの低い選択肢です。

ブラウザで動くゲームがすでにあるなら、Capacitorでアプリにするのは数時間の作業です。「アプリを出す」という体験を、ぜひJavaScriptで味わってみてください。

参考ソース

コメント

タイトルとURLをコピーしました