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

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

「アイドルマスター ミリオンライブ! シアターデイズ」たくさん情報が並ぶと一見して分かりづらいので、分かりやすくする工夫が大事!

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。

 

 

アイドルマスター ミリオンライブ! シアターデイズのメニュー画面です。アイコンが14個並んでいます


ボタン多過ぎぃ!!
そこで、認識しやすくするために、チャンク(まとまり)を利用して色分けしていると思うのですが、それでもまだ不十分な気がしています。

 

不十分に感じている理由ですが、

  • 色でグループ分けしているけど、そのグループがどういうグループであるか分からない。

(推測はできるけど正解か不安になる)

結果、色分けの意味がなくなっている。

  • 上の通り、色の意味がなくなってしまい、情報として並列に見える。 
  • 配置と色のグルーピングがチグハグ

アイコンのグルーピングを示した図です。関係性のあるアイコンよりも、関係性のないアイコンの方が近いレイアウトになっています

近いもの同士、つまりこの場合は上下でグループ化されます。
ですが、色は左右でグループ化しようとしているのでチグハグな印象を受けてしまいます。

 

 

なので、例えばこういう案を提案してみます。

アイドルマスター ミリオンライブ! シアターデイズのメニュー画面のアイコンの配置を関係性のあるアイコン同士が近くになるように配置にした図です

色を近くにまとめてグループを強調してみる案です。

 

左右のボタンの間隔を狭めたことで、グループが強調されたかな、と思います。

 

 

「タイトルへ戻る」は誤タップ防止と、戻るなら戻るで押しやすい位置にしたいので、外れた位置に配置しています。

 

ゲームの外に行く導線なので、ゲーム内のコンテンツとは出来れば分けて配置したい派。

 


この辺はどちらが正解というものではなく、たけのこvsきのこ戦争みたいなものなので、一度東軍西軍分かれて関ヶ原でバーチャル合戦やれば良いと思う。(ゴリラ)

 

でもこれはちょっと離れすぎましたね、、

 

 

あと、別案ですがこういうのも提案できると思います。

アイドルマスター ミリオンライブ! シアターデイズのメニュー画面のアイコンの配置を関係性のあるアイコン同士が近くになるように配置にした後にアイコンの大小を差別化して優先度を設定した図です

ボタンのサイズを変えることによって、優劣を変えてみる案です。

 

画面に動きが出るので、今の世界観のデザインだとちょっと統一感がなくなるな、とは思います。もう少しポップな感じの世界観に寄せるならアリかも。

 

まとめ!

「たくさん情報が並ぶと一見して分かりづらいので、分かりやすくする工夫が大事!」です!