$30 off During Our Annual Pro Sale. View Details »

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

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

ニフティ株式会社

July 21, 2023
Tweet

More Decks by ニフティ株式会社

Other Decks in Design

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 4.5:1~
    色を認識するセンサーは主に3種類
    L, M, S錐体のセンサーの反応強度から脳が判断している
    コントラストの高低は全ての錐体で判断できる

    View Slide

  24. Copyright © NIFTY Corporation All Rights Reserved.


    View Slide