スマホで操作しやすい範囲とボタン配置

スマホゲームは指でタッチすることによって操作するという特徴があります。

そのためスマホゲームのUIを考える場合に考えなければいけないのが、指の届範囲です。

指の届きやすい範囲

一般的なスマートフォンにおいて、指の届きやすい範囲はこのようになっています。

縦向きの場合、画面下側や左側、真ん中はタッチしやすい場所になっています。

一方で画面右側や上側はタッチしづらく、特にiPhoneXなどの縦長端末では多くの場合画面上部をタッチする際には持ち替えなければなりません。

これは右利きの人の場合で、左利きの人は左右反対になります。

しかし多くの人は右利きのため、UIとしては右利きの人を優先して考えることが多いでしょう。

もちろん利き手がどちらでも操作しやすいようなUIがベストですが。

横向きの場合は、画面の左右両端は比較的タッチしやすい場所になっています。

一方で画面の中央付近、特に上側はタッチしづらく、こちらも縦長端末ではより顕著になります。

また、片手で操作できることを考慮したゲームに関しては、片側の範囲はもちろん全てタッチしにくい範囲になります。

今述べたように、スマートフォンのゲームを作る場合にはタッチしやすい範囲というのを考慮する必要があります。

例えば、縦向きのスマホゲームで「戻る」「次へ」ボタンがある場合、以下のように配置したとしましょう。

実際にスマホで操作することをイメージしてみると、「戻る」「次へ」ボタンはかなりタップしにくい位置にあるのが分かります。

「戻る」ボタンはそれほど使われない想定であれば、画面上部にあっても問題ないでしょう。

しかし、「次へ」ボタンはおそらく必ず押すボタンだと思います。

そのため、押しにくい画面上部ではなく画面下部に配置し、押しやすいように大きさも大きくしてあげるのが良いと思います。

横向きのボタン配置の例もひとつ挙げてみます。

クリッカー系のゲームで、ある特定のボタンを繰り返し押すことが想定されている場合。

左のように画面中央にボタンを配置すると目立つので良さげにも見えますが、実際にスマホを持って試してみると、（特に縦長端末の場合）横持ちの標準の持ち方から少し崩れた持ち方をしてタップすることになるのが分かります。

そこで右の図のように右下にボタンを配置してみるとどうでしょうか。

かなり連打しやすくなったと思います。

右利きの人が多数派のため右下に配置しましたが、ゲーム内の設定で左右どちらに配置するかを変更できたりしたらより親切です。

このように、エディタで開発している時に気づかない不便なことも、実際にスマホで操作してみると気づくことがよくあります。

エディタで作り込んでからUI配置を変更するのは手戻りになってしまうので、スマホゲームのUIを考える際は早い段階でスマホにビルドして操作を確認することが重要です。

少々面倒くさい手順ですが、操作感向上につながる大事なポイントなのできっちりと行うことをオススメします。

今回はスマホで操作しやすい範囲と、それを考慮したボタン配置について書きました。