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

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

「アイドルマスター SideM GROWING STARS」想定外の文字数が表示されるキャラクターのプロフィール画面

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

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

今回は「アイドルマスター SideM GROWING STARS」(以下、サイスタ)から、アイドルのプロフィールに柔軟に対応するデザインがありました!

レイアウトを考える時に最大文字数は考慮されますが、ソシャゲの場合はリリース後の更新やコラボなどの関係でかなりコントロールしづらいことが多いです。

そういった背景を踏まえた上で「サイスタ」のアイドルのプロフィール画面が面白かったので紹介します。

 

プロフィール画面はこちら

f:id:appgameui:20220929212145p:image

該当の画面はこちらです。
画面左にキャラクターのグラフィック、右側にプロフィールやステータスなどが表示されています。

画面左側には戻るボタン、右側には「アルバム」「参加楽曲」など、詳細情報を閲覧するためのボタンが配置されています。

多くのソシャゲに見る、ベーシックなレイアウトのように感じます。

 

ルビと誕生日に注目

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

そのベーシックなレイアウトの中で注目したいのは「キャラクターのルビ」と「誕生日」の項目です。

 

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

ただでさえ「アスラン=BBⅡ世」と9文字と長い上に、ルビは15文字になっています。
その中でも「BB」の箇所には「べぜるびゅーと」とルビが振られています。

これは他のキャラクターにはない特徴で、かなりイレギュラーな対応かと思いますが、レイアウトが崩れることなく収まっています。

 

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

続いて「誕生日」の項目を見てみます。

通常は「10月9日」のように「月日」だけが表示されることを想定しますが、このキャラの場合は「マヤ暦5174年」と8文字も追加の文字列が含まれています。

 

これは完全に想定外!

 

想定文字数を大きく上回る文字数かと思いますが、それでも文字を縮小することなく配置できています。

 

 

イレギュラーな文字数でも見事に配置

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

このようにかなりイレギュラーな文字列が入力されているのにも関わらず、比較的きれいなレイアウトが担保されている点が素晴らしいなと感じました。

また、どういった文字列が入力されるかを事例を知り、想定することで、より強固なレイアウトをデザインすることにも繋がると考えました。

 

 

以上です。

キャラクターのプロフィール画面をデザインする際の参考になれば幸いです

 

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

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

 

 


権利者さまへ

 

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

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

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

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

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

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

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

 

お問い合わせ