【実験ログ#003】実物のUSBメモリに残された謎を解き、ウェブポータルから報告する、体験型ミステリーを開発

「画面の中だけで完結しない、リアルな捜査体験を作りたい」

要約ニュースアプリの「スワぽい」や、眼精疲労対策の「アイまーる」といったWebアプリを作ったあと、今回は少し変わった作品を、バイブコーディングで形にしました。手元に届く物理のUSBメモリと、Web上の報告ポータルを行き来しながら進める、体験型ミステリー「真壁探偵事務所」です。

きれいな成功談ではなく、「なぜ物理のUSBにしたのか」「Webアプリとの開発の違い」「作るときに考えたこと」を、そのまま記録します。

真壁探偵事務所はどんな作品か

第一弾は、CASE-01「消えた配送記録」です。物流会社から預かった「約480万円の不整合」という事件を追う、体験型のミステリーです。

届いたUSBの中にある案件データ（帳簿や現場の記録）を調べて、証拠を照らし合わせ、Web上の報告提出ポータルに提出します。

コンセプトは「答えはどこにも書いていない」です。読者ではなく捜査員として、自分で仮説を立てて、導いた言葉で封を破り、報告します。

なぜUSBにしたのか

便利さだけを考えれば、Webブラウザで完結させるのが一番楽です。でも今回は、「手元にある証拠を開く」「PCにUSBを挿して記録を照らし合わせる」という現場の感覚と手触りが、どうしても必要でした。

少しの面倒くささが、作品の世界観を引き立てると考えました。

公式サイトで世界観を作り込む

商品を売るだけのランディングページにすると、「買ってください」という押しつけが出てしまいます。そこで公式サイトは、あくまで「事務所の入口」として作りました。

• 雰囲気づくりの効率化：「探偵事務所らしく」「ダークで硬い文体で」といった指示で、Cursorにデザインの土台を作ってもらいました。一からCSSを書く手間が、大きく減りました。
• 導線も世界観に合わせる：ボタンの言葉も、「購入」ではなく、「案件を開く」「事務所について」「報告ポータルへ」といった、作中の表現にそろえました。

Webアプリと、物を売る作品の違い

• 直せるかどうか：Webアプリは、公開したあとでも、コードを書き換えればすぐに直せます。一度発送したUSBメモリは、差し替えられません。
• 体験の設計：パスワードや正解の扱い、届いたあとの流れなど、「プレイヤーの手元で何が起きるか」を、事前に想像して決める必要がありました。

販売の状況（2026年10月11日時点）

販売はBoothで行っています。正直に書くと、2026年10月11日の時点で、まだ一つも売れていません。作ってみて分かったことも、売れていないという現状も、そのまま記録として残しておきます。

バイブコーディングでこれから作る人へ

非エンジニアが最初に挑戦するなら、Webアプリのほうが、ずっと軽いです。ただ、「自分の世界観や物語を、Webや手触りのある形で表現したい」という人にとって、バイブコーディングは強い味方になります。

まずは公式サイトの空気感だけでも、触れてみてください。事務所の入口を無料のURLで出した順番は Cloudflare Pagesは無料 に、見せてよいデータの線引きは バイブコーディングの前に、利用規約を見る に書いています。

真壁探偵事務所