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

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

「陰陽神鬼」サムネイルが円形なのでHPゲージも円形にしたデザインのメリット

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

 

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

 

今回は「陰陽神鬼」から、丸いHPゲージをご紹介します。

HPゲージってなんとなく長方形のイメージがあったのですが、円形にする考え方もあるのだな、と感じました。

 

このデザインによって以下の特徴があるように感じました。

  • 見た目がスッキリする
  • 複数のゲージにも対応できる
  • 乱戦時でも誰のゲージか分からなくなり辛い
  • 残りHPの割合が分かりやすい

 

該当の画面はこちらです。バトル中の画面ですね。

f:id:appgameui:20220730130536p:image

 

アニメーションで見るとこんな感じです。
サムネイルが動くことで攻撃を表わしています。ファミコンの頃からある、非常に伝統的な表現のひとつですね。

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

 

分かりやすいようにサムネイル同士がぶつかっている場面を大きくします。
円形のサムネイルの周囲の赤い枠が攻撃される度に黒くなっていくのが分かりますでしょうか。

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

 

 

赤い枠は残りのHPを表現したデザインになっています。

 

ソシャゲにおいて、キャラクターのサムネイルの枠は属性やレアリティといった情報が付与されがちです。
このゲームにもレアリティは存在しますが、バトル画面の敵にはその情報が付与されていないようです。

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

 

HPゲージと言うと長方形、棒状の形をしているイメージがあったのですが、円形のサムネイルに沿わせる形でデザインする発想は面白いと感じます。

見た目の特徴としては…

  • 見た目がスッキリする
  • 複数のゲージにも対応できる
  • 乱戦時でも誰のゲージか分からなくなり辛い
  • 残りHPの割合が分かりやすい

などがあり、棒状のゲージのデザインとは与える印象が大きく異なります。
特に見た目がスッキリする、乱戦時にどのキャラクターのHPかが分かりやすい、という特徴は敵が多く登場するようなゲーム性と相性が良いのかもしれません。

 

以上です。
今回は「陰陽神鬼」の円形のHPゲージのデザインを紹介しました。

HPゲージをデザインする際の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

「©Six Waves. All Rights Reserved」
「※掲載中の著作物は、6wavesが定める著作物利用許諾に基づき利用しており、画像を含め一切の転載・配布等は禁止しております。」

 


権利者さまへ

 

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

「陰陽神鬼」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

 

陰陽神鬼 ~本格放置RPG~

 

主な参照箇所を抜粋します。

<利用許諾条件>

当社のゲーム著作物のご利用は、以下項目をお守り頂ける場合に限り、許諾しております。

(1)当社ゲームの著作物の利用目的において、広告収入を主目的とせず、仲間同士での共有、コミュニティ活性化が主目的である場合に限り、当社ゲームの著作物をご利用いただけます。
広告が主目的と当社が判断した場合は、当社ゲームの著作物利用の禁止または、削除を依頼させていただく場合がございます。

(2)当社ゲームのイメージを逸脱、もしくはイメージを損なう内容を目的とした著作物のご利用は禁止しております。
 ※当社ゲームを配信、掲載および転載した際は、当該利用されたトップページ、もしくはフッターなどに、後述の(4)に記載の著作権表記を必ず掲載してください。

(3)当社ゲームで撮影したスクリーンショットや動画は、過度のリサイズや編集、加工はご遠慮いただきますようお願い致します。
 ※当社サイト、当社ゲームの公式サイト及び公式SNSに掲載されている素材は、当社が個別に許諾している一部著作物を除き、一切の変更、修正、加工を加えた掲載、転載を行うこと禁じます。

(4)当社ゲームの著作物は、当社または正当な権利者に帰属しています。当社ゲームの著作物を利用するすべての箇所に以下の権利表記を記載してください。

 「©Six Waves. All Rights Reserved」
 「※掲載中の著作物は、6wavesが定める著作物利用許諾に基づき利用しており、画像を含め一切の転載・配布等は禁止しております。」

(5)お客様により掲載、転載、投稿された記事、画像及び動画を広告、イベント、公式SNS等で紹介させて頂く場合がございます。

陰陽神鬼のコンテンツ利用ガイドラインです。2022年4月27日施行版です

 

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

 

お問い合わせ