はじめに
microCMS Advent Calendar 2025の4日目の記事です。
カミとミコ
「カミとミコ」は、SCRAP × 赤坂アカ × 集英社ゲームズのコラボで制作しているブラウザゲームです。スマホやPCのブラウザで遊べます。
TAMはこちらのゲームのUIデザイン・UX・実装をお手伝いしています。
僕はゲームロジック設計やフロントエンド開発を担当しています。
2025年12月現在も引き続き開発中です。
この記事では、ブラウザゲーム開発をどう効率化しているかを紹介します。
ブラウザゲームをどう実装するか
ブラウザで動作するように、HTMLとJavaScriptでゲームの仕組みを実装しています。
今回の技術スタックは、React + React Router + Viteを組み合わせたSPA（シングルページアプリケーション）です。
ユーザーが操作するたびにゲームの状態が変化し、何度も画面が切り替わることから、SPAの利点を活かせると考えました。
Reactを選んだ理由は、開発メンバーに経験者が多く、学習コストを抑えて開発効率を高められそうだったからです。
今回の手法なら、Vue.jsやSvelteなど他のUIライブラリでも同じことは実現できると思います。
React RouterとViteの組み合わせを選んだ理由も、開発メンバーに経験者がいたことと、ビルドやデプロイの手順をシンプルにできるからです。
開発環境の構築に時間をかけず、ゲームロジック自体の開発により多くの時間を確保できるようにしました。
画面のレイアウト・UIはReactコンポーネントでHTMLとCSSを使って実装しています。
JavaScript（TypeScript）でクリックイベントや時間経過をトリガーにフラグを立て、そのフラグの状態に応じてゲームが進行するようにしています。
複雑なコンテンツ管理
「カミとミコ」は謎解きアドベンチャーというジャンルのゲームで、シナリオに沿ってキャラクターとの会話が進むため、セリフや画像など扱う情報がたくさんあります。
また、謎解きの正解・不正解やヒントなどの多様な情報を管理する必要があり、これらが進行フラグとなってゲームが進行します。
- ステージ情報
- キャラクター情報
- アイテム
- イベント
- 謎の正解・不正解
- シナリオ進行フラグ
ゲーム開発の特性上、実際に操作してゲームの流れを通した上で細かいセリフ変更や調整を入れたい場面が多く、何度もデータを反映しては動作検証を繰り返すことになります。
セリフや画像の配置を一枚絵の画面として見るだけではないため、コンテンツの確認にも時間がかかってしまいます。
具体例としては「セリフの言い回しを変えた。けれど前後の会話から自然な流れになっているか見たいから、そのパートの初めからプレイしてみよう」というような状況がよくあります。
これらのセリフなどの情報をJavaScriptファイルやJSONファイルで管理している場合、エンジニアでない人は編集するのが難しいかもしれません。
また、コードを見慣れていなければどのファイルを触ったらいいか探すのに時間がかかったり、書き間違えると構文エラーでデプロイできなくなってしまうこともあります。
シナリオをチェックして調整していくときは、コンテンツの中身だけに集中して編集したいはずです。
コードやビルドコマンドを意識せずともゲーム画面に反映できるのが理想的です。
組織（仕事）でのゲーム開発の体制
個人開発と組織でのゲーム開発の違いとして、担当を分担して開発を進める点があります。
分け方は開発規模や会社の体制によって異なりますが、おおまかには以下のようになります。
- 企画者（脚本・キャラクターデザイン・シナリオなど）
- 設計者（ゲームデザイン・ロジック設計）
- デザイナー（UI・UX）
- エンジニア（プログラム実装）
最終的にゲーム画面を組み立てるのはエンジニアです。
一方で、シナリオやセリフは企画者が細かく編集したり、プレイ中の画面の見え方によってデザイナーが調整したい場面も出てきます。
変更依頼をその都度エンジニアに依頼し、編集、デプロイを待つような流れだと、検証するまでにタイムラグが発生し、頻繁に多数のアイデアを試していくことが難しくなってしまいます。
そこで、私たちのチームはエンジニアでない人でもゲームに登場するキャラクターの画像やセリフ、シナリオの進行フラグなどを編集できる仕組みが必要だと考えました。
ゲーム開発を進めながらも、「ゲーム開発のための編集ツール」を実装する方針をとることにしました。
いわゆる「xxxツクール」系のようにシナリオやキャラクター設定を編集できるよう、今回のゲームシステムに特化した仕組みを開発しています。
これにより、エンジニアでない人でもコンテンツを編集できるようになりました。
管理画面としてのmicroCMS
コンテンツ編集に集中できるよう、データ管理したい項目をすべてmicroCMSに登録して、管理画面から編集できるようにしました。
microCMSのようなヘッドレスCMSのメリットとしては、すぐに管理画面とDBが欲しいという点と、サーバーの用意が不要で自前で管理画面を作成しなくて良いという点が大きいです。
アーキテクチャの概要
[企画者・デザイナー]
↓
[microCMS]
(管理画面)
↓
API経由でJSON生成
↓
[React App]
(ゲーム本体)
↓
[ユーザー・プレイヤー]
※開発期間中は microCMS → Webhook → Vercel(自動デプロイ)
※本番環境は microCMS → API経由でJSON生成 → SPAとしてReactアプリをビルド → staticにホスティング
管理画面の一例
まとめ
この仕組みづくりにより、企画者やデザイナーなどエンジニアでない人でもシナリオを編集できるようになり、エンジニアはロジックの実装に集中できるようになりました。
エンジニアが新機能を実装している間に、エンジニアでないメンバーは作成済みのゲームパートをプレイしてフィードバックをもとに調整を繰り返せます。
特に、以下のようなケースではCMSで管理するメリットが大きくなります。
- ゲーム内のテキストやメッセージを頻繁に更新する必要がある
- デザイナーやクライアントなどエンジニアでない人も直接コンテンツを編集したい
ブラウザゲームの開発において、コンテンツ管理に課題を感じている方は、CMSの導入を検討してみるのも良いかもしれません。microCMSは小さなプロジェクトなら無料プランからでも活用できるので、ぜひ試してみてくださいね。
実装の詳細
この記事では触れていない細かい実装面の工夫や、どのようにゲームロジックを実現したかについても紹介したいので、今後、別記事や勉強会、イベント・カンファレンスなどの場で発表したいと思います。
ぜひゲームも遊んでみてください！
12/4から体験版を配信中
カミとミコの体験版を配信中です！
無料でも遊べるので、ぜひミコのかわいいところを見てほしいです。
Discussion