情報処理学会 インタラクション 2021
IPSJ Interaction 2021

3A112021/3/10

AR を用いた色学習と混色理解のための支援システム
藤井琴音†1五十嵐悠紀†1

概要：色は生活の中で当たり前化しているが，人に心理的・生理的・感情的な影響を与えている．中でも，幼児期に色に触れることは，成長する過程で多様な視野が育つなど大きな影響をもたらす．本稿では幼児期の色学習を支援するため，色と物の関係を紐づけること，色と色を混ぜ合わせた混色の学習をすることの 2 つに着目して AR とイラス
トマーカーを用いた色学習支援システムを提案する．本システムを利用することで，色への関心を高めること，混色の成り立ちを理解することを可能にする．

1. はじめにん色」のように表現し，色名と物をうまく紐づけられていないケースもあると示した．

私たちは色に囲まれた生活をしており，色は人の心の働また幼稚園児への混色理解では，色を混ぜる遊びを素材

きに大きく影響を与える．色は国際的に同じであるが，文を変えながら継続して行うことで素材からイメージが生ま化によって心理的に受ける影響は異なる．例えば色が日本れ，ごっこ遊びの世界に入ったり，そこから素材と色を混人に与える影響として，赤であれば人を興奮させて，時間ぜる行為への探求的な活動に深まっていくといったサイクがたつのを早く感じさせる．青であれば人を冷静にさせ，ルが生まれることが分かっている[5]．

頭の回転などを高める[1]. また，色は暗記力や回想力，認識力といった心理的影響も与える．特に幼少期の色の経験
は「色彩感覚が育つ」，「感性が磨かれ豊かに育つ」，「多様3. 提案システムな視野が育つ」，「脳が刺激を受けて活性化する」という 4

本稿で提案するシステムは，Android スマートフォン上つの大きな影響を与えている[2]． つまり，幼少期から多様にて実装される AR アプリケーションと，OHP シートに印な色に触れて色を認識し，色と自然物などの関係を紐づけ刷したイラストマーカーから構成される．以下にそれぞれることは重要である．色を覚えるフローは赤・青・黄の区の詳細を記す．

別ができる所から始まり，赤・青・黄以外の色の区別ができるようになり，その後に赤・青・黄の概念ができるようになる[3]．

3.1 AR アプリケーション
本システムでは，イラストマーカーに端末をかざすと，本稿では，子どもを対象として色学習および混色理解を画面に CG の物体が表示される．その際に，様々な角度か支援することを目的に，「色と自然物などの関係を紐づけるら CG を見て体験することを想定し，デバイスには Androidこと」，「色と色が混じり合うこと」の 2 つを体験できるシスマートフォン（XperiaTM Z5 SOV32）を採用した．また，ステムを提案する．この 2 つの体験を体現する手段として，Android スマートフォンの内蔵カメラを通してイラストマAR を用いた学習支援システムを実装した．本システムでーカーの上に表示されるように AR アプリケーションを構は Android スマートフォンとイラストマーカーを使用する．

築した．アプリケーション内で表示する CG モデルを作成

ユーザが Android スマートフォンに内蔵されたカメラを通する際には Blender Foundation が提供する Blender，アプリ

してイラストマーカーを見ると，イラストマーカーの上にケ ー シ ョ ン を 実 装 す る 際 に は Parametric Technology

イラストの色と紐づいた自然物などのモデルが表示される．

Corporation 社が提供する Vuforia を用いた．アプリケーシ

マーカーに OHP シートを用いることで重ね合わせを実現

ョン起動と同時にカメラも起動する．一度に CG は最大 6

し，混色体験を手軽に行うことができる．本システムによつまで表示させることができる．

り，色と自然物などの関係を紐づける練習，色と色を混ぜ合わせた混色の学習を可能にする．

3.2 イラストマーカー

2. 関連研究

トマーカーにて 1 色を表現することとし，最大で 6 種類の6 種類のイラストマーカーを作成した．1 種類のイラス

幼児と色に関係する研究はいくつか発表されている．松村，中田らは，幼児の色彩認識は、White，Black＜Red＜Green．
Yellow＜Blue＜Brown＜Purple，Orange，Gray のように進化していくことを示した[4]．更に，中には Orange を「にんじ色学習を可能にした．本稿では学習可能である 6 色のうち，CMY（シアン・マゼンタ・イエロー）の 3 色を原色と設定し，残り 3 色は原色を混ぜ合わせることで表現できる RGB（赤・緑・青）とした．これは RGB 色を原色として各色を重ね合わせたところ，混色本来の色を正確に表現できなか†1 明治大学 総合数理学部 先端メディアサイエンス学科© 2021 Information Processing Society of Japan479

情報処理学会 インタラクション 2021
IPSJ Interaction 2021

3A112021/3/10

ったためである．そこで原色として CMY 色を用いることで，各色を重ね合わせた際に鮮やかな RGB 色を表現することを可能にした．図 1，図 2 に原色を RGB，CMY としてそれぞれ各色を重ね合わせた際の様子を示す．

図 3CMY 色の各イラストマーカー

図 1

原色を RGB とした際の各色の重なり図 4R（赤）を作成する際に使用する
3 色のイラストマーカー

図 2原色を CMY とした際の各色の重なり原色として設定した CMY 色の各イラストマーカーを図3 に示す．RGB の，R（赤）を表現するためには M（マゼ図 5原色 CMY を重ね合わせて実際に作成した
RGB イラストマーカーンタ）と Y（イエロー），G（緑）を表現するためには C（シアン）と Y（イエロー），B（青）を表現するためには C（シ3.3 システムの流れアン）と M（マゼンタ）を用いる．本稿では色と色の重な

図 6 に提案システムの流れを示す．まず，ユーザはりを学習することを目的としているため，RGB を作成する

Android スマートフォンのカメラを通してシアン・マゼンためのイラストマーカーとして CMY の 3 色をそれぞれ用タ・イエロー色のイラストマーカーを見る．ここでイラス意した．これにより RGB 色を作成するために原色を重ねトマーカーとマーカー上に表示されたモデルを見て，「色と合わせて試行錯誤し，混色の成り立ちを理解することを可モノの関係を紐づける練習」をする．

能にする． R（赤）を作成する際に使用する 3 色のイラス

続いて，りんご・はっぱ・しずくと書かれたイラストマ

トマーカーを図 4，イラストマーカーを重ねあわせ実際にーカーを用いた学習を行う．例えば，りんごという記載がRGB を作成した様子を図 5 に示す．

ある場合はりんごの色である赤色を作成する．このとき、続いて各イラストマーカーのモチーフについて説明す

りんごの描かれている 3 色（シアン・マゼンタ・イエロー）

る．原色である CMY 色（シアン・マゼンタ・イエロー）ののイラストマーカーの中から 2 色（2 つ）を選び，重ね合マーカーには、雪の結晶・ハート・星を採用した．RGB 色

わせて赤色を作成する．作成した色が正しい場合には，（赤・緑・青）のマーカーには、りんご・はっぱ・しずく

Android スマートフォンを通して確認するとマーカー上にを採用した．CMY に関してはお絵描きとして頻繁に描かモデルが表示される．作成した色が正しくない場合にはモれる特殊記号の中から，RGB に関しては各色を代表する自デルが表示されないため，再度赤色を作り直す．これによ然物の中から選択した。イラストはペイントアプリで自作り「色と色を混ぜ合わせた混色の学習」を実現する．上記した。自作したイラストを用いて 8cm×8cm のイラストマの手順で，はっぱをモチーフとした緑色の作成としずくをーカーを PowerPoint にて作成した．作成したイラストマーモチーフとした青色の作成も行う．

カーは OHP シートにインクジェットプリンタで印刷し，ラミネーターを用いて保護加工を施した．また未就学児を対象にした研究であるため安全性を考慮し，かどまるを用いてイラストマーカーの角を丸めた．

© 2021 Information Processing Society of Japan480

情報処理学会 インタラクション 2021
IPSJ Interaction 2021

3A112021/3/10

だけが表示されるくらい近くに持って行きたがっていた．
丁寧に説明することで徐々に認識させる距離や位置関係などを理解し，最終的には楽しく遊べていた．
小学生はモデルを様々な方向から映して立体を回り込んでみようとしていた．また，葉っぱはイエローとシアンを重ねた緑色のときだけ表示されるようになっていたが，「イエローでいちょう，イエロー×マゼンタでモミジ，イエロー×マゼンタ×シアンで枯れた葉っぱが出るのかと思った」と複数の組み合わせと実世界のモノを想像して楽しんでいた．また，リンゴでは最初はマゼンタだけでなぜ表示されないのかということで悩んでいたように見えた．その後，葉っぱを楽しんだあとに再度リンゴをやると，マゼンタ×イエローで真っ赤になることに気づき，「そうか！赤はマゼンタとイエローだったんだ！」と喜んでいた．
「シアン×マゼンタで毒リンゴ，シアン×マゼンタ×イエローで腐ったリンゴ！」と他の色の組み合わせで予想をして楽しんでいた．
これらのことから当初は未就学児を対象にした色理解および混色支援を検討してシステムを実装したが，小学生でも十分に楽しめており，特に混色理解については創造力を働かせながら色に対して気づきを得るなど，学習支援になる可能性があると考える．
また，3 次元の表示位置が AR 表示の部分では，手で触ろうとしていたため，触ろうとした際にエフェクトを加えるなど遊びの要素を加えられる可能性がある．

図 6

提案システムの流れ

4. ユーザ実験
ユーザ実験として未就学児 1 名，小学生 2 名(低学年 1名，高学年 1 名)に使用してもらいフィードバックを得た．
図 7 に実験の様子を示す．

図 7

ユーザ実験の様子

5. まとめと今後の課題
本稿では幼児期に色が与える影響に着目し，「色と物の3 人とも使い方はすぐに理解ができ，楽しそうに遊びな関係を紐づける練習」，「色と色を混ぜ合わせた混色の学習

がら混色を覚えていった．単色で表示するものでは，未就を可能」にするシステムの提案と構築を行った．OHP シー

学児は「ハートちゃん」「ほしちゃん」「シアンちゃん」とトを用いたマーカーを使用することで重ね合わせを可能に名前を付けて遊んでいた．

し，混色を手軽に体験できるようにした．提案システムを小学生はすぐにマーカーの使い方を覚え，認識しやすい机とタブレットの距離を見つけていた．一方で，未就学児利用することで，色と物を意識的に紐づけること，色と色の重なりから色彩感覚の向上を目指した．

はカードを重ねたり違うものに取り換えるたびに，机とタ今後は，本稿では実装できなかったカラーバリエーショ

ブレットの距離が遠くなったり近くなったりと定まらず，ンの拡充を行うことで，より効果的に色の学習が支援でき認識に時間がかかる際には，「出てこなーい」とぶるぶる端るようなシステムを目指す．またユーザ実験のフィードバ

末を小刻みに揺らす動作をしていた．これにより余計に認ックから表示される 3 次元モデルのバリエーションを増や識できない状況になってしまっていた．また，四隅のマーすことも行っていく．一方で，すべての組み合わせに 3 次

カーで認識しているアルゴリズムであるが中央部分の絵柄元モデルを対応させるのではなく，子どもの創造力に委ね© 2021 Information Processing Society of Japan481

情報処理学会 インタラクション 2021IPSJ Interaction 2021

3A112021/3/10

るといったシステムの使い方も検討していきたい．

参考文献[1] Btrax.「色が人の心理と行動に与える影響とは」
https://blog.btrax.com/jp/color/ (参照 2020-12-17).
[2] “たかが色、されど色。色が幼児に与える影響と知育への取り入れ方”.https://alpapa.tokyo/color/#i-2 (参照 2020-12-17).
[3] “発達のめやす”．
https://www.jac-youjikyouiku.com/data/hattatunomeyasu.pdf, (参照 2020-12-17).
[4] 松村佳子，中田真代．「幼児の色の認識について」奈良教育大
学教育工学センター研究報告，14 巻，pp. 69-74．1991.
[5] ソニー幼児教育支援プログラム 幼児教育 保育実践事例サイ
ト「実践事例集 Vol.15」（2018 年 4 月発行）https://www.sonyef.or.jp/preschool/practice/, (参照 2020-12-17).

© 2021 Information Processing Society of Japan482