トミークリエイト|非エンジニアのバイブコーディング実践ログ

【実験ログ#003】USBメモリ×体験型ミステリー「真壁探偵事務所」を作った話

更新: 2026年7月17日冨岡 優喜(トミークリエイト代表)10分で読めます
実験ログバイブコーディング真壁探偵事務所体験型ミステリー

真壁探偵事務所は、USBメモリとWebポータルを組み合わせた体験型ミステリーです。

真壁探偵事務所のトップ画面。CASE FILE OPENの表示と、案件を開く・事務所についての導線があるダークな世界観のランディングページ
公式サイトのトップ。販売ページというより、事務所の入口として作っています。

スワぽいとアイまーるはWebアプリでしたが、真壁探偵事務所は少し違います。画面の中だけで完結せず、手元に届くUSBメモリと、Web上の報告ポータルを行き来しながら進める作品です。

この記事では、売上や反応の数字ではなく、どういう考えで作ったかを書きます。確認できない数字を盛っても意味がないので、公開サイトで確認できる内容と、自分が作るときに考えたことに絞ります。

何を作ったのか

公式サイトでは「CASE-01 — 消えた配送記録」として公開しています。

設定は、物流会社からの預かり案件です。約480万円の不整合があり、帳簿と現場の記録が食い違っている。プレイヤーはUSBに入った案件データを見ながら、証拠を照合し、Webポータルへ報告する、という流れです。

真壁探偵事務所の報告書提出ポータル。調査員向けのNOTICEと、ACTIVEなCASE-01 — 消えた配送記録の案内がある
報告書提出ポータル。USBの証拠を照合したあと、ここに入って報告する想定です。
CASE-01 消えた配送記録の画面。BRIEFINGとMETHODがあり、仮説ごとの封筒の選び方が書かれている
CASE-01の入室画面。仮説ごとに封筒を選び、証拠から導いた語で封を破る形にしています。

サイトには「答えはどこにも書いていない」と載せています。これはかなり大事にしたところです。

ただ読むだけのミステリーではなく、自分で証拠を見て、仮説を立てて、報告する形にしたかったからです。

なぜWebアプリではなくUSBにしたのか

Webだけでも謎解きは作れます。

でも、今回は「手元にある証拠を開く」感覚が欲しかった。USBを挿す、ファイルを見る、記録を照合する。その手間があるだけで、ただのWebページより少し現場に近づく気がしました。

便利さだけを考えれば、全部ブラウザ内で済ませたほうが楽です。ただ、真壁探偵事務所では、少し面倒なほうが世界観に合っていました。

サイトで先に決めたこと

最初に作ったのは、販売ページというより「事務所の入口」です。

真壁探偵事務所という名前、CASE FILE OPEN、調査の流儀、真壁誠という人物。こういう言葉を先に置きました。上のトップ画面にも、その空気が出るようにしています。

AIに頼むと、きれいなランディングページはすぐ出ます。ただ、ミステリーのサイトでそれをやると、普通の販売ページになってしまいます。欲しかったのは「買ってください」より先に、「ここは何かありそう」と思える空気でした。

そのため、CTAもいきなり購入だけにせず、「案件を開く」「事務所について」「報告ポータルへ」といった言葉にしています。単にボタンを置くより、世界観の一部にしたかったからです。

バイブコーディングで助かったところ

雰囲気づくりはかなり助かりました。

「探偵事務所っぽく」「証拠ファイルのように」「ダークで硬い文体に」みたいな指示を出して、画面の土台を何度も直しました。CSSを一から書いていたら、途中で飽きていたと思います。

特に、公式サイトの見出しやセクション構成は、作りながらかなり入れ替えています。ABOUT、CREED、CASE-01、FOR TRAINEES、OFFICIAL。こういう章立ては、最初から決まっていたわけではありません。

画面を見て、「これは販売サイトすぎる」「これは物語に寄りすぎて何をすればいいか分からない」と直していった結果です。

面倒だったところ

Webアプリと違って、物理物が絡むと考えることが増えます。

USBをどう届けるか、手元に届いたあとどこへ誘導するか、パスワードや正解をどう扱うか。これはAIに「いい感じにして」と頼んでも、自分で決めるしかありません。

公式サイトにも「パスワードも正解も渡さない」と書いています。そこを曖昧にすると、体験が壊れます。

Webアプリなら、動かなければ画面を直せばいい。でもUSBを使う作品では、プレイヤーの手元で起きることまで想像しないといけません。これは思ったより大変でした。

売上より先に見たかったこと

この作品で最初に見たかったのは、販売数よりも「体験として成立するか」です。

サイトを見た人が、何をする作品なのか分かるか。USBを手にした人が、次にどこへ進めばいいか分かるか。報告ポータルという言葉で、調査員になった感じが出るか。

もちろん販売は大事です。ただ、まだ確認できる数字をここに書く段階ではありません。数字を出すなら、あとで実測値として別記事にします。

Webアプリと物販はぜんぜん違った

スワぽいやアイまーるは、公開したあとにコードを直せば、すぐ全員へ反映されます。

真壁探偵事務所はそうはいきません。USBという物理物があるので、作ったあとに「やっぱり全部差し替えます」とは言いにくい。発送や在庫もあります。

非エンジニアが最初に挑戦するなら、正直、Webアプリのほうが軽いです。真壁探偵事務所のような作品は、世界観を作るのが好きな人向けだと思います。

いま触れる場所

公式サイトはこちらです。

https://makabe-detective.com/

USB本体は、公式サイトからBOOTHへ案内しています。まずはサイトの空気だけ見てもらえれば十分です。

同じ運営の別サービスとして、ニュースアプリの スワぽい と、眼精疲労対策アプリの アイまーる もあります。

一人で「自分の世界観をWebにしたい」と思っている人は、バイブコーディングと相性がいいかもしれません。ただし、物理物を絡めるなら、作ったあとの運用まで考えたほうがいいです。

> RELATED LOGS

関連記事

【実験ログ#002】バイブコーディングで「アイまーる」を0から作った話

画面を長時間見て目がしょぼしょぼする。休憩できない自分が嫌で作った眼精疲労対策アプリ「アイまーる」。ほぼゼロからCursorで作った記録です。

更新: 2026年7月17日冨岡 優喜(トミークリエイト代表)13分で読めます
実験ログバイブコーディングアイまーる非エンジニア