アプリゲームUIデザイン

プレイしたアプリゲームのUIデザインに関して、書き残しておこうと思います。毎日24時に更新!

「イケメン戦国 時をかける恋」情報が整理されているガチャ画面

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

 

 

イケメン戦国 時をかける恋」のガチャ画面。

すごくスッキリしてて良いです!

 

 

f:id:appgameui:20190310215501p:plain

 「特効アバター登場♪」のところがちょっと浮いてるけども。

あ、でも「特効アバター登場!!」じゃなくて「特効アバター登場」って

「♪」になっているのは可愛いと思います。

 

すっきりしてるから情報の優劣が分かりやすいんですよね。

ぱっと見「1回まわす」>「アバター」≧「セット販売」「がちゃ札購入」って優劣に見えました。

 

「1回まわす」は大きくて目立つので文字は控えめ、ドロップシャドウは少し強めてシャープさと画面を締めている印象を受けます。
これが弱かったら、画面全体がぼやあっとした印象に寄ってしまいます。
花を象った装飾も少しシャープだったり、その背面の模様も直線的なので、メリハリをつけようとしているのだと思います。

 

アバター」は全体的に色のトーンが整っているのでふつーにきれいです。

まず、背景はアバターよりもコントラストを抑えるように意識していることが伺えます。
化粧のことはよく分からないけど、目元は濃く、髪は服の色より重くならない色でまとまっています。


髪飾り、首元のリボンなど、面積が小さい小物類は服に比べてやや色が強いけど、これは同じくらいのトーンだと他の面積の大きいアバターに負けちゃうからかな。

 

足元にある木のお皿を模したアバターはイラスト的な意味で抑えの役割を果たすためか、少し重めな色が使われています。

 

手はほとんど見えないくらいのコントラストになっているけど、これもおそらく意図しているもので、ここでの素体はプレイヤーの分身ではなく、一種のマネキンでもあるので、アバターが魅力的に見えれば良いと判断したのだと思います。

 

実際のマネキンでも肌色ではなく白だったり黒だったり、透明な質感のものなど様々です。それらは服を魅力的に見せるために選択されるもので、同じことがこの画面でも言えるのだと思います。

 

「セット販売」「がちゃ札購入」も少しコントラスト強いのですが、大きな面積じゃないので、そこまで主張はしないけど、きちんと存在をアピールできていると思います。

ここで使われているアイテム類は小さく表示されることもあるので、少し強めのコントラストやトーンでまとめられています。
文字のサイズも小さいので、周囲の色も少し強めの色が使えるのだと考えられます。

 

情報がすっきりしていると各々の要素が整理しやすいので、デザイナーはあれもこれも表示するのではなく、この場面では何が必要で何が削れる情報なのかしっかりと考える必要があると思いました。