視認性カラーコード設計_講義スライド

見せる色、伝わる色 IT研修講師のための視認性・カラーコード設計 Why - What - How ｜ 査読済み論文根拠版 うさうさ研修工房

オープニング このスライド、 実は基準を満たしていません この文字、 読みにくくないですか？ この文字、 はっきり読めますね 低コントラスト（悪い例） WCAG AA基準を満たす例 今日は「なんとなく見やすい」を「根拠を持って見やすい」に変える90分です 見せる色、伝わる色 ｜ うさうさ研修工房 2

本日のアジェンダ Why → What → How Why What How 見せる色、伝わる色 ｜ うさうさ研修工房 視認性が学習効果を左右する科学的根拠 色彩心理学とカラーコードの基礎知識 実践：自分の教材への適用（演習） 20分 20分 30分 3

Module 1 Why 視認性が学習効果を左右する科学的根拠 20分

色は装飾ではなく、注意を誘導する設計要素 シグナリング原理（Mayer, Cognitive Theory of Multimedia Learning） 色や強調によって学習者の注意を重要な要素へ誘導すると、テキストと図の対応関係の理解が助けられ、学習が深まることが多 数の研究で示されている。 ポイント • 色は「好み」ではなく「学習成果を左右する設計変数」 • 強調色は絞り込むほど、注意誘導の効果が高い • 選ぶたびに「この色は何に注意を向けさせるためか」を自問する 見せる色、伝わる色 ｜ うさうさ研修工房 5

色は感情・認知・行動に影響する Elliot & Maier (2014), Annual Review of Psychology 色彩心理学に関する主要な理論・実証研究をレビューし、色が人の感情・認知・行動に無視できない影響を持つことを示した。研 修教材における配色も、この影響から自由ではない。 だからこそ、教材の配色は「感覚」ではなく「設計」として扱う 見せる色、伝わる色 ｜ うさうさ研修工房 6

Module 2 What 色彩心理学とカラーコードの基礎知識 20分

視認性を決める3つの要因 コントラスト比 配色の意味づけ 色覚多様性 文字と背景の輝度差。WCAGが数値 色ごとの役割を一貫させる（警告＝ 誰が見ても区別できる色の組み合わ 基準を定める 朱色、など） せを選ぶ 見せる色、伝わる色 ｜ うさうさ研修工房 8

コントラスト比の基準（WCAG 2.1 / 1.4.3） 文字の種類 最低コントラスト比 目安 通常の文字 4.5 : 1 以上 本文・キャプションなど 大きな文字 3.0 : 1 以上 18pt以上、太字なら14pt以上目安 実務メモ 白背景（#FFFFFF）に対して本文文字は濃灰（#333333相当）以上の暗さを確保すれば、多くの場合4.5:1以上を満たす。無料のコ ントラストチェッカーで一度テンプレートを検証すれば、以降は使い回すだけでよい。 見せる色、伝わる色 ｜ うさうさ研修工房 9

色覚多様性対応パレット（Okabe & Ito, 2008） Color Universal Design ｜ 教材にそのまま使える8色 オレンジ 水色 青緑 黄 青 朱色 赤紫 黒 #E69F00 #56B4E9 #009E73 #F0E442 #0072B2 #D55E00 #CC79A7 #000000 推奨アクセント3色（本プログラムの標準） • 朱色 #D55E00 ── 強調・警告 • 青緑 #009E73 ── 強調・成功 • 青 #0072B2 ── 情報・リンク 見せる色、伝わる色 ｜ うさうさ研修工房 10

Module 3 How 実践：自分の教材への適用（演習） 30分（演習20分）

演習：自分のスライドを3ステップで改善 ① 強調色を絞り込む 多くても3色まで。シグナリング原理に沿って意味を持たせる ② コントラスト比を確認する 本文と背景が4.5:1以上になっているかを測定する ③ 色だけに頼らない 赤字だけのNG表示などは、アイコンや記号を併用する形に直す 見せる色、伝わる色 ｜ うさうさ研修工房 12

今日持ち帰る3つのこと 1 色は好みではなく設計 ── シグナリング原理で注意を誘導する 2 根拠は3つ ── コントラスト比・色覚多様性・注意誘導 3 今日の表をそのまま自分のテンプレートに転記する Q&A