Synesthesium

目ではなく、耳や色の感覚で遊ぶ神経衰弱

神経衰弱は、誰でもルールを知っている数少ないゲームです。裏返したカードを2枚めくり、同じ絵なら取れる。覚えているのは「どこに何があったか」という場所の記憶です。

では、めくったときに見えるのが絵ではなく、音だったらどうでしょう。ドとレの違いを聴き分けながら、どこでどの音が鳴ったかを覚える。あるいは、ほとんど同じに見える青を、わずかな明るさの違いだけで見分ける。そうすると、神経衰弱はとたんに「記憶のゲーム」から「感覚を研ぎ澄ますゲーム」に変わります。

Synesthesium（シネステジウム）は、そんな一風変わった神経衰弱を集めたコレクションです。ブラウザだけで遊べて、インストールも会員登録もいりません。

遊べるゲーム

今遊べるのは6つです。どれも「2枚めくって、同じものなら揃う」という基本ルールは同じですが、何を見分けるかがまったく違います。

• 音階神経衰弱 — カードをめくるとピアノのような音が鳴ります。めくった直後は音名が見えず、耳だけで同じ高さの音を探します。3オクターブ・36音の鍵盤から、使う音を指でなぞって自由に選べます
• リズム感神経衰弱 — めくるとドラムのリズムが鳴ります。50種類のリズムから、同じパターンのペアを聴き分けます
• 色覚神経衰弱 — 色名の書いていないカラーパネルのペアを探します。レッドやブルーなど10系統から出題する色を選べて、1系統の中でわずかずつ明るさの違う色が並ぶので、種類を増やすほど見分けがつかなくなります
• 言語神経衰弱 — 日本語・英語・中国語・スペイン語・フランス語・ドイツ語から2つを選び、同じ意味の単語のペアを探します。めくったカードはその言語で読み上げられます
• モールス神経衰弱 — 点と線のモールス信号と、それが表すひらがなや数字のペアを合わせます。和文モールスの58種類から出題し、信号は音でも鳴ります
• 野菜神経衰弱 — ほうれん草、小松菜、春菊など、並べると意外と見分けにくい8種類の野菜のカードで遊ぶ、一番オーソドックスな神経衰弱です

雑学の問題と答えを合わせる「知識神経衰弱」は、今は準備中です。

中身の話

画面は Next.js と React で作っていて、すべて静的なファイルとして書き出し、Cloudflare Workers から配信しています。サーバーで動く処理はひとつもなく、ゲームの判定や音づくりはすべてブラウザの中で完結しています。

スタイルは Tailwind CSS ではなく、素の CSS（CSS Modules）で書いています。ゲームごとに見た目の癖が強く、ユーティリティクラスを並べるより、ゲームごとに CSS を書いたほうが素直だったからです。React と Next.js 以外に、実行時に使うライブラリはありません。

音はファイルではなく、その場で作る

音階とリズムの音は、音声ファイルを1つも使っていません。ブラウザに標準で入っている Web Audio API で、カードをめくった瞬間に波形を作って鳴らしています。

音階は、ド（C4 = 261.63Hz）を基準に、半音ごとに周波数を上げて3オクターブぶんの音を計算で作っています。1音は0.3秒のサイン波です。

リズムの音は、周波数を150Hzから40Hzへ一気に落とすサイン波で、「ドン」という打楽器らしい音にしています。50種類のリズムも手で作ったのではなく、機械的に列挙しています。1小節を8つに区切り、1拍目は必ず鳴らして、残り7か所から2〜4か所を選んで鳴らす。この組み合わせだけで56通りあるので、そこから50種類を取り出しています。手で作ると、似たようなリズムや、まったく同じリズムがうっかり混ざるのですが、列挙なら重複が構造的に起きません。

言語神経衰弱の読み上げには、同じくブラウザ標準の Web Speech API（SpeechSynthesis）を使っています。読み上げに対応していないブラウザでは、黙って何もしません。発音はあくまでおまけで、なくても神経衰弱としては成立するからです。

6つのゲームで、1つの仕組みを共有する

最初は、神経衰弱のゲームを8つ、別々に作っていました。それを2026年7月に1つのサイトへまとめたあと、「2枚めくって判定する」処理が3か所にほぼ同じ形でコピーされていることに気づきました。しかも3つとも同じ不具合を抱えていました。判定を待っている間に次のラウンドを始めると、前のラウンドのタイマーが遅れて動き出し、新しいラウンドのカードを勝手に書き換えてしまうのです。

そこで、「2枚めくる、判定する、揃った数を数える、クリアを検知する」という神経衰弱の心臓部を1か所にまとめ、ラウンドごとに番号を振って、古いラウンドのタイマーが新しいラウンドに手を出せないようにしました。今はすべてのゲームが同じ仕組みの上で動いています。

カードの見た目もトランプ風の四角いカードに統一しています。音を聴き分けるゲームだけは、めくった直後に中身を見せず、揃ったときに初めて音名を表示します。

ゲーム中はスクロールさせない

神経衰弱で一番もどかしいのは、カードが画面からはみ出して、スクロールしながら探すことです。Synesthesium では、画面の実際の大きさとカードの枚数から「はみ出さずに一番大きく並べられる列数とカードの大きさ」を毎回計算しています。画面の向きやウィンドウの大きさが変わっても、すぐに並べ直します。

上下左右の余白は、そろえてもカードがほとんど小さくならないときだけそろえます。PC の横長の画面で余白を無理にそろえようとすると、カードが小さくなりすぎるからです。

はじめて遊ぶなら

音階神経衰弱は、最初は白鍵の8音（ドからひとつ上のドまで）が選ばれた状態で始まります。まずはそのまま1回遊んでみて、物足りなければ黒鍵を混ぜたり、同じ音の組数を増やしたりしてみてください。半音の違いが混ざると、難しさががらりと変わります。

色覚神経衰弱も、最初はブルーとグリーンの2系統・8種類から始まります。系統を減らして種類を増やすほど、隣り合う色の差が小さくなっていきます。