毎朝飲んでるトマトジュースがついに40円も値上げしてしまいました…。

この記事は、社内イベント「お茶会」での発表内容をもとにまとめたものです。
今回は弊社の takano が、「謎解き」をテーマに発表を行いました。

もともと謎解きが好きで、街歩き型のイベントや脱出ゲームなどにもよく参加しているほか、また最近では、自宅で遊べるキット型の謎解きなどにも手を出しています。

その流れで、今回自分でも謎解きを作ってみました。

「謎解き」と言われても、あまり馴染みがないとイメージしづらいかもしれません。
そもそも謎解きとはどういうものなのか。そこから説明したいと思います。

01 謎解きとは

まずはクイズとの違いから見てみます。
たとえば、こんな問題です。

小田原北条氏の三代目は氏康ですが、その三男は北条氏照です。
では、彼が築いた八王子にある山城といえば？

答えは「八王子城」。

この問題は、知識がないと解くことができません。
一方で、謎解きは少し性質が異なります。

この問題を解くと、「ウジテル」という答えが出てきます。

クイズが知識を前提にしているのに対して、謎解きは問題の中にある法則やヒントに気づく(閃く)ことで、答えにたどり着きます。北条氏照という人物を知らなくても解ける。これが、クイズと謎解きの大きな違いです。

考えても分からない時間があって、ふと気づく瞬間がある。その体験が、謎解きの面白さにつながっています。

謎解きの広がり

謎解きの起源については諸説ありますが、主な流れを整理すると以下の通りです。

• 1997年頃：株式会社SCRAP代表が親戚の集まりで宝探しイベントを始める
• 2001年：リアル宝探しの開始(タカラッシュ)
  • 現実空間で楽しむ謎解きが登場。
• 2004年：『脳内エステ IQサプリ』放送開始
  • テレビ放送としての謎解きの原点ともいえる存在です。
• 2004年：『クリムゾン・ルーム』公開
  • Flashゲームとして話題になり、脱出ゲームの原点のひとつとされています。
• 2007年：リアル脱出ゲーム初開催(SCRAP)
  • 体験型イベントとして一気に広がります。
• 2012年：海外展開(サンフランシスコなど)
• 2017年：東京ミステリーサーカス オープン
  • 新宿歌舞伎町に脱出ゲームや謎解きが楽しめる常設施設が誕生。
• 2019年：来場者100万人突破(東京ミステリーサーカス)
• 2019年：RIDDLER株式会社設立
  • 謎解きを軸に、さまざまなメディアで体験を企画・制作するクリエイター集団。

このように、謎解きは年々盛り上がりを見せており、現在では大きなブームとなっています。

たとえば、株式会社SCRAPが手がけるリアル脱出ゲームは累計参加者1,500万人を突破し、大規模な体験型イベントとして定着しました。
また、「地下謎への招待状」のように、鉄道や街全体を使った、日常の移動や街歩きそのものがゲームとなる企画も登場し、多くの参加者を集めています。

それだけでなく、企業向けのチームビルディング研修などにも取り入れられ、エンタメにとどまらない形でも活用されています。

02 実際に謎解きを作ってみた

謎解きにハマってからというもの、脱出ゲームや街歩き型の謎解き、キットを購入して遊ぶタイプのものなど、いろいろと遊んできました。そのうちに自分でも作ってみたくなり、実際に作ってみました。

実は最近、トップページをリニューアルしたこともあり、せっかくならその内容も見てもらえるような形にできないかと思い、Web サイトを見ながら進める謎解きを作ってみることにしました。

ストーリーとキーワードの設定

ストーリーについては、「こういうことをやりたい」という方向性を決めて、Gemini に投げて考えてもらいました。

あわせて、伝えたいキーワードも先に決め、それを最終的な答えとして設計しています。
どのように解くとその答えにたどり着くのかという流れも、この段階で考えました。

今回の謎解きページは、Web サイトのログイン画面をイメージしています。
各問題を解きながら情報を集め、最終的に導き出した答えをログイン用のパスワードとして入力することでクリア！という構成にしています。

謎の設計

最終的な答えの文字数などから、全体の STEP 数を決めています。

Webサイトを見てもらうことが目的だったため、サイトを見ながら答えにたどり着くような問題を中心にしたいと考えていました。ただ、実際に作ってみると難しく、途中でその方針を維持するのが難しくなり、完全にはやりきれず…。

ちなみにの話ですが、謎を作るうえで便利だったのが「謎解き単語検索β」です。
答えに「ネコ」を使いたいがそのまま見せたくない場合に、「?ねこ?」のように指定すると、前後に文字を加えた単語を辞書から探してくれます。

実装

謎解きに使った画像は Google Slide で作成し、それをWebページに落とし込む作業は Antigravity で行いました。

実装では、ネタバレ防止の工夫に特に気を使っています。
ソースコードから答えが分かってしまわないように Hash を使うように指示したり、次のメッセージが先に見えてしまわないよう、動的に JavaScript ファイルを読み込む仕組みにしています。

また、スクロールスピードや文字をタイプしているような演出についても細かく指示を出し、体験として違和感が出ないように調整しています。

デバッグ

まず、脱出ゲームに慣れているスタッフにデバッグを依頼しました。
その中で、間違いや別解の発生、分かりづらい箇所などの指摘を受け、内容や画像を修正しています。

その後、別のスタッフにも解いてもらい、さらにブラッシュアップを行いました。
人によって詰まるポイントが異なる部分もあったため、最終的には少し難易度を下げる方向で調整しています。

公開

最終的にAnalyticsの設定やインフラの準備も行い、公開しました。

03 作ってみた感想

本来の仕事であるコーディングと近い部分もあり、普段とは違う形で頭を使うのが新鮮で楽しかったです。

遊んでいる人の様子をリアルタイムで見られたら、どこで悩んでいるのか、どう進めているのかなども分かって面白かったのではないかと思います。
今回はそこまで設計できていませんでしたが、Analytics の取り方を工夫すれば、どこで詰まっているのかといったユーザーの動きも可視化できそうだと感じました。

一方で、途中で力尽きてしまった部分もあり、当初考えていた「Webサイトを見てもらいながら解いてもらう構成」を最後までやりきれなかった点は少し心残りです。

実際に作ってみて、これを仕事としてやっているプロの謎解きクリエイターのすごさを改めて実感しました。

もしよければ、実際に遊んでみてもらえると幸いです。