---
title: 視認性カラーコード設計_講義スライド
tags:  #デザイン #インストラクトデザイン  
author: [Yukiko](https://docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/P7XQGYD8EX.jpg?width=480
description: 視認性カラーコード設計_講義スライド by Yukiko
published: August 14, 26
canonical: https://docswell.com/s/yukiko_it/53J4L1-2026-08-14-083156
---
# Page. 1

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

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


# Page. 2

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

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


# Page. 3

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

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


# Page. 4

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

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


# Page. 5

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

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


# Page. 6

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

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


# Page. 7

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

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


# Page. 8

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

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


# Page. 9

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

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


# Page. 10

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

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


# Page. 11

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

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


# Page. 12

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

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


# Page. 13

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

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