投稿する
マガジン
著者：アソバース編集部公開：更新：約7分で読めます

ゲームUIの最小タップサイズ：指で押せるボタンの条件

遊びをつくる

執筆にClaudeを使用しています。

大きな赤いボタンと指先、ばね、曲線のレールで押す・離す・待つを表す立体イメージ
記事のテーマをもとに制作したAI生成イラスト。

スマホでゲームを遊んでいて、ボタンを押したつもりが隣の操作に反応した経験は珍しくありません。原因のほとんどは「ボタンが小さすぎる」ことです。見た目のデザインではなく、指が触れる面積と配置の問題です。 この記事では、タップ操作が確実に拾えるボタンサイズの根拠と、HTMLゲームで実装するときの具体的な数値を整理します。ピクセル数をそのまま使えるように、スマホの画面密度（DPI）も含めて説明します。

この記事の目次
  1. なぜ「見た目のサイズ」だけでは足りないのか
  2. 各ガイドラインが示す最小サイズ
  3. HTMLゲームでの実装手順
  4. 隣接ボタン間の間隔も判断基準に含める
  5. 失敗しやすいパターンと対処
  6. 次の行動
  7. 参考資料

なぜ「見た目のサイズ」だけでは足りないのか

画面に表示されるボタンが40×40pxだとしても、それはCSSピクセル（論理ピクセル）の話です。実際のスマホ画面は1.5〜3倍の物理ピクセル密度を持つため、40CSSピクセルの正方形が物理的に何mmになるかは端末によって異なります。

一般的なスマホでは、1CSSピクセルがおよそ0.26〜0.33mm程度に相当します。つまり40CSSピクセルは約10〜13mmです。これは指先のサイズと比較するとかなり小さい値です。

人差し指の腹の幅は個人差があるものの、おおむね16〜20mm程度とされています。ボタンの当たり判定がこれより小幅だと、指の中心がボタンの端にかかったときに反応しません。「押した感覚があるのに反応しない」という体験は、このズレから生まれます。

各ガイドラインが示す最小サイズ

プラットフォームごとに推奨値が公開されており、数値はほぼ収束しています。

  • Apple Human Interface Guidelines、推奨最小サイズ：44×44pt（物理換算で約10×10mm）
  • Google Material Design、推奨最小サイズ：48×48dp（物理換算で約9×9mm）
  • MicrosoftのUXガイド、推奨最小サイズ：7×7mm以上（タッチターゲット）

単位が異なりますが、いずれも「物理サイズで約9〜10mm四方」を最小ラインとして示しています。HTMLゲームのCSSで書くなら、min-width: 44px; min-height: 44px; と指定しつつ、実際の表示mmが9mm以上になるかをViewportの設定と合わせて確認するのが基本です。

重要なのは「見た目のボタン」と「タップの当たり判定」を分けて考えることです。アイコンは小さくても、その周囲に透明なパディングを設けて当たり判定だけを広げる手法がよく使われます。

HTMLゲームでの実装手順

1. Viewportを正しく設定する

<meta name="viewport" content="width=device-width, initial-scale=1.0">

この1行がないと、スマホブラウザが画面を縮小表示し、CSSピクセルが意図より小さくなります。まずこの設定が入っているかを確認してください。

2. ボタン要素の最小サイズを指定する

css
.game-button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  box-sizing: border-box;
}

padding を使って内側の余白を広げることで、見た目は変えずにタップ領域を確保できます。box-sizing: border-box を合わせて指定すると、paddingがサイズ計算に含まれて扱いやすくなります。

3. Canvasゲームは当たり判定を別管理する

<canvas> 要素上で自前のUIを描いている場合、DOMのボタンではないためCSSは効きません。タップイベントの座標と各UIパーツの矩形を比較するヒットテストを実装する必要があります。

このとき、描画する四角形より一回り大きい当たり判定矩形を別途定義するのが確実です。たとえば描画は32×32pxでも、ヒットテストには50×50pxの矩形を使うようにします。

javascript
function isTapped(touchX, touchY, btn) {
  const margin = 9; // px
  return (
    touchX >= btn.x - margin &&
    touchX <= btn.x + btn.w + margin &&
    touchY >= btn.y - margin &&
    touchY <= btn.y + btn.h + margin
  );
}

マージン値は画面の物理密度によって異なるため、window.devicePixelRatio を参照して調整すると、高解像度端末でも一定の物理サイズを保てます。

隣接ボタン間の間隔も判断基準に含める

最小タップサイズを満たしていても、ボタン同士が近接していると誤タップが増えます。指が1本の操作で複数の当たり判定にかかるためです。

隣接するタップ対象の間隔は、8px以上（物理で約2mm以上）を確保するのが目安です。仮想ジョイスティックやアクションボタンを画面下部に並べるレイアウトでは、この間隔が狭まりがちです。実装後にスマホの実機で親指だけを使って操作し、誤タップが起きないかを確認する工程を省かないでください。

また、画面の端や角に配置したボタンは持ち手の親指が届きにくく、誤タップより「届かない」問題が発生します。重要な操作ほど画面中央から親指が届く範囲（いわゆる「サムゾーン」）に配置することも、サイズと同じくらい重要な判断基準です。

失敗しやすいパターンと対処

アイコンフォントをそのままボタンにする：アイコン自体は16〜24px程度が多く、当たり判定がアイコンの描画サイズと同じになりがちです。<button> タグに入れてpaddingを追加するか、タップ用のdiv要素でアイコンを包んで判定領域を広げてください。

デスクトップ確認だけで終わる：ブラウザのデベロッパーツールでスマホ表示をエミュレートしても、指の接触面積は再現されません。実機テストは省略できません。特にゲームのような密度の高いUIは、エミュレータと実機で操作感が大きく異なります。

Retina（高DPI）端末での過小評価：CSSピクセルは同じでも、高DPI端末では物理的に小さく表示されることがあります。window.devicePixelRatio が2以上の端末では、44CSSピクセルの物理換算が7mm前後になる場合があります。このケースでは最小値を48〜52pxに上げるか、Viewport設定を再確認してください。

次の行動

手元のHTMLゲームを開き、ボタン要素に min-width: 44px; min-height: 44px; が指定されているかを確認してください。Canvasゲームの場合は当たり判定矩形をボタン描画より9px以上広げ、実機の親指で一通り操作してみてください。調整が終わったゲームは、ZIPファイルにまとめてアソバースへ投稿できます。

参考資料

  • Apple Human Interface Guidelines（タッチターゲットの項）
  • Material Design Guidelines（Touch targets）
  • MDN Web Docs — Using the Viewport meta tag
マガジン一覧に戻る