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

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

「アイドルマスター シャイニーカラーズ Song for Prism(シャニソン)」ユニットごとではなく、アイドルごとにイメージカラーを設定しても被らないようにするためには『ユニット』という情報を利用し、文脈を生み出しているからかも

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

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


今回は「アイドルマスター シャイニーカラーズ Song for Prism」(以下「シャニソン」)からキャラのイメージカラーをUIに反映したデザインをご紹介します。キャラクターを訴求するタイプのゲームだと、しばしば見かけることがあります。

以下、概要です。

 

ユニット単位ではなくアイドルごとにカラーを用意

「シャニソン」はアイドルを育成するタイプのゲームですが、ユニット単位ではなくアイドルごとにイメージカラーが用意されていました。

f:id:appgameui:20240209085227p:image
▲ユニット「イルミネーションスターズ」のメンバーたち

このように同じユニットでもアイドルによって背景色が異なっています。
下位階層のキャラ詳細画面では、以下の要素の色を変えています。

  • ボタンを除く一部のUIパーツ
  • 文字
  • 背景

f:id:appgameui:20240209085212p:image
▲風野灯織:落ち着いた青系


f:id:appgameui:20240209085217p:image
▲櫻木真乃:明るいピンク


f:id:appgameui:20240209085222p:image
▲八宮めぐる:眩しい黄色

このようにUIを利用して、アイドルごとのイメージカラーを伝えています。
特に背景の色を変えることで、全体の印象が大きく変わっていると感じます。

 

一色に限定しない

画面を見ていると、使用している色を一色に限定していないことが分かります。
グラデーションを用いたり、使う場所によって色を変えるなどしています。
f:id:appgameui:20240209085212p:image
▲同じ系統色だけど、完全に同じ色ではない

もし、キャラのイメージカラーを任意の一色に定義してしまうと、以下のようなデメリットが大きくなる懸念が考えられます。

  • 柔軟さがなくなる
  • グッズなど、展開がしづらくなる

ある程度色の幅を用意し、厳密さが求められないようにしているのかもしれません。

 

髪の毛や瞳の色をサンプリングしている

イメージカラーの設定は、キャラクターの髪の毛や瞳の色をイメージカラーに設定しているケースが多いように見えます。

理由は半ば消去法にも考えられますが、推測してみました。

  • 髪色、瞳の色などは極端に変わらないのでイメージカラーのモチーフにしやすい
  • 同じ衣装を着た場合でも差別化しやすい
  • 全身図でもフェイスアップ時でも使いやすい
  • 色数を抑えやすく、画面内に並べたときに情報量も抑えやすい

とか…?

f:id:appgameui:20240412001020p:image

ただ、世界観やキャラによって変わってくると思います。
補色…とまではいきませんが、髪色に対して対照色相を採用するケースもあります。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲双方の色を際立たせやすい配色

 

ユニットごとにトーンを揃えている

「シャニソン」に登場するのは若い女性アイドルです。したがって、使える色にもある程度の偏りが生まれます。

微妙な色の差を理解してもらうために、「ユニット」という文脈を加えているように見えます。

例えば「赤」とだけ聞いたら真っ赤な赤、RGBで言うなら(255,0,0)辺りをイメージすると思います。

しかし、そこに「リンゴのような赤」「さくらんぼのような赤」「ルビーのような赤」という情報を加えることでイメージする色も変わってきます。

同様に、「ユニット」というの情報を加えることで「元気の良い赤」「落ち着いた赤」「透けるような赤」などの文脈が作用しているのかもしれません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲系統としてはピンク系ですが、それぞれユニットが異なるアイドル

 

キャライメージのカラー紹介

最後に「シャニソン」でのキャラごとのイメージカラーを紹介します。
事例を知ることで、読んでいる方のそれぞれの分析に役立てられないかと考えています。

f:id:appgameui:20240412001020p:image

f:id:appgameui:20240412001041p:image
f:id:appgameui:20240412001015p:image
f:id:appgameui:20240412001030p:image

f:id:appgameui:20240412000959p:image

f:id:appgameui:20240412001010p:image
f:id:appgameui:20240412001035p:image
f:id:appgameui:20240412001004p:image
f:id:appgameui:20240412001025p:image

 

 

以上です。
キャラごとにイメージカラーを設定する際の参考になれば幸いです。

 

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

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム(Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます)上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル(アイマス)

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

 

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

バンダイナムコエンターテインメントゲーム実況ポリシーです。アイドルマスター シャイニーカラーズ Song for Prismにも適用されています。2022年1月26日制定版です

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

 

お問い合わせ