Copyright © NIFTY Corporation All Rights Reserved. エンジニアが配色について気を付けられること 重(かさね) ニフティ株式会社 システム統括部
View Slide
Copyright © NIFTY Corporation All Rights Reserved. 2 目次03 人が色を判断する仕組み 01 自己紹介 02 エンジニアが配色について気を付けられること
Copyright © NIFTY Corporation All Rights Reserved. 自己紹介 01 3
Copyright © NIFTY Corporation All Rights Reserved. 自己紹介 4 重(かさね)名前 業務でフロントエンドを触れられてないですが、気ままにデザイン勉強中一言 システム統括部 基幹システムグループ所属
Copyright © NIFTY Corporation All Rights Reserved. 現在の提供サービスネットワークサービス WEBサービスインターネット回線生活インフラを支える 生活を豊かにするメディア・コンテンツ会員オプションサービス格安スマホ5
Copyright © NIFTY Corporation All Rights Reserved. 現在の提供サービスネットワークサービス WEBサービスインターネット回線生活インフラを支える 生活を豊かにするメディア・コンテンツ会員オプションサービス格安スマホ6
Copyright © NIFTY Corporation All Rights Reserved. エンジニアが配色について気を付けられること 02 7
Copyright © NIFTY Corporation All Rights Reserved. 背景 8 ある日の私の反省 これ、チェックマークが見づらくないですか?チェックマーク見えてますよ!問題ないです!そうですかね…分かりました!
Copyright © NIFTY Corporation All Rights Reserved. 背景 9 見えづらいと思ったのは気のせいだったのだろうか…? 少し感じた見えづらいをどうやって説明すればいいんだろうか…?
Copyright © NIFTY Corporation All Rights Reserved. エンジニアが配色について気を付けられること 10 コントラスト
Copyright © NIFTY Corporation All Rights Reserved. エンジニアが配色について気を付けられること 11 コントラスト文字と背景が見やすいコントラスト比 3:1~ or 4.5:1~※コントラスト比:明るい色と暗い色の輝度の比率コントラスト比 1.41:1
Copyright © NIFTY Corporation All Rights Reserved. エンジニアが配色について気を付けられること 12 コントラスト文字と背景のコントラスト比の見やすいコントラスト比 3:1~ or 4.5:1~※コントラスト比:明るい色と暗い色の輝度の比率コントラスト比 3.57:1ご指摘点(見やすいコントラストの例追加)の修正中
Copyright © NIFTY Corporation All Rights Reserved. 人が色を判断する仕組み 03 13
Copyright © NIFTY Corporation All Rights Reserved. どうやって色を見分けているのか 14 目の中に人が色として見分けがつく光が入っていくと色を識別することができる
Copyright © NIFTY Corporation All Rights Reserved. どういう光を色として判断できるのか 15 波長が380nm~780nmの光が色として判断できる光白(明るい色) 黒(暗い色)
Copyright © NIFTY Corporation All Rights Reserved. 色を認識するセンサーは主に3種類 16 L錐体主に赤色を検知M錐体主に緑色を検知S錐体主に青色を検知
Copyright © NIFTY Corporation All Rights Reserved. 波長と錐体の反応強度の対応関係 17
Copyright © NIFTY Corporation All Rights Reserved. どうやって色を見分けているのか 18 L錐体M錐体S錐体L, M, S錐体のセンサーの反応強度を脳が判断している
Copyright © NIFTY Corporation All Rights Reserved. どうやって色を見分けているのか 19 L, M, S錐体のセンサーの反応強度から脳が判断しているL錐体M錐体S錐体青よりの緑
Copyright © NIFTY Corporation All Rights Reserved. エンジニアが配色について気を付けられること 20 コントラスト
Copyright © NIFTY Corporation All Rights Reserved. 明るい色と暗い色 21 明るい色は様々な波長の光が多い 暗い色は様々な波長の光が少ない
Copyright © NIFTY Corporation All Rights Reserved. コントラストは全錐体の反応強度の合計で判断できる 22 コントラストがはっきりついていると見やすいL錐体 M錐体 S錐体明るい色 暗い色L錐体 M錐体 S錐体
Copyright © NIFTY Corporation All Rights Reserved. 23 まとめ人が色を判断する仕組み エンジニアが配色について気を付けられること コントラスト大事基準は3:1~ or 4.5:1~色を認識するセンサーは主に3種類L, M, S錐体のセンサーの反応強度から脳が判断しているコントラストの高低は全ての錐体で判断できる
Copyright © NIFTY Corporation All Rights Reserved.