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