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

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

「アズールレーン」新兵任務画面のデザインがフラットとスキューモーフィズムの両立がなされてた

こんにちは、ちょこです!

 

アズールレーン」の新兵任務(初心者ミッション)画面が独特だったので紹介します!

f:id:appgameui:20200531234402p:image

新兵任務画面はこんな感じです!

 

アズレン自体はフラット寄りのデザインで構成されている場面が多く、こういったスキューモーフィズム的な表現があるところは限られます。 

f:id:appgameui:20200605135303g:plain
▲スクロールできることにはちょっと気付きづらい

 

例えば似た役割を持つ「任務画面」を見てみましょう。

f:id:appgameui:20200605133120p:image

▲同じゲームに見えない…。アズレンは基本的にはこういった要素で構成されています

 

汎用素材で作られることが多い設定画面はこんな感じです。

f:id:appgameui:20200605210917p:plain

この通りフラットなデザインで構成されていることが分かるかと思います。
サイバーとかSF系によくある液晶ディスプレイのようなデザインを目指す際、相性が良いんですよね。

 

新兵任務画面のデザインの話に戻ります。

f:id:appgameui:20200531234402p:image

フラットデザインのようなスキューモーフィズムデザインのような不思議な感じですが、押せるところはタブや付箋といった表現で置き換え押せない箇所は塗りつぶしという表現になっています。

f:id:appgameui:20200605133649p:plain
▲少し浮いているので押せそう。物理的にも触れる

 

f:id:appgameui:20200605133716p:plain
▲一方未開放の方はスタンプ的な表現で、浮いていない。物理的にも触れる(干渉できる)ものではない

フラットデザインだとどうしても近未来SFチックなデザインになりがちだな、と感じていたのですが、こういう見せ方もアリになるんですね。

 

…って、受け取りボタンは光るんかい!

f:id:appgameui:20200605205819p:plain

▲光る「受取」ボタン

 

UIの一貫性、統一性といった部分よりも、ぱっと見の世界観、新奇性を優先されたのかな…ちょっと勿体ない気もするけど…。

 

受け取るとこんな感じでキャラ獲得演出もあります。

f:id:appgameui:20200605134648g:plain

 

 

フラットデザインを取り入れたいけど、世界観を入れづらいと感じている方がいたら参考になりそうだな、と感じたので紹介してみました!