ゲーム風UI
制限時間内に動く的をタップ/クリックしてスコアを稼ぐ。的はランダム移動し、ヒットするとパーティクル演出＋スコア加算。タイムアップで結果表示、スタート/もう一度ボタンでリトライ可能。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- キャンペーン LP の遊び要素・ミニゲーム
- 待ち時間を埋めるおまけコンテンツ
- 反射操作の楽しさを見せるデモ
- 避ける場面
- 業務画面や本文の途中（集中を奪う）
- 光過敏への配慮が要る画面（点滅あり）
- キーボード操作が必須の場面
- 構成要素
- スコア・タイマー
- フィールド
- 的（44px の円）
- ヒット演出（canvas）
- 開始／結果オーバーレイ
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab で「スタート」に到達・Enter/Space で開始。開始後は的（button）にフォーカスが移り Enter/Space でヒット。終了後は「もう一度」へ戻る
- 支援技術
スコア・残り時間は通常テキスト、結果オーバーレイは aria-live=polite で読み上げ。的は button で aria-label「的」。粒子 canvas は aria-hidden。reduce で点滅停止
- 動き
的は 500〜1400ms 間隔でランダム移動（スコアで加速）。ヒットで粒子 10個が重力付きで飛散・加点が 600ms 浮上。残5秒で 400ms 点滅（reduce で停止）
デザインの要点
- 的は 44px で pointerdown に反応させる。click だと押してから離すまでの遅れで「当たったのに外れた」になる
- 移動間隔は 1400ms からスコア×6ms ずつ縮め 500ms で止める。上達に合わせて難しくし、反応限界の手前で止める
- 加点は 10 からスコア×0.05 ずつ減らす。序盤の1発を大きくして初回プレイで手応えを作る
- ヒットの粒子 10 個と浮上する加点は canvas と一時 DOM で描き、的自体は動かさない。演出が的を隠すと次が狙えない
コード（コピーして使えます）
<div class="game-wrap">
<div class="game-header">
<span class="score-label">スコア</span>
<span class="score-val" id="gScore">0</span>
<span class="timer-label">残り</span>
<span class="timer-val" id="gTimer">15</span>
</div>
<div class="game-field" id="gField">
<button class="target" id="gTarget" type="button" aria-label="的" hidden></button>
<canvas class="fx-canvas" id="gFx" aria-hidden="true"></canvas>
<div class="overlay" id="gOverlay" aria-live="polite">
<p class="overlay-msg" id="gMsg">的を狙え!</p>
<p class="overlay-sub" id="gSub">15秒以内にできるだけ多くの的をタップ</p>
<button class="start-btn" id="gStart" type="button">スタート</button>
</div>
</div>
</div>