ブラウザゲームのタップ領域は何px必要か
WCAG 2.2 の Target Size と Fitts の法則を、『60秒後の彼女』の常時表示コントロールで検証。視覚サイズと hitbox の違い、モバイル視点での課題を、測定した数値から整理します。
1. WCAG 2.2 の最低基準
基準 WCAG 2.2 の 2.5.8 Target Size (Minimum) は、ポインターのターゲットを最低 24×24 CSS pxとすることを求めます（例外あり）。より強い 2.5.5 Target Size (Enhanced) は 44×44 px です。理由は、小さすぎるターゲットは誤タップを生み、モーター制御に制約のある人やタッチ環境で操作を妨げるからです。
2. ゲーム操作での実際
本作のタイトル画面コントロールを 4 視点（320 / 390 / 768 / 1280 px 幅）で測定したところ、難易度ボタン（.diff-btn）は 48〜54 px、開始ボタン（#startBtn）は同等以上でした。これらは基準を満たします。
3. 視覚サイズと hitbox の違い
重要な点として、視覚的な見た目の大きさと、実際にタップを受け付ける領域（hitbox）は一致しない場合があります。CSS の transform: scale() や ::before/::after による視覚拡大、あるいは逆に padding がなく見た目より小さい hitbox、などです。本測定は視覚的な bounding box のみで、ゲーム内ターゲット（#aimRing 等）はプレイ開始まで非表示の画面内にあるため本スクリプトの取得対象外です（別途動的チェックが必要）。
4. 実測：ナビリンクが基準を下回る
| 視点幅 | 難易度ボタン | 開始ボタン | ナビリンク | WCAG 2.5.8(24px) 判定 |
|---|---|---|---|---|
| 320 | 54 | ≥48 | 33〜34 | すべて基準クリア |
| 390 | 54 | ≥48 | 33〜34 | すべて基準クリア |
| 768 | 48 | ≥48 | 33〜34 | すべて基準クリア |
| 1280 | 48 | ≥48 | 33〜34 | すべて基準クリア |
生データは リポジトリの reports/target-geometry.json にあります。ナビリンクは当初 padding が薄く 24 px に届いていませんでしたが、padding を追加して 33〜34 px に改善し、すべての常時表示コントロールが基準を満たすことを確認しました。
5. Fitts の法則との関係
論文 Fitts (1954) の法則は、運動の難易度を ID = log2(D/W + 1) で表します（D＝移動距離、W＝ターゲット幅）。W が小さいほど ID が大きく、誤操作の確率が上がります。ナビリンクのように W が 18〜21 px のまま複数並ぶと、隣接リンクへの誤タップ確率が理論上高まります。ゲーム内では、難易度に応じたターゲット半径（54〜100 px）でこの ID を実用範囲に収めています。
6. ドラッグとキーボードの代替
「運ぶ」操作はドラッグのほか、クリック選択→移動→確定でも完了します（アクセシビリティ記事参照）。小さなタップ領域への依存を減らす設計です。
7. モバイル視点
320 px 幅のスマホでも難易度ボタンは 54 px を確保しており、親指タップに十分です。課題はナビのみです。
8. 実装チェックリスト
- すべてのポインターターゲットを 24×24 px 以上に（推奨 44×44）
- テキストリンクにもタップ余地（padding / 最小高さ）を
- 見た目と hitbox がずれないか、実機で確認
- 隣接する小ターゲット間に余白を
9. 制限
- 視覚 bounding box のみ。hitbox の精密測定は別途。
- ゲーム内ターゲットは非表示画面内のため未取得。
- 実利用者のタップ成功率は未測定（捏造禁止）。
出典
- WCAG 2.2 — 2.5.8 Target Size (Minimum)、2.5.5 Target Size (Enhanced)、2.5.7 Dragging Movements
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. https://doi.org/10.1037/h0055392