ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「妖怪三国志 国盗りウォーズ」情報の扱い方が不統一だと、学習コストがかかってストレスに感じてしまう話

こんにちは、ちょこきなこです。

 

妖怪三国志」のゲームが結構複雑に見えるので、なんでかなー、って思いながら遊んでいたのですが、微妙に UIのルールが揃ってないのが原因の一つなのかなと思いました。
ルールが揃っていないと学習コストがかかるので、そういった面でストレスに感じていたのかも。

いくつか見てみます。

 

 

アイテムを獲得するとき

アイテムを獲得する時に、以下のようなデザインフォーマットがあります。

 

ゆうびん

f:id:appgameui:20190903081911p:image

複数受け取り時

 

f:id:appgameui:20190903091542p:image

単一受け取り時

 

ギフト

f:id:appgameui:20190902133256p:image

単一受け取り時

 

札交換

f:id:appgameui:20190903082202p:image

単一受け取り時

 

ミッション報酬

f:id:appgameui:20190902133301p:image

単一受け取り時

 

到達pt報酬

f:id:appgameui:20190903091209p:image

ミッションと同じ

 

 

f:id:appgameui:20190909215321p:plain

並べるとこんな感じ 

 

 

このように同じ情報を伝えるのに複数パターンのデザインが実装されています。
デザインが違うと瞬間的に違う情報だと認識してしまったり、あるいは何の情報なのか理解するまでのストレスがかかります。

 


デザインパターンを複数用意する例として、例えば…

「ユーザーに宝くじの1等が当たった時のような喜びを感じてもらいたいので、このポップアップは豪華にしたい」

「今回のイベントの世界観を壊したくないので、ポップアップのデザインも変えたいんです」

とかであればデザインパターンが生まれるのも理解できます。

 

ですが、今回の場合は単純にデザインパターンがコントロールされていないだけに見えます。

 

 

UIパーツの表示位置の不統一

「交換所」のボタンの位置が画面によって異なります。

f:id:appgameui:20190902134156p:image

交換所が上にある画面

 

f:id:appgameui:20190902135217p:image

交換所が下にある画面

 

f:id:appgameui:20190909220222p:plain

基本的に同じ情報なら同じような位置にあった方がコンテンツの見た目も整います。

 

必ずしも座標ベースで揃える必要はありませんが、画面によって判断すると経験上それはそれで割と難度の高いデザインに挑戦するのであまりオススメできる手段ではないかと…。

 

 

情報の塊を意識したレイアウト

戦力の数値の位置が情報の塊から外れているのがよくありません。

f:id:appgameui:20190902134312p:image

デザインの原則の一つに「近接」というものがあります。

デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - Qiita

 

要するに「関係し合った情報は近くに置かないと関係性が認識しづらい」という話です。

 

ここの画面でいうと各パラメーターの合計値が戦力なのですが、情報が離れているので関連性が弱くなります。

 

じゃあどこに配置すれば良いの?って話ですが、この画面だけを見ると、戦力の数字はLvの下、各パラメーターの上辺りに配置するとかかなー。戦力の値はLvに比例するので、その辺見ておけば情報の塊としては見やすくなるのかな、と思いました。

 

 

 

 

ガチャのボタンデザイン

ガチャのボタンデザインがたくさんあって強弱のルールが分かりづらい。

f:id:appgameui:20190902134751p:image

f:id:appgameui:20190902134757p:image

f:id:appgameui:20190902134805p:image

f:id:appgameui:20190902134815p:image

 

f:id:appgameui:20190909220952p:plain

この4種類があります

ざっくり分けると

・ボタンの大きさ(2種類)

・ボタンの色(紫、赤、黒)

・ボタンの装飾(大きく分けて2種類。差分としては5種類)

・ボタンの柄(4種類)

とデザインが分かれています。

 

これはちょっと差分の情報量が多すぎます。

 

これだけデザインの差分が多いと今後新しくガチャのスキームが追加された時に、どのフォーマットを利用すれば良いのか、あるいは既存のフォーマットを利用せずに新規で用意するのか、など判断できません。

 

遊んでいる側としても、目に入ってくる情報量が多く、何がお得なものなのか予測、瞬間的に判断しづらいです。

 

レアリティなどの情報の位置

レアリティなどの情報の表示位置にいくつかバリエーションがあるようです。

f:id:appgameui:20190902135217p:image

f:id:appgameui:20190902135259p:image

f:id:appgameui:20190902135514p:image

 

f:id:appgameui:20190909222225p:plain

並べるとこんな感じ

 

座標単位で不統一であっても良いと思うのですが、おおよその位置は揃えて欲しい次第。

 

 

まとめ

このようにゲーム中の色々な場面で情報の見せ方、UIパターンの不統一が見られます。
ひとつひとつは小さいことかもしれませんが、アプリ全体で見たときに色々なところが散らかって見えます。

 

ホテルの部屋で例えると、ベッドの上やお風呂、洗面台がそれぞれなんとなく散らかっている状態。
シーツはシワになっているし、お風呂には水滴が残っている。洗面台のタオルはきれいに畳まれていない。みたいな。

 

宿泊するにはさして問題ありませんが、レビューするなら☆1が付くと思います。

 

 

デザインの不統一は細かい部分ではありますが、きちんと情報を整理したり、デザインのルールを敷くことで、よりユーザーにとって分かりやすいデザインになると思います。