誰も見ていない時間

ゲーム、読書、マンガ、ライフハックなどの雑記

スマホゲームのUIを作成するときにやってはいけないこと7選

スポンサーリンク

 

スマートフォンのゲームをユーザーインターフェース(以後、UI)を作成するときに、やってはいけないこと、注意すべきことを7点ほどピックアップしてみます。

 

元々がコンシューマーゲームを開発していた人間なので、コントローラーでの操作が頭に染み付いているのですが、自分の頭を整理する意味でもまとめておきます。

 

f:id:kitahana_tarosuke:20180115031411j:plain

 

メニューボタンは画面下以外に配置してはいけない

スマホゲームの鉄則ともいっていいでしょう。詳細については以前に記事を書いているので、そちらを参照していただければと思います。

 

たまにメニューボタンが上にあったり、突飛な場所にあったりするゲームがあります。ひょっとしたら担当されたアートディレクターさんは冒険したかったのかもしれませんが、メニューボタンの位置は冒険する箇所ではありません。

スポンサーリンク

 

 

同じ機能を持つボタンは同じデザインにしないといけない

f:id:kitahana_tarosuke:20180115020920j:plain

(出典 あんさんぶるガールズ!!)

あんさんぶるガールズ!!では移動するときに、移動先のアイコンが画面下に並びます。選択するとアイコンに応じて画面が切り替わり、「移動する」アイコンをタップすると移動するという仕組みです。

 

教室や廊下、といった移動先を示すアイコンは、移動先は異なりますが機能としては同じです。

同じ機能を持つアイコンは同じデザインに、「移動する」アイコンは確定ボタンなので別デザインに、という分かりやすい良い例だと思います。

 

戻るボタンは押しやすい位置に配置してはいけない

f:id:kitahana_tarosuke:20170824004747j:plain

(出典 パズル&ドラゴンズ)

パズドラの戻る画面は左上にあります。

戻る画面は基本的にユーザーが押しにくい位置に配置します。ユーザーに取って一番押しやすいのは右下なので、その逆である左上もしくは右上に配置することになるでしょう。

 

モンストなどの他のゲームでも、戻るボタンは左上に配置されていますね。

 

押させたいボタンは赤色を使用しない

f:id:kitahana_tarosuke:20180115030011j:plain

(出典 クラッシュ・オブ・クラン)

人間がモノクロの世界に置かれたときに、真っ先に認識する色は何色かご存知でしょうか。赤色です。血が関係しているともいわれていますが、要は真っ先に認識する色が赤色なのです。

 

そして色の持つ意味として、赤色は中止や注意を喚起する色でもあります。信号でもそうですね。

 

課金を促すボタンには赤色を使用しないようにしましょう。

ユーザーさんが課金してくれなくなりますよー。

 

画面フローは3階層までが望ましい

f:id:kitahana_tarosuke:20180115030944j:plain

アートディレクター、もしくはデザインチーフでもデザインリーダーでもいいのですが、ゲーム制作において画面フロー(画面遷移)を作成するときは、なるべく3階層までにしましょう。

 

それ以上に深い階層に画面を置いてはいけません。

何回もタップしないと出てこないような画面は、画面フローの作成時点で間違っています。フローを分けるか、その画面が本当に必要なのかもう一度考えましょう。

スポンサーリンク

 

 

課金優先の画面フローを作成しない

これはちょっと分かりにくいかもしれませんので、例を上げて説明します。

 

RPGでパーティーを設定する画面

必要なキャラクターが足りない

キャラクターガチャへのリンクボタンを設置

 

一見、ユーザーフレンドリーで課金にも繋がると考えがちですが、明らかに間違った例です。

 

UIの大原則としてユーザーを惑わす導線を作ってはいけません。

ガチャはガチャ、キャラクター設定はキャラクター設定で「ユーザーが何をする画面なのか」を明確にしないといけないのです。

 

インタラクションデザインは必要最低限で美しく

インタラクションデザインとは、UIの動きの要素、というべきでしょうか。

  • モード選択画面でそのモードを選択したときにボタンが震える
  • 武器を変更したときにキャラクターが武器が持ち替える
  • シューティングゲームで自機を選択したときに自機が光る

上記のような、ユーザーの選択に対してのレスポンスをデザインすることを、インタラクションデザインといいます。

 

インタラクションデザインの要点としては、分かりやすく美しく短時間に、が基本です。

 

f:id:kitahana_tarosuke:20180115030338j:plain

画面はモンストのクエストタイプの選択画面ですが、アイコンがくるくると画面上で回転します。

モンストはキャラクター選択でも同じように、キャラクターがくるくると回ります。この辺りはゲーム内でUIが統一されていて、非常に分かりやすく作ってあると思います。

 

まとめ ー UIは分かりやすく、ストレスフリーを念頭に作成する

この話は以前にどこかで書いたかもしれませんが、私が駆け出しのデザイナーのときに、モード選択画面の各モードの文字の出現方法に凄く凝ったモーションを付けたことがありました。

 

自分では、美しい文字の出現の仕方だ!、と自画自賛でチーフデザイナーに確認をとりにいったのですが、チーフデザイナーからはこっぴどく怒られました。

 

今となっては当たり前なのですが、誰もモード選択画面のモードの文字の出現に期待などしていません。時間が取られるだけで、ユーザーを苛つかせることになります。間違ったインタラクションデザインの例ですね。

 

今回はスマートフォンゲームにおけるUIについてまとめてみました。

ゲーム業界の方やゲーム製作を考えておられる個人、そしてゲームをプレイする人にも何かの参考になれば幸いです。