スマホゲームは指でタッチすることによって操作するという特徴があります。
そのためスマホゲームのUIを考える場合に考えなければいけないのが、指の届範囲です。
指の届きやすい範囲
一般的なスマートフォンにおいて、指の届きやすい範囲はこのようになっています。

縦向きの場合
縦向きの場合、画面下側や左側、真ん中はタッチしやすい場所になっています。
一方で画面右側や上側はタッチしづらく、特にiPhoneXなどの縦長端末では多くの場合画面上部をタッチする際には持ち替えなければなりません。
これは右利きの人の場合で、左利きの人は左右反対になります。
しかし多くの人は右利きのため、UIとしては右利きの人を優先して考えることが多いでしょう。
もちろん利き手がどちらでも操作しやすいようなUIがベストですが。
横向きの場合
横向きの場合は、画面の左右両端は比較的タッチしやすい場所になっています。
一方で画面の中央付近、特に上側はタッチしづらく、こちらも縦長端末ではより顕著になります。
また、片手で操作できることを考慮したゲームに関しては、片側の範囲はもちろん全てタッチしにくい範囲になります。
タッチ範囲を考慮したボタン配置
今述べたように、スマートフォンのゲームを作る場合にはタッチしやすい範囲というのを考慮する必要があります。
例えば、縦向きのスマホゲームで「戻る」「次へ」ボタンがある場合、以下のように配置したとしましょう。

実際にスマホで操作することをイメージしてみると、「戻る」「次へ」ボタンはかなりタップしにくい位置にあるのが分かります。
「戻る」ボタンはそれほど使われない想定であれば、画面上部にあっても問題ないでしょう。
しかし、「次へ」ボタンはおそらく必ず押すボタンだと思います。
そのため、押しにくい画面上部ではなく画面下部に配置し、押しやすいように大きさも大きくしてあげるのが良いと思います。

横向きのボタン配置の例もひとつ挙げてみます。
クリッカー系のゲームで、ある特定のボタンを繰り返し押すことが想定されている場合。

左のように画面中央にボタンを配置すると目立つので良さげにも見えますが、実際にスマホを持って試してみると、(特に縦長端末の場合)横持ちの標準の持ち方から少し崩れた持ち方をしてタップすることになるのが分かります。
そこで右の図のように右下にボタンを配置してみるとどうでしょうか。
かなり連打しやすくなったと思います。
右利きの人が多数派のため右下に配置しましたが、ゲーム内の設定で左右どちらに配置するかを変更できたりしたらより親切です。
操作の実機確認は早い段階で
このように、エディタで開発している時に気づかない不便なことも、実際にスマホで操作してみると気づくことがよくあります。
エディタで作り込んでからUI配置を変更するのは手戻りになってしまうので、スマホゲームのUIを考える際は早い段階でスマホにビルドして操作を確認することが重要です。
少々面倒くさい手順ですが、操作感向上につながる大事なポイントなのできっちりと行うことをオススメします。
まとめ
今回はスマホで操作しやすい範囲と、それを考慮したボタン配置について書きました。
- スマホゲームのUIを考える際は、タップしやすい範囲を考慮する
- 縦向きの場合の上側や左側、横向きの場合の中央付近にはよく押すボタンを配置しない
- UIを考える際には必ず実機で操作感を確認する
コメント
[…] このサイトでは、UIの表現やボタンの配置などを研究しているほか、認知科学の視点を通して優れたUIを考察しています。たとえば「スマホで操作しやすい範囲とボタン配置」では、スマートフォンでゲームプレイしやすいボタン配置についてまとめていますし、モバイルゲームのタイトルを開発している方ならば、参考になる情報をまとめています。 […]