色にまつわるエトセトラ（いろいろ）
•
2 j'aime•1,216 vues
2019/05/17（金）に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/05/17」でのスライドです。※スライド中資料の最新版が下記にあります。 カラーユニバーサルデザイン 推奨配色セット ガイドブック（第2版） http://www2.cudo.jp/wp/wp-content/uploads/2018/10/cud_guidebook.pdf
Recommandé
Contenu connexe
Plus de Nozomi Sawada
Plus de Nozomi Sawada (13)
色にまつわるエトセトラ（いろいろ）
- 2. 自己紹介 2
- 4. 4 岡山で独立（2014～） Webアクセシビリティ検証／ イラスト制作／ 岡山情報ビジネス学院 非常勤講師 などなど キヤノン （～2013） サイトデザイン監修／ Webアクセシビリティ対応 WAIC （2011～） （ウェブアクセシビリティ基盤委員会） コラムを担当
- 5. 本日の目標 5
- 10. 隣接オブジェクトとの区別 リンク／現在位置 など 同じ色同士のグループ カテゴリー／必須項目 など 特性 重要度／優先度 など 状態 使用可能／使用不可／使用中 など 10 色で伝えられている情報
- 11. 伝わらなければ意味がない。 11
- 17. • 知覚／理解できる状態にする • カスタマイズできる状態にする • 複数の手段を提供する 17 Webアクセシビリティを確保する基本的な考え方 （見えやすい色を使う／コントラストを高くするなど） （前景色／背景色を変更できるなど） （代替コンテンツなど）
- 27. 27
- 28. あくまで参考に。 28
- 29. 色の持つイメージとかけ離れた使い方をしていないか？ のように利用者の行動に働きかける色 29 赤：危険／禁止 → エラー 青：安全／案内 → リンク 黄：警戒／注意 → 注 意 経験則（メンタルモデル）
- 30. 国や地域によって差がある？ 30
- 34. 2. 区別しやすくする工夫 34
- 35. 35 境界が見えにくいかも
- 37. 37 境界線を引いてみる
- 39. 39 パターンを入れてみる
- 41. 41 色を認識しづらいかも
- 43. 43 サイズや太さを変えてみる
- 45. 45 ？ 選択肢が多すぎるかも
- 47. 47 選択肢を減らしてみる ？
- 49. 49 ？ 比較対象が遠すぎるかも
- 51. 51 ？ 比較対象を近づけてみる
- 53. いろいろ工夫はできるはず！ 53
- 56. 56Mac：システム環境設定 > アクセシビリティ > ディスプレイ > カラーを反転 これじゃない
- 57. 57Windows：簡単操作 > ハイ コントラスト
- 67. 色だけに頼らない 67
- 69. ・モノクロでも伝わる ・その他の手がかりを併用 • テキスト • 形／サイズ • 太さ • 下線 など ・マークアップで示す （音声読み上げ環境への配慮） 69 色だけに頼らない
- 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 ×：満室∕△：残りわずか∕○：余裕あり ⽉ ⽕ ⽔ ⽊ ⾦ ⼟ ⽇ 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⽉
- 75. 75 ホーム お知らせ メニュー こだわり アクセス お問い合わせ 色だけでの表現
- 76. 76 色以外の手がかりで表現 ホーム メニュー こだわり アクセス お問い合わせ ホーム メニュー アクセス お問い合わせお知らせ ホーム メニュー こだわり アクセス お問い合わせお知らせ ホーム お知らせ メニュー こだわり アクセス お問い合わせ お知らせ こだわり
- 79. 79 色だけでの表現
- 80. 80 色以外の手がかりで表現
- 83. 83 ホーム お知らせ メニュー こだわり アクセス お問い合わせ 見た目だけを表現するマークアップ <li><a href="news.html" class="current">お知らせ</a></li>
- 84. 84 ホーム お知らせ メニュー こだわり アクセス お問い合わせ 意味を伝えるマークアップ <li><a href="news.html" aria-current="page">お知らせ</a></li> <li><a href="news.html"><em>お知らせ</em></a></li>
- 87. 視覚閲覧環境の利用者向け • コントラストの高い色 • 区別しやすい色／パターン • 色に頼らない凡例／ラベル 音声読み上げ環境の利用者向け • 代替テキスト • 元データ（表）の表示 87 グラフに求められるアクセシビリティ 商品別売り上げ推移 2015年 2016年 2017年 2018年 hoge 100 150 160 180 fuga 200 230 220 260
- 88. 視覚閲覧環境の利用者向け • コントラストの高い色 • 区別しやすい色／パターン • 色に頼らない凡例／ラベル 音声読み上げ環境の利用者向け • 代替テキスト • 元データ（表）の表示 88 グラフに求められるアクセシビリティ 商品別売り上げ推移 2015年 2016年 2017年 2018年 hoge 100 150 160 180 fuga 200 230 220 260 この辺りの作業をします
- 89. • Googleスプレッドシートの表からグラフ２種類を作成する （売り上げ推移：折れ線グラフ／売り上げ比率：円グラフ） • 様々なスタイルを編集してアクセシビリティが高くなるように工夫する • どんな手段を使ってもOK • できる限り多くの方法でアクセシビリティを高められた人が勝ち！ （勝ち負け関係ない） • 制限時間：25分 89 作業内容作業内容
- 90. 2. 開く 90 準備 4. 自分の名前を入力 3. コピーを作成 5. 自分の名前の付いた ファイルが出来ている ことを確認 1. Googleにログインし bit.ly/readable_0517を開く
- 91. 91 各自で工夫して、アクセシビリティを高めよう！ 表：売り上げ推移 → 折れ線グラフ 表：売り上げ比率 → 円グラフ で作成 ファイルを開き、 グラフにする範囲（A2～D6）を 指定してグラフを挿入 グラフの設定メニュー 個別に選んでいろいろ設定可能
- 92. まとめ 92
- 93. • 色で伝えるべき情報か？ • 色の感じ方は人それぞれ • 色を区別しやすくする工夫 • 色以外の方法でも伝えているか？ 93 色で情報を伝えるなら忘れずに