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

Transcript

1. Copyright © NIFTY Corporation All Rights Reserved.

   エンジニアが配色について気を付けられること

   重（かさね）

   ニフティ株式会社 システム統括部

   

   View Slide

2. Copyright © NIFTY Corporation All Rights Reserved.
 2

   目次
   03
 人が色を判断する仕組み

   01
 自己紹介

   02
 エンジニアが配色について気を付けられること

   

   

   View Slide

3. Copyright © NIFTY Corporation All Rights Reserved.

   自己紹介

   01

   3

   

   View Slide

4. Copyright © NIFTY Corporation All Rights Reserved.

   自己紹介

   4

   重（かさね）
   名前

   業務でフロントエンドを触れられてない
   ですが、気ままにデザイン勉強中
   一言

   システム統括部 基幹システムグループ
   所属

   

   View Slide

5. Copyright © NIFTY Corporation All Rights Reserved.

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

   

   View Slide

6. Copyright © NIFTY Corporation All Rights Reserved.

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

   

   View Slide

7. Copyright © NIFTY Corporation All Rights Reserved.

   エンジニアが配色について気を付けられること

   02

   7

   

   View Slide

8. Copyright © NIFTY Corporation All Rights Reserved.

   背景

   8

   ある日の私の反省

   これ、チェックマークが
   見づらくないですか？
   チェックマーク見えてますよ！
   問題ないです！
   そうですかね…
   分かりました！
   

   View Slide

9. Copyright © NIFTY Corporation All Rights Reserved.

   背景

   9

   見えづらいと思ったのは気のせいだったのだろうか…？

   少し感じた見えづらいをどうやって説明すればいいんだろうか…？

   

   

   View Slide

10. Copyright © NIFTY Corporation All Rights Reserved.

    エンジニアが配色について気を付けられること

    10

    コントラスト

    

    View Slide

11. Copyright © NIFTY Corporation All Rights Reserved.

    エンジニアが配色について気を付けられること

    11

    コントラスト
    文字と背景が見やすいコントラスト比 3:1～ or 4.5:1～
    ※コントラスト比：明るい色と暗い色の輝度の比率
    コントラスト比 1.41:1
    

    View Slide

12. Copyright © NIFTY Corporation All Rights Reserved.

    エンジニアが配色について気を付けられること

    12

    コントラスト
    文字と背景のコントラスト比の見やすいコントラスト比 3:1～ or 4.5:1～
    ※コントラスト比：明るい色と暗い色の輝度の比率
    コントラスト比 3.57:1
    ご指摘点（見やすいコントラストの例追加）の修正中 

    

    View Slide

13. Copyright © NIFTY Corporation All Rights Reserved.

    人が色を判断する仕組み

    03

    13

    

    View Slide

14. Copyright © NIFTY Corporation All Rights Reserved.

    どうやって色を見分けているのか

    14

    目の中に人が色として見分けがつく光が入っていくと色を識別することができる
    

    View Slide

15. Copyright © NIFTY Corporation All Rights Reserved.

    どういう光を色として判断できるのか

    15

    波長が380nm～780nmの光が色として判断できる光
    白(明るい色)

    黒(暗い色)

    

    View Slide

16. Copyright © NIFTY Corporation All Rights Reserved.

    色を認識するセンサーは主に3種類

    16

    L錐体
    主に赤色を検知
    M錐体
    主に緑色を検知
    S錐体
    主に青色を検知
    

    View Slide

17. Copyright © NIFTY Corporation All Rights Reserved.

    波長と錐体の反応強度の対応関係

    17

    

    View Slide

18. Copyright © NIFTY Corporation All Rights Reserved.

    どうやって色を見分けているのか

    18

    L錐体
    M錐体
    S錐体
    L, M, S錐体のセンサーの反応強度を脳が判断している
    

    View Slide

19. Copyright © NIFTY Corporation All Rights Reserved.

    どうやって色を見分けているのか

    19

    L, M, S錐体のセンサーの反応強度から脳が判断している
    L錐体
    M錐体
    S錐体
    青よりの緑
    

    View Slide

20. Copyright © NIFTY Corporation All Rights Reserved.

    エンジニアが配色について気を付けられること

    20

    コントラスト

    

    View Slide

21. Copyright © NIFTY Corporation All Rights Reserved.

    明るい色と暗い色

    21

    明るい色は様々な波長の光が多い　暗い色は様々な波長の光が少ない
    

    View Slide

22. Copyright © NIFTY Corporation All Rights Reserved.

    コントラストは全錐体の反応強度の合計で判断できる

    22

    コントラストがはっきりついていると見やすい
    L錐体 M錐体 S錐体
    明るい色 暗い色
    L錐体 M錐体 S錐体
    

    View Slide

23. Copyright © NIFTY Corporation All Rights Reserved.
 23

    まとめ
    人が色を判断する仕組み

    エンジニアが配色について気を付けられること

    
コントラスト大事
    基準は3:1～ or ４．５：1～
    色を認識するセンサーは主に3種類
    L, M, S錐体のセンサーの反応強度から脳が判断している
    コントラストの高低は全ての錐体で判断できる
    

    View Slide

24. Copyright © NIFTY Corporation All Rights Reserved.

    

    View Slide