---
title: ペルソナ別「視認性×カラー設計」 実践ガイド
tags:  #デザイン #インストラクトデザイン  
author: [Yukiko](https://docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LE1YLPV57G.jpg?width=480
description: ペルソナ別「視認性×カラー設計」 実践ガイド by Yukiko
published: August 14, 26
canonical: https://docswell.com/s/yukiko_it/Z8NLRP-2026-08-14-083041
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LE1YLPV57G.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GEWGV2LWJ2.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/47ZL4DM2J3.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/YJ6W3156JV.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GJ5ML4Y5J4.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/9E29LVGG7R.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/D7Y4Q3VGEM.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VENYKVM8J8.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/Y79PV6NXE3.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/G78DPZK97D.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/L7LM1DZMJR.jpg)

比較早見表
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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4EMYWPV6EW.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/PER9Y12NJ9.jpg)

参考文献
・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).
うさうさ研修工房