Accessible_UI_Design_-_Adobe_Color_and_Color_Universal_Design.pdf

Transcript

1. © 2020 Adobe. All Rights Reserved. Adobe Colorではじめる UIのカラーユニバーサルデザイン 伊賀 公一 | NPO法人カラーユニバーサルデザイン機構 副理事長 伊原 力也 | freee UXデザイナー
2. 人間の色覚の多様性に対応した
 配色デザインの必要性と
 アドビのアクセシビリティツール
 CUDO 伊賀 公一

3. 色とはある帯域の電磁波を眼で電気に変換し、脳が感じている感覚 

4. 多くの人は赤緑青の３色とその混合ですべての色を表現できる 

5. ３色で表現できる理由は眼の中に３種の光センサーがあるから 

6. 4 Color Vision
 RH2 SWS1 SWS2 LWS
 2 Color Vision
 SWS1 LWS 
 何種のセンサーが眼にあるか 

7. ３Color Vision 
 SWS1 LWS(M) LWS(L) 
 2 Color Vision
 P SWS1 LWS(M)
 D SWS1 LWS(L) 
 Human color vision Evolution

10. 過去の少数派の色覚型に対する扱い
 ・小学校の色覚検査で判明（1922年〜
 ・就職や進学に過大な制限があった（現在はほとんど廃止）
 ・自覚もないため、カミングアウトしない
 ・色に対する話題を避ける。
 ・自分の色感に誇りを持てない

11. 色と情報デザイン
 ・かつては情報デザインの配色は少なかった
 ・より多くの情報を
 ・より正確に
 ・より早く　伝えるために配色が有効活用されている
 ・色弱者が発生している

12. 色弱者は
 ・各個人に対して医学的な治療ができないか
 　　　人類の進化の結果生まれた色覚の多様性は治療できない
 　　　2色覚を3色覚にするような補正めがねは理論的に不可能
 ・ユニバーサルデザインで社会が対応する
 　　　利用者に多様な色覚の人がいることを想定して配色する
 　　　当事者に聞く（精度が高い・ハードルが高め）
 　　　色覚シミュレーション（精度は低い・ハードルが低い）

14. Color Vision Simulator

19. 色覚シミュレーションの誤った使い方 

20. 元画像
 
 
 Adobe PS
 
 
 Stark XD
 
 
 Stark Scketch
 Reliability of Color vision Simulator

21. Color name problem

22. Color Name
 • White
 • Black
 • Red
 • Blue
 • Yellow
 • Green
 • Purple Violet
 • Gray ……...

23. 困ること
 ・理解されてない／自覚もない
 　　　　白黒だと思われている　→白黒ではない
 　　　　1万人に1人くらいだと思われている→男性10〜20人に1人
 ・見分けやすい色が違う
 　　　　色を微調整すれば判別できる
 ・色の名前でやりとりできない
 　　　　半分くらいは当たる

25. Social Rule
 JIS safety color Z9103 (2018)
 JIS安全色普及委員会web www.safetycolor.jp 

29. 問題点の再分析
 ・背景の上の文字が色覚型によって読めない
 ・強調された部分が感じられない
 ・色分けされた分類が伝わらない
 ・色の名前が伝わらない
 ・分かり易い色に微調整する
 
 ・色名を追記する

40. まとめ
 40

41. 多様な色覚とAdobe アクセシビリティツール
 41
 • 人類の色覚は進化の結果多様性がある
 • 少数派の色覚型は世界に2—3億人いる
 • 医学的な治療ではなく社会が共生のために対応すべき
 • 情報デザインには多様な色覚に対応した配色のユニバーサルデザイン＝CUDが 必要
 • 色に変えての文字追記や形状変化だけでは情報の不公平が起こる
 • デザイナーはシミュレータなどを使用して色の微調整を行うと良い

42. 誰もが自分の色の見え方に誇りを持てる社会に
 thank you
 Koichi Iga
 
 facebook.com/koichi.iga

43. 多くの人が見分けられる
 UIデザインのプロセス
 freee 伊原 力也

44. 多くの人が見分けられるUIデザインのプロセス
 44
 • アクセシブルな色づかいの 3 段階
 • チェックと調整の 5 アプローチ
 • 抽象から具体への 5 ステップ

45. アクセシブルな色づかいの3段階
 45

46. アクセシブルな色づかいの3段階
 46
 1. 色以外でも伝達する
 2. コントラストを確保する
 3. 色覚多様性に対応する

47. 1. 色以外でも伝達する
 47
 『デザイニングWebアクセシビリティ』より

48. 1. 色以外でも伝達する
 48
 『デザイニングWebアクセシビリティ』より

49. 1. 色以外でも伝達する
 『patternomaly』より

50. 2. コントラストを確保する
 『デザイニングWebアクセシビリティ』より
 50

51. 2. コントラストを確保する
 51
 『達成基準 1.4.11: 非テキストのコントラストを理解する』より

52. 2. コントラストを確保する
 52
 
 日本語
 アルファベット
 UIや図版
 3:1以上
 • 30px以上のテキスト 
 • 24px以上の太字
 • 24px以上のテキスト 
 • 19px以上の太字
 • 背景色や隣接色との差異 
 • 隣接色との境界線
 • フォーカスや選択を
 色で示すときの差異 
 4.5:1以上
 上記未満の
 サイズのテキスト
 上記未満の
 サイズのテキスト
 （規定なし）
 『達成基準 1.4.3: コントラスト (最低限)を理解する』および『達成基準 1.4.11: 非テキストのコントラストを理解する』より

53. 3. 色覚多様性に対応する
 53
 『東京都カラーユニバーサルデザインガイドライン』より

54. チェックと調整の5アプローチ
 54

55. チェックと調整の5アプローチ
 55
 
 チェック
 調整補助
 色以外で伝達
 • Stark
 • Photoshop
 （なし）
 コントラスト
 • Stark
 • contrast.app
 • Contrast Finder
 • Color Safe
 色覚多様性
 • (Stark) • Photoshop
 • Adobe Color

56. 色以外で伝達：チェック
 56
 チェック：Stark (Pro)
57. コントラスト：チェックと調整
 57
 チェック：Stark (Pro) 調整補助：Contrast Finder
58. 色覚多様性：チェックと調整
 58
 チェック：Photoshop 調整補助：Adobe Color
59. 抽象から具体への5ステップ
 59

60. 抽象から具体への5ステップ
 ムードボード
 カラーパレット
 スタイルタイル
 コンポーネント
 画面デザイン
 60

61. ムードボード＋カラーパレット原案
 61

62. アクセシビリティツールで競合回避
 62

63. OKなら保存
 63

64. XDからカラーテーマ呼び出し
 64

65. スタイルタイル
 65

66. スタイルタイル：色以外で伝達をチェック
 66

67. スタイルタイル：コントラストをチェック
 67

68. スタイルタイル：コントラストを調整
 68

69. スタイルタイル：色覚多様性をチェック
 69

70. スタイルタイル：色覚多様性をチェック
 70

71. スタイルタイル：色覚多様性に対応する調整
 71

72. Contrast Grid でパターン出し
 72
 『Eightshapes Contrast Grid』より

73. UIコンポーネント
 73

74. 画面デザイン
 74

75. 根本の段階から意識しておく
 75
 • UI検討の初期段階でチェック＆調整しておくことで軸をつくる
 • Contrast Grid で把握しつつUIパターンを増やし、色を展開する
 ※展開しきってから調整を行うとバランス取りに苦労する
 • 一品物のUIや図版があるケースでは個別にチェック＆調整を行う
 • 検証済のパターンのみ使うよう留意＆周知する
 ※置き方次第で、コントラストもCUDも、容易にNGになり得る

76. 検証済のパターンのみ使うよう留意＆周知する
 76

77. すでにある画面から改善するには
 77

78. 逆流して整理する
 ムードボード
 カラーパレット
 スタイルタイル
 コンポーネント
 画面デザイン
 78

79. 逆流して整理する
 79
 1. 既存の色を収集してグループ分けする
 2. 構成要素を特定する（重複を整理する）
 3. パターンを定義する
 4. アクセシブルな色に調整する
 『Design Systems』より

80. 既存の色を収集してグループ分けする
 『Color Audit』より

81. 既存の色を収集してグループ分けする
 81
 • 様々なテキストのタイプと階層構造
 （本文、見出し、ブロック引用）を表示する
 • リンクと行為（要となるCTA、補足CTA、リンク）を強調表示する
 • メッセージに注意を引く、メッセージに違いをつける（確認、警告）
 • コンテンツを区切る、または強調する（背景、境界線）
 • データのタイプを区別する（表、グラフ内）
 『Design Systems』より

82. 人の目でチェックしよう
 82

83. 東京都 新型コロナウイルス感染症対策サイト
 83
 『東京都 新型コロナウイルス感染症対策サイト』より

84. 東京都 新型コロナウイルス感染症対策サイト
 84
 『チャートのカラーをアクセシビリティを考慮した色へ変更する #1172』より

85. 東京都 新型コロナウイルス感染症対策サイト
 85
 『チャートのカラーについての再考、パターンの提案、アンケート作成を行う #2364』より

86. board：CUD対応
 86
 『多様な色覚に配慮したカラーユニバーサルデザイン（CUD）に対応しました』より

87. フェンリル：弱視当事者を交えたワークショップ
 87
 『新卒社員がアクセシビリティ勉強会に参加して感じたこと』より

88. freee：色覚多様性レビュー会
 88
 『freeeアクセシビリティー・ガイドラインを一般公開しました』より

89. まとめ
 89

90. 多くの人が見分けられるUIデザインのプロセス
 90
 • アクセシブルな色づかいの3段階：色以外で伝達→コントラスト→色覚対応
 • チェックと調整の5アプローチ：シミュレータと調整ツールを併用
 • 抽象から具体への5ステップ：根本から対応する＆ルールを周知する
 • すでにある画面から改善するには：現状を収集して整理する
 • 人の目でチェックしよう：結局、伝わるかどうかが大事

91. © 2020 Adobe. All Rights Reserved. Thank you. Twitter: @iga6, @magi1125