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

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

「ヘブンバーンズレッド」ホーム画面でキャラを目立つ配置にしてるけど、キャラの目を閉じさせることで過度にユーザーの視線を集めずボタンにも視線を向けやすいデザイン

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

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

 

今回は「ヘブンバーンズレッド」、(以下、ヘブバン)からホーム画面に配置するキャラクターのデザインを紹介します。

主な特徴は以下です!

 

f:id:appgameui:20230510133723p:image

 

 

キャラクターを画面中央に大きく表示して世界観を表現

画面をぱっと見た時、画面中央にキャラクターが表示されているのが目に留まるかと思います。

多くのソシャゲはホーム画面にキャラクターを表示させますが、世界観の表現させるために採りやすい手段の一つかなと感じます。

またホーム画面は頻繁に遷移する画面であるため「単純接触効果」を狙い、キャラクターに対してポジティブな印象を抱くように誘導する意図もあるのかもしれません。

 

 

円で囲うことで配置に余白と秩序が生まれる

キャラクターの周囲に表示されている細い線にも注目です。

この線があることでボタンの配置に対して一種の基準線のような働きをしているように感じました。

一般的にボタンを直線に揃えると、落ち着いた印象、静的な印象を与えます。
反対に、ややバランスを崩した配置にするとレイアウトに動きが生まれ、リズム感、楽しい印象を与えます。

「ヘブバン」のホーム画面は色数も少なく抑え、基本的には直線で揃える類のデザインで構成されているため、落ち着いた画面になっています。

ただ、メインボタンだけリズムを生む配置にすることで画面にメリハリを生み、絶妙なバランスを生み出しているように感じます。

 

仮に、この細い線が無いと、基準線が失われ、メインボタンがやや無秩序な印象が強まるかと思います。

 

 

キャラの目を閉じさせることで視線を過度に向けない

「ヘブバン」ではホーム画面中央にキャラクターを表示させていますが、目をつぶっているのが興味深く感じました。

人間は本能的に他人からの視線に敏感です。
そのため、仮にキャラクターの目が開いていた場合、ユーザーはキャラクターに視線を向けてしまいます。

画面中央に配置しつつ、過度にユーザーの視線を集めない、という工夫を感じさせます。その結果、ボタンなどに視線を向けやすくなっていると感じました。

 

 

以上です。
キャラを表示するホーム画面のデザインをする際の参考になれば幸いです。

 

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

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

 


権利者さまへ

 

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

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

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

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

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

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

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

 

お問い合わせ