こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からアイドルの情報をフィルタする画面のデザインをご紹介します。
名前だけではなく、顔アイコンがあるとより直感的に分かりやすくなるのかも、と感じました。
何度か同じようなデザインを紹介しているので、興味があったら他のタイトルのデザインも見ていただければと思います。
以下、概要です。
顔アイコンが表示され直感的に分かりやすい
「シャニソン」のアイドルたちのフィルタ画面は、アイドルたちの名前だけではなく顔アイコンやユニットのモチーフも表示されています。
直感的に分かりやすく伝える工夫がされていると感じました。
アイドルたちの名前を覚える前のユーザーにとって分かりやすい
▲名前が表記されているのでわかりやすい
アイドルの顔アイコンの隣にアイドルの名前が表示されている点も、分かりやすいデザインだと感じました。
アイドルの数が多いと最初から全員の名前を覚えるのは困難かなと思います。
実際、この画面で表示されるアイドルは2024/3/7時点では28名います。
全員の名前を覚えるのはしばらく時間がかかりそうです。
アイドルの中には初見で読めないキャラクターもいますし、ユーザーの年齢によっては学校で習っていない漢字が使われているケースもあります。
顔アイコンを表示することで学習コストが抑えられ、名前が読めなくても任意のアイドルを選択することができます。
キャラのイメージカラーは取り入れられていない
「シャニソン」のフィルタ画面をよく見ると、アイドルごとのイメージカラーは取り入れられていません。
▲「シャニソン」のフィルタ画面
「シャニソン」よりも前にリリースされている「シャニマス」にはイメージカラーが採用されています。
▲「シャニマス」ではアイドルごとのイメージカラーが採用されていた
イメージカラーよりもアイドルの顔アイコンの優先度を上げたかったのだろうか…？
アイドルの顔アイコンの優先度を上げたかった可能性
先ほど「イメージカラーよりもアイドルの顔アイコンの優先度を上げたかったのだろうか…？」と書きましたが、それを裏付ける材料として「チェックボックスと顔アイコンの大きさの違い」があげられます。
「シャニソン」の画面をよく見ると、チェックボックスよりも顔アイコンの方が大きくデザインされています。
▲「シャニソン」はチェックボックスよりも顔アイコンの方が大きく目立つデザイン
▲「シャニマス」は顔アイコンよりもチェックボックスの方が大きく目立つデザイン
もしかすると、イメージカラーで区別するのではなく、アイドルの顔アイコンで区別できるようにしたいと考えたのかもしれません。
通常、人が何かを見る時は、まず色の情報が入り、次にその物体が何かを認識します。
色の情報が強すぎるとアイドルの顔アイコンの情報が埋もれてしまう懸念があります。
このような考えで、「シャニソン」では色やチェックボックスの情報量を減らし、相対的にアイドルの顔アイコンが目立つようにしたかったのかもしれません。
以上です。
タイトル画面をデザイン、運用する際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。
当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム（Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます）上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。
【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル（アイマス）
ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
