近年では、企業が新規タイトルの運営にブラウザゲームを選択するケースが少なからず見受けられます。ゲームを運営していくなかでは、シナリオやキャラクターといったコンテンツの追加や修正の作業は必ず発生します。
そんなブラウザゲームの開発に関して、興味深い講演がCEDEC 2026で実施されました。「エンジニアなしでゲーム内容を更新できる！謎解きアドベンチャーゲーム『カミとミコ』開発におけるCMSとFigma活用」では、株式会社TAMの知念昌史氏が、謎解きアドベンチャーゲーム『カミとミコ』の開発事例をもとに、CMSとFigmaを活用した開発手法を紹介する講演です。
本講演では「エンジニアに頼らずに、非エンジニアメンバーでもコンテンツの追加作業が可能になる環境づくり」について語られています。主にmicroCMSをコンテンツ管理基盤として活用し、シナリオライターやデザイナーが直接ゲームデータを編集できる環境を構築した工夫や、キャラクターの配置・移動ルートをFigma上で管理してCMSに取り込む仕組みなど、コードを触らずに視覚的に編集できる実践的な手法が解説されました。
「シナリオと謎解き」膨大なデータを扱うブラウザゲームならではの課題
まず『カミとミコ』は、赤坂アカ氏、SCRAP、集英社ゲームズのトリプルタッグによって制作されたブラウザゲームの謎解きアドベンチャーです。プレイヤーは神様として、さまざまな時代の巫女と出会い、言葉の通じない相手に「刻まれた神の意思」を通じて謎解きの答えを伝えていくことを目的としています。
本作の開発ではシナリオやキャラクター情報、進行フラグなど扱う情報量が多いという特徴があります。それゆえに、各データをコードに直接書き込む方法だと、コンテンツの編集や追加のたびにエンジニアの工数が発生し、プログラムを書けないメンバーが編集に関われないという課題が発生していました。
まず知念氏は、そもそものブラウザゲームがどういう特性を持つかについて説明。これは「ウェブブラウザさえあれば、専用アプリのダウンロードなしに遊べる手軽さがある」ゲームの形態だと語り、「技術的にはHTML・CSS・JavaScriptといった一般的なウェブ技術で構築されている」といいます。
『カミとミコ』の実際の技術構成としては、Reactと画面遷移を管理するReact Router、ビルドツールのViteが使われました。開発環境ではVercelを使い、コードの変更をリアルタイムで確認。一方、実際にユーザーが遊ぶ本番環境では、AWSのS3にすべて静的ファイルとして配置し、購入時以外はサーバー通信をほぼ発生させない構成にすることで安定性を重視したといいます。
「触ってみないと分からない」ゲーム特有の開発サイクルに適応するための技術選定
開発体制で課題になったのは、ゲーム制作とウェブ制作の作り方の違いでした。ウェブサイト制作では要件を固めてから一気に作るウォーターフォール型が一般的ですが、「実際ゲームというのは遊んで動かしてみないとその良さが分からなかったり、企画の段階では良さそうだったけどいざ触ってみたらちょっと思ったのと違うみたいなことがある」と知念氏は語ります。
そのため、設計・実装・テストを繰り返しながら作っては試す、というゲーム開発特有の進め方に合わせていく必要があったといいます。
特に、赤坂アカ氏によるシナリオとSCRAPによる謎解きの組み合わせは、プロットを作って実際にプレイしてみてから何度もブラッシュアップするというサイクルが発生します。そのたびにエンジニアが修正・ビルド・デプロイを繰り返していては、テストの回数そのものが増やせません。
そこで知念氏らが取ったアプローチが、「エンジニアじゃなくても、ゲームの内容を更新できるようにしよう」という考え方でした。具体的には、コンテンツ管理システム(CMS)を使った編集環境の構築です。
採用されたのはヘッドレスCMSのmicroCMSでした。背景画像やキャラクター画像、セリフのウィンドウに表示される話者名とメッセージ本文といった要素をCMS側で管理し、Reactのコンポーネントにデータとして渡す構成にすることで、エンジニアを介さずにシナリオライターやデザイナーが直接内容を編集できるようにしたといいます。
コンテンツをmicroCMS上で保存すると、Webhook経由でVercelに連携され、1～2分後には修正内容が実際に遊べる形でデプロイされる仕組みも構築されました。「普段Webの担当をされている方であれば、特に我々が担当しているような業務の流れでゲーム自体も更新できる」と、一般的なウェブサイト運用との親和性の高さも強調しています。
「全員でゲームを作る仕組みづくり」約2年間で3,840回のデプロイ
もう一つ課題になったのが、モブキャラクターの配置でした。村人たちのキャラクターは背景と一体化した一枚絵にはできず、それぞれ個別のHTML要素としてX・Y座標で管理する必要があったといいます。しかし663体にも及ぶキャラクターの座標を数値だけで手作業管理するのは現実的ではありませんでした。
そこで導入されたのが、デザインツールのFigma上でキャラクターの位置をドラッグ&ドロップで視覚的に配置し、自作のプラグインを使ってその座標データと画像情報をmicroCMSに直接インポートする仕組みです。これにより、数値を直接扱うことなく、見た目のまま配置作業を進められるようになりました。
このほか、開発途中の不具合調査にかかる時間を短縮するため、特定の章まで一気に画面遷移できるデバッグツールも独自に開発されたことが紹介されています。
こうした取り組みの結果、見事にチーム全員がゲーム作りできる環境の構築に成功します。『カミとミコ』ではこの環境によって巫女の表情パターンは200種類、モブキャラクターは663体を実装。さらに登録されたメッセージは5,500件にのぼり、約2年間の開発期間中に3,840回ものデプロイが行われたといいます。
セッションの最後に知念氏は、「エンジニア以外の全職種がチームで取り組めるというところを最初から考えて、ゲームの設計自体もそのように作っている」と述べ、道具や仕組みづくりを通じてチーム全体で開発を進めた経験を振り返り、講演を締めくくりました。
