# ボタンアートだけでなくヒットエリアもテストする

> ビジュアルアートワークをインタラクティブな境界から分離し、タッチデバイス上でサイズ、間隔、重なりをチェックすることで、ゲームコントロールを押しやすくします。

- URL: https://oneshotgems.ai/ja/topics/game-touch-targets
- カテゴリ: ゲーム開発者向け
- 種類: ガイド
- 更新日: 2026年10月5日

コントロールは大きく見えることがありますが、実際のヒット領域はアートワークのごく一部です。ブラウザ ゲームでは、インタラクティブな境界を意図的に定義し、正確なマウス ポインターだけでなく指を使ってテストします。適切なターゲットはその役割、間隔、周囲の動きによって決まりますが、ヒット領域が明確であれば偶発的なミスが減り、入力を推論しやすくなります。

## 目に見える形状をヒット領域から分離する

一時停止ボタンなどの小さなアイコンの場合、クリック可能なコンテナがペイントされたシンボルを超えて拡張されるようにします。指が両方を曖昧にアクティブにしないように、隣接するアクションを十分に離してください。キャンバス ゲームでは、オブジェクトを描画し、同じレイアウト データからそのヒット領域を計算します。別々のコード パスで座標を複製すると、ドリフトが発生します。

WCAG 2.2 達成基準 2.5.8 では、間隔や同等のコントロールなどの定義された例外を除き、最小値として 24 x 24 CSS ピクセルを使用します。設計上の上限ではなく、アクセシビリティ要件として評価してください。移動するターゲットや主要なアクションには、より多くの領域が必要になる場合があります。タッチが登録されている場所を示すために、色や微妙な境界線だけに依存しないでください。

## 実際の画面サイズでヒットテストを確認する

各辺や角の近く、隣り合う操作領域の間、ゲーム画面の拡大縮小時にタップを試します。画面に見えるコントロール、DOM上のヒット領域、ゲーム内の座標が同じ操作を指していることを確認します。小さく動くオブジェクトでは、危険物との間隔を十分に保ちながら、絵より広いヒット領域を設ける方法もあります。

タッチでさまざまなビューポート サイズをテストします。マウスは指が着地できない場所に着地することができます。ポインターの位置をサーフェスの座標系に変換し、サイズ変更後に確認します。 W3C の説明には、基準と例外が記載されています。

## よくある質問

**すべてのゲーム内ターゲットを24ピクセル以上にする必要がありますか？** WCAG 2.2の達成基準2.5.8では、ポインター入力のターゲットに24×24 CSSピクセル以上を求めていますが、例外も定められています。基準に照らして評価し、ゲームの状況に応じてより大きなヒット領域を選びましょう。

**ヒット領域を絵より大きくできますか？** はい。小さなアイコンの周囲に余白を含むヒット領域を設けると操作しやすくなります。ただし、隣接するコントロールを区別でき、操作結果が予測できるようにしてください。

## 気になることを、もっと

- [Webゲームのタッチ操作を設計する](https://oneshotgems.ai/ja/topics/touch-controls-for-web-games): ブラウザーのジェスチャー、分かりやすいフィードバック、明確なポインター状態を踏まえてタッチ操作を設計し、スマートフォンでもゲームが予測どおりに反応するようにします。
- [ブラウザーゲームのレスポンシブレイアウトを作る](https://oneshotgems.ai/ja/topics/responsive-game-layouts): シミュレーション状態を画面サイズに結び付けることなく、ゲーム サーフェスをそのコンテナに適応させ、変更するビューポート間でレイアウトをテストします。
- [親指 1 つでプレイできるモバイル ゲームを設計する](https://oneshotgems.ai/ja/topics/one-thumb-mobile-game-design): 親指一本で無理なく使える操作に絞り、手の位置と画面を隠す範囲を考えたうえで、実際の持ち方で遊びやすさを確かめます。

## 関連情報

- [W3C: ターゲット サイズ (最小)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
- [MDN: ポインタ イベント](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)

---
正規ページ: https://oneshotgems.ai/ja/topics/game-touch-targets