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

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

「アイドリッシュセブン」キャラのイメージカラーをUIパーツに取り入れて、分かりやすく感じたところ

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

 

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

 

今回は「アイドリッシュセブン」こと「アイナナ」から、キャラクターごとのイメージカラーをUIに取り入れたデザインを紹介します!

イメージカラーをUIに取り入れるデザインはアイドル系というか、キャラクターの魅力を前面に押し出すゲームではしばしば見かける気がします。

 

このデザインにより以下の特徴があると感じました。

  1. 名前とイメージカラーが結びつくことで、より直感的に理解できる
  2. 複数人が画面に登場している時に誰の台詞かが分かりやすい
  3. 色覚多様性対応にも配慮

 

該当の画面はこちらです。
UIにイメージカラーが使われている画面はいくつかありますが、今回は会話シーンの画面を例にして紹介します。

f:id:appgameui:20220824005445p:image

 

 

1:名前とイメージカラーが結びつくことで、より直感的に理解できる

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

キャラクターとイメージカラーが結びつくことで、誰の台詞なのか、より直感的に理解できます。

例えば「りんご」と「りんご」で比較した場合、どちらの方がりんごをイメージしやすいか、という話に似ているのかな、と思います。

ゲームだと「風属性」「水属性」というように属性と色を結び付けている例も珍しくありません。

 

同様に、ユーザーがキャラクターとイメージカラーの関連付けができた場合、「七瀬陸」よりも「七瀬陸」の方がより直感的な理解に繋がると考えます。

 

2:複数人が画面に登場している時に誰の台詞かが分かりやすい

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

「アイナナ」の会話シーンでは複数人のキャラクターが同時に表示される場合があります。例えば、上に添付した場面では7人のキャラクターが同時に表示されています。

会話シーンにおいて、話者名が表示されているだけでも十分に分かりやすいデザインですが、色を利用することで話者名を読み取らなくても誰の台詞かが分かります。

 

一般的に文字を読まなくても理解できると認知コストが下がります。

 

3:色覚多様性対応にも配慮

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

よく見ると、色だけではなく、キャラクターごとに専用のマークが用意されています。
色だけの情報だと、色覚多様性対応としては不十分に感じる場面が考えられます。
このようなマークを利用することでより多くのユーザーの分かりやすさに繋がっていると感じました。

 

 

 

まとめ

まとめると「アイドリッシュセブン」のキャラクターごとのイメージカラーをUIに取り入れたデザインについて感じたことは以下です。

  1. 名前とイメージカラーが結びつくことで、より直感的に理解できる
  2. 複数人が画面に登場している時に誰の台詞かが分かりやすい
  3. 色覚多様性対応にも配慮(マークの採用)

 

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

最後にUIにイメージカラーを取り入れた際の影響範囲の目安の参考までに、会話シーン以外でキャラクターのイメージカラーを取り入れた画面をいくつか紹介します。

f:id:appgameui:20220828130854p:image
f:id:appgameui:20220828130829p:image
f:id:appgameui:20220828130842p:image
f:id:appgameui:20220828130859p:image

 

 

以上です。

キャラクターごとのイメージカラーをUIに取り入れたデザインを検討する際の参考になれば幸いです。

 

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

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

 


権利者さまへ

 

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

アイドリッシュセブン」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

 

【2022.01.12追記】「アイドリッシュセブン」コンテンツ利用ガイドライン - 【公式】アイドリッシュセブン

 

主な参照箇所を抜粋します。

(1)画像について

・コンテンツ内で使用している一次創作物は、過度の加工等を行わない限り、WebブログやSNSなどで私的利用範囲での掲載をいただいても問題ございません。
ただし、シナリオの過度なネタバレに繋がるものや、掲載の結果アイドリッシュセブンのイメージを逸脱・誤認させる、またアイドリッシュセブンのイメージを損なうことがないようご配慮ください。

イベントストーリー
過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)は禁止といたします。

 

ラビチャ、RabiTV
ラビチャ、RabiTVについては過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)はお控えください。

ただし、以下の範囲内に限り、ラビチャ、RabiTVの感想をSNS等で発信・発言いただけるものとします。
その場合は、ラビチャ、RabiTVの特性や未読の方へのご配慮をお願いいたします。

・感想を伝えることを目的とした発信が前提で、以下の掲載枚数に収まっていること

ラビチャ:通常画面表示で4枚まで、もしくは全画面表示で1枚まで
RabiTV:通常画面表示で4枚まで、ログ表示での掲載は禁止

※既定の枚数以内の場合でも、おおまかな内容がわかるような掲載は禁止いたします。
※動画の公開は禁止いたします。

 

 

アイドリッシュセブンのコンテンツ利用ガイドラインです。2022年1月12日更新版です

 

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

 

お問い合わせ