どうもこんにちは、jackの幽霊のnorinori1です
今日はゲーム開発のUI・UXの設計法の自分なりのテクニックやアドバイスを、今年β版まで制作したゲーム「ZINTOROAD」の開発の過程をもとに書いていきたいと思います。
「ZINTOROAD」については、こちらからどうぞ（「ゲームクリエイター甲子園」というものに応募してます）↓
もしかしたらここから「作品紹介PDF」を見たほうが理解が進むかもしれません
ここからは、「ZINTOROAD」のα版・β版アンケートの結果をもとにした改善結果、およびそれからわかるUI・UXテクニックについて話していこうと思います。
ここで改めて、ZINTOROADのα版・β版をプレイしてくれたすべての人、またアンケートに協力してくれたすべての人に感謝を申し上げます
（a）タイトル画面
alpha版のほうですが、実はZ長押しでしか次のシーンに移らず、「▶ Start」をマウスで押しても実は反応しません。
（実はUnityのPlayerPrefの設定ミスでこうなりました。スタートボタンにbuttonコンポーネントを仕込んでも反応しなくなっちゃった。ちなみに今Unity6.0で同じ問題に直面している人向けに説明すると、EventSystemの「Action Asset」に入っているPlayerPrefにUI/…のアクションマップを設定すれば治るよ（初期のInputSystem_ActionsのUIマップをコピーすればOK））
このことはアンケートで結構な人から指摘されたため、スタートUIをクリックすることでもゲームをスタートできるように変更しました
すなわちUIは、こう動くであろう動き・操作と対応するデザインにしたほうがいいことがわかります。（そりゃそう）
あと、beta版ではタイトル画面で[Esc]キーを押して確認画面で「Exit」を押すと、ゲームが終了するようにしています。ゲームを終了する手段は、ゲームの機能からも用意したほうがいいですよ！
(b)プレイ画面
α版のほうでアンケートや友達の意見から、
- なんでポーズが「C」キーなんですか（普通「Esc」だろ）
- ポーズのUIをクリックしても反応しない
- 右下にHPがわかるけどそんなところプレイ中に見ないよ
- 盤面にいくつアンカー（三角形の構成部品・武器）あるかわからん
…という意見がでました。
1.と2.については、a.タイトル画面で書いたことと同じようなことになってしまいますが、UIUXは想定される動作に基づいて作ったり、ほかのゲームに採用されている操作をおとなしく採用するほうがいいことがわかります
（なんでポーズが「C」キーになったかというと、じつはこのシーンはキーの判定がそれぞれ別スクリプトで２種類同時に行われていて、「Esc」にしちゃうと競合するからなんですよね…β版で直しましたけどね…）
次に、3. からわかることについて考察したいと思います。ゲーム中プレイヤーは、主に操作するオブジェクトに視線が寄っていることを発見しました。そのため常に自分のHPを示す右下のHPゲージはプレイヤーは常に見ていません。そのため気づかないうちに敵にあたってHPが減ってしまい突然ゲームオーバーになったような挙動をプレイヤーは体験します。
このことから、私はプレイヤーのHPゲージ・APゲージ（最大からの割合）をプレイヤーが注視する画面中央に配置することにしました。これならプレイヤーは敵にあたっても画像情報からダメージを受けたことを即座に認識することができるようになりました。
4も似たようなものです。このゲームは、アンカーを壊す「Destroyer」という敵が存在しています。また、敵がアンカーにあたってそのHPが0になることでも壊れます。そのため、アンカーを2つ置いたつもりなのに、気づかないうちにアンカーが壊れて三角形のプレビューが現れないということがしばしば起きます。
その対策として、アンカーの設置方法を示すUIの右に盤面にいくつ三角形を作れるアンカーが存在するかを示すUIを新たに配置しました。
UIは、ゲームを遊ぶ人にとって重要な情報がUIでできるだけ示されていることと、特に重要な情報を示すものはプレイヤーの視線を意識して配置するといいかもしれませんね。
(c) boost選択画面
このゲーム、ある程度敵を倒したりすると、このようにレベルアップして「boost」という特殊能力を選べるようになっているんです（「Vampire うんたら」とか「ダ●サバイバー」とかのレベルアップしたときの画面だと思ってください）
こちら、α版だとこのboostの選択が、Z長押しになっていて、混乱したということをアンケートで指摘されてしまいました…
（ちなみにこれはめんどくさくてアンカー設置用の既存のコードを使い回したせい）
β版でZ単押しでの選択に変えました。またクリック操作も受け付けるようにかえました。
UIUXはデザインや経験則から想定される動作に基づいて作ったほうが (以下略
次に、フォントについて話します。alpha版では、「マキナス」という世界観に合わせるためにカクカクのフォントを使ってました。しかしアンケートで見にくいと指摘されたため、「スマートフォントUI」というフォントに変えました。
ゲーム内で何かを説明するUIはデザインフォントではなく、見やすいフォントに変えたほうがいいかもしれませんね
3つ目に、操作方法を説明するUI（左下の「Select」「Determine」とかあるやつ）で、◀▶が「Select」「Determine」両方にかかっているように見えて紛らわしいという指摘もアンケートでうけました。そのため、「Select」にかかる操作、「Determine」にかかる操作のUIをそれぞれ囲んで紛らわしくないようにしました。
十分にUIを離したり、機能単体を表すUIどうしで囲むことで、UIを紛らわしくないようにしてみましょう
(d) まとめ
- 操作をほかのゲームと合わせたり、動作とUIが標榜する動作を乖離させないようにし、プレイヤーを混乱させないようにしよう
- ゲームを終わらせる機能をゲーム側から用意しよう
- 情報をUIで十分に表現できているかを考えよう
- 情報の配置を、プレイヤーの目線を意識して配置しよう
- 説明に用いられる場面では、フォントは見やすいものを使おう
- 機能を示すUIは、囲んだり十分に間隔をとることで紛らわしくないようにしよう
こんなところですかね
終わり
最後まで読んでくれてありがとうございます!
最後に、もしよかったらみんなのゲームパレードで自分の作品を「応援する！」ボタンを押してくれるとうれしいです！
ではまた!
