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

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

「ヘブンバーンズレッド」タイトル画面に表示される「TAP TO START」の明滅アニメーションは完全に消えないくらいが読みやすくて好み

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

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

 

今回は「ヘブンバーンズレッド」、(以下、ヘブバン)からタイトル画面の「TAP TO START」の明滅アニメーションを紹介します。

主な特徴は以下です!

 

f:id:appgameui:20230509005033p:image

 

明滅はするが完全には消えない

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

こちらは「ヘブバン」のタイトル画面の演出です。
キャラクターのカメラ演出が特徴的ですが、今回は画面左側に表示されている「TAP TO START」に注目します。よく見ると、緩やかな明滅アニメーションが付けられています。

 

完全に文字が消えないため最低限の可読性を担保

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

明滅アニメーション自体は一般的ですが、
大きく分けると、文字が完全に消えてしまうアニメーションと、完全には消えないアニメーションとで分けることができます。

ソシャゲの場合、個人的には完全には消えないアニメーションが好みです。
完全には消えないアニメーションを好む理由は以下です。

  • 文字が完全に消えないため、最低限の可読性が担保されている
  • 明滅のコントラストが穏やかで目立ち過ぎない

あくまで個人的な好みです。
ゲームの世界観、ターゲットのペルソナ、ハードウェアの制限などでベストな選択肢は変わってくると考えています。

 

明滅速度は緩やか

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

「ヘブバン」の「TAP TO START」は緩やかな明滅アニメーションが付けられていました。

どの程度の明滅速度が良いのか、イージングの調整はどれくらいが良いのか、といった疑問については、特に正解は無く好みで判断する範疇かと考えます。

個人的な好みとしては、ソシャゲの「TAP TO START」の明滅速度は緩やかな方が好みではあります。
理由としては以下です。

  • 視線を集め過ぎないため

これくらいでしょうか。以下、補足します。
文字を素早く明滅させすぎると視線を集めすぎてしまう懸念があります。

昔のアーケードゲームは激しく明滅させていましたが、アーケードゲームの場合は技術的なハードルだけではなく、ゲームセンターと言う情報量が多い空間の中で、筐体に注目を集めるための手段として有効だったかもしれません。

そういった軸で考えた場合、コンシューマやソシャゲは、タイトル画面ではそこまで派手な訴求は不要だと考えます。

ソシャゲタイトル画面の主な目的としては以下3点があげられます。

  • ユーザーが操作に迷わない
  • 迅速にゲームを始めることができる
  • ゲームの世界観を魅力的に伝える


タイトル画面で注目を集める必要は無いと考えているため「TAP TO START」のアニメーションについては、ゲームの世界観を阻害しない表現に気を付ける程度で良いと思っています。

今回紹介した「ヘブバン」のタイトル画面は、淡い色調が綺麗なビジュアルのため、「TAP TO START」アニメーションもコントラストが淡い緩やかな方が似合うように感じました。

 

以上です。
タイトル画面の「TAP TO START」のアニメーションを検討する際の参考になれば幸いです。

 

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

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

 


権利者さまへ

 

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

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

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

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

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

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

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

 

お問い合わせ