【実験ログ#003】バイブコーディングで「USBメモリ×体験型ミステリー」を0から作った話

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

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

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

どんな作品か

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

届いた USB 内の案件データ（帳簿や現場記録）を検証し、証拠を照合して Web 上の報告提出ポータルへ提出します。

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

なぜUSBにしたのか

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

少しの面倒くささこそが、作品の世界観を引き立てるスパイスになります。

世界観を作り込む

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

• 雰囲気づくりの効率化： 「探偵事務所っぽく」「ダークで硬い文体で」といった指示で、Cursor にデザインの土台を素早く作成させました。一から CSS を書くストレスを大幅に減らせました
• 導線の世界観化： CTA も「購入」ではなく、「案件を開く」「事務所について」「報告ポータルへ」といった作中表現に揃えました

Webアプリと物販の違い

• 修正の効かなさ： Web アプリなら公開後もコードの書き換えで一瞬で直せます。一度発送した USB メモリは差し替えられません
• ユーザーの体験設計： パスワードや正解の扱い、届いたあとの導線など、「プレイヤーの手元で何が起きるか」を事前にシミュレーションする必要がありました

これから作る人へ

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

まずは公式サイトの空気感だけでも触れてみてください。

真壁探偵事務所