遊べるUI実験
Bad UI Olympics
使いづらいUIが競技に。回転する暗証番号、不思議な音量ボタン、逃げる送信ボタンに挑戦するタイムアタックゲーム。
ReactTypeScriptNext.jsSCSS
“使いにくさを、遊びに変える。”
01
課題
日常的なフォーム操作を、思わず笑ってしまうゲームに変える。
02
担当
ゲーム設計、UIデザイン、フロントエンド実装。
03
制約
ログイン不要。マウス、タッチ、キーボードで遊べること。
04
プロセス
6つの競技を作り、競技間ではタイマーを停止。端末内の自己ベストとスコア共有を追加。
05
成果
6つの競技、メダル判定、リプレイ機能を備えたブラウザーゲーム。
体験のポイント
- Six timed events with paused intermissions
- Medals, browser-local personal best, replay, and copyable scores
設計とパフォーマンス
- React state and interval cleanup for game transitions
- Monotonic timing excludes intermissions
- Keyboard and touch controls with scoped responsive styles
