エンジニアが配色について気を付けられること - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会

Transcript

1. Copyright © NIFTY Corporation All Rights Reserved.
 エンジニアが配色について気を付けられること
 重（かさね）
 ニフティ株式会社 システム統括部

2. Copyright © NIFTY Corporation All Rights Reserved.
 2
 目次 03
 人が色を判断する仕組み
 01
 自己紹介
 02
 エンジニアが配色について気を付けられること
 

3. Copyright © NIFTY Corporation All Rights Reserved.
 自己紹介
 01
 3

4. Copyright © NIFTY Corporation All Rights Reserved.
 自己紹介
 4
 重（かさね） 名前
 業務でフロントエンドを触れられてない ですが、気ままにデザイン勉強中 一言
 システム統括部 基幹システムグループ 所属

5. Copyright © NIFTY Corporation All Rights Reserved.
 現在の提供サービス ネットワークサービス WEBサービス インターネット回線 生活インフラを支える 生活を豊かにする メディア・コンテンツ 会員 オプションサービス 格安スマホ 5

6. Copyright © NIFTY Corporation All Rights Reserved.
 現在の提供サービス ネットワークサービス WEBサービス インターネット回線 生活インフラを支える 生活を豊かにする メディア・コンテンツ 会員 オプションサービス 格安スマホ 6

7. Copyright © NIFTY Corporation All Rights Reserved.
 エンジニアが配色について気を付けられること
 02
 7

8. Copyright © NIFTY Corporation All Rights Reserved.
 背景
 8
 ある日の私の反省
 これ、チェックマークが 見づらくないですか？ チェックマーク見えてますよ！ 問題ないです！ そうですかね… 分かりました！
9. Copyright © NIFTY Corporation All Rights Reserved.
 背景
 9
 見えづらいと思ったのは気のせいだったのだろうか…？
 少し感じた見えづらいをどうやって説明すればいいんだろうか…？
 

10. Copyright © NIFTY Corporation All Rights Reserved.
 エンジニアが配色について気を付けられること
 10
 コントラスト

11. Copyright © NIFTY Corporation All Rights Reserved.
 エンジニアが配色について気を付けられること
 11
 コントラスト 文字と背景が見やすいコントラスト比 3:1～ or 4.5:1～ ※コントラスト比：明るい色と暗い色の輝度の比率 コントラスト比 1.41:1
12. Copyright © NIFTY Corporation All Rights Reserved.
 エンジニアが配色について気を付けられること
 12
 コントラスト 文字と背景のコントラスト比の見やすいコントラスト比 3:1～ or 4.5:1～ ※コントラスト比：明るい色と暗い色の輝度の比率 コントラスト比 3.57:1 ご指摘点（見やすいコントラストの例追加）の修正中 

13. Copyright © NIFTY Corporation All Rights Reserved.
 人が色を判断する仕組み
 03
 13

14. Copyright © NIFTY Corporation All Rights Reserved.
 どうやって色を見分けているのか
 14
 目の中に人が色として見分けがつく光が入っていくと色を識別することができる
15. Copyright © NIFTY Corporation All Rights Reserved.
 どういう光を色として判断できるのか
 15
 波長が380nm～780nmの光が色として判断できる光 白(明るい色)
 黒(暗い色)

16. Copyright © NIFTY Corporation All Rights Reserved.
 色を認識するセンサーは主に3種類
 16
 L錐体 主に赤色を検知 M錐体 主に緑色を検知 S錐体 主に青色を検知
17. Copyright © NIFTY Corporation All Rights Reserved.
 波長と錐体の反応強度の対応関係
 17

18. Copyright © NIFTY Corporation All Rights Reserved.
 どうやって色を見分けているのか
 18
 L錐体 M錐体 S錐体 L, M, S錐体のセンサーの反応強度を脳が判断している
19. Copyright © NIFTY Corporation All Rights Reserved.
 どうやって色を見分けているのか
 19
 L, M, S錐体のセンサーの反応強度から脳が判断している L錐体 M錐体 S錐体 青よりの緑
20. Copyright © NIFTY Corporation All Rights Reserved.
 エンジニアが配色について気を付けられること
 20
 コントラスト

21. Copyright © NIFTY Corporation All Rights Reserved.
 明るい色と暗い色
 21
 明るい色は様々な波長の光が多い　暗い色は様々な波長の光が少ない
22. Copyright © NIFTY Corporation All Rights Reserved.
 コントラストは全錐体の反応強度の合計で判断できる
 22
 コントラストがはっきりついていると見やすい L錐体 M錐体 S錐体 明るい色 暗い色 L錐体 M錐体 S錐体
23. Copyright © NIFTY Corporation All Rights Reserved.
 23
 まとめ 人が色を判断する仕組み
 エンジニアが配色について気を付けられること
 
コントラスト大事 基準は3:1～ or ４．５：1～ 色を認識するセンサーは主に3種類 L, M, S錐体のセンサーの反応強度から脳が判断している コントラストの高低は全ての錐体で判断できる
24. Copyright © NIFTY Corporation All Rights Reserved.