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

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

「ヘブンバーンズレッド」色とアニメーションを利用して、画面内でとても目立つ時限式のボタンデザイン

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

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

 

今回は「ヘブンバーンズレッド」、(以下、ヘブバン)から一定時間選択しないと自動的に決定される、時限式のボタンを紹介します。

主な特徴は以下です!

 

コントラストが強いから目立つ

f:id:appgameui:20230413095501p:image

この画面は戦闘終了後に連戦するかを聞かれる画面です。
この画面を見ると「もう一度プレイする」のボタンが一番目立っているかと思います。

いくつか要因は考えられますが、個人的には画面内でコントラストが強い配色が採用されている点が最も強い要因かと思います。

画面を見ると、黒紫と赤紫のボタンが並んでいることが分かります。黒紫のボタンは背景と馴染んでいるため、相対的に赤紫のボタンに目線が行きます。

 

動いているから目立つ

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

アニメーションで見るとこんな感じの挙動です。
よく見るとゲージが動いていることにも気付くかと思いますが、認知する順番としてはまず色を認識し、続いてアニメーションを認識する、という順番かと思います。

 

最初に認知するのは色だとしても、アニメーションしている点もしっかりと視線を集めているかと思います。

人間の特性として、動いているものには注意が向く、という特性があります。
この画面の場合、背景などを除いて動いているのはこのボタンのみです。

動かせば良い、というわけではありませんが、

 

ゲージがあるのでどの程度待てば良いか分かる

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

ゲージが最大まで溜まると決定と見なされ、ボタンを押下した時と同じ挙動になります。ゲージがあることでどの程度の時間待てば良いのかが直感的に伝わります。

秒数を表示しカウントダウンするデザインもありますが、数字をここに表示するとかなり情報が増えるため、ごちゃごちゃし過ぎてしまうことを避けたかったのかもしれません。

 

 

以上です。
時限式のボタンをデザインする際の参考になれば幸いです。

 

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

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

 


権利者さまへ

 

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

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

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

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

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

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

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

 

お問い合わせ