Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

色にまつわるエトセトラ(いろいろ)

373 views

Published on

2019/05/17(金)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/05/17」でのスライドです。※スライド中資料の最新版が下記にあります。
カラーユニバーサルデザイン 推奨配色セット ガイドブック(第2版)
http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guidebook.pdf

Published in: Design
  • Be the first to comment

色にまつわるエトセトラ(いろいろ)

  1. 1. 色にまつわるエトセトラ(いろいろ)
  2. 2. 自己紹介 2
  3. 3. 3 澤田 望 パーマ メガネ (老眼) ガリガリ 中年講師
  4. 4. 4 岡山で独立(2014~) Webアクセシビリティ検証/ イラスト制作/ 岡山情報ビジネス学院 非常勤講師 などなど キヤノン (~2013)  サイトデザイン監修/ Webアクセシビリティ対応 WAIC  (2011~) (ウェブアクセシビリティ基盤委員会) コラムを担当
  5. 5. 本日の目標 5
  6. 6. ・色で情報を伝える際に注意することは? ・色以外の方法で伝えるには? 6
  7. 7. 色を使う際に気をつけたいこと 7 セッション
  8. 8. 8https://readable-na.world/archives/12 より イメージ/装飾のための色
  9. 9. 9https://readable-na.world/archives/12 より 情報を伝えている色 今回はここに注目
  10. 10. 隣接オブジェクトとの区別 リンク/現在位置 など 同じ色同士のグループ カテゴリー/必須項目 など 特性 重要度/優先度 など 状態 使用可能/使用不可/使用中 など 10 色で伝えられている情報
  11. 11. 伝わらなければ意味がない。 11
  12. 12. 色を使うなら、その意味もちゃんと伝えよう。 12
  13. 13. WCAG 2.0 で求められること 13
  14. 14. 14https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast より 前回(2019/03/04)の内容
  15. 15. 15https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast より
  16. 16. 色を使う際の注意点についてはあまり触れてない。 16
  17. 17. • 知覚/理解できる状態にする
 • カスタマイズできる状態にする
 • 複数の手段を提供する 17 Webアクセシビリティを確保する基本的な考え方 
 (見えやすい色を使う/コントラストを高くするなど) 
 (前景色/背景色を変更できるなど) 
 (代替コンテンツなど)
  18. 18. 1.色の感じ方は人それぞれ 2.区別しやすくする工夫 3.カスタマイズできる構造 4.カラーパレットの共通化 18 色を使う際のポイント
  19. 19. 1. 色の感じ方は人それぞれ 19
  20. 20. この辺りの色の違いを認識できない人がいます。
  21. 21. 男性:23人に1人/女性:642人に1人 21バリアフリー:色覚障害者の移動等円滑化に関する調査研究 - 国土交通省 より
  22. 22. 22 Protanopia型(1型) 赤が見えにくい 先天性色覚障害の約25% 色覚正常?者 Tritanopia型(3型) 青が見えにくい Deuteranopia型(2型) 緑が見えにくい 先天性色覚障害の約75%
  23. 23. • 区別しにくい色の組み合わせを避ける • 色の識別よりも、周囲との区別を優先 23 色覚や環境による違い
  24. 24. 24http://www2.cudo.jp/wp/wp-content/uploads/2016/10/CUD_Colorset_Guidebook.pdf より
  25. 25. 25http://www2.cudo.jp/wp/wp-content/uploads/2016/10/CUD_Colorset_Guidebook.pdf より
  26. 26. 26http://www2.cudo.jp/wp/wp-content/uploads/2016/10/CUD_Colorset_Guidebook.pdf より
  27. 27. 27
  28. 28. あくまで参考に。 28
  29. 29. 色の持つイメージとかけ離れた使い方をしていないか? のように利用者の行動に働きかける色 29 赤:危険/禁止 →  エラー 青:安全/案内 →  リンク 黄:警戒/注意 →  注 意 経験則(メンタルモデル)
  30. 30. 国や地域によって差がある? 30
  31. 31. 31https://weathernews.jp/s/topics/201807/240205/ より
  32. 32. 32https://informationisbeautiful.net/visualizations/colours-in-cultures/ より
  33. 33. 感じ方に差があるという前提に立って色を使おう。 33
  34. 34. 2. 区別しやすくする工夫 34
  35. 35. 35 境界が見えにくいかも
  36. 36. 36 境界が見えにくいかも (P型のシミュレーション)
  37. 37. 37 境界線を引いてみる
  38. 38. 38 境界線を引いてみる (P型のシミュレーション)
  39. 39. 39 パターンを入れてみる
  40. 40. 40 パターンを入れてみる (P型のシミュレーション)
  41. 41. 41 色を認識しづらいかも
  42. 42. 42 色を認識しづらいかも (P型のシミュレーション)
  43. 43. 43 サイズや太さを変えてみる
  44. 44. 44 サイズや太さを変えてみる (P型のシミュレーション)
  45. 45. 45 ? 選択肢が多すぎるかも
  46. 46. 46 ? 選択肢が多すぎるかも (P型のシミュレーション)
  47. 47. 47 選択肢を減らしてみる ?
  48. 48. 48 選択肢を減らしてみる (P型のシミュレーション) ?
  49. 49. 49 ? 比較対象が遠すぎるかも
  50. 50. 50 ? 比較対象が遠すぎるかも (P型のシミュレーション)
  51. 51. 51 ? 比較対象を近づけてみる
  52. 52. 52 ? 比較対象を近づけてみる (P型のシミュレーション)
  53. 53. いろいろ工夫はできるはず! 53
  54. 54. 3. カスタマイズできる構造 54
  55. 55. 色をカスタマイズしている利用者がいます。 55
  56. 56. 56Mac:システム環境設定 > アクセシビリティ > ディスプレイ > カラーを反転 これじゃない
  57. 57. 57Windows:簡単操作 > ハイ コントラスト
  58. 58. 58https://addons.mozilla.org/ja/firefox/addon/styl-us/?src=search より
  59. 59. 文字画像は色を変更できない(ことが多い)。 59
  60. 60. 4. カラーパレットの共通化 60
  61. 61. 61https://standards.usa.gov/components/colors/ より
  62. 62. 62https://standards.usa.gov/components/colors/ より
  63. 63. 63 使えないって 言われても困る! 自由に配色したい!
  64. 64. 64 関係者が増えてもブレないね。 他のクリエイティブに時間を使えるね! いちいち確認しなくて済むね。
  65. 65. WCAG 2.0に書いてあることを満たせていないかも? 65
  66. 66. 66https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast より
  67. 67. 色だけに頼らない 67
  68. 68. 色を使うな、という話ではないです。 68
  69. 69. ・モノクロでも伝わる ・その他の手がかりを併用 • テキスト • 形/サイズ • 太さ • 下線 など ・マークアップで示す (音声読み上げ環境への配慮) 69 色だけに頼らない
  70. 70. 70 ⾚:満室∕⻩:残りわずか∕緑:余裕あり 6⽉ > ⽉ ⽕ ⽔ ⽊ ⾦ ⼟ ⽇ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 2019年5⽉
  71. 71. 71 ×:満室∕△:残りわずか∕○:余裕あり ⽉ ⽕ ⽔ ⽊ ⾦ ⼟ ⽇ 1 × 2 × 3 × 4 × 5 × 6 △ 7 ○ 8 ○ 9 ○ 10 △ 11 × 12 △ 13 ○ 14 ○ 15 ○ 16 ○ 17 △ 18 × 19 △ 20 ○ 21 ○ 22 ○ 23 ○ 24 △ 25 × 26 ○ 27 ○ 28 ○ 29 ○ 30 ○ 31 △ ※ 「×△◯」は海外で通じない可能性あるため凡例は必要 6⽉ >2019年5⽉
  72. 72. 72 ⾚字:必須項⽬ 会員情報⼊⼒ ⽒名 住所 電話番号 ハンドルネーム 確認
  73. 73. 73 *:必須項⽬ 会員情報⼊⼒ ⽒名* 住所* 電話番号* ハンドルネーム 確認
  74. 74. 74 会員情報⼊⼒ ⽒名(必須) 住所(必須) 電話番号(必須) ハンドルネーム 確認
  75. 75. 75 ホーム お知らせ メニュー こだわり アクセス お問い合わせ 色だけでの表現
  76. 76. 76 色以外の手がかりで表現 ホーム メニュー こだわり アクセス お問い合わせ ホーム メニュー アクセス お問い合わせお知らせ ホーム メニュー こだわり アクセス お問い合わせお知らせ ホーム お知らせ メニュー こだわり アクセス お問い合わせ お知らせ こだわり
  77. 77. 色の変化 77 形の変化 色の変化 形の変化
  78. 78. ...という判断をしています。 78
  79. 79. 79 色だけでの表現
  80. 80. 80 色以外の手がかりで表現
  81. 81. 81 ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほ げほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほ げほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほ げほげほげほげほげほげほげほげほげほげほげほげほげほげ 色だけでの表現
  82. 82. 82 色以外の手がかりで表現 ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほ げほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほ げほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほ げほげほげほげほげほげほげほげほげほげほげほげほげほげ
  83. 83. 83 ホーム お知らせ メニュー こだわり アクセス お問い合わせ 見た目だけを表現するマークアップ <li><a href="news.html" class="current">お知らせ</a></li>
  84. 84. 84 ホーム お知らせ メニュー こだわり アクセス お問い合わせ 意味を伝えるマークアップ <li><a href="news.html" aria-current="page">お知らせ</a></li> <li><a href="news.html"><em>お知らせ</em></a></li>
  85. 85. アクセシブルなグラフを描こう 85 ハンズオン
  86. 86. 今回は、グラフを実装する話ではなく、 あくまでビジュアルデザインの話です。 86
  87. 87. 視覚閲覧環境の利用者向け • コントラストの高い色 • 区別しやすい色/パターン • 色に頼らない凡例/ラベル 音声読み上げ環境の利用者向け • 代替テキスト • 元データ(表)の表示 87 グラフに求められるアクセシビリティ 商品別売り上げ推移 2015年 2016年 2017年 2018年 hoge 100 150 160 180 fuga 200 230 220 260
  88. 88. 視覚閲覧環境の利用者向け • コントラストの高い色 • 区別しやすい色/パターン • 色に頼らない凡例/ラベル 音声読み上げ環境の利用者向け • 代替テキスト • 元データ(表)の表示 88 グラフに求められるアクセシビリティ 商品別売り上げ推移 2015年 2016年 2017年 2018年 hoge 100 150 160 180 fuga 200 230 220 260 この辺りの作業をします
  89. 89. • Googleスプレッドシートの表からグラフ2種類を作成する
 (売り上げ推移:折れ線グラフ/売り上げ比率:円グラフ) • 様々なスタイルを編集してアクセシビリティが高くなるように工夫する • どんな手段を使ってもOK • できる限り多くの方法でアクセシビリティを高められた人が勝ち!
 (勝ち負け関係ない) • 制限時間:25分 89 作業内容作業内容
  90. 90. 2. 開く 90 準備 4. 自分の名前を入力 3. コピーを作成 5. 自分の名前の付いた
 ファイルが出来ている
 ことを確認 1. Googleにログインし bit.ly/readable_0517を開く
  91. 91. 91 各自で工夫して、アクセシビリティを高めよう! 表:売り上げ推移 → 折れ線グラフ 表:売り上げ比率 → 円グラフ で作成 ファイルを開き、
 グラフにする範囲(A2~D6)を
 指定してグラフを挿入 グラフの設定メニュー 個別に選んでいろいろ設定可能
  92. 92. まとめ 92
  93. 93. • 色で伝えるべき情報か? • 色の感じ方は人それぞれ • 色を区別しやすくする工夫 • 色以外の方法でも伝えているか? 93 色で情報を伝えるなら忘れずに
  94. 94. 次回は 7月8日(月)の予定です! 94
  95. 95. 95 また来週! @SawadaStdDesign

×