ロボット少女は夢を見る - 制作記その57- UIを見やすく整理

第57回の記事はUIを見やすく整理したお話です。

もうすぐ東京ゲームダンジョンに体験版を持って行ったり、
他にも人に見せる機会があるためゲームの改修作業を進めていました。

その中で今週は
「ゲーム画面を見やすくする事」 を重点的に改修したのでそのお話です。

改修対象はこちらの戦闘の技情報です

技名・説明・ダメージ計算式・属性や技範囲の情報が書いてあります。

ゲームの技や装備にはたくさんの情報が付与されていて
それをできる限り表示しています。

ですが正直、かなり見にくいです。
初見の人はこの地点でやる気をなくしてしまいかねません。

というわけで改良したのがこちら

まずは
・文字の説明
・技の計算式
・攻撃範囲
を削除しました。

フレーバーテキストは個人的には好きなのですが
戦闘画面で選ぶ技すべてに付いているとさすがにちょっと邪魔です。

ダメージ計算式も装備画面ならともかく
戦闘が始まったこのタイミングではそこまで重要ではありません。

攻撃範囲も上のキャラクター画面で確認できるため削除しました。

こうした情報の取捨選択はとても大事です。

特に戦闘中は入ってくる情報量も考えることも多いので
不要なものは削除して見やすくする必要があります。

逆に他の画面では表示した方が良い情報もあるので
その辺りはレイアウトを工夫することで随時対応が必要です。

次はダメージなどの数値です。
この技を使うと何ダメージを与えられるか？などの情報です。

旧レイアウトでは
右に大きく表示されているので書いていませんでしたが、
戦闘では１,2を争うほど大事な情報なので載せておきました。

そして大事なのが
左のリスト表示と右の説明文付きの各表示(温度計のアイコン付き)を
合わせたことです。

レイアウトが同じだと
左のリストと右の表示が同じ数値だと直感的に分かりやすくなります。

それによって表示範囲の狭い左のリストに
「ダメージ」などの説明を載せなくても遊び手が理解しやすくなります。

ささやかな配慮ですが
こうしたものの積み重ねで少しでもUIが見やすくなれば良いですね。

そして最後にアイコンの使用です。

これは文字よりも圧倒的に見やすくなります。
なんなら外国語にローカライズするときに翻訳する量が減ってお得です。

問題は用意がめっちゃ面倒なことです。

作る側としてはかなり大変な作業になります。

ですがこれも遊び手のストレスを減らすために頑張って対応しました。

…そしてアイコン化しにくい属性は削除されました

そんな感じで情報を取捨選択したり、
表示を工夫することで何とか見やすくできたと思います。

かなり整理されたので
こうした追加情報を載せる余裕が出来たり…

マウスオーバーでさらに追加の情報確認が出来るようにしたり
工夫の余地はまだまだあります。

今後もシナリオ追加・戦闘追加・カスタマイズ要素追加と
まだまだ作業は山積みですが
より良いものが出来るように頑張って作っていきます。

それでは、また次回！