Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

howdy39
June 08, 2018

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

howdy39

June 08, 2018
Tweet

More Decks by howdy39

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

  3. そもそも色とは

    View full-size slide

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

    View full-size slide

  5. 目は可視光線(色)のセンサー

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 色弱とは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. ロービジョンとは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Protanopia(第一色盲)の見え方 

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Protanopia(第一色盲)の見え方 

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide