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

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

「極夜大陸:メテオの彼方」HPゲージが斜めだった時の減少アニメーション

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

 

このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 

 

今回は「極夜大陸:メテオの彼方」のHPゲージがナナメであった時の減少アニメーションについて紹介します。

 

 

該当の画面はこちらです。

画面上部にボスのHPゲージが表示されています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

 

見やすいようにHPゲージの部分を拡大します。

左端がナナメになっており、右側は垂直になっています。
こういったデザインの場合、HPが減少する際にどういうアニメーションにするか、少し悩むかもしれません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆


そのまま水平に減少させると残量が僅かになった時に見ずらくなります。
では、どのようにするか?

 

 

 「極夜大陸:メテオの彼方」の場合はこのように減少させていました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

減少の度合いに応じて徐々にナナメから垂直になっている…!

 

な、なるほどー…

 

個人的にこれがアリなのかは判断しかねるところなのですが、
分かりやすさなどの観点からNGとする理由も見当たらないですし、リリースされている実例もあります。

確かにこれならHPが少なくても残量がゲージが見づらくなりません。

 

ずっと見てると気になるけど、画面全体で見た時にはそこまで気にはならない…

悩ましい…!

 

以上です。

HPなどゲージのデザイン際には、増減時のアニメーションも同時に考えると思います。
シルエットをデザインする際の参考になれば幸いです。