色彩教育におけるデジタルデバイス用配色トレーニング
アプリケーションの開発 -アプリケーションの開発についてDevelopment of color scheme training applications for digital devices incolor education - Development of application –折戸 隆樹

Takaki Orito

東京都立産業技術大学院大学

河西 大介

Daisuke Kasai

東京都立産業技術大学院大学

大野

Aya Ono東京都立産業技術大学院大学

Shigeomi Koshimizu

東京都立産業技術大学院大学

綾

越水 重臣

Keywords: 色彩教育，配色トレーニングアプリケーション

１．はじめに美術やデザイン分野における色彩教育では座学と実習を通して，色彩理論（知識的側面），色彩表現（感覚的側面），色彩解釈（理解的側面）の３つを重視して行われてきた１）．その中で，色彩調和や配色方法が与える心理的な効果と物理的な表現方法の習得方法として，絵の具を使用した平面構成や色票を切り貼りするなどの実習が行なわれている．
一方で，昨今のパソコンやスマートフォンの急激な普及により，広告媒体は，従来の紙媒体やテレビだけでなく，インターネットの領域に瞬く間に領域を広げている．このような状況から，これまでの色彩教育にパソコンなどのデジタルデバイスを取り入れた，デジタル色彩への取り組みが進められている．教育面では，メディア芸術・デザイン系の大学生を対象とした「デジタルカラー演習」という授業の取り組みが報告２）されている．
また，研究においては iPad ディスプレイにおける PCCS 表色系の視感測色に関する研究３）や，色票とディスプレイにおける色彩感情に関する研究４）など多くの研究が取り組まれている．
上記のことから，今後の美術やデザイン分野における色彩教育では，これまでの習得方法に加えてデジタルデバイスを利用したデザインワークは欠かせないものであり，それに伴う教育方法のAdvanced Institute of Industrial
Technology
Advanced Institute of Industrial
Technology
Advanced Institute of Industrial
Technology
Advanced Institute of Industrial
Technology

検討やアプリケーションの開発が重要である．
本研究では，色彩教育における色彩の仕組みや配色方法などを習得するための配色トレーニン
グアプリケーション（以下，配色トレーニングアプリ）の開発を行った．
２．配色トレーニングアプリ
２．１ 概要本研究において開発した配色トレーニングアプ
リは，色彩教育における色彩の仕組みや配色方法などを，デジタルデバイスを使って習得することを目的としている．
トレーニング内容としては，色彩が感情に及ぼす影響を調べるために，感情を表す言葉やフレーズと結びつく色彩を選ぶトレーニング項目を設問として設定することとした．色彩の選択方法としては，156 色（12 色相×12 トーン＋無彩色 12色）のカラーパレットから選択する方法を採った．
なお，注意点として，Web ページに表示した配色
トレーニングアプリの色の見え方はデスクトップパソコンもしくはノートパソコンのディスプレイなどの環境により変化することを前提に使用する必要がある．
２．２ 機能(１) 設問項目と色彩選択
配色トレーニングアプリにおける設問項目は，①好きな色について，②9 つの名詞から連想する色について，③9 つの形容詞から連想する色について，④住んでいる国で親しまれている色について，⑤出身地から連想する色に関する 5 項目 20 問とした．
それぞれの設問項目は，各設問に設定された言葉やフレーズと結びつく色彩の組み合わせを選択しトレーニングできるようにするため，独立した 3 色を自由に選択できるようにした（図 1）．
さらに選択した 3 色の配色パターン面積比まで操作できるようにした（図 2）．色面積比の変更操
作はマウスドラッグで行えるようにしている．

144 色に加えて無彩色 12 色の RGB 値を使用し,カラーパレットに並べた際に色相とトーンの変化が均等になるように微調整した計 156 色とした
（図 3）.

図 3 カラーパレット画面

図 1 設問項目の一例

図 2 配色パターン面積比の操作画面例(２) カラーパレットと選択可能色数
従来の色彩教育では，絵の具や色票などの画材を使った手法が行われていたが，これらの手法にはトレーニングのたびに画材を準備する必要があった．色票を使ったトレーニングを実施する場
合，物理的に色票を切り貼りする手間がかかることや,多くの色票は一色ごと短冊状に束ねられていることから配色したい色を選定しづらく,それぞれの色を比較する際にも手間を要するなど,色彩教育以外の工程に時間を費やすことが多くみられる.
今回開発した配色トレーニングアプリでは，カラーパレットからマウスクリックで簡単に色選択できるようにすることで，従来の絵の具や色票などの画材を使った手法にはないデジタルデバ
イスならではの簡便な操作を可能にした．
カラーパレットから選択できる色は，PCCS カラーチャート 5）より 12 色相と 12 トーンの有彩色(３) アプリケーションとトレーニング結果データの再利用性設問項目に提示する言葉やフレーズを設定ファイル（JSON ファイル）の書き換えだけで変更できるようにするカスタマイズ機能，カラーパレットの選択可能色設定を CSV データファイルの入れ替えでカスタマイズする機能も作成した．これにより，設問項目やカラーパレットの設定をトレーニングの目的に合わせて変更することができるようになり，多様な色彩の仕組みや配色方法を習得するトレーニングツールとして活用することができるようになる．
また，トレーニング結果をデジタルデータで保存・蓄積する機能を作成したことで，多人数のトレーニング結果の比較・検討がしやすくなり，学修者の作業負担（紙の色票を切り貼りする手間など）の低減，トレーニング実施に係る費用負担（毎回紙の色票を準備しなくて良い）の低減にもつな
がる．
(４) Web アプリケーション化
アプリケーションの実装形態を Web アプリケーションとすることで，デジタルデバイスのプラットフォームに依存しないトレーニングを可能にした（図 4）．アプリケーションの実装には，Processing の p5.js モードを使い記述し，これをNode.js を使って Web サーバ上に公開できるようにした．

３．まとめ図 4 配色トレーニングアプリのメイン画面

２．３ 使用方法
配色トレーニングアプリの操作方法について，
図 5 を参照し説明する．画面左側には色を選択する 156 色のカラーパレットと下部に選択した色が確認できるスペースが表示される．画面右側には設問が表示される．操作手順は次の通り．
１) 設問内容の確認
画面右側に表示される設問の内容を確認する．
２) 色をクリック
設問の内容に従い，適切と思われる色をカラーパレットから選択しクリックする．
３) 選択した色の確認
選択した色が期待通りの色かどうか，確認スペースの表示を見て確認する．
４) 設問の四角枠をクリック
画面右側の設問に戻り，設問内の四角枠をクリックする．
以上の手順により，選択した色が設問内の四角枠に反映・表示される．これらの手順を繰り返し行うことで，配色トレーニングを実施することができる．

図 5 配色トレーニングアプリの操作手順

今回開発した配色トレーニングアプリでは，156色パレットからマウスクリックで簡単に色選択できる機能を実装することで，従来の絵の具や色票などの画材を使った手法にはないデジタルデバイスならではの簡便な操作を可能にした．また，アプリケーションの実装形態を Web アプリケーションとすることで，Windows/macOS などデジタルデバイスのプラットフォームに依存せず利用可能にした．
このようなデジタルデバイスを使った配色トレーニングアプリを利用することにより，「学修者の色使いの見える化」，「色彩が与える効果と印象への理解」を促すことが期待される．さらに，トレーニング結果をデジタルデータで保存・蓄積できる機能を有することにより，トレーニング結果の比較・検討がしやすくなる効果が得られることも期待される．
４．今後の課題
今後の研究では，配色トレーニングアプリを使用したユーザからのフィードバックも参考にしながら，色選択時の面積比の操作性改善，スマホ，タブレット端末などノートパソコンやデスクトップパソコン以外のデジタルデバイスへの対応，学修者自身のトレーニング結果の振り返りや，学修者個人の配色傾向などに関するアドバイスを確認できる機能への対応などを盛り込んだアプ
リケーションの開発を検討する必要がある．
参考文献
1)小江和樹：美術教育における色彩理解に関する研究（3）教師教育としての色彩教育, 鹿児島大学教育学部教育実践研究紀要17(2007)47-52
2)栗野由美：デジタル色彩学の検討とカリキュラム開発-メディア芸術・デザイン系学生を対象とし た 教 育 実 践 の 検 討 -, 日 本 色 彩 学 会 誌
31(2007)42-45
3)若田忠之,齋藤美穂：PCCS 表色系のiPad ディ
スプレイ上におけるRGB 値の視感測色, 日本色彩学会誌第39巻,第5号(2015)101-104
4)田原紫,村松慶一,松居辰則,齋藤美穂：カラー
カードとディスプレイにおける色彩感情に関する因子構造の比較,日本色彩学会誌第37巻,第3号(2013)304-305
5)財団法人日本色彩研究所：株式会社クレオ,(2004)228-229

DEVELOPMENT AND EVALUATION OF A COLOR SCHEME
TRAINING APPLICATION FOR DIGITAL DEVICES IN COLOREDUCATION
Daisuke Kasai¹, Takaki Orito¹, Aya Ono¹, and Shigeomi Koshimizu¹
1

Advanced Institute of Industrial Technology, Tokyo, Japan.
* Corresponding author: kasai-daisuke@aiit.ac.jp

Keywords: Color Education, Color Scheme Training Application, Digital Colors

ABSTRACTIn this study, we developed a color training application for digital device displays, with special
attention to the appearance of colors on screen. Moreover, we evaluated the application in use. The
purpose was to assist in the learning of color mechanisms and schemes in color education. The mainfeatures of the application are the function to customize the color palette and question items used forlearning, the function to adjust color-area ratios for the selected color scheme, and the function tosave and archive training results as digital data. Since the system is implemented as a web application,
it is independent of the digital device’s platform (e.g., Windows or Mac OS). Color selection fromthe color palette is performed with a simple mouse click—a digital capability not possible withconventional materials such as a brush and paint set or colored paper. Furthermore, the application
allows for the selective adjustment of color-area ratios, which makes it possible to confirm not only
the color selection trends of learners but also other user trends, including the coloring ratios (that is,color schemes) selected. For the evaluation of the color training application, female university
students (aged 18–22 years) used the application with 156 color palettes and responded to an online
questionnaire. The questionnaire items included the evaluation of the color training application’seffectiveness for color education; the time spent by the learner using the application; the confirmationof each user’s own color usage trends (user specific characteristics, including habitual preferences);and the number of colors the user considers appropriate for a color training application. Results wereas follows. In response to the question item “The color training application helped me to become
interested in colors,” 84.8% gave a positive response, selecting one of the two top ratings, “I agree”
and “I somewhat agree.” In response to “The color training applications helped me identify my own
color use tendencies (habits and characteristics),” 87.0% of learners selected one of the two topratings. For “The color training application helped me to better understand the effects andimpressions of colors,” 93.5% of learners selected one of the two top ratings. These results indicatethat the use of the color training application was effective in helping users learn about themechanisms of color, color schemes, and so on.

INTRODUCTION
Color education in the fields of art and design has been conducted through lectures and practicaltraining, with emphasis on three aspects: color theory (knowledge aspect), color expression(sensory aspect), and color interpretation (comprehension aspect) [1]. Hands-on practice such as
making two-dimensional compositions using paints or cutting and pasting color charts is conducted1

as a way to learn the psychological effects of color harmony and color schemes as well as physicalexpression methods.
Meanwhile, the rapid spread of personal computers and smartphones in recent years has quickly
expanded advertising media beyond traditional print media and television to the Internet domain. In
this context, efforts are being made to incorporate digital devices such as PCs into conventional
color education. On the educational side, a course called “Digital Color Seminar” has beenreportedly introduced for university students majoring in media arts and design [2] [3]. In terms ofresearch, numerous studies have been conducted, including one on the visual measurement in thePractical Color Coordinate System (PCCS) on an iPad display [4] and another one on the emotional
effects of colors elicited from looking at color charts and displays [5].
Based on the above, design work involving the use of personal computers will be indispensable
for future color education in the fields of art and design, in addition to conventional learning
methods. Therefore, it is important to research educational methods and develop applications forthis purpose.
In this study, we developed and evaluated a color training application to learn about how color
works and about color schemes in the context of color education.
SOFTWARE
Color training application
The color training application developed in this study is intended to help students learn about thecharacteristics of color and color schemes in the context of color education with the use of digitaldevices. The following is a summary of the usage and functions of the color training application.
It should be noted that the appearance of colors in the application can vary depending on theenvironment pertaining to the computer display.
Instruction on usage
The application is used as follows (Figure 1):
1) Check the content of the questionnaire items
Check the content of the questionnaire items displayed on the right side of the screen.
2) Click on a color
Select and click the appropriate color from the color palette according to the content of thequestion.
3) Check the selected color
Check whether the selected color is the expected color by looking at the confirmation space.
4) Click on the square box of the question
Return to the questionnaire item on the right side of the screen and click on the square box underthe questionnaire item.
By following the steps described above, the selected color will be reflected and displayed in thesquare question box. Color training can be performed by repeating these steps.

2Figure 1. Instructional steps on the use of the application
Functions1) Customizable color palette and questionnaire items
Conventional methods of color education involve the use of painting materials such as paints andcolor charts, but these methods require the preparation of painting materials for each training session.
When training with color charts, time is often spent on processes other than color education, such as
the time required to physically cut and paste the color charts, the difficulty in selecting the desiredcolor scheme as many color charts consist of bundles of each color, and the time required to compare
each color.
The color training application developed in this study allows users to easily select colors from acolor palette with a mouse click, enabling operations that take advantage of the features of digital
devices, which are not available with conventional methods using paints, color charts, and otherdrawing materials. Furthermore, the color palette in the application can be customized by replacing
CSV data files to support the color systems used in various information media and design work, suchas the relationship between hues and tones in the color palette in terms of their arrangement as wellas the number of colors and color settings (Figures 2 and 3). Through the customization of the color
palette, the system is designed for more practical and effective training by using color codes of thecolor systems that are mainly adopted in the field or line of work that the user is aiming to master.
Moreover, the questionnaire items in the color training application are also customizable, so thatthey can be changed simply by rewriting the (JSON) file in accordance with the content of thestudent’s studies (Figure 4).

3

Figure 2: 130-color palette(9 hues, 13 tones, 13 achromatic colors)

Figure 3: 156-color palette(12 hues, 12 tones, 12 achromatic colors)

Figure 4. (JSON) File for setting questionnaire items and examples of questionnaire items
2) Adjustment of the color-area ratio
Since the impression that a color produces differs depending on the size of the area that it covers,
we added a function that allows users to adjust the color-area ratio of the selected colors forquestionnaire items, the answer to which consists of a three-color scheme (Figure 5). The colorarea ratio of each color can be changed by dragging the mouse.

Figure 5. An example of adjusting the color-area ratio

43) Saving and storing training results and reusability
The addition of a function for saving and storing training results in digital data facilitates thecomparison and review of training results for multiple trainees and reduces trainees’ workload(e.g., cutting and pasting paper color charts) as well as the cost of conducting training (no need toprepare paper color charts for each training session).
EVALUATION OF THE APPLICATION
Methods
1) Survey methods
The study participants consisted of 46 female university students who were asked to run the color
training application displayed on a webpage from their desktop or notebook computers.
Subsequently, they completed an anonymous questionnaire to complete using Google Forms. It
was explained to the participants that the data obtained would not be used for any other purpose
than the present study, and their answering the questionnaire was deemed as their consent toparticipate in the study.
2) About the application
The application included 20 questionnaire items in five categories. The questionnaire items wereabout “favorite colors,” “colors associated with nine nouns,” “colors associated with nineadjectives,” “colors that are popular in your country,” and “colors that you associate with yourhometown.”
A total of 156 colors were used for the color palette, consisting of 144 chromatic colors with 12hues and 12 tones, plus 12 achromatic colors from the PCCS color chart [6]. Each color was finetuned so that the hue and tone variations were uniform when arranged on the color palette.
3) Questionnaire
The questionnaire consisted of nine questionnaire items in three categories: “Effectiveness of thecolor training application,” “Specifications of the user interface (UI) of the color trainingapplication,” and “Improvements to the color training application” (eight multiple-choicequestionnaire items and one open question).
SURVEY RESULTS
The results of the survey revealed that 84.8% of the students developed an interest in color, and71.7% of the students were able to learn how colors work (Figure 6). Furthermore, a highpercentage (87.0%) of the students indicated that the color training application was useful inconfirming their own color use tendencies (habits and characteristics) and in understanding theeffects and impressions that colors produced on them.

5Figure 6. Survey results on the effectiveness of the application

FUTURE CHALLENGES
In future research, with the users’ feedback in mind, further development of the application will
be necessary to improve usability pertaining to the color-area ratio when selecting colors; support
digital devices other than notebook PCs and desktop PCs, such as smartphones and tablets; and to
make it possible for user to access the questionnaire results on their own and get advice on theirindividual color use tendencies. Furthermore, it will be necessary to adjust the content and numberof questionnaire items in the application for it to become more effective for color education andless physically demanding.
REFERENCES
1. Oe, K. (2007). A study on color understanding in art education (3) Color education as the teachereducation. Bulletin of the educational research and development, Faculty of Education,
Kagoshima University 2007, 17, 47–52.
2. Awano, Y. (2007). Curriculum development for science of digital color – Discussion about theeducation practice intended for students of media art and design. Color Science Association ofJapan, 31(1), 42–45.
3. Satoru K. (2005). Basis of digital color study: The color study practice which is taught with“word” software. Color Science Association of Japan, 29(supplement), 82–83.
4. Wakata, T., & Saito, M. (2015). A study of visual measurement of PCCS’s RGB value on iPaddisplay. Color Science Association of Japan, 39(5), 101–104.
5. Murasaki, T., Muramatsu, K., Tatsunori, M., & Saito, M. (2013). Comparison of factor
structures on color emotion between color card and display. Color Science Association of Japan,37(3), 304–305.
6. Japan Color Research Institute. (2004). Digital Color Manual. Creo Co., Ltd.

6