こんにちは。東芝共創センターCreative Circuit®担当の池田です。
グラフィックデザインをバックグラウンドに、現在は東芝の共創センターの運営に携わっています。
 今回は「色覚・カラーユニバーサルデザイン」のお話をしたいと思います。前回の「コントラスト」に続く、「眼のしくみから、文字の読みやすさを考える」の第3弾です。

1.　カラーユニバーサルデザインとは？

さっそくですが、このような監視制御システムのUIがあったとしてどのような印象を持ちますか？

ぱっと見、黄色の文字が読みづらいな…と感じたかもしれません。このUIを改善したい場合、どこを修正するとよいのでしょう？
 
前回、明度のコントラストをつけることが、視認性を保つことに繋がる、というお話をしましたが、それをふまえると、黄色の文字は地のグレーとの明度コントラストが弱いため、読みづらいということがわかります。ですが、他にも考慮したいポイントがあります。それが今回のテーマの「色覚・カラーユニバーサルデザイン」です。
 
私たちは「自分が見ている色が他の人にも同じように見えている」と思いがちですが、実際は、色は人によって見え方が異なりますし、見え方の幅も広いのです。情報を見やすくデザインするためには、この「色の見え方の多様性」を正しく理解しておく必要があります。
 

２.　視細胞によって色の見え方が異なる

人の眼には光を感じるセンサーのような細胞があります。そのなかには３種類の錐体と呼ばれる細胞があり、私たちはその３つの反応の強さの組み合わせによって色を知覚しています。(錐体についてはこちら)この錐体の働きが人によって違うことで、色の見え方に違いが生まれます。

一般色覚であるC型色覚の他、1種類の錐体に起因する色覚として、赤錐体の働きに起因するP型、緑錐体に起因するD型、青錐体に起因するT型が存在します。また、２種類または３種類すべての錐体に起因するA型も存在します。
 

3.　どの色覚の方でも知覚出来るデザインとは？

冒頭で出てきたUIデザインを、もしD型色覚の方が見た場合、下図のような見え方になります。 

赤の「重故障」と緑の「平常運転」の区別がつきづらくなり、対処すべき状況に気づきにくい画面になっています。このようなUIデザインは事故に繋がる可能性があるため、避けなければならないのが分かります。
 
これを、どの色覚の方にとっても見やすくなるように修正したのが下図の例です。

「重故障」、「平常運転」、「軽故障」などのステータスが、見分けられるようになりました。また、「！」や「×」などの記号を併記することで、色以外でも緊急性の高い情報を伝えることが出来るようになりました。

4.　カラーユニバーサルデザインのチェック

デザインツールとしてよく使われるPhotoshopやIllustratorにも、色覚の多様性を考慮して見え方を確認する機能があります。こういった機能を使ったチェックを習慣づけると、色覚に配慮したデザインをすることが出来ます。

5.　もっと詳しく知りたい方へ |人間工学を学べる無料オンラインセミナー第３弾を開催します。

Youtubeでもご覧いただけます👇

 大学でも教鞭をとっている弊社のデザイナー井戸健二が人間工学に基づいた「読みやすさ」のデザインについて、やさしく分かりやすく解説する無料オンラインセミナーです。登録はこちらから。

第3弾の色覚・カラーユニバーサルデザイン編では、眼の仕組みと色の見え方の関係や、事例をより詳しくご紹介予定です。第１弾、第２弾を視聴していなくても今回の内容だけで十分にわかるようになっていますので、是非ご参加ください。
 
皆さまのご参加をお待ちしております！

6　さいごに

カラーユニバーサルデザインに精通したデザイナーによると、何度も確認しながら制作するうちに、感覚的に色覚に配慮した色が選択できるようになるそうです。それでも、最終的には必ず確認ツールを使って、誰もが使えるデザインになっているのかチェックすることが大切なのだそうです。
 
カラーユニバーサルデザインは、人の色の見え方の多様性を前提としたデザインです。国際化や超高齢化など、色覚にとどまらず社会は多様な人たちによって作られています。様々な違いを理解し、誰もが理解しやすい情報を届けることは、これからの社会にとても重要だと思います。
 
今後も「デザイナーが教える人間工学」について、noteでの発信やウェビナー配信をしていけたらいいな、と思っています。最後まで読んでいただきまして、ありがとうございました！
 
ライター：池田

※PhotoshopおよびIllustratorは、米国および/またはその他の国におけるAdobeの登録商標または商標です。