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

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

「ツミキボシ」色覚多様性対応の事例紹介。輪郭線や模様の濃淡で区別を図るデザインでした。

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

 

「ツミキボシ」の画面で色覚多様性対応どう対応してるのかな、と気になったので調べてみました

f:id:appgameui:20200531205918p:plain

こういった色だけしか情報が無い画面は危うい傾向があると感じています。

実際にPhotoshopのフィルタで確認してみます。 

f:id:appgameui:20200531211325p:plain

▲P型(1型)

 

f:id:appgameui:20200531211249p:plain

▲D型(2型)

緑と黄色を並べて比較しやすいようになってますが…P型はちょっと厳しい気がします。 

ゲーム中の画面も見てみます。

f:id:appgameui:20200531211854p:plain

▲樹木に実が生っています

通常はこういう見た目です。次にP型のフィルタで見てみます。

 

f:id:appgameui:20200531212518p:plain

色は…区別するのは厳しいですね。

ただ、輪郭線と模様の濃淡で多少区別はしやすくなっているように見えます。

f:id:appgameui:20200531212010p:plain

▲黄色というよりオレンジの実

 

f:id:appgameui:20200531212033p:plain

▲P型(1型)

 

f:id:appgameui:20200531212101p:plain

▲D型(2型)

 

輪郭線の色がハッキリしてます。
色だけだと区別を付けるのは難しい、ということで意識はされていたのかな、と感じます。

 

欲を言えば、図鑑の画面では緑と黄色の配置がさっきの画面と不統一を起こしているので、その点だけ注意したいです。

f:id:appgameui:20200531214803p:plain

 

とはいえ、比較対象がないとどうしても分かりづらいという課題は残りますが…。

f:id:appgameui:20200531215200p:plain

▲単一で見ると、緑か黄色か分からない…

 

正解はこちらです。

f:id:appgameui:20200531215040p:plain

▲ちなみに正解は「緑」

 

画面や素材を作っていて、色でしか情報を示せない場面があるかと思います。
(ソシャゲだと属性マークとか)

ツミキボシの場合は輪郭線と模様の濃淡で色の区別ができるように配慮されていました。

色覚対応は開発者なら知っておいて欲しい知識です。特にUIデザイナーは直接的にデータ作成に携わることが多いので、色覚対応できているか、一層注意する必要があります。

以上、色覚対応のデザインで困った際のご参考までに。