【実験ログ#003】USBメモリ×体験型ミステリー「真壁探偵事務所」を作った話
真壁探偵事務所は、USBメモリとWebポータルを組み合わせた体験型ミステリーです。
スワぽいとアイまーるはWebアプリでしたが、真壁探偵事務所は少し違います。画面の中だけで完結せず、手元に届くUSBメモリと、Web上の報告ポータルを行き来しながら進める作品です。
この記事では、売上や反応の数字ではなく、どういう考えで作ったかを書きます。確認できない数字を盛っても意味がないので、公開サイトで確認できる内容と、自分が作るときに考えたことに絞ります。
何を作ったのか
公式サイトでは「CASE-01 — 消えた配送記録」として公開しています。
設定は、物流会社からの預かり案件です。約480万円の不整合があり、帳簿と現場の記録が食い違っている。プレイヤーはUSBに入った案件データを見ながら、証拠を照合し、Webポータルへ報告する、という流れです。
サイトには「答えはどこにも書いていない」と載せています。これはかなり大事にしたところです。
ただ読むだけのミステリーではなく、自分で証拠を見て、仮説を立てて、報告する形にしたかったからです。
なぜ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アプリのほうが軽いです。真壁探偵事務所のような作品は、世界観を作るのが好きな人向けだと思います。
いま触れる場所
公式サイトはこちらです。
USB本体は、公式サイトからBOOTHへ案内しています。まずはサイトの空気だけ見てもらえれば十分です。
同じ運営の別サービスとして、ニュースアプリの スワぽい と、眼精疲労対策アプリの アイまーる もあります。
一人で「自分の世界観をWebにしたい」と思っている人は、バイブコーディングと相性がいいかもしれません。ただし、物理物を絡めるなら、作ったあとの運用まで考えたほうがいいです。
> RELATED LOGS
関連記事
専門知識が浅くてもニュースアプリは作れるのか。スワぽいを個人開発したときの技術構成と、実際にハマった話を書いています。
画面を長時間見て目がしょぼしょぼする。休憩できない自分が嫌で作った眼精疲労対策アプリ「アイまーる」。ほぼゼロからCursorで作った記録です。
バイブコーディングの意味を、スワぽい・アイまーるを作った実例を交えて非エンジニア向けに説明します。丸投げではなく、判断を残す作り方です。