ゲームのボタンデザイン：押せると分かる形
遊びをつくる執筆にClaudeを使用しています。
ゲームのUIで「押せるかどうか分からない」ボタンは、プレイヤーを一瞬止めます。その一瞬が離脱につながることもあります。逆に、「いかにも押せる」ボタンは説明なしに機能を伝え、テンポよくゲームを進めさせます。 「押せると分かる形」とは、視覚的なアフォーダンス（affordance）を指します。アフォーダンスとは「この形には何ができるか」をデザインが伝える性質のことです。物理的なボタンが「押せる」と分かるのは、立体感・縁の段差・影があるからです。画面上のボタンも同じ手がかりを視覚で再現することで、押せることが伝わります。 この記事では、押せると伝わるボタンの条件を具体的な判断基準と手順で整理します。HTML＋CSSで実装する場面を想定していますが、考え方はどのゲームエンジンやUIツールでも共通です。
「押せる」と伝わる視覚要素は何か
ボタンが押せると伝わるには、次の三つの要素が揃っていることが重要です。
立体感（奥行きの暗示） ボタンに光源を感じさせる処理を加えると、物体としての厚みが生まれます。上辺を明るく、下辺を暗くするだけで「浮き出た面」に見えます。CSS であれば box-shadow の上方向に明るいシャドウ、下方向に暗いシャドウを組み合わせる方法がシンプルです。
明確な境界線 背景と同化したボタンは存在が消えます。ボタンの縁（border）は背景より明度差を持たせ、どこからどこまでがクリック領域かを示してください。透明ボタンや境界なしのテキストボタンは「押せる意図」が非常に伝わりにくいため、ゲームの操作UIには向きません。
押す前後の視覚変化（ホバー・アクティブ状態） マウス操作ではホバー時、タッチ操作ではタップした瞬間に見た目が変わることが「確かに反応した」という手がかりになります。色が少し明るくなる、位置が1〜2px下に動く、影が小さくなるといった変化が有効です。変化が大きすぎると驚きになるため、元の状態との差は小さく・すばやく設定するのが原則です。
形・サイズ・余白の判断基準
見た目だけでなく、形とサイズも「押せる」という印象を左右します。
タッチ操作を想定する場合、ボタンの最小タップ領域は一般的に44×44px程度が目安とされています。それ以下にすると指で正確に押せず、ミスタップが増えます。PC向けでも小さすぎるボタンはクリック精度を要求しすぎるため、操作の快適さが下がります。
角丸（border-radius）は、ボタンらしさを強調する効果があります。完全な直角より数px〜十数pxの角丸の方が「触れるもの」に見えやすい傾向があります。ただし円形（pill型）や正円は「バッジ・ラベル」に見えることもあるため、用途に合わせて判断してください。
ボタン内部のテキストや図形に対する余白（padding）も重要です。文字がボタン縁に詰まっていると、枠全体がラベルに見えてしまいます。上下左右に余白を取ることで、「押すための面積がある」ことが伝わります。
状態ごとのデザインを用意する
ボタンには最低でも次の四状態を区別してデザインする必要があります。
- 通常（デフォルト） ゲームの配色に合わせた基本の見た目です。
- ホバー / フォーカス マウスが乗ったとき、またはキーボードでフォーカスが当たったときです。色・影・下線のいずれかが変わることを示します。
- アクティブ（押した瞬間） 実際にクリックまたはタップしている瞬間です。影を消してボタンが「沈んだ」ように見せると物理ボタンに近い感触を与えられます。CSSでは transform: translateY(2px) と box-shadow を小さくする組み合わせがよく使われます。
- 無効（disabled） まだ押せない状態です。グレーアウトして透明度を下げるのが一般的ですが、「なぜ押せないか」をテキストや文脈で補足できると、プレイヤーの混乱を減らせます。
この四状態を実装していないボタンは、操作できているかどうかがフィードバックされず、プレイヤーに不安を与えます。特にアクティブ状態はモバイルで省略されやすいので注意してください。
色と文字だけに頼らないための補強
色覚の違いによって配色が機能しなくなる場合があります。「赤＝できない、緑＝できる」という色のみの区別に頼ると、色の見え方が異なるプレイヤーには伝わりません。形・アイコン・テキストを組み合わせて状態を伝えることで、より多くのプレイヤーに機能します。
テキストの場合、ボタンラベルは「動詞＋目的」の形が明快です。「OK」より「ゲームを始める」、「YES」より「セーブして続ける」のように、押した結果が分かる言葉を選ぶとミスタップの後悔を減らせます。
アイコンを使う場合は、一般に広く知られているもの（再生ボタンの三角形、家のアイコンなど）を優先してください。独自のアイコンはゲームの世界観と整合していても、初見のプレイヤーには意味が取れないことがあります。初めて遊ぶ人が多いゲームであれば、アイコンにテキストを添えることを検討してください。
実装で確認すべきチェックリスト
デザインを仕上げたあとに、次の点を実際のブラウザや端末で確認してください。
- ボタン全体の背景との明度差は十分か（白い画面に明るいボタンは溶けやすい）
- ホバー・アクティブ・disabled の三状態がすべて実装されているか
- スマートフォン実機でタップ領域が小さすぎないか
- キーボードのTabキーでフォーカスが移動したとき、フォーカス枠（outline）が見えるか
- テキストと背景のコントラスト比はWCAGのAA基準（4.5:1以上）を概ね満たしているか
コントラスト比はブラウザの開発者ツールや専用のチェックツールで確認できます。数値よりも「実際に使う環境（暗い部屋、屋外など）で読めるか」という感覚的な確認も並行して行うと、机上の数値だけでは見えない問題を発見できます。
次の行動
手元のゲームのボタンを一つ選び、通常・ホバー・アクティブ・disabledの四状態が揃っているかをブラウザの開発者ツールで確認してみてください。足りない状態があれば、まずアクティブ状態（押した瞬間の視覚変化）から追加すると、操作感の改善が最も実感しやすいです。完成したゲームはアソバースへZIPまたはHTMLファイルとして投稿し、実際のプレイヤーの操作を観察することが次のデザイン改善につながります。
参考資料
- W3C「Web Content Accessibility Guidelines (WCAG)」
- MDN Web Docs「CSS: box-shadow, transform, :hover, :active, :focus」
- Apple「Human Interface Guidelines」
- Google「Material Design — Interaction states」
