CUDカラーユニバーサルデザインを学んだら、色々なことがわかった（色だけに）

##きっかけ
ランディングページや印刷物制作に関わる仕事をしており、せっかくなので多くの人にできるだけ見やすいコンテンツ作りができたらいいなぁと思っていました。
あと、所属してる会社で学習支援制度があって補助が出たりするのもあって「色彩検定 UC級」というのを受けようと思ったのがきっかけでUC・ユニバーサルカラーに触れてみました。

**色彩検定 UC級とは？**
![ph_event_seminar04_main_pc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54383/b855b328-1934-81bd-52ec-24339fa623c3.png)
（画像出典：https://www.aft.or.jp/feature/uc.html）
UCはユニバーサル・カラーの略。
CUD（カラー・ユニバーサル・デザイン）という名称のが浸透しているかもしれません。
色に関する知識＋様々な色覚を持った人にもわかりやすい色使いをしよう、といった内容を扱っています。
色彩検定の中では入門級という位置づけなので、デザイナー職じゃなくてもとっつきやすいと思います。

##ユニバーサルカラーを学んでみてわかったこと
 **“UC ユニバーサルカラー” で扱うのは機能としての色**
モノの色を決めるとき、大きく2種類の軸があると思います。
　① 温かみや洗練さなど、感情に訴えかける色使い
　② 信号に代表されるような危険・見分けやすさなど機能性を高めるための色使い
で、UCでは②の機能性に関する色使いを取り扱っています。


 **先天性の色覚異常を持つ人は結構いる** 
日本人男性の5%、女性では0.2% いるそう
（学校だったらクラスに1～2人いることになりますね）
欧米の白人男性だともっと多くて、8～10%と言われています。


**色覚異常を持つ人は、赤系統と緑系統が見分けづらい場合がある**
赤⇔緑や、ピンク⇔水色など、赤・緑系統の色合いが見分けづらいそうです。
ただし、色を認識する細胞の量によって、正常に近い見え方からほとんど赤や緑が認識できない場合まで、人により度合いはさまざま。
たとえば下記は赤みが認識できない場合の見え方の例です。
![shikikaku2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54383/8ae63129-45a9-6cf2-744b-aae195ca5ba1.jpeg)
一方で正常色覚の人より、色の明暗の差や輪郭の認識には敏感なことが多いそう。



 **おじいちゃんおばあちゃんは青系が認識しづらい** 
加齢による水晶体の黄変などにより、青系が認識しづらくなる。
また、細胞の老化により色のコントラストも見分けづらくなる。
車のヘッドライトが紫外線のせいで黄色く曇ってくるイメージに似てるかなと思います。
![shikikaku1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54383/ff1e49c3-b958-ec4e-c3a5-94adf0350c2f.jpeg)
こういったガスコンロの火などは見分けづらくなりそうですね。
高齢化社会でそういった人は増える傾向にありそう。

##で、どうすればCUD対応になるのか
一般色覚で見るとどちらでもそこまで大きな違いに感じられない色の違いでも、P型色覚の人が見ると違いがはっきりわかったりして、正常色覚から見ると結構微妙な調整が必要になります。
2018年に改正されたjis安全色のカラースキームを見てみてもわかると思います。
![2017-12-27-10.42.15-1024x510.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54383/2f3fd2c4-0e4b-e4f4-c2b7-fe6dd0c505e6.jpeg)
（画像出典：http://safetycolor.jp/）

ざっくり言うと
・コントラストをしっかりつけよう
・赤やピンクは黄みを含ませると見やすくなるよ
・色だけに頼らず、文字情報の併記や模様・柄なども用いて識別しやすくする
・・・などいろいろありますが、具体的なテクニックや考え方に言及すると長くなりすぎるので、下記文献をご参照ください。

▼「鳥取県のユニバーサルカラーガイドライン」がイラスト入りでわかりやすかったです。
（結構ボリュームあります）
https://www.pref.tottori.lg.jp/secure/954753/CDU01_CUD20.pdf

▼配色については「推奨配色セット」が参考になります。
https://jfly.uni-koeln.de/colorset/CUD_color_set_GuideBook_2018.pdf

▼個人的にぐっときたJR東日本の路線図
CUD対応の色使い・ハッチング(識別用模様)・罫線などを用いて、複雑な図をできる限りわかりやすく表示しようという情熱が感じられて好きです。
![アートボード 5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54383/f179aaea-f69f-ece7-a054-31bdda277244.jpeg)
(画像出典：https://www.jreast.co.jp/map/)



##自分の作ったモノがどう見えてるのか確認してみる
**PhotoshopまたはIllustratorで確認する**
Photoshop CS4以上を持ってる方は、下記で色覚ごとの見え方シミュレーション機能を使えます。
確認方法： `表示 → 校正設定 → P型色覚(赤が見えづらい) or D型色覚(緑が見えづらい)　`
![shikikaku3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54383/e19d33a9-f7ab-0857-ef52-0ac440b22725.jpeg)

**Chromeの拡張機能で確認する**
WEBページなどは拡張機能が即座に確認できて便利ですね。
[> Spectrum](https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb?hl=ja)



**iOS/Androidアプリで確認する**
印刷物などを確認したい場合はこういったアプリが有名ですね。
[> 色のシミュレータ](https://asada.website/cvsimulator/j/)

**実際にめがねをかけて体験してみる**
P型・D型色覚を体験できる色弱模擬フィルターゴーグルもあるようです。
[> バリアントール](http://www.variantor.com/jp/index.php)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54383/9d943277-afb3-bd50-ec1e-0d8aefa7e127.png)


##おまけ


 なぜ様々な色覚を持つ人がいるかの研究記事。長いけど面白かったです。

**Webナショジオ 「研究室に行ってみた。東京大学　色覚の進化　河村正二」**
https://natgeo.nikkeibp.co.jp/atcl/web/16/012700001/012700001/
> ↑ の記事、結論が気になる人への今北産業
> 自然環境の中で、野生の生物(肉食獣や虫など)は擬態やカモフラージュしていることがほとんど。そういった生死に関わるモノを見つける能力に関しては、色に惑わされず輪郭の認識や明暗に敏感な2色覚が優れている場合があったと考えられるため。