紹介

はじめに、こちらの映像をご覧ください。

パネルを選んで、何かを確認して、ペアを探しているように見えます。
ですが、何を手がかりに選んでいるのかは画面からは分かりません。

▼ 何を手がかりにしているのか、ぜひご自分の手で確かめてみてください ( iOS・Android 対応 )

⠀

⠀

⠀

⠀

ここから先はぜひ一度プレイしてからお読みください

⠀

⠀⠀

⠀

解説

これは触覚フィードバックを使った神経衰弱です。それぞれのパネルには異なる振動パターンが割り当てられていて、プレイヤーはそれを手がかりにペアを探します。振動の情報は画面には映らないので、端末を持っている本人にしか知覚できません。観ているだけでは分からない、触って初めて成立する体験を作れたことが面白いと感じています。

はじめは振動の違いがほとんど分からないかもしれません。リラックスして、指先の感覚に集中してみてください 🧘‍♂️

オンラインランキング機能もあります。挑戦お待ちしています 🏆

１台のスマホを２人で向かい合って持って遊ぶ、対戦モードも用意しています。ぜひ誰かと一緒に遊んでみてください 🤝

※ iPhone で振動が感じられない場合は『設定 > サウンドと触覚』で『システムの触覚』が ON になっているか確認してみてください。

制作について

web-haptics という、Web で複雑な触覚フィードバックを実現できるライブラリが先週公開されていました。これを使って何か面白いものを作れないかと考えたのが始まりです。

https://haptics.lochie.me/

観ているだけでは解けないゲームをつくりました — デモサイトがとても可愛いです 🫨

このライブラリの面白いところは、iOS Safari で触覚フィードバックを実現できる点です。iOS Safari は基本的に、Webページから振動を起こす手段がありません。ただし唯一、<input type="checkbox" switch> というスイッチ要素を切り替えたときだけ振動が起きます。

web-haptics はこの仕組みを利用しています。見えないスイッチ要素を裏で生成し、高速でトグルを繰り返すという力技で、複雑な振動パターンを実現しています ( これは本来想定された使い方ではないので、将来塞がれる可能性もあります ) 。

制作概要

制作期間：約 10 日
デザイン・開発 : Claude Code ( Opus 4.6 )
一部アイコン制作 : Nano Banana Pro, Figma
使用技術 : TypeScript, GLSL, React, web-haptics, Redis

言語による説明を最小限に抑えた UI を目指して制作しました。

補足

制作の途中で同じライブラリ・同じアイデアのゲームを公開されている方を見つけました 🫨

こちらのゲームは複数の難易度が用意されています。制作〜公開が早くてすごいです⚡

アイデアが被ってしまったので正直途中で制作を続けるか迷うこともありましたが、自分が作りたい方向性 ( ビジュアルやルール設計など ) は別にあったので、少しずつ制作を進めて完成しました 🎉

初めてのゲーム制作だったこともあり、デザイン・実装 → テストプレイ → デバッグを手探りで繰り返していたのでなかなか大変でした。世の中のゲーム開発者へのリスペクトが更に増しました 😶‍🌫️

ホーム画面に追加すると普通のアプリのように広い画面でプレイできます📱

▼ 静かな場所で、リラックスして、指先の感覚に集中しながらプレイしてみてください ◎

最後までお読みいただきありがとうございました 🖊️