Tweet
Tweet

Slide 1

Slide 1 text

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


Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

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


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

Copyright © NIFTY Corporation All Rights Reserved.
 背景
 8
 ある日の私の反省
 これ、チェックマークが 見づらくないですか？ チェックマーク見えてますよ！ 問題ないです！ そうですかね… 分かりました！

Slide 9

Slide 9 text

Copyright © NIFTY Corporation All Rights Reserved.
 背景
 9
 見えづらいと思ったのは気のせいだったのだろうか…？
 少し感じた見えづらいをどうやって説明すればいいんだろうか…？
 


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

Copyright © NIFTY Corporation All Rights Reserved.
 どうやって色を見分けているのか
 14
 目の中に人が色として見分けがつく光が入っていくと色を識別することができる

Slide 15

Slide 15 text

Copyright © NIFTY Corporation All Rights Reserved.
 どういう光を色として判断できるのか
 15
 波長が380nm～780nmの光が色として判断できる光 白(明るい色)
 黒(暗い色)


Slide 16

Slide 16 text

Copyright © NIFTY Corporation All Rights Reserved.
 色を認識するセンサーは主に3種類
 16
 L錐体 主に赤色を検知 M錐体 主に緑色を検知 S錐体 主に青色を検知

Slide 17

Slide 17 text

Copyright © NIFTY Corporation All Rights Reserved.
 波長と錐体の反応強度の対応関係
 17


Slide 18

Slide 18 text

Copyright © NIFTY Corporation All Rights Reserved.
 どうやって色を見分けているのか
 18
 L錐体 M錐体 S錐体 L, M, S錐体のセンサーの反応強度を脳が判断している

Slide 19

Slide 19 text

Copyright © NIFTY Corporation All Rights Reserved.
 どうやって色を見分けているのか
 19
 L, M, S錐体のセンサーの反応強度から脳が判断している L錐体 M錐体 S錐体 青よりの緑

Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

Copyright © NIFTY Corporation All Rights Reserved.
 明るい色と暗い色
 21
 明るい色は様々な波長の光が多い　暗い色は様々な波長の光が少ない

Slide 22

Slide 22 text

Copyright © NIFTY Corporation All Rights Reserved.
 コントラストは全錐体の反応強度の合計で判断できる
 22
 コントラストがはっきりついていると見やすい L錐体 M錐体 S錐体 明るい色 暗い色 L錐体 M錐体 S錐体

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Copyright © NIFTY Corporation All Rights Reserved.