ペルソナ別「視認性×カラー設計」 実践ガイド

うさうさ研修工房 ペルソナ別「視認性 ×カラー設計」 実践ガイド IT研修講師のための Why–What–How ／ 査読済み研究に基づく色彩設計 対象ペルソナ：新卒（低事前知識学習者） ／ 中堅エンジニア（高事前知識学習者） 新卒 中堅エンジニア

WHY ｜ 共通の科学的土台 色使いの効果はペルソナで逆転する 01 02 03 04 認知負荷理論 シグナリング原理 熟達者逆転効果 WCAG 2.1 レベルAA Sweller (1988) ワーキングメモリの制約が 学習効率を左右する Fiorella & Mayer (2021) 色分け・強調が注意を誘導し 学習を深める Kalyuga et al. (2003) 初学者に有効な設計が 熟達者には逆効果になりうる W3C (2018) 通常文字コントラスト比 4.5:1以上が共通の下限 Why → What → How の要点：認知負荷とシグナリングは「色を足す効果」の根拠、熟達者逆転効果は「足しすぎない理由」、WCAGは両者に共通する最低ライン 共通の科学的土台 1

WHY ｜ 熟達者逆転効果 同じ色分けシグナルでも効果は反転する 低事前知識層 色分けシグナルが対応づけコストを下げ、学習を助ける 交差点 事前知識が増すほど、色分けの効果は逓減する 高事前知識層 色分けは冗長になり、構造重視の教材が優位に転じる 熟達者逆転効果 2

WHY ｜ 視認性の下限 WCAG 2.1 レベルAAは全ペルソナ共通 4.5:1 3:1 AA 通常文字（本文サイズ） 大きな文字 W3C (2018) WCAG 2.1 最低コントラスト比 （18pt以上／太字14pt以上） 達成基準レベル 事前知識の差は、この基準を免除しない 視認性の下限 3

PERSONA 1 新卒｜低事前知識学習者 Why：色分けシグナルが最も効く理由 スキーマ（知識の型）が未形成なため、テキストと図を自力で対応づける処理に認知資源を割かれる Richter & Scheiter (2019) の知見どおり、色によるシグナリングはこの対応づけコストを下げ、学習を助ける Mayer のシグナリング原理が最も効くのがこの層 新卒 ｜ Why 4

PERSONA 1 What：3色シグナルシステム 色数を絞り「意味のある色」と「装飾」を混同させない（いずれもWCAG AA 4.5:1をクリアする実測値） 最重要／注目 注意／落とし穴 完了／成功 ベース文字 #0B5FFF #B25900 #167C3D #1A1A1A 5.13:1 4.86:1 5.27:1 17.40:1 使い方：色＋アイコン＋短いラベルの3点セットで示す（色覚特性への配慮にもなる） 新卒 ｜ What 5

PERSONA 1 How：実務Tips 1 スライド冒頭に「色の凡例」を1枚固定で置く（青＝重要／橙＝注意／緑＝完了） 2 色だけに意味を持たせない 色＋アイコン＋短いラベルの3点セットで示す 3 1スライドに使う意味付き色は3色までに制限し、装飾色を混ぜない 4 手順書・ハンズオン資料では「今どこにいるか」を示す進捗色を毎回同じ位置に置く 5 スクリーン共有・投影を想定し、文字は最低18pt、コントラストは可能な限り4.5:1より高く取る 新卒 ｜ How 6

PERSONA 2 中堅エンジニア｜高事前知識学習者 Why：色分けが冗長になる理由 既に業務スキーマ（正常系／異常系、ログの色慣習など）を保有している Richter & Scheiter (2019) が示すとおり、教育的な色分けシグナルは高事前知識学習者には「冗長」になりやすい Kalyuga, Chandler, & Sweller (2000)：経験者には説明を省いた複雑な図の方が効果的な場合がある 中堅エンジニア ｜ Why 7

PERSONA 2 What：無彩色ベース＋例外シグナル 1色 色は「本当に例外的な情報」だけに温存し、希少性で意味を強める 白背景教材 ダーク背景教材（ログ／ターミナル） 本文はベース #1A1A1A（17.40:1） 本文は #E8EAED（13.83:1） 例外シグナル #D93025 ／ 4.77:1 重大な例外・障害・セキュリティ警告のみに使用 中堅エンジニア ｜ What 例外シグナル #F2705F ／ 5.76:1 赤は業務で既に「エラー・異常系」を意味する慣習色。既存スキーマに合致し学 習コストがほぼゼロ 8

PERSONA 2 How：実務Tips 1 色分けより「情報密度」を優先してよい 複雑な構成図・比較表も色なしで十分処理できる 2 色を使うのは「本当に例外的な内容」（障害対応・セキュリティリスク・非推奨 API等）に限定する 3 教育的な色分け凡例（新卒向けの3色システム）は原則不要 4 ダークテーマのキャプチャでは、赤系ハイライトを#F2705F程度まで明度を上げる 5 レビュー資料・アーキテクチャ図は色よりも配置・グルーピング・余白で情報構造を伝える 中堅エンジニア ｜ How 9

比較早見表 Why–What–How：新卒 ／ 中堅エンジニア 観点 新卒（低事前知識） 中堅エンジニア（高事前知識） Why（根拠） シグナリング原理／認知負荷理論 熟達者逆転効果 What（色数） 意味付き3色＋ベース 無彩色ベース＋例外1色のみ コントラスト下限 AA 4.5:1、可能な限り上振れ AA 4.5:1を死守 How（役割） 色で「どこを見るか」を誘導 色を使わず構造・配置で伝える 共通の下限 WCAG 2.1 レベルAA WCAG 2.1 レベルAA 比較早見表 10

実務チェックリスト スライド設計チェックリスト 両ペルソナ共通 ☐ ☐ ☐ 本文・重要な図中文字は 4.5:1以上か 色だけに意味を依存させていないか 低コントラストな背景色を使っていないか 実務チェックリスト 新卒向け教材 ☐ ☐ ☐ 意味付き色を 3色以内に絞ったか 色の凡例スライドを冒頭に置いたか 重要／注意／完了が全教材で一貫しているか 中堅エンジニア向け教材 ☐ ☐ ☐ 教育的な色分け過多になっていないか 例外シグナル色を例外箇所だけに使っているか 色なしでも理解可能な設計にしたか 11

参考文献 ・Sweller, J. (1988). Cognitive load during problem solving. Cognitive Science, 12(2), 257–285. ・Kalyuga, S., Ayres, P., Chandler, P., & Sweller, J. (2003). The expertise reversal effect. Educational Psychologist, 38(1), 23–31. ・Kalyuga, S., Chandler, P., & Sweller, J. (2000). Incorporating learner experience into multimedia instruction design. Journal of Educational Psychology, 92(1), 126–136. ・Richter, J., & Scheiter, K. (2019). Studying the expertise reversal of the multimedia signaling effect. Instructional Science, 47(6), 627–658. ・Fiorella, L., & Mayer, R. E. (2021). The signaling (or cueing) principle in multimedia learning. Cambridge Handbook of Multimedia Learning. ・Ozcelik, E., Karakus, T., Kursun, E., & Cagiltay, K. (2009). An eye-tracking study of how color coding affects multimedia learning. Computers & Education, 53(2), 445–453. ・W3C (2018). Web Content Accessibility Guidelines (WCAG) 2.1, SC 1.4.3 Contrast (Minimum). うさうさ研修工房