![見出し画像](https://assets.st-note.com/production/uploads/images/95221002/rectangle_large_type_2_02cb4b0ea83f2afcde4fb0123c1c4418.png?width=1200)
UIデザイナーのメモ帳(4)
色覚サポート
『パズドラ』には「色覚サポート」という機能があります。色覚異常を持った方のための機能です。
「色覚異常」—— Wikipedia
驚くのは色覚異常を持った方の割合です。Wikipediaによると、
先天性色覚異常を持つ人は、日本においては男性で約5%、女性で約0.2%の割合であるが、フランスや北欧では男性で約10%、女性で約0.5%であり、アフリカ系の人では2-4%程度である。
〝フランスや北欧の男性で10%が色覚異常〟というのは無視できない数字です。日本の男性も20人に1人(1クラスに1人くらい)。
なるべく多くの人にゲームを楽しんでもらいたいので、「色覚サポート」は素晴らしい機能だと思います。
どのように見えるのか。これが分からないとなかなかUIも考えられません。Photoshopで簡単に再現できる機能がありました。
何でも良いのでカラー写真をPhotoshopで開いてみてください。開いたら一番上のメニューバーから「表示」>「校正設定」>「P型(1型)色覚」/「D型(2型)色覚」を選択すると見ることができます。
見た時ショックでした。色々な色が失われた世界。『パズドラ』のように色が重要なゲームだと、確かにサポートが必要です。
実際にゲーム画面で見てみましょう。通常だとこう見えます。
![](https://assets.st-note.com/img/1673225806369-DMIcU51Kqh.png?width=1200)
「色覚サポート」をONにすると色がキツめになりました。
それではPhotoshopで「P型(1型)色覚」にしてみます。
![](https://assets.st-note.com/img/1673225892971-XW3JN6Der6.png?width=1200)
色覚サポートONの方が色の差が強くなり、区別がつきやすくなっています。
■ UIデザインで注意すること
私たちUIデザイナーにできることは何か。
「色のみで表現するのを避ける」
例えばソシャゲで多い〝属性〟表示。もし『パズドラ』の属性が色だけで表現され、模様が入っていなかったらどうなってしまうでしょうか。
![](https://assets.st-note.com/img/1673226369120-KWPmBj9W38.png?width=1200)
どれがどの属性か分かりません。実際は闇・光・火・水・木の順に並んでいます。火などの模様が重要だということがよく分かります。
他にも装備で武器を選択する時、装備後の攻撃力が書かれていたとします。青色で「150」。装備前より上がるのでしょうか。下がるのでしょうか。これを「150 ▲」としてあげるとどうでしょう。色で判断できない方にも、「装備前より上がるんだな」ということが分かるようになります。
■ まとめ
「色覚サポート」を用意できるできないにかかわらず、色のみで判断させるUIは避ける。必ず「色」+「情報(形や言葉など)」で表現する。
忘れないようにしたいです。
この記事が気に入ったらサポートをしてみませんか?