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

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

「三国ドライブ」アイテムのカラーバリエーションを展開する時に色覚多様性対応の視点で注意したいこと

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

 

「三国ドライブ」のアイテムデザインが色覚多様性対応の視点から見たときに懸念がありました。デザイナーが陥りがちなアンチパターンとして紹介してみます。

 

  • アイテムのカラーバリエーションを作る機会のある方
  • カラーバリエーションを発注する方
  • カラーバリエーションを監修する立場の方
  • 色覚多様性対応に興味のある方

など、広く知ってもらいたいな、と思っています。

 

三国ドライブのタイトル画面です

 

早速ですが、該当のデザインはこちらです。

P(protanopia)型だとこんな感じに見えます。

P型の見え方をシュミレーションした画像です

上の「桃桜の神盃」のほうはちょっと区別つかないですね。
下の「鬼玉の指輪」は色は分からないものの、光沢の差分が手掛かりになりそうな…

 

D(deuteranopia)型だとこんな感じでした。

D型の見え方をシュミレーションした画像です

こちらの場合も「桃桜の神盃」のほうは区別は難しいです。
鬼玉の指輪」はちょっとP(protanopia)型と比較すると少しだけ区別しやすいかな。

 

最後にオリジナルの画像を載せます。

f:id:appgameui:20201025202436p:image

元のデザインもちょっと見分けづらいな!?

 

盃の色を変えているのは分かりますが、色が変わっている面積が狭いようです。
中に入っている液体部分も含めて色を変えてあげるか、盃の色がもっと見える構図に変えた方が良いかもです。

桃桜の神盃の部分をトリミングした画像です

 

まとめると!

 

カラーバリエーションを作成する際は

  • 変更する色の面積を大きくする
  • 1色だけ変更するのではなく、2色以上変更する

などすると、色覚多様性の対応も受けれるのではないかな、と思います。

変更する色の面積が小さければ差分が分かりづらいですし、
1色だけ変えるデザインだと、色の組み合わせの数が少なくなります。

 

以上です。

色覚多様性対応の参考になれば幸いです。