プロ生ちゃん Advent Calendar 2016 22日目の記事です。
http://qiita.com/advent-calendar/2016/pronama-chan

この度、「プロ生ちゃん アプリ開発支援プログラム」に参加しまして、記事を書かせて頂いております。
http://pronama.azurewebsites.net/2016/10/12/pronama-chan-developer-support-program/

 ・軽く自己紹介。
フリーゲーム創作サークルecoddrの代表econaです。
主な役割はイラスト制作、音楽制作以外の部分を担っています。
使用制作ツールは「RPGツクールMV」「RPGツクールVXAce」です。
職業としてのエンジニア、プログラム経験はありません。
得意分野はUI制作、システム制作、苦手分野はストーリー制作、広報活動です。
お手伝い、依頼で他のゲームのUI設計も承っています。

・これまでの創作物。
ひびかけ色のキセキ
幸運にも発表からレビューサイトの紹介、企業からも賞を頂き、恵まれた扱いを受けることができました。

・ 今回のお題
PCとスマートフォンゲームでのUI作り違い考察です。
プロ生ちゃんとの関連性はありません。
現状、発表させて頂いているゲームは全てWindows用で
操作はキーボードかゲームパッドを念頭に入れていました。
現在はスマートフォン向けのアプリ開発をしております。
こちらはタップのみを念頭に入れています。スライド、スワイプは使いません。
UIを創る上で感じた 、設計の違いを自分なりに考察してみました。
RPGを創る、という前提で話を進めていきます。

・Windows用ゲームの操作設計
操作ボタンが4~6つ。方向キーが「上」「下」「左」「右」の4つ。最近はローラーみたいなものが2つ。
と、多彩な操作を表現することができます。
コンシューマゲームに慣れている方ほどとっつきやすく、
コントローラーを触ったことがない方には未知の領域になるのではないかと思います。

UIを創る上で、操作ボタンが多いことは、設計の難易度に影響します。
例えば、ほとんどゲームは「決定」「キャンセル」の二つの操作は必要になってきます。
その他必要性があれば、「オプション」「オプション2」と増やすこともある程度可能です。

1

画面上では「Z」「X」「S」キーを下部にガイドを表記し、プレイヤーを誘導します。
ここでは、簡単にセーブできるように、「オプション」キーを表記しています。
もし、その他にも特殊な操作が必要であれば、
適切にプレイヤーをガイドし露頭に迷わせないようにすることは大事です。 


2

こちらも同様にガイドを表記していますが、悪い例にあたります。
表示するボタンが多すぎて、パット見ではどう操作していいか頭に入ってこない。
また、情報量が多すぎるのも問題です。

操作ボタンをガイドすることで、プレイヤーを誘導できますが
あまりに複雑すぎると、かえってわかりにくくなってしまいます。
 
・スマートフォン用ゲームの操作設計
スマートフォン用のゲームは、拡張コントローラなどの周辺機器もありますが
基本的に操作は、タッチ、タッチしたまま、スライド、ダブルタップ、フリックあたりでしょうか。
多彩な操作を表現できるように見えますが、全部を実装すると複雑な設計になってしまいます。
個人的に、タッチ、タッチしたまま、スライドから2-3種ぐらいがわかりやすいのではないかと思います。

操作の種類が少ないので、シンプルで明確なルールを統一する必要があります。
例えば「タッチ」操作はPCでいうマウスの左クリックのような意味合い。
決定、先に進む、能動的な意味合いを持たせるイメージでしょうか。

3
 
この画面を見た時に、操作ガイドの表記がないことがわかります。
パット見でタップ操作で反応がありそうな場所はどこでしょうか?

 4

だいたいこんな感じになるかと思います
赤の枠→反応ありそう
黄色の枠→反応ありそうな気がする
青の枠→反応なさそう

正解は……
赤の枠は操作メニューなので、もちろん押せます。ちなみに実際は点滅もします。
キャラ画像の部分は、押せます。ステータス画面に移動します。
右下のハートのマークは押すと体力回復の操作ができます。
(メニューコマンドの右から2番目「Refresh」と同じ操作)
青の枠は反応ありません。

操作ボタンを表記する代わりに、押せそうだなと思わせる工夫が必要になります。
操作メニューは点滅もするので、まず操作できるだろうと誰もが思うのではないでしょうか。
 
ここで施している工夫は……
「点滅させること」
「アイコンが表示されていること」
「小さく文字が添えてあること」

点滅は、そこになにかあることを明示しています。
「アイコンが表示されていること」「小さく文字が添えてあること」は
普及しているスマートフォンのUIに準拠しています。
たまに、企業のスマホゲームでも「小さく文字が添えていない」ものが見受けられます。
何の機能を持っているのか、アイコンだけではわからないので、表記はあった方がいいと思います。

 黄色の枠が「押せそうな気がする」と思わせる理由は恐らくこんな感じでしょうか。
・ポップな色合いで目立つ
・女の子キャラをタッチしてみたい欲

キャラの画像以外の部分は、背景画像を除き、フラットで地味な色合いになっています。
反対に、キャラの画像は派手な色合いで目立つので、押せそうだなと思わせることができます。
右下のハートのマークはあってもなくてもいいけれど、
押してみたら、「あー、便利」と、思わせれば機能としては成り立つのかと思います。

4

 こちらは、上記のPC向けの悪い例と同じことができますが、情報量を抑えたものになります。
お世辞にも良い出来とは思えないのですが、まだマシになりました、といった感じに改良したものです。

 5
 
同じように、反応がありそうな部分を枠で分けてみました。
依然として問題に上がるのは、押せそうな場所が多いこと=操作が複雑であること。
実際に青の枠以外の部分は、全部反応があります。 

赤の枠
メニューコマンド→点滅します。表示の項目が変わります
スキルが並んでいる所→点滅します。スキルの装備入替えができます。
⇦⇨→両方とも、矢印の向きに向かって左右移動します。キャラの切り替えができます。

点滅させる、以外にも、上下左右に動かすことによって、プレイヤーを誘導できます。

黄色の枠
キャラの画像、ハートのマーク→上記に同じです
大きなキャラの画像→表情が変わります。押してみた時に、「あ、楽しい」と思わせるオマケ要素です。

ここまでの操作で、必要な動作は画面の「タッチ」操作のみです。
RPGのような複雑な操作を必要とするものも
画面の表示の仕方によって、創り上げることは可能だと思います。

以上、簡易的、一部にはなりますが、PCとスマートフォンゲームでのUI作り違い考察でした。
何かご意見などありましたらコメントにお願いします。

この記事はGoogleのマテリアル デザインのガイドラインを参考に独自解釈したものです。
https://material.google.com/jp/