ストレスを感じさせない設定UI

多くのスマホゲームには音量調節などができる「設定UI」があるかと思います。

この設定UIは、ボタンを押すと設定モーダルを開くものが多くあります。

例えばこんな感じ。

もちろんこの設定モーダルが適切な場合も多くあるのですが、中にはこんな設定モーダルは不要だと感じる場合もあります。

展開方式の設定UI

ではどういうUIにすれば良いのか。

下の画像を見てください。

このように、設定ボタンの下にボタン群を展開して表示するような形式を検討してみて欲しいです。

便宜上、この方式を「展開方式」と呼ぶことにします。

わざわざゲーム画面を覆うモーダルを表示しなくても、この程度の操作であれば画面端にボタンを表示するだけでも問題なさそうです。

展開方式のほうがゲームプレイが途切れた感を感じさせず、良いUXになるのではないでしょうか。

展開形式の仕様

展開形式を導入するにあたって、おすすめの仕様をご紹介します。

まず展開するボタン群はアニメーションをつけて表示すること。

設定ボタンを押した時にパッとボタン群が表示されるよりも、設定ボタンのあたりから下にフェードインしてくる方が操作に対する因果関係を感じることができます。

次に、ボタン以外を押した時は設定を閉じること。

設定ボタンを押して開き、設定ボタンをもう一度押すと閉じるというのは言うまでもなくもちろん実装すべきです。

それに加えて、設定が開かれている状態でボタン以外の部分（ゲーム画面の部分）を押した時にも設定を閉じることができるようにすれば、より快適さが上がると思います。

さらに、押下した設定ボタンのアイコンも回転アニメーションをつけると、さらにハイクオリティに感じられます。

イメージとしては歯車が回転することにより、滑車のような感じでボタン群が下がってくるようなイメージ。

さらに因果関係をUIで表現できると思います。

実際のUI例

実際に使われている展開方式の設定UIの例をご紹介します。

『Push – ブロックを押して動かすパズル』というゲームアプリを例にとります。

【AppStore】 https://apps.apple.com/jp/app/id1506984977

【GooglePlay】 https://play.google.com/store/apps/details?id=com.Yusuke.Push

このゲームの設定UIがこちら。

またこの他にも、ハイパーカジュアルゲームにこの方式は多く見られます。

展開方式をお勧めするゲーム

ただし、冒頭にも言ったようにモーダルを出す方が適している場合も多くあります。

では、どのようなゲームの場合に展開方式の設定にすれば良いのか。

展開方式を使うかを見極める重要なポイントは、

• 設定項目数が3つ程度
• 設定項目が2値の切り替えか、単一のボタンアクション
• 設定項目がアイコンで伝わる内容

だと思います。

たくさんの設定項目がある場合は別途モーダルなどを出した方がすっきり分かりやすいことが多いです。

また、例えば画質を「Low」「Medium」「High」「Very High」の4値から選ぶ場合。

この場合は1つのボタンでの切り替えにしてしまうと、目的の値まで複数回押す操作をする必要が出てきてしまうため不適切。

さらに、アイコンだけで設定内容が分かるような項目にすることも分かりやすさの点で重要です。

不安であれば『Push – ブロックを押して動かすパズル』の例のように、アイコンと共にテキストも表示しても良いかもしれません。

また、これらに加えて時間に追われないゲームというのも展開方式を導入するにあたって考えるべき重要な要素だと思います。

制限時間や敵からの攻撃があるようなゲームでは、展開方式よりもモーダルをオーバーレイ表示した方が「時間が止まっている安心感」があって適しています。

逆に制限時間などが無いゲームでは、展開方式の方がゲームプレイが継続している感じがするので適していると思います。

まとめ

設定UIについて、展開方式というものを紹介してみました。