TRPGアップデート予告｜2Dフロアマップエディタから3Dマップ表示へ。ブラウザで“世界に入れる”TRPGアプリを開発中

2Dフロアマップエディタから3Dマップ表示へ。ブラウザで“世界に入れる”TRPGアプリを開発中

現在、TRPG向けの2Dフロアマップエディタを作成しています。

※画面は開発中のものです。

このアプリは、単に画像を貼って駒を置くだけのツールではありません。
目指しているのは、TRPGのマップを作るだけでなく、そのまま世界の中に入って体験できるWebアプリです。

一般的なTRPG用マップツールでは、俯瞰で盤面を見ることが中心になりがちですが、今回開発しているものは、2Dマップ編集と3D空間での体験をつなげることを重視しています。
「作ったマップを、そのまま歩ける」ことが大きな特徴です。

※画面は開発中のものです。

現在の進捗：地形やオブジェクト配置を強化中

現時点では、さまざまな地形やオブジェクトをマップ上に配置できるよう調整を進めています。

たとえば、TRPGでよく使う以下のような要素を、より扱いやすくする方向で開発しています。

• 壁
• 床
• 天井
• 部屋区画
• 通路
• 障害物
• オブジェクト類

マップ作成時に「ただ置ける」だけでは実用性が弱いため、見た目のわかりやすさと今後の3D化へのつながりを意識して設計しています。

TRPGでは、シナリオの雰囲気や探索の導線がとても重要です。
そのため、単純なマス配置ではなく、空間の印象や没入感を高められるマップエディタにしていきたいと考えています。

次の段階：2Dマップから3Dマップを表示する機能を追加予定

次の段階として、2Dで作成したフロアマップをもとに3Dマップを表示する機能を追加予定です。

この機能により、エディタ上で作った部屋や通路、壁の情報を使って、
ブラウザ上で立体的なマップとして確認できるTRPG支援アプリに近づいていきます。

すでに、実際に動いたり歩いたりできる段階までは完成しています。
つまり、3D空間に入って移動するという土台部分は、ある程度できています。

ただし現状では、

• 壁紙
• 床
• 天井

が、まだ単純な板状の表現にとどまっています。
さらに、配置するための3Dオブジェクトモデルも未整備なため、見た目はまだかなりシンプルです。

今後はここを改善し、
「歩けるけれど味気ない空間」から、
TRPGの探索や演出に使いたくなる空間へ進化させていく予定です。

このTRPGアプリの開発背景

歩廊シミュレーションアプリの技術をTRPGに応用

このアプリには、少し面白い開発の経緯があります。

以前、面接を受けた際に、歩廊アプリをAIで作っているという話を聞きました。
そのときに、

「それを3DCAD化して、さらにWebで使えたら面白いのでは？」

と思い、まずは歩廊シミュレーションアプリを作成しました。

こちらです。
歩廊シミュレーションアプリ
https://kurutann.com/products/roofwalkway/

このとき作ったCAD的な仕組みは、歩廊だけで終わらせるにはもったいないと感じました。
「空間を組み立てる」「配置情報を持つ」「ブラウザ上で扱う」という考え方は、TRPGのマップ作成や3D表示とも相性が良いからです。

そこで今回は、そのCADシステムの考え方を活かして、TRPGアプリへ応用しています。

面接は不合格でも、技術としては次につながった

結果として、その面接自体は不合格でした。
ただ、その場で聞いた話や着想が、今回のアプリ開発につながっているため、個人的にはかなりプラスの時間だったと感じています。

開発では、こうした「その時は結果が出なくても、後から別の形で活きる経験」が意外と多いです。
今回のTRPG向けマップエディタも、まさにそうした流れの中で生まれました。

単発で終わるアイデアではなく、
CAD技術 → 空間設計 → TRPGの没入体験
という形でつながってきているのが、自分でも面白いところです。

Claude Codeで開発中。CAD系はやはりトークン消費が重い

現在はClaude Codeを使って開発を進めています。
ただ、CAD寄りの処理や、空間・オブジェクトを扱う設計はかなり複雑で、やはりトークン消費量が大きいと感じています。

最近は以前より制限が来るのが早いようにも感じており、
大きめの構造を扱うアプリ開発では、AI支援開発のコスト感もかなり重要だと実感しています。

歩廊アプリケーション自体は2～3日ほどで完成しましたが、TRPG版はそう簡単ではありません。
理由は主に次の通りです。

• 必要なオブジェクトの種類が多い
• マップエディタと3D表示の連携が必要
• TRPG向けとして使いやすさも考える必要がある
• 単なる表示ではなく“体験”として成立させたい

このあたりの要件が増えるため、TRPGアプリのほうが開発難易度はかなり高いです。

今後の目標

“作るだけ”ではなく、“入れるTRPGマップ”へ

このアプリで目指しているのは、
単なる2Dエディタでも、単なる3Dビューアでもありません。

最終的には、

• 2Dで直感的にフロアマップを作れる
• そのまま3Dで自動変換できる
• 実際にマップ内を歩いて確認できる
• TRPGセッションで使える没入感を出せる

という流れを、ブラウザ上で完結できるTRPG支援アプリにしていきたいと考えています。

TRPGのシナリオ制作、探索演出、部屋構成の確認、プレイヤー体験の向上など、
いろいろな方向に発展させられる可能性があるため、今後も少しずつアップデートしていく予定です。

上記アップデート以外情報

下記実技記事に4記事追加しました。

https://kurutann.com/awslearn/practical/

設計書記述ガイド付きエディタを作成しました

あわせて、設計書記述ガイド付きエディタも作成しました。

作成のきっかけは、IPA資格の勉強でした。
基本情報技術者試験や応用情報技術者試験の勉強では、PMBOKなどの用語が登場しますが、学習段階ではどうしても過去問ベースの暗記になりやすいと感じていました。

つまり、

• 正解は覚えられる
• 用語の意味もなんとなくわかる
• でも実際にどう書けばよいかはわからない

という状態になりやすかったです。

そこで今回、学習しながら実務にもつながる形として、
画面の右側に設計書の記述ガイドを表示し、必須事項の漏れを減らせる仕組みを取り入れました。

これにより、
「資格勉強のための知識」と「実際に書くための補助」をつなげることを狙っています。

暗記だけで終わらず、
設計書の考え方や書き方に慣れるための学習用エディタとして活用していければと思っています。

ページ表示数kurutann.comが10万回達成しました。

10万ページビューありがとうございます。

これからも頑張ります。

よろしくお願いいたします。