カラーユニバーサルデザイン / color universal design

5abf9d4714b77a15beea063d08586560?s=47 howdy39
June 08, 2018
Design
0
170

カラーユニバーサルデザイン / color universal design

5abf9d4714b77a15beea063d08586560?s=128

howdy39

June 08, 2018
Tweet

More Decks by howdy39

See All by howdy39
5abf9d4714b77a15beea063d08586560?s=48 howdy39
3
290
5abf9d4714b77a15beea063d08586560?s=48 howdy39
5
5.7k
5abf9d4714b77a15beea063d08586560?s=48 howdy39
1
1.3k
5abf9d4714b77a15beea063d08586560?s=48 howdy39
0
110
5abf9d4714b77a15beea063d08586560?s=48 howdy39
0
41
5abf9d4714b77a15beea063d08586560?s=48 howdy39
0
65
5abf9d4714b77a15beea063d08586560?s=48 howdy39
0
32
5abf9d4714b77a15beea063d08586560?s=48 howdy39
0
83
5abf9d4714b77a15beea063d08586560?s=48 howdy39
1
650

Other Decks in Design

See All in Design
5478c15ea5fd291f3888b32652227cd5?s=48 futoshimotoyama
0
150
Ca63f6ee64787c337d905b069085324c?s=48 juliannaromero
0
150
Dab2423d06b31e4f3df80052b3faaa25?s=48 apolthomaier
0
120
F45687d759ee0ddbeb640eaff0389477?s=48 stevdraws
0
110
8957cabffe41ff244b2bbedec7330202?s=48 storybykyliegay
1
990
2fc9b2f4db2b09257417ddf0415be6a0?s=48 ikukamiya
0
250
5d6b856d87eac762ba8fb94a002f75af?s=48 storybychad
1
250
Ed8d0bfdd4badbac64cefb21a5c7ae88?s=48 allenzhangart
0
160
Aab4a3f4a7479c56027a9c9ca7bcbbaf?s=48 securecat
0
320
64a052fdeb28810747dafd0905b205a6?s=48 mkc
0
650
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
1
17k
12a87a7a977d621dd0029eee87846fd7?s=48 youjisakai
0
120

Featured

See All Featured
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.7k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
256
10k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
215
16k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
53
6k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
284
110k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
193
15k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.7k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
250
11k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
7
440
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
37
2.2k
79acae287842acf29084005533a7fb3b?s=48 hursman
103
9.1k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
154
11k

Transcript

  1. カラーユニバーサルデザイン 2018/06/08 第8回 TG社フロントエンド勉強会 Tatsuya Nakano(howdy39)

  2. カラーユニバーサルデザイン とは 色の見え方が一般と異なる（先天的な色覚異常、白内障、緑内障 など） 人にも情報がきちんと伝わるよう、色使いに配慮したユニ バーサルデザイン 出典: Wikipedia - カラーユニバーサルデザイン

  3. そもそも色とは

  4. そもそも色とは 380nm ～780nm 範囲の波長の電磁波を色（光）として認識 生物が物を判別するために脳内で色を付けている

  5. 目は可視光線（色）のセンサー

  6. 錐体細胞と桿体細胞 色を検知する → 錐体細胞 明るさを検知する → 桿体細胞

  7. 錐体細胞が反応する範囲の波長

  8. 錐体細胞の反応具合で色が決まる

  9. 色弱とは

  10. 色弱とは • 錐体細胞の反応する波長がずれている • 日本人の場合、男性 5% 女性 0.2% ※色盲 完全に機能していない錐体細胞があることを色盲と呼ぶ

    （3つとも機能していない場合はモノクロになる）

  11. 赤の錐体細胞がずれを起こしている場合

  12. 右に行けば行くほど差が大きくなる Common 多くの人 Protanomaly 第一色弱 Protanopia 第一色盲

  13. ロービジョンとは

  14. ロービジョンとは • 眼鏡やコンタクトレンズを使っても見ることが十分に視力があ がらず、生活に不便を感じる状態 • 日本には、100万人いるとも言われる ※ 緑内障などでの視野欠損の人などもロービジョンと呼ばれる

  15. ロービジョンの見え方（ボケて見えるタイプ）

  16. Webサイトで 色弱/色盲/ロービジョンの見え方を再現する

  17. NoCoffee Chrome 拡張機能 https://chrome.google.com/webstore/detail/nocoffee/jjeeggmb nhckmgdhmgdckeigabjfbddl

  18. Spectrum Chrome 拡張機能 https://chrome.google.com/webstore/detail/spectrum/ofcleme gkcmilinpcimpjkfhjfgmhieb

  19. カラーユニバーサルデザイン

  20. 色だけに頼ったUIにしない

  21. 色だけに頼ったUIにしない

  22. Protanopia（第一色盲）の見え方　

  23. Webでたまに見かける残念なUI 赤色の項目は必須入力です 姓： 名： 年齢： 性別： メールアドレス：

  24. 色だけに頼っていない良い例 • TVリモコンのカラーボタン • 東京メトロの路線図 • トリアージ • カレンダー

  25. 見分けやすい配色にする

  26. 配色 出来るだけ多くの人に見分けやすい配色を選ぶ ポイントは 赤と緑

  27. 配色の変更　 黒 赤 黒 赤 黄 黄 緑 緑 青

    青

  28. Protanopia（第一色盲）の見え方　

  29. コントラストを上げる

  30. コントラストを上げる Hello, World!! Hello, World!! Hello, World!! Hello, World!! Hello,

    World!! Hello, World!!

  31. ボケて見える人の見え方

  32. まとめ 視覚的弱者は全盲だけではない NoCoffee などの拡張機能を使えば、見え方の再現ができる 1. 色だけに頼ったUIにしない 2. 見分けやすい配色にする 3. コントラストを上げる

  33. 参考 色盲の人にもわかるバリアフリープレゼンテーション法 https://www.nig.ac.jp/color/gen/ 目に見える色は脳の幻想　 (￣◇￣;)ｴｯ・・!!! ( 生物学 ) - 無所属の時間で生きる・・・

    https://blogs.yahoo.co.jp/b_team_bb/31238266.html Web・アプリとカラーユニバーサルデザイン https://freshlive.tv/tech-conference/166044 カラーユニバーサルデザイン推奨配色セットガイドブック http://www2.cudo.jp/wp/wp-content/uploads/2016/10/CUD_Colorset_Guidebook.pdf WCAG2.0 コントラスト (最低限) https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html