こんにちは。株式会社ゼストでプロダクトデザインを担当している長沢です。
ゼストのプロダクトデザイナーとしての主な役割は、顧客のヒアリングから業界の課題を見出し、顧客に分かりやすく伝えるための情報設計、提供しているプロダクトが抱える問題解決をUI/UXを通して機能的にデザインすることです。
そんなプロダクトデザイン業務で意識していることのひとつ、「色覚多様性に配慮した配色」について今回は考えてみたいと思います。
色覚多様性とは
色覚とは、私たちの目が光の波長を感知し、色を認識する能力を指します。人間の目には、主に3つの種類の錐体細胞があり、それぞれ赤、緑、青の波長の光に対して感度があります。この3つの錐体細胞の組み合わせによって、私たちは様々な色を識別することができます。
しかし、人々の錐体細胞のタイプや感度には個人差があり一部の人は特定の色を区別するのが難しい場合があります。これが色覚多様性です。
色覚多様性は、個人の体験に影響を与えるものであり、デザインやアクセシビリティの観点からも重要な要素となります。色覚多様性を理解することで、より包括的なアプローチを取ることができるため、デザインや情報の伝達において配慮することが重要です。
色覚タイプ
日本人の場合、男性では20人に1人、女性では500人に1人の割合で一般的な色の見え方とは違った色に感じている人がいます。
先天赤緑色覚異常の発生頻度は、日本人では男性の5%、女性の0.2%です。つまり、男性では20人に1人、女性では500人に1人の割合です。決してまれではありません。ちなみに、白人における発生頻度は8 ～ 10%とされています。女性の場合は、色覚は正常であっても、保因者といって先天赤緑色覚異常の遺伝子をもっていることがあります。この保因者の頻度は10%、10 人に1人です。
参照：冊子「色覚異常を正しく理解するために」 | 色覚関連情報 | 公益社団法人 日本眼科医会
特性に応じた色の見え方は以下のタイプに分けられます。
C型色覚（Cipher）
ほとんどの人が持つ色覚タイプ。
P型色覚（Protanopia）
赤と緑の色を区別するのが難しい状態。
D型色覚（Deuteranopia）
緑と赤の色を区別するのが難しい状態。P型色覚に近い見え方をする。
T型色覚（Tritanopia）
青と黄色の色を区別するのが難しい状態。※割合はごく少数。
A型色覚（Achromatopsia）
色を全く感知することができない状態。※割合はごく少数。
配色の考え方
色覚多様性を配慮したデザインを行う場合、色だけで違いを出すことはおすすめできません。文字やマーク、テクスチャを使用するなど色に依存しない別の方法で表現できないかを検討するべきです。色で解決をする方法は最終手段とするべきでしょう。
しかし、今回は敢えて色だけで色覚多様性に配慮したデザインを考えてみたいと思います。
条件
- 色だけで表現するためP型・D型・T型を対象とし、A型については対象外とする。
- 隣り合ったカードを視覚的に別のカードとして認識できるかをゴールとする。
- マジカルナンバー4±1(※1)の考えに基づき、使用するカラー種は4色までとする。
※1: 心理学者ネルソン・コーワンによって提唱された理論
配色パターン：1
緑色・黄緑色・黄色・オレンジ色の4つの配色で試してみます。
全体的に色の違いが分からない組み合わせになってしまいました。
とくにP型・D型では、カードB・カードCの違いを色だけで認識することはほぼ不可能です。P型・D型を考慮すると、緑色、黄色、オレンジ色の組み合わせは相応しくないことが分かります。
暖色だけの配色では色覚多様性に配慮して別のカードとして認識させることは難しく、緑系統の色はP型・D型では、グレーに近い色になってしまいます。
次は、寒色と暖色を使って表現してみましょう。
配色パターン：2
水色・青色・赤色・黄色の4つの配色で試してみます。
配色パターン：1よりも違いを感じられるようになってきました。
ただ、全体通してカードAとカードBの違いが若干分かりにくように感じます。T型は特に差が無いように見えます。P型・D型のカードCの赤色はグレーに近い色味に見えます。また、T型のカードDは色の違いは感じますが、他のカードに比べてかなり薄く見えるのが気になります。
ここまでくると、色の種類だけで調整するのが難しくなってきました。今後は明度を調整してみましょう。
配色パターン：3
配色パターン：2の「青色」と「黄色」の明度を低くして調整しました。
P型のカードB・カードCの違いがやや分かりにくいのが少々気になりますが、全体的に差を感じるようになりました。
まとめ
- 暖色同士・寒色同士の色は見分けがつきにくいため、暖色・寒色を組み合わせて調整すると差を付けやすい。
- P型・D型では緑色と赤色はグレーに見えるので一緒に使わない。
- 明度の調整でさらに色の差を付けると効果的。
- 色だけで表現する場合は3色程度が限度。
最後に
色覚多様性に配慮して、色だけで差別化をする事はやはり難しい印象です。色を使わなくて済むのであれば別の手段を検討した方がより良いユーザー体験を提供できると思います。
今回は色覚多様性をテーマにした配色について考えてみました。今後もこのようなデザインに関する考察や情報、開発の裏側の話など発信していけたらと思っています！
