Slide 1
Slide 1 text
© 2020 Adobe. All Rights
Reserved.
Adobe Colorではじめる
UIのカラーユニバーサルデザイン
伊賀 公一 | NPO法人カラーユニバーサルデザイン機構 副理事長
伊原 力也 | freee UXデザイナー
Slide 2
Slide 2 text
人間の色覚の多様性に対応した
配色デザインの必要性と
アドビのアクセシビリティツール
CUDO 伊賀 公一
Slide 3
Slide 3 text
色とはある帯域の電磁波を眼で電気に変換し、脳が感じている感覚
Slide 4
Slide 4 text
多くの人は赤緑青の３色とその混合ですべての色を表現できる
Slide 5
Slide 5 text
３色で表現できる理由は眼の中に３種の光センサーがあるから
Slide 6
Slide 6 text
4 Color Vision
RH2 SWS1 SWS2 LWS
2 Color Vision
SWS1 LWS
何種のセンサーが眼にあるか
Slide 7
Slide 7 text
３Color Vision
SWS1 LWS(M) LWS(L)
2 Color Vision
P SWS1 LWS(M)
D SWS1 LWS(L)
Human color vision Evolution
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
過去の少数派の色覚型に対する扱い
・小学校の色覚検査で判明（1922年〜
・就職や進学に過大な制限があった（現在はほとんど廃止）
・自覚もないため、カミングアウトしない
・色に対する話題を避ける。
・自分の色感に誇りを持てない
Slide 11
Slide 11 text
色と情報デザイン
・かつては情報デザインの配色は少なかった
・より多くの情報を
・より正確に
・より早く 伝えるために配色が有効活用されている
・色弱者が発生している
Slide 12
Slide 12 text
色弱者は
・各個人に対して医学的な治療ができないか
人類の進化の結果生まれた色覚の多様性は治療できない
2色覚を3色覚にするような補正めがねは理論的に不可能
・ユニバーサルデザインで社会が対応する
利用者に多様な色覚の人がいることを想定して配色する
当事者に聞く（精度が高い・ハードルが高め）
色覚シミュレーション（精度は低い・ハードルが低い）
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Color Vision Simulator
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
色覚シミュレーションの誤った使い方
Slide 20
Slide 20 text
元画像
Adobe PS
Stark XD
Stark Scketch
Reliability of Color vision Simulator
Slide 21
Slide 21 text
Color name problem
Slide 22
Slide 22 text
Color Name
● White
● Black
● Red
● Blue
● Yellow
● Green
● Purple Violet
● Gray ……...
Slide 23
Slide 23 text
困ること
・理解されてない／自覚もない
白黒だと思われている →白黒ではない
1万人に1人くらいだと思われている→男性10〜20人に1人
・見分けやすい色が違う
色を微調整すれば判別できる
・色の名前でやりとりできない
半分くらいは当たる
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Social Rule
JIS safety color Z9103 (2018)
JIS安全色普及委員会web www.safetycolor.jp
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
問題点の再分析
・背景の上の文字が色覚型によって読めない
・強調された部分が感じられない
・色分けされた分類が伝わらない
・色の名前が伝わらない
・分かり易い色に微調整する
・色名を追記する
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
まとめ
40
Slide 41
Slide 41 text
多様な色覚とAdobe アクセシビリティツール
41
● 人類の色覚は進化の結果多様性がある
● 少数派の色覚型は世界に2—3億人いる
● 医学的な治療ではなく社会が共生のために対応すべき
● 情報デザインには多様な色覚に対応した配色のユニバーサルデザイン＝CUDが
必要
● 色に変えての文字追記や形状変化だけでは情報の不公平が起こる
● デザイナーはシミュレータなどを使用して色の微調整を行うと良い
Slide 42
Slide 42 text
誰もが自分の色の見え方に誇りを持てる社会に
thank you
Koichi Iga
facebook.com/koichi.iga
Slide 43
Slide 43 text
多くの人が見分けられる
UIデザインのプロセス
freee 伊原 力也
Slide 44
Slide 44 text
多くの人が見分けられるUIデザインのプロセス
44
● アクセシブルな色づかいの
3 段階
● チェックと調整の
5 アプローチ
● 抽象から具体への
5 ステップ
Slide 45
Slide 45 text
アクセシブルな色づかいの3段階
45
Slide 46
Slide 46 text
アクセシブルな色づかいの3段階
46
1. 色以外でも伝達する
2. コントラストを確保する
3. 色覚多様性に対応する
Slide 47
Slide 47 text
1. 色以外でも伝達する
47
『デザイニングWebアクセシビリティ』より
Slide 48
Slide 48 text
1. 色以外でも伝達する
48
『デザイニングWebアクセシビリティ』より
Slide 49
Slide 49 text
1. 色以外でも伝達する
『patternomaly』より
Slide 50
Slide 50 text
2. コントラストを確保する
『デザイニングWebアクセシビリティ』より
50
Slide 51
Slide 51 text
2. コントラストを確保する
51
『達成基準 1.4.11: 非テキストのコントラストを理解する』より
Slide 52
Slide 52 text
2. コントラストを確保する
52
日本語
アルファベット
UIや図版
3:1以上
● 30px以上のテキスト
● 24px以上の太字
● 24px以上のテキスト
● 19px以上の太字
● 背景色や隣接色との差異
● 隣接色との境界線
● フォーカスや選択を
色で示すときの差異
4.5:1以上
上記未満の
サイズのテキスト
上記未満の
サイズのテキスト
（規定なし）
『達成基準 1.4.3: コントラスト (最低限)を理解する』および『達成基準 1.4.11: 非テキストのコントラストを理解する』より
Slide 53
Slide 53 text
3. 色覚多様性に対応する
53
『東京都カラーユニバーサルデザインガイドライン』より
Slide 54
Slide 54 text
チェックと調整の5アプローチ
54
Slide 55
Slide 55 text
チェックと調整の5アプローチ
55
チェック
調整補助
色以外で伝達
● Stark
● Photoshop
（なし）
コントラスト
● Stark
● contrast.app
● Contrast Finder
● Color Safe
色覚多様性
● (Stark)
● Photoshop
● Adobe Color
Slide 56
Slide 56 text
色以外で伝達：チェック
56
チェック：Stark (Pro)
Slide 57
Slide 57 text
コントラスト：チェックと調整
57
チェック：Stark (Pro) 調整補助：Contrast Finder
Slide 58
Slide 58 text
色覚多様性：チェックと調整
58
チェック：Photoshop 調整補助：Adobe Color
Slide 59
Slide 59 text
抽象から具体への5ステップ
59
Slide 60
Slide 60 text
抽象から具体への5ステップ
ムードボード
カラーパレット
スタイルタイル
コンポーネント
画面デザイン
60
Slide 61
Slide 61 text
ムードボード＋カラーパレット原案
61
Slide 62
Slide 62 text
アクセシビリティツールで競合回避
62
Slide 63
Slide 63 text
OKなら保存
63
Slide 64
Slide 64 text
XDからカラーテーマ呼び出し
64
Slide 65
Slide 65 text
スタイルタイル
65
Slide 66
Slide 66 text
スタイルタイル：色以外で伝達をチェック
66
Slide 67
Slide 67 text
スタイルタイル：コントラストをチェック
67
Slide 68
Slide 68 text
スタイルタイル：コントラストを調整
68
Slide 69
Slide 69 text
スタイルタイル：色覚多様性をチェック
69
Slide 70
Slide 70 text
スタイルタイル：色覚多様性をチェック
70
Slide 71
Slide 71 text
スタイルタイル：色覚多様性に対応する調整
71
Slide 72
Slide 72 text
Contrast Grid でパターン出し
72
『Eightshapes Contrast Grid』より
Slide 73
Slide 73 text
UIコンポーネント
73
Slide 74
Slide 74 text
画面デザイン
74
Slide 75
Slide 75 text
根本の段階から意識しておく
75
● UI検討の初期段階でチェック＆調整しておくことで軸をつくる
● Contrast Grid で把握しつつUIパターンを増やし、色を展開する
※展開しきってから調整を行うとバランス取りに苦労する
● 一品物のUIや図版があるケースでは個別にチェック＆調整を行う
● 検証済のパターンのみ使うよう留意＆周知する
※置き方次第で、コントラストもCUDも、容易にNGになり得る
Slide 76
Slide 76 text
検証済のパターンのみ使うよう留意＆周知する
76
Slide 77
Slide 77 text
すでにある画面から改善するには
77
Slide 78
Slide 78 text
逆流して整理する
ムードボード
カラーパレット
スタイルタイル
コンポーネント
画面デザイン
78
Slide 79
Slide 79 text
逆流して整理する
79
1. 既存の色を収集してグループ分けする
2. 構成要素を特定する（重複を整理する）
3. パターンを定義する
4. アクセシブルな色に調整する
『Design Systems』より
Slide 80
Slide 80 text
既存の色を収集してグループ分けする
『Color Audit』より
Slide 81
Slide 81 text
既存の色を収集してグループ分けする
81
● 様々なテキストのタイプと階層構造
（本文、見出し、ブロック引用）を表示する
● リンクと行為（要となるCTA、補足CTA、リンク）を強調表示する
● メッセージに注意を引く、メッセージに違いをつける（確認、警告）
● コンテンツを区切る、または強調する（背景、境界線）
● データのタイプを区別する（表、グラフ内）
『Design Systems』より
Slide 82
Slide 82 text
人の目でチェックしよう
82
Slide 83
Slide 83 text
東京都 新型コロナウイルス感染症対策サイト
83
『東京都 新型コロナウイルス感染症対策サイト』より
Slide 84
Slide 84 text
東京都 新型コロナウイルス感染症対策サイト
84
『チャートのカラーをアクセシビリティを考慮した色へ変更する #1172』より
Slide 85
Slide 85 text
東京都 新型コロナウイルス感染症対策サイト
85
『チャートのカラーについての再考、パターンの提案、アンケート作成を行う #2364』より
Slide 86
Slide 86 text
board：CUD対応
86
『多様な色覚に配慮したカラーユニバーサルデザイン（CUD）に対応しました』より
Slide 87
Slide 87 text
フェンリル：弱視当事者を交えたワークショップ
87
『新卒社員がアクセシビリティ勉強会に参加して感じたこと』より
Slide 88
Slide 88 text
freee：色覚多様性レビュー会
88
『freeeアクセシビリティー・ガイドラインを一般公開しました』より
Slide 89
Slide 89 text
まとめ
89
Slide 90
Slide 90 text
多くの人が見分けられるUIデザインのプロセス
90
● アクセシブルな色づかいの3段階：色以外で伝達→コントラスト→色覚対応
● チェックと調整の5アプローチ：シミュレータと調整ツールを併用
● 抽象から具体への5ステップ：根本から対応する＆ルールを周知する
● すでにある画面から改善するには：現状を収集して整理する
● 人の目でチェックしよう：結局、伝わるかどうかが大事
Slide 91
Slide 91 text
© 2020 Adobe. All Rights
Reserved.
Thank you.
Twitter: @iga6, @magi1125