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

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

「アイドルマスター SideM GROWING STARS」画面を傾けて端末っぽいデザインを表現

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

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

 

今回は「アイドルマスター SideM GROWING STARS」(以下、サイスタ)から、アイドルとのトーク画面のデザインを紹介します!

 

端末をナナメに傾ける見せ方

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

「サイスタ」にはアイドルとトークを楽しめる機能が実装されています。

その画面に遷移した際、端末を斜めに傾けたようなデザインが採用されており、新鮮に感じられました。傾ける理由は没入感や新奇性だと考えられます。

アニメーションで見ると傾いていても文字の可読性はそこまで大きく損なっていないように見えます。

 

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

ただ、アイドルを選択するような可読性が重要に場面では、端末の傾きは抑えられています。

 

現実世界にあるチャットアプリを模したデザイン

f:id:appgameui:20220929205445p:image

この画面のUIは現実世界にあるチャットアプリを模しています。

似たUIを利用することで、画面上で何が起きているのかユーザーが直感的に理解できます。
また、現実世界の体験がゲーム内でも体験できている様な錯覚に陥るため、没入感を高める役割も果たしていると感じます。

アイドル一人一人違うデザイン

f:id:appgameui:20221009205802p:image

アイドルのプロフィールを見ると、それぞれに画像や自己紹介文が設定されています。
手間はかかりますが、

  • アイドル一人一人の存在感
  • 写真を使うことで現実に存在している感
  • アイドルの個性の表現

など、ゲームの没入感、デザインの説得力が高められると感じます。

いくつか事例を載せておきます。

 

f:id:appgameui:20220929205451p:image

f:id:appgameui:20221009205816p:image
f:id:appgameui:20221009205754p:image
f:id:appgameui:20221009205809p:image
f:id:appgameui:20221009210120p:image

それぞれのアイドルの個性が表現されていて、見ていて楽しい気持ちになります!

 

デザインはアドベンチャーパートにも使われている

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

端末を模したデザインはアドベンチャーパートにも使われていました。

 

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

アニメーションで見るとこんな感じです。

文字が斜めになっており、若干可読性は下がると感じるかもしれませんが、電話がかかっている雰囲気、ゲームの没入感を優先していると考えられます。

 

 

以上です。

アイドルのチャット画面のデザインをする際の参考になれば幸いです

 

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

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

 

 


権利者さまへ

 

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

アイドルマスター SideM GROWING STARS」のガイドラインを確認したところ、公式HPにて、ゲーム実況が許諾されている旨の記載がありました。

ガイドラインによると、ゲーム実況とは静止画をインターネット上で共有することも含まれています。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

アイドルマスター SideM GROWING STARS(サイスタ)の配信元であるバンダイナムコエンターテインメントのゲーム実況ポリシーです。2022年1月26日制定版です

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

 

お問い合わせ