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

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

「ヘブンバーンズレッド」【応援する】のボタンが若干上にズラして表示しているダイアログ

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

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

 

今回は「ヘブンバーンズレッド」、(以下、ヘブバン)からアプリの応援レビューのダイアログについて紹介します。アプリのレビューの記載を促進したい際の参考になれば幸いです。

 

主な特徴は以下です!

ゲームのキャラを使用

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

「ヘブバン」のレビュー訴求のダイアログにはゲームキャラのイラストが使われていました。イラストは描き下ろしで、特別感も演出されています。

比較的見かけるデザインですが、ゲームのキャライラストを使うことで、例えば以下のような効果が期待できると考えます。

  1. ゲームの世界観の訴求
  2. 単純接触効果により、受け入れやすいお願いに聞こえる

さらに面白いのは「ヘブバン」の場合はテキストもイラストの中に含めているのが特徴的かと思います。

テキストをイラストの中に含めることによって、イラスト大きく表示し、より魅力的なダイアログのデザインになっていると感じました。

 

タイトル画面から遷移できる

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

応援レビューのダイアログはゲームを開始してしばらくしてから自動で表示されるだけではなく、タイトル画面からいつでも呼び出すことができます。

タイトル画面に導線を設置することで、例えば以下のメリットが考えられます。

  1. わざわざゲーム内に遷移しなくても応援レビューにアクセスできる
  2. ゲーム内の導線がスッキリする

特にゲーム内の導線整理は地味に重要な気がします。
ゲームに直接的に関係ない導線があることで、僅かにゲームの没入感を下げる理由にもなりえるため、優先度の低い導線が整理されていることは、個人的にはメリットに感じました。

 

「応援する」ボタンが少し上にズラして配置されている

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

ぱっと見で「応援する」ボタンが目立っていることは分かると思いますが、よ~く見るとボタンの位置に違和感を感じました。「応援する」のボタンが、「キャンセル」のボタンより少しだけ上に配置されている気がします。

 

分かりやすいように画像を大きくし、水色の補助線を引いてみました。

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

分かりますかね…。
見た感じ「応援する」のボタンが「キャンセル」ボタンと比較して1~2ピクセルほど上に表示されています。

深読みせずに考えれば単に表示位置がズレているだけだと思いますが「ヘブバン」の場合はUIに力を入れているため、意図的に表示位置をズラしている可能性もありそうです…。

人間の目は水平方向の変化に敏感です。普通に「ヘブバン」をプレイしている限り、違和感とまでは至らないとは思いますが、無意識下で視線の引っ掛かりにはなりそうかな、と思いました。

 

つまり人間は進化の過程において、走る獲物を瞬時に捉えて適切に射止めたり、かつ周りの人間と協調して生きていく必要があったので、水平方向の変化には強い。

対比は上下でなく左右に配置する方がよい理由|スライドデザイン研究所|Timewitch

 

実際のところ意図的かどうかは分かりませんが、個人的には興味深いデザインに感じました。

 

 

以上です。
レビューを促すダイアログのデザインを検討する際の参考になれば幸いです。

 

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

©WFS Developed by WRIGHT FLYER STUDIOS ©VISUAL ARTS/Key

 


権利者さまへ

 

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

「ヘブンバーンズレッド」のガイドラインを確認したところ、以下の記載がありました。

個人または法人格のない団体は、「YouTube」「ニコニコ動画」等の動画投稿サイトや「Twitter」「Instagram」「Facebook」等のSNSに投稿(ストリーミング配信を含むものとし、以下同様とします。)するにあたり以下の事項をすべてご確認いただき、ご同意いただいた場合に限り投稿および収益化プログラムシステムによる収益化が可能です。

「ヘブンバーンズレッド」動画等配信ガイドライン

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

ヘブンバーンズレッドのコンテンツ利用ガイドラインです。2023年2月10日改定版です

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

 

お問い合わせ