こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「アイドルマスター シャイニーカラーズ」（以下「シャニマス」）からＰ（プロデューサー）デスク画面のアイドルタブの画面をご紹介します。
一見して情報量が多く余白の少ない画面ですが、実は見やすくするための工夫がいくつも施された画面でした。
以下、概要です。
表示されている情報量は多い
この画面で表示されているアイドルは全員で26名です。使われている色数も多く、サムネイルも傾き、整列もされていないレイアウトです。
このような特徴から、賑やかで情報量の多い画面である印象を受けます。
では、分かりにくい画面になっているかというとそうでもなく、上手く情報を整理して任意のアイドルを見つけやすい画面にまとめられていると感じました。
色とレイアウトでグルーピングされている
早速ですが、この画面のデザイン上の工夫を紹介します。
以下の2点が主な工夫だと感じました。
- 「反復の原則」の利用
- 「近接の原則」の利用
まず、同ユニットのアイドルに使う色を統一し、ユニットのまとまりを表現しています。これは「デザインの四大原則」の中の「反復の原則」に当たります。
さらにレイアウトを細かく見ると、同じユニットに所属しているアイドル同士を近くに配置しています。いわゆる「デザインの四大原則」の中の「近接の原則」を利用しています。
近づける程度もかなり極端で、サムネイル同士が重なる程度に近づけているのが特徴的だと感じました。
このような特徴から、デザインの四大原則を利用した画面だと感じました。
マスキングテープの柄を利用し色弱対策も
ユニットごとに色を分けるだけではなく、模様を利用することでユニバーサルデザインに対応しているのも上手いデザインだと感じました。
もし仮にマーカーで枠を囲うデザインだったら色を分けるだけで終わり、模様を利用したデザインは利用できなかったと思います。
マスキングテープをモチーフにすることで自然と模様があるデザインに仕上げられています。
模様を利用することで見た目が華やかになるだけではなく、目の不自由なユーザーも区別しやすい画面になっています。
アイドルの名前の可読性を担保
全体的に賑やかな画面ですが、アイドルの名前の可読性には十分に配慮されているデザインだと感じました。
具体的には以下の点で可読性に配慮していると感じました。
- アイドルの名前の周囲には模様やイメージカラーを使わない
- 背景を白、文字をグレーにして文字の可読性を高めている
このようにアイドルの名前の可読性を高め、任意のアイドルを見つけやすくしているデザインになっていると感じました。
以上です。
情報量が多い画面だからこそ、何をどのように見せるのか慎重に情報を整理している画面だと感じました。
情報量の多い画面の見せ方に悩んでいる方の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「アイドルマスター シャイニーカラーズ」のガイドラインを確認したところ、以下の記載がありました。
当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム（Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます）上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。
【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル（アイマス）
ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
