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

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

「永遠の7日-終わりなき始まり」ゲージの境界線に白い筋を表示して視線誘導をし、情報量の多い画面でも見やすくしていた

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

 

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

 

今回は「永遠の7日-終わりなき始まり」、通称「とわなな」のゲージのデザインが見やすくなるための工夫が取り入れられていたので紹介します。ゲージの見せ方をデザインする際の参考になればと思います。

 

該当のゲージデザインはこちらです。

f:id:appgameui:20210929100428p:image

 

味方が水色、敵が赤のHPゲージのデザインになっています。
見やすく工夫されている点は、HPの残量部分と下地の間に白い光の筋のようなエフェクトがある点です。

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

 

 

アニメーションで見るとこのような感じです。
画面内で3Dのキャラクターが動き回ったり、攻撃エフェクト、カットイン演出など、目まぐるしく情報が移り変わります。

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

その中でゲージの増減に関して見落とさないように、境界面に白い光の筋のようなエフェクトを載せ、視線誘導を行っているのだと推測します。

 

分かりやすくするために、該当箇所を大きく表示します。

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

よく見ると被ダメージ時にゲージ全体が動いたり、HPゲージの残量が少なくなるとゲージ全体が赤く明滅もしていますね。

こういった細かい一つ一つの工夫の積み重ねがHPゲージの見やすさに繋がっているのかもしれません。

 

参考までに他の画面のゲージデザインも紹介します。

先ほどの例はバトル中のような動的な画面の例でしたが、動きのない静的な画面のゲージデザインは以下のようなデザインでした。

これはバトル終了時の各キャラクターの与ダメージ値の合計のリストです。

f:id:appgameui:20210929100437p:image

 

この画面のゲージには境界線の白い光の筋のエフェクトは表示されておらず、シンプルなゲージデザインになっていました。

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

 

このようにゲージ単体のデザインではなく、画面全体の情報量を踏まえた上でゲージの情報量をデザインしている点も良いな、と感じました。

 

 

以上です。

ゲーム内には様々な場面でゲージが登場します。場面にあったゲージデザインを検討する際の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

 

 

 

 

権利者さまへ

以下はコンテンツ利用に関する認識の説明です。

「永遠の7日-終わりなき始まり」の利用規約には以下のようにありました。

4.2 お客様は、本サービスを通じて情報、データ、ソフトウェア、音声、写真、画像、映像、タグその他の素材(以下「コンテンツ」といいます。)を、他の特定又は不特定のお客様に対して送信し、アップロードし、投稿し又はその他の方法で提供することができます。一般に公開するか又は非公開で提供するかを問わず、お客様が本サービスを通じて送信し、アップロードし、投稿しその他提供するすべてのコンテンツに関する責任は、弊社ではなくお客様が単独で負うものとします。

 

弊社は、コンテンツが本規約に抵触し、又は不適切な内容である等の合理的な理由がある場合、単独の裁量に基づき、当該コンテンツを本サービスから削除することができるものとします。

これによりゲーム画面のスクリーンショットの公開については許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

 

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