関西地区

教育システム情報学会

2017年度学生研究発表会

配色能力向上支援システムの実現に向けて
Learning Support System towards Improvement of Color Scheme Skills
中山さくら，林佑樹，瀬田和久
Sakura NAKAYAMA, Yuki HAYASHI, Kazuhisa SETA
大阪府立大学 現代システム科学域 知識情報システム学類
College of Sustainable System Sciences, Osaka Prefecture University
Email: nakayama@ksm.kis.osakafu-u.ac.jp
あらまし：日常生活の中で配色を考える機会は多く，目的に沿って適切に色を選択することが望ましい．
しかし，義務教育課程において配色について陽に学ぶ機会は少なく，自身の行った配色を熟達者に評価してもらい，修正する機会も少ない．本研究では，プレゼン資料やポスターの作成を題材として，色彩理論に基づいた配色について陽に考えさせ，実践的学びの機会を提供するシステムを提案し，配色能力向上の契機を与えることを目的とする．
キーワード：配色能力，VBA，実践的学び，色彩理論

1.

はじめに

日常機会において，身につけている服，部屋に置く家具，会社や学校で用いるプレゼン資料やポスターなど，配色を行う対象は多岐にわたる(1)．これらの配色は，服ならば上品な印象を与えたい，家具ならば部屋をより広く見せたい，プレゼン資料やポスターならば聞き手に読みやすい配色を行いたいなど，目的に従って適切な色を選択できることが望ましい．
しかし，義務教育課程において配色を学ぶ機会は少なく，自身が行った配色に対して，熟達者に評価してもらい，改善，学習していくといった実践的な学びの機会も乏しい．また，色彩検定のための Web教材といった従来の学習教材は，あらかじめ配色の問題設定が与えられているため，自身が行った配色を改善していくような実践的な学びは困難である．
そこで本研究では，日常機会において，学習者が配色目的に対して理論的に配色を考える能力向上を目掛けたシステムを提案する．

2.

アプローチ

本研究では，日常的に配色を行う機会として，学生や社会人など幅広い年齢層が経験するプレゼンテーションに着目し，その際に利用するプレゼン資料やポスターを学習題材とする．
2.1 配色の学習活動サイクル
図 1 に本研究での配色の学習活動サイクルを示す．
まず学習者は(A)プレゼン資料やポスターにおいて配色を行い，(B)配色に対してシステムから色彩理論に基づいたフィードバックを受ける．学習者はフィードバックに基づき(C)自身の配色を改善し，新たな配色を行うことで，実践的に配色の学びを深めるという学習活動サイクルを想定している．
2.2 配色の目的

図1

配色の学習活動サイクル

考える．
① 背景色とテキスト色を読みやすい組み合わせにする．
② スライド全体の色から目的とする印象を与える．
①，②の 2 項目に対し，学習支援システムには適切な配色が行われているかを判定し，学習者の改善を促すフィードバックを返すことが求められる．
目的②では，スライド全体の印象を判断するために，テキストや図形などのオブジェクトを含めて 1平面の画像として処理できる必要がある．しかし，重なる図形の重なり部分の色が透過，重畳して 1 つの合成色を形成するような場合には，そのような色の重なりの認識は画像処理的に難しい．また，一般に配色はオブジェクト単位でなされるので，重なり部分(合成色)の配色変更は，それに関わるオブジェ
クト群の(分解色への)配色変更を伴う．現状では，合成色をオブジェクト単位で調和がとれる分解色へ変更するといった複雑な処理を要する②の実現は困難であるため，本研究では，目的①にフォーカスした，配色能力の向上を支援する．
2.3 判定方法
配色目的に対して，背景色とテキスト色が適切に配色されているかを判定するために，明度と色相の二つの尺度を用いた色彩理論に基づく判定式が提案

プレゼン資料やポスター制作の，配色を考える際に考慮すべき点は，主として以下の 2 項目であると

147

関西地区

教育システム情報学会

されている(2)．この計算式を以下に記載する．ここでは，背景色を BG，テキスト色を T，R, G, B はそれぞれ対象（BG, T）の「赤，緑，青」の値を表す．

表 1 フィードバックのカテゴリ

i. 明度の適正判定式
𝐵𝐺の𝑅値 ∗ 299 + 𝐵𝐺の𝐺値 ∗ 587 + 𝐵𝐺の𝐵値 ∗ 114
1000
𝑇の𝑅値 ∗ 299 + 𝑇の𝐺値 ∗ 587 + 𝑇の𝐵値 ∗ 114
1000−

≧ 125

ii. 色相の適正判定式

フィードバック

明度差，色相差ともに適している場合

明度差，色相差共に丁度良いです．

明度差が足りない場合− 𝑀𝑖𝑛 𝐵𝐺の𝐵値 , 𝑇の𝐵値

明度差，色相差ともに適していない場合

i. ii. の条件を満たす場合，それぞれ良い明度差，良い色相差であることを表す．
この判定式を活用することにより，「明度差は良いが，色相差が足りない」といった，システムからのフィードバックを返すことが可能となる．

3.

明度と色相の条件

色相差が足りない場合

𝑀𝑎𝑥 𝐵𝐺の𝑅値 , 𝑇の𝑅値 − 𝑀𝑖𝑛 𝐵𝐺の𝑅値 , 𝑇の𝑅値
+ 𝑀𝑎𝑥 𝐵𝐺の𝐺値 , 𝑇の𝐺値 − 𝑀𝑖𝑛 𝐵𝐺の𝐺値 , 𝑇の𝐺値
+ 𝑀𝑎𝑥 𝐵𝐺の𝐵値 , 𝑇の𝐵値
≧ 500

2017年度学生研究発表会

明度差は良いですが，色相差が足りません．他の色に変えてみましょう．
色相差は良いですが明度差が足りません．色はそのままで明るさを変えてみましょう．
明度差，色相差共に足りません．
色を変えて，明るさにも差をつけましょう．

配色能力向上支援システム

3.1 システムの概要
本 研 究 で は ， PowerPoint の Visual Basic forApplications (VBA)を使用し，配色能力向上支援シス
テムを構築した．本システムを PowerPoint のマクロとして組み込み，実行することで学習を始めることができる．
システムでは，以下の 2 つの学習モードを提供している．

図 2 問題セットの画面• 与えられた背景色に馴染むテキスト色を選択する問題• 与えられたテキスト色に馴染む背景色を選択

I. 予め用意された問題の演習
II. 自身が作成したプレゼン資料・ポスターを教材とした演習
モード I では，システムが予め用意した背景色に対して，学習者が読みやすいテキスト色を選択し，それに対するフィードバックを提示する．また，システムが予めテキスト色を用意し，学習者に背景色を選ばせることも可能である．
モードⅡでは，学習者が作成したポスターに配置されたオブジェクトの背景色とテキスト色の組み合わせに対して，システムからのフィードバックを提示する．これは従来の学習教材にはない機能である．
このとき，システムは 2.3 節の判定式を用いることで，読みやすい背景色とテキスト色の配色であるかのフィードバックを行う．明度と色相の条件とフィードバックのコメントを表 1 に示す．

4.

動作検証

上記の 2 種類の問題をそれぞれ 25 問ずつ，計 50問を用意した．図 2 に作成した問題セットの例の画面を示す．
動作検証の結果，全被験者において正常にシステムが動作し，フィードバックを表示できていたことを確認した．

5.

今後の課題

本研究では背景色とテキスト色を読みやすい組み合わせにすることを目的にとし，学習者の配色能力の向上を支援するシステムを提案した．
今後の課題として，スライド全体の色から特定の印象を与えるというプレゼン資料やポスターの配色の目的に沿って，学習者の配色能力向上を支援した
い．そのために，3 色以上の配色の良し悪しを判定する計算式の考案を行いたいと考えている．
参考文献

開発したシステムの動作確認のため，大学生 4 名を被験者とし，初期的な検証を行った．提示した問題セットは以下の 2 種類である．

(1) 徳丸，村中，今西: 配色イメージ判定における個人差を考慮したシステム構築の試み，電子情報通信学会論
文誌 D, Vol.J84-D2, No.4, pp.688-698 (2001)(2) Ridpath, C., W. Chisholm.: Techniques for accessibility
evaluation and repair tools, World Wide Web Consortium(2000)

148