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

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

「あんさんぶるスターズ!!Music」メニューのUI改修、7つの変更点

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

 

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

 

今回は「あんさんぶるスターズ!!Music」、通称「あんスタ」のメニュー画面のデザインを紹介します。

 

該当の画面はこちらです!

f:id:appgameui:20211024055227p:image

 

このようにボタンが並んでいるだけではなく、ビルのフロアにショップやアイドルルームが入っているように見えるデザインになっていました。

配置するだけではなく世界観を表現するデザインだと感じました。

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

 

 

…という感じで記事の下書きをしていたのですが、今日見たらデザイン変わってました。そんな事もある。

f:id:appgameui:20211029093830p:image

 

 

せっかくなので新旧のUIを比較してデザインの意図を探ってみたいと思います。
レイアウト面、ビジュアル面で分けて考えてみます。

 

レイアウト

1:イベント類の導線が増えている

追加された導線があるのが特徴的です。

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

 

こちらの3つですね。

  1. ミッション
  2. イベント
  3. ミニイベント

この3つの導線が追加されています。
アクセス可能なポイントを増やして、より利便性を高めようとする意図が感じられます。

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

 

続いてビジュアル面についてみてみます。

ビジュアル

1:画面下部に濃い青を追加

画面下部に濃い青い面が追加されています。
色が増えることで情報量も増しているのですが、これは情報のグループ分けを狙っているように感じました。

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

 

今までのメニューは全面が白で統一され、抜け感があり画面を広く感じるデザインでした。今回のデザインは情報量が増えた分、情報の優劣をしっかりと付けようとする意図が感じられました。

新しいデザインの方がショップやアイドルルームと言ったメインの機能に視線が向くかと思います。

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

 

2:背景を空から無機質なものへ

背景が青空から無機質な模様に変わっているのも大きなデザイン変更です。
これは恐らくアプリの容量削減に繋がる改修かなと思います。

元々の画像は画像サイズが大きく、最適化にも限界があるデザインでしたが、新しい背景は画像を小さくすることができるデザインです。

これにより、アプリに入れておく画像を少なくすることができます。

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

 

3:ボタンのカラーが明確に

今回のデザイン変更ではボタンに付いている色が濃くなっています。
元々は薄く付いていたのですが、それがよりハッキリと分かるように変更されています。

より元気のあるデザインに見るだけではなく、色が識別しやすくなることでボタンと色の関連付けもより強く結びつけやすくなると考えられます。

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

 

4:ボタンのデザインを吹き出しから矩形に変更

ボタンのデザインが吹き出し型から矩形に変更になっています。
元々ビルのどのフロアに施設が入っているか、方向を示すデザインでしたが、ビルを無くしたことで吹き出しにする理由も失われたと考えます。

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

 

5:一部アイコンデザイン変更

いくつかのアイコンデザインも変更になっていました。

  • データ管理室
  • ショップ

この2つは分かりやすい変更です。
詳細は分かりかねますが、アイコンの情報量が増えているのでリリース当時よりも扱うコンテンツの量や種類が増えたのかなと感じました。

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

 

 

「アプリ設定」「ライブ設定」のアイコンも少しだけ変わっています。
歯車と端末や音符のサイズ比率が変わっており、情報の主従を変えようとしている意図が感じられます。

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

 

 

6:ボタンサイズの縮小と文字の視認性の調整

さらによく見ると画面下部にある「アプリ設定」「ライブ設定」「ヘルプ」「タイトル」などのボタンが小さくなり、アイコンや文字が少しだけ太くなっていることに気付きます。

恐らく情報の優劣の一環かと思われますが、ボタンサイズを若干小さくしています。

その影響で文字やアイコンの視認性を高めようとして、太くしたのかもしれません。
かなり細かい調整をしている様子が伺えます。

これくらい細かい調整であれば多くのユーザーは気づかず、ストレスもあまり与えないのではないかなと推測します。

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

 

このように、一見しただけでは気付かない細かなデザインの変更がなされています。
私が見落としているだけで、他にも細かな変化があるかもしれません。

もし発見されましたらコメント欄にて教えていただけると幸いです。

 

 

以上です。

デザイン変更をする際の参考になれば幸いです。

 

 

 

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

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

 

当ページは、Happy Elements株式会社「あんさんぶるスターズ!!Music」の画像を利用しております。
該当画像の転載・配布等は禁止しております。
©Happy Elements K.K

 


権利者さまへ

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

あんさんぶるスターズ!!Music」のガイドラインを確認したところ、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。

 

コンテンツ利用ガイドライン | Happy Elements株式会社

② インターネット上での利用について
非営利目的の場合においては、当社ゲームを題材としたWebサイト等を自由に制作していただいて問題ありません。 Webサイト及びSNSや画像・動画共有サイトへの投稿での利用に限り、ゲーム内で使用されている画像を含んだスクリーンショット画像やストーリーシナリオ等をご利用いただいて構いません。また、趣味の範囲で利用し、原材料費程度の対価・利益を得る場合においても非営利目的の範囲内とします。

ただし、以下の場合においては利用を禁止させていただきます。

  • 当社ゲームのイメージを著しく逸脱する、または損なう内容を含むもの
  • 当社ゲーム内で使用されている画像の過度なリサイズ、編集加工
  • スクリーンショット画像・プレイ動画を除く、直接的に各コンテンツの素材(イラスト、動画、音声、楽曲等)をコピー、スキャン、サンプリング、トレース等を行い使用すること
  • 当社ゲーム内で使用されている画像またはシナリオの閲覧、楽曲の視聴のみを主目的としたWebサイトやブログ記事での利用
  • 当社、もしくは当社ゲーム公式や公認と詐称しての活動、またはそのように誤認するおそれのある表示、外観、状況を利用しての活動
  • その他当社の各ゲームで個別に禁止されている利用方法
  • 当社ゲームを題材としてWebサイトを公開される場合は、必ず以下のように著作権者の表示と再利用の禁止を明記してください。
    (○○○○○はゲームタイトル)

    当ページは、Happy Elements株式会社「○○○○○」の画像を利用しております。
    該当画像の転載・配布等は禁止しております。
    ©Happy Elements K.K

 

よくある質問 | SUPPORT | あんさんぶるスターズ!!

【Basic/Music共通】ゲーム内画像を加工したり、他者への配布・SNSでの公開をしてもよいでしょうか?


ゲーム内画像の加工について、コンテンツ利用ガイドラインの定める範囲での個人による利用は問題ありません。
画像の加工に関する基準は、コンテンツ利用ガイドラインの内容を遵守しお客様の良識に基づくご判断をお願いいたします。

再配布については、加工の有無を問わず、いかなる場合でも許可しておりません。

編集や加工を行った画像のSNSへの公開については、そのことを以て再配布とみなすことはありませんが、コンテンツ利用ガイドラインの内容を遵守のうえ、お客様の良識に基づきご判断ください。

 

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

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

 

お問い合わせ