ゲーム作りに使えるUIデザイン【フィッツの法則】

今回はゲーム作りに使えるUIデザインとしてフィッツの法則を紹介する

フィッツの法則

目標物に移動する時の時間は対象物への距離とその大きさとの相関関係で決まる、ということ。具体的には対象物への距離が短いほど、対象物が大きいほどその時間は短くなる。アメリカの心理学者であるポール・フィッツが提唱したことからその名前が付けられている。

フィッツの法則とUX

フィッツの法則はUIの扱いやすさを測る一つの尺度として利用できる。この法則が説明している目標物に移動する時の時間はそのままUIの扱いやすさとなるからだ。これはボタンを例にするとわかりやすい。モニター上にボタンがあり、それをマウスでクリックする作業を行うとする。そのボタンは大きければ大きいほど、かつ近ければ近いほど押しやすくなる。

また、カーソルが画面の端に行ったらそれ以上進まないようにすることで、実質的にサイズが無限大のボタンを作成する事ができる。画面の上部に固定されているボタンを押下するためにカーソルを上に移動し枠まで到達すれば、そこでカーソルの移動が止まるため、ボタンを通り過ぎる事はない。WindowsやMacのOSはこの無限大サイズのボタンにスタートメニューやホットコーナーなどの重要なメニューを配置しておき、ユーザーが簡単にそのUIにアクセスできるようにしている。

フィッツの法則の活用その1 UIは大きく

やはりUIは大きい方が良いだろう。特にスマートフォンゲームなどの画面を直接タップする場合は、指が太い人、細かい操作が苦手な人でも簡単にタップできるようにしたい。

フィッツの法則の活用その2 利用頻度によってUIのサイズをかえる

UIは大きい方が操作しやすいが、全てのUIを大きくしたら画面が埋まってしまう。よってよく利用するボタンなどは大きく、そうでないボタンは小さくする。例えばバトルに出撃するボタンは大きく、設定ボタンは小さく、という事だ。

とあるステージ制のパズルアプリの話だが、ステージクリア後にリトライ、次のステージ、メニューへ戻るの三つのボタンが全て同じサイズで表示されているものがあった。プレイヤーはステージをクリアすると基本的に次のステージに進むものなので、この場合は次のステージボタンを大きく、それ以外のボタンを小さくすると良いだろう。

フィッツの法則の活用その3 プレイヤーの指/カーソルの導線を考える

特にスマートフォン系のタッチするゲームに関連するものだが。UIを配置する時にプレイヤーの指の導線を考えると良いだろう。ゲーム内の主なUI操作をほとんど指を動かさないようにできるれば良い。例えばゲームクリア後のステータス確認画面から、報酬受け取り、メニューに戻るところまで同じ場所をタップしていれば良い、という塩梅だ。

スマートフォンゲームではパソコンのブラウザよろしく左上に戻るボタンや閉じるボタンを配置しているものが多いが、これはフィッツの法則から見るとあまり良くない。ゲームが縦持ちの場合、毎回戻るたびに画面上部まで指を持っていきボタンを押す必要があるからだ。そのボタンが小さいものだったら余計手に間となる。手の小さい子供や女性でも楽にUIを操作できるように心がけたい。

フィッツの法則の活用その4 押して欲しいボタンを大きくする

どうやら人はボタンを押したがる生き物で、そこに押しやすそうなボタンがあれば押してしまうらしい(行動喚起)。バスやエレベータ、横断歩道のボタンを押したがる子供がいることからもわかるだろう。そこで、フィッツの法則を利用して押して欲しい機能を押しやすいように配置するのである。

これはハイパーカジュアル系のゲームがよくやる手法である。ゲームクリア後に動画広告を見てクリア報酬を上乗せするボタンを大きく、鮮やかな色で表示するのだ。しかもプレイヤーの指がちょうどありそうな場所に。プレイヤーは今までの入力のノリでそのままボタンを押してしまう。

ただし、この場合はフィッツの法則とプレイヤーの心理を利用した引っかけのようなもののため、あまり褒められたものではない。

フィッツの法則の活用その5 押した場所にUIを表示する

UIまでの距離が短ければ短いほど簡単にアクセスできるのであれば、押した場所にUIを表示してしまおう、ということである。例としてはキャラクターを動かす時のバーチャルジョイパッドがある。画面を押下した場所がジョイパッドの中心となり、そこから指を移動させることで任意の方向にキャラクターを移動させる事ができる。他にも特定の選択肢の中から1つを選択する場合などでも活用できるだろう。