frontend-conference-KANSAI-2026

Figmaをゲームエディタに！コードを書かなくてもSPAゲーム制作に参加できる仕組み 2026/10/12 まぁし / 知念

「カミとミコ」で検索 ©SCRAP / 赤坂アカ / SHUEISHA, SHUEISHA GAMES

ゲーム画面デモ

株式会社TAM/TAMTO：フロントエンドエンジニア兼個人事業主知念昌史 / まぁし X@chocodogmagic • 沖縄在住・フルリモートのWebエンジニア
• Nuxt / React / Next.js / セマンティックHTML / PWA / アクセシビリティ • コミュニティ運営：v-okinawa（沖縄）/ MT東京（東京） • おはようエンジニア #ohayo_engineer（たぶん4年くらい） ◦ • Xスペースで平日9時〜Web関連のラジオ発信中、フォローしてねゲーム好き ◦ ポケモンチャンピオンズ 1750 もっとがんばりたい ◦ スプラトゥーン最高XP2050

開発体制謎解き・脚本シナリオ・キャラクターデザイン石田芙月ドット絵デザインシナリオ・品質管理担当が分かれている UI/UX・開発

変更を都度エンジニアが対応するのは時間がかかる表情のパターンを変えて試したい、セリフを変えたい HTML修正 → ビルド → デプロイ → ブラウザで表示確認 ※ストーリーや謎解きに影響するので微調整を繰り返す
©SCRAP / 赤坂アカ / SHUEISHA, SHUEISHA GAMES

このゲームは物語と謎解きでできている赤坂アカさんのボーイミーツガールな物語と世界の発展ｘ SCRAP加藤さんのリアル脱出ゲームで培った謎解きのおもしろさ 1. プロットを作る 2. 謎を作る 3. ユーザーになってプレイしてみる
4. 謎とシナリオの組み合わせをブラッシュアップ 5. プロットを見直して1からやり直す

開発方針：全てをCMSで更新できる

コンテンツ修正から表示確認までの流れ 1. シナリオ担当がセリフやシーンをmicroCMSで調整 2. コンテンツ保存時に、microCMSからWebhookでVercelビルド開始 ※一般的なWebサイトをCMSで更新するときと同じ手順 Webhook シナリオ担当謎作成の担当検証環境へデプロイ
build エンジニアロジック変更

環境構成開発環境本番環境 React + React Router + Vite SPAビルド
→ S3で配信 microCMS・Vercel・Supabaseで staticなファイルのみ都度更新・デバッグできる状態に APIリクエストしない

どうやって作るか Webブラウザで遊べるゲーム（Chrome・Safari・Edgeなど） • パソコンやスマートフォンのWebブラウザで動く • アプリのダウンロードが不要で、ゲーム機を持っていなくても遊べる Webサイトと同じ技術・言語で動く • HTML •
CSS • JavaScript

右画面のモブキャラクター達の配置タップ・クリックで会話（クリック範囲が必要）背景と切り分けて一つずつ画像にする（ぴょこぴょこ動くアニメーション）マップ内を歩いて移動する • HTMLでどう表現するか
• CMSで更新できるか ©SCRAP / 赤坂アカ / SHUEISHA, SHUEISHA GAMES

座標で管理する

モブキャラクターのX・Y座標をCMS管理 <Motion.div initial={x: 421, y: 108} animate={x: 421, Y: 138}
transition={...} > <img src=”...” alt=”子供”> </Motion.div> 初期位置、移動後の位置をX・Y座標で指定し、 CSSのtransformでアニメーションで動きを再現する（663人？！）

キャラクター配置を効率よく管理したい

さらに数値だけで位置をイメージするのは難しい

Figmaのデザインレイアウトで配置するデザイン編集でドラッグ＆ドロップで視覚的に位置を決める ※開発中の画面を含みます ©SCRAP / 赤坂アカ / SHUEISHA,
SHUEISHA GAMES

Figma用のプラグインを作成 1. Figmaのフレームからチャプター・パート情報を取得、レイヤーからインスタンスの画像情報や座標を取得 2. 取得した画像ファイルをmicroCMSにPOST でアップロードし、URL取得 3. 上記データをmicroCMSのスキーマに合わ
せて整形し、公式SDKでCMSヘ登録ボタンひとつで実行 ※開発中の画面を含みます ©SCRAP / 赤坂アカ / SHUEISHA, SHUEISHA GAMES

デモ

コンテンツ修正から表示確認までの流れ 1. シナリオ担当がセリフやシーンをmicroCMSで調整 2. コンテンツ保存時に、microCMSからWebhookでVercelビルド開始 ※一般的なWebサイトをCMSで更新するときと同じ手順 Webhook シナリオ担当謎作成の担当検証環境へデプロイ
build エンジニアロジック変更

コンテンツ修正から表示確認までの流れ 1. シナリオ担当がセリフやシーンをmicroCMSで調整 2. コンテンツ保存時に、microCMSからWebhookでVercelビルド開始 ※一般的なWebサイトをCMSで更新するときと同じ手順データ取り込みシナリオ担当 Webhook 謎作成の担当
検証環境へデプロイ build エンジニアロジック変更

CMSで扱えるようにデータを設計するコードがわからない人でも変更・更新できるようにする ① ② 1. 背景 2. 立ち絵 3. 話者
4. メッセージ ③ ④ ©SCRAP / 赤坂アカ / SHUEISHA, SHUEISHA GAMES

CMSを利用して画面を更新する microCMSを使用 → APIでデータのみを扱うHeadless CMS ©SCRAP / 赤坂アカ / SHUEISHA,
SHUEISHA GAMES

CMS管理画面 ©SCRAP / 赤坂アカ / SHUEISHA, SHUEISHA GAMES

ReactコンポーネントにCMSのデータを渡す ©SCRAP / 赤坂アカ / SHUEISHA, SHUEISHA GAMES

パート分け会話パート謎解きパート他にも動画パートやチュートリアル、ミッションクリア、エンディング、独自パートなど画面構成ごとにパートを分ける ©SCRAP / 赤坂アカ / SHUEISHA,
SHUEISHA GAMES

紙芝居システム

ゲーム進行の基本的な流れ（ロジック）一つの章（チャプター）の中でパート進行があり、章ごとにストーリーが進むチャプター開始オープニング動画・ドラマ会話パートチャプターエンディングすべての謎
クリアミッション謎解きパート会話パート正解・不正解フラグを立てて次のチャプターへ特殊な要素があるユニーク章は個別に実装 ※エンジニアはここに注力

シナリオやセリフ・画像素材を自由に変更できることで試行回数を増やす ↓ ゲームの品質を上げる

ほぼ全てのコンテンツをCMSで管理 • 登場キャラクターのセリフ • ミッション • 謎解きの正解・不正解・ヒント • 背景やキャラクター画像 •
モブキャラクター情報、移動ルート • ストーリーの場面管理（進行順やフェードイン、ポーズ時間、自動進行など） • ストーリーのフラグ管理 CMS管理していないものもある • 独自操作のパート、最終章の演出、エンディング分岐など

ミコの表情・ポーズ組み合わせモンタージュアプリ

デバッグツール • 任意の章・パートを行き来できる、進行状況の保存、共有（リストア） • 扱っているデータの情報を確認できる • キャラクター配置の座標をコンポーネント名を表示する ©SCRAP / 赤坂アカ
/ SHUEISHA, SHUEISHA GAMES

まとめ

これらのツールは最初から設計していたわけではない

まとめ動く状態で試してフィードバック、これを繰り返して品質を上げるゲーム開発 • ほぼすべてのコンテンツをCMSで更新できる仕組みを作る • 数値だけではイメージが難しい座標はFigmaから取り込む • 動作チェックや不具合調査の時間短縮のためのデバッグツールを作るゲームが動く枠となる箱や道具があることで全職種がゲーム作りに取り組めるチーム全員でゲーム作りをするための開発

より効率的に開発できないか、納期への影響を抑えながらクオリティを上げたい開発しながら考え続けた結果

ご清聴、ありがとうございました！ X（旧Twitter）まぁし@chocodogmagic 平日9:00〜スペースでWeb情報発信中！ Web制作/Webアプリ開発の相談ください！

エンジニア・ディレクター採用してます！！フリーランス・転職でお仕事探してる方も声かけて！ https://www.tam-tam.co.jp/

frontend-conference-KANSAI-2026

frontend-conference-KANSAI-2026

More Decks by Chinen

Other Decks in Programming

Featured

Transcript