カードの色を読み取り混色の原理を取り入れた着せ替えゲームの提案
丸山ことみ†

馬場哲晃†

串山 久美子†本研究では，カードから色を読み取り，その読み取った色同士を混色するシステムを取り入れた着せ替えゲームを提案する．ファッションコーディネートは、色彩の組み合わせがとても重要となってくる．この着せ替えゲームは，着せ替え遊びの中に，色彩の混色を利用したシステムを強く取り入れることによって，ユーザ自らが色を作りコーディネートを楽しみながら，加法混色の原理に関する理解を促進するためのアプリケーションである．

The Dress Up Game by Color Reader
KOTOMI MARUYAMA†TETSUAKI BABA†KUMIKO KUSHIYAMA†

I propose “The Dress Up Game by Color Reader” which has a system of reading color and color
mixture. A combination of colors is very important to fashion coordinate. This dress up game isapplication which a user understands principle of additive mixture while makes colors and enjoy
the fashion coordinate.

1.

はじめに

手軽に様々な洋服コーディネートを楽しめる着せ替

着せ替え遊びの中に，ユーザ自らが色を作り出す楽しみと，加法混色の原理に関する理解を促進する教育ア
プリケーションを目指す．

え遊びは昔から親しまれてきた遊びである．一般的には人形に洋服を着せたり，に描かれたキャラクタに洋服のイラストを重ねたりする遊び方があるが，近ではソフトウェアアプリケーションを用いて，ＰＣ上に作成されたものも多い．仮想世界のアバタとしての社会的な需要もあり，着せ替え人形の形態が単なる遊びの世界からインターネットを介して広がりを持ちつつある 1)．セカンドライフ，アメーバピグ等に代表される仮想世界におけるアバタでは，服装等の外観が相手とコミュニケーションを図る一要素となっている．しかしこれらインタフェースはマウス，キーボードを利用して，予め用意された衣装を選択するだけであり，こ図１ 作品

れは手軽な反面，ものを作り出す楽しみが損なわれている．
現在、着せ替え遊びは女児だけではなく，様々な年齢層にも楽しんでもらえる遊びといえる 2)．その多くが，ディスプレイ上のゲームであるが，本研究では、実際の紙状のカラーカードをかざし，色を読み込ませ，ゲーム画面内で読み込んだ色を混ぜ合わせることを可能にすることで，その混色によって出来た色に応じて、様々な着せ替えコーディネートができるようにした．
† 首都大学東京システムデザイン学部
Tokyo Metropolitan University, Faculty of System Design

2.

参考事例

2.1 着せ替えゲーム
人気着せ替えゲームの参考事例として，セガが開発した、女性向けアーケードゲームの｢オシャレ魔女❤
ラブ＆ベリー｣がある．これは，トレーディングカー
ドゲーム方式の着せ替えゲームで，様々な種類の髪型，服，靴のカードをそれぞれスキャンし，キャラクタのコーディネートを楽しむというもので，2008 年 9 月
19 日に稼働は終了しているが，トレーディングカー

情報処理学会 インタラクション 2011

ドゲームは男性向けであるといったイメージを払拭し，混色であるが，絵具やポスターカラーなどを教材で使ヒットしたゲームである．

用する小学生くらいの年齢層にとっては，加法混色は

現在ではカードを利用した，着せ替えアーケードゲあまり馴染みのない色表現だと考えられる．

ームがいくつか存在する．本研究でも，これらの事例

この加法混色の仕組みを，カラーセンサを用いて，を参考にし，カードによる操作を取り入れているが，着せ替えゲームに取り入れ，遊びながら加法混色の原

これらの着せ替えアーケードゲームのカードが，収集理を理解出来るツールを構想した．

を目的としたキャラクタに着せる服やアクセサリそのもののカードであるのに対し，本研究では加法混色の原理を強く着せ替えに反映させる為，使用するカードは，色を読み取るためのカラーカードとした．

3.

作品概要

3.1 コンセプト

また，現在デジタルコンテンツとしての着せ替えゲ

ファッションを考える上で色彩の組み合わせはとてームはＦＬＡＳＨなどのソフトで制作する事が出来，も重要な部分であるので，そこに加法混色の原理を織

すでにインターネット上に多くの事例が公開されていり込むことにより，遊びながら自然と混色の原理が理る．女性向けファッション雑誌“ELLE”の WEB サ解できるようになると考えた．

イト“エル・オンライン”では，その時々のファッシ本研究で提案するのは，コーディネートを楽しみな

ョン特集を，着せ替えゲームをユーザに楽しんでもらがら，加法混色の原理を理解する為の，着せ替えゲーいながら，紹介してゆくコンテンツを公開している．

ムである．基本的なターゲットとしては，小学生の女その多くが，ディスプレイ上にゲーム画面が表示され，児を想定しているが，子供と遊ぶ大人にも一緒に楽しマウスで操作するといったものだが，本研究では，ゲんでもらえるように，できるだけ多くの年齢層に受けーム画面はタッチディスプレイ上に表示し，光の三原入れてもらう為，あまりにも子供向けばかりのファッ色である RGB のカラーカードをカラーセンサにかざションやキャラクタになってしまわないように気を付し，色を読み込ませ，ゲーム画面内で読み込んだ色をけてデザインした．また服飾デザインにおいて，色彩混ぜ合わせ，その混色によって出来た色に応じて，検定やカラーコーディネート検定，パーソナルカラー様々な着せ替えコーディネートができるようにした．

検定等の色彩の基本的な知識が必要であり，それらのマウスのみの単調な操作になってしまう事を避けるこ教材としても活用できる．とにより，ゲームとしての性能を上げ，加法混色の原理を遊んでいる内に自然と理解出来るようになる事を

3.2 システム構成
システムの制御には，Arduino と Processing を使用する．Arduino を用いて，カラーセンサ S9706 から狙った．

RGB の値を読みとる．その読み取った値をシリアル
2.2 加法混色

通信で Processing に送りその値に対応した画面を表示

加法混色とは，光の三原色である R(レッド)，G(グさせる．画面表示には，ＵＳＢ接続１０．１型タッチリーン)，B(ブルー)を用いて色彩を表現する方法であパネル液晶ディスプレイを使用し，画面上を触れるこる．減法混色の色料の三原色(CMY)とは違い，色を重ねるごとに明るくなり，最終的には白色になる．

図 2 加法混色

図 3 減法混色

主に，ディスプレイ上での色表現に用いられる加法とで着せ替えの操作ができるようにした．

カードの色を読み取り,混色の原理を取り入れた着せ替えゲームの提案

背景は各キャラクタ４つから選択できる．画面下のサムネイルをクリックしながら，好きな背景を選択し，決定ボタンを押すと，ポーズ選択画面に移動する．
(3) キャラクタのポーズ選択
ポーズは各キャラクタ２つの中から選択できる．
画面下のサムネイルをクリックすると，先程選択された背景にポーズをとったキャラクタが表示されるので、好きなポーズを選択し，決定ボタンを押す．
決定ボタンを押したら，プレイ画面に移動する．

図 4 システム図
図5

回路図

3.3 遊び方
使い手は，タッチディスプレイとカラーカードでゲーム画面を操作する．ゲームの流れは以下の通りである．
(1) キャラクタ選択
キャラクタは２人から選択できる．キャラクタに

図 7 ポーズ選択画面

よって，後に選択できる背景やポーズ，洋服が変化するので，それぞれ違ったファッションの組み合わせを楽しむ事ができる．

(4) 読み取り開始
プレイ画面は下図の通りである．

キャラクタは，大学生くらいの年齢を想定して制作した．小学生の女児が，大学生の少し大人なファッションの着せ替えを楽しむ事ができる．

図 6 使用キャラクタ(2) 背景選択

図 8 プレイ画面情報処理学会 インタラクション 2011

読み取り開始ボタンをタッチすると，カラーセンサを上げ，混色のレパートリーを増やし，幅広いコーデが読み取りを開始する．

ィネートを可能にする事を目指す．また，加法混色のA の部分は，現在読み取っている色が表示されていＣ(シアン)Ｍ(マゼンタ)Ｙ(イエロー)を用いた別バージ

る．

ョンも制作すれば，２つの混色の違いを実感しながら混色の原理を学ぶ事が出来ると考えられる．

(5) カラーカードをかざす
センサー部分にカラーカードをかざすと，A の色がカードによって変化する．

4.2 展望本研究の，色を読み込む着せ替えゲームの応用として，アバタの制作ツールに応用できると考える．

(6) 色をパレットに記憶する

今回はカラーカードを用いて，色を読み込ませていA が変化している状態で A のハートをタッチす

たが，自分の着用している洋服やアクセサリなどから，ると，B に現在読み取っている色が記憶される．カ

色を読み取ることが可能になれば，自分と同じ洋服をードを離すと，A は元に戻ってしまうが，B には記着たアバタが制作でき，人形と実物のユーザの親和性憶された色がそのまま表示されている．この状態で，の高いインタフェースとなる．

カラーセンサに別のカラーカードをかざし，A を押してまた色を記憶させると，今度は最初に記憶された色と加法混色された色が B に表示される．C のボタンを押すと B の色がリセットされ，また色を記憶させることができる．
このように，カラーカードをかざしたり，記憶させる色を組み合わせたりして B に好きな色を表示させる．
(7) クローゼットを開き洋服を選択
B に好きな色を表示させた状態で，D の鍵マークを押すと，B に表示された色のクローゼットと洋服が画面下に表示される．クローゼットが表示された状態で，中の洋服をタッチすると，キャラクタがその洋服に着替える．
各クローゼットに入っている洋服の種類は，クローゼットの色によって違う．キャラクタそれぞれのクローゼットから，好きな洋服を選び，キャラクタを着せ替える，画面左のリセットボタンを押すと着せかえる前の画面にもどる．
(8) 完成お気に入りのコーディネートが完成したら，完成ボタンを押す．完成画面が表示されるので，保存を選択すると，完成したコーディネートの画像が保存される，最初からを選択すると，(1)に戻る．

4.

今後の課題と展望

4.1 課題
今後の課題としては，さらに色の値を読みとる精度

参考文献1) 西川 英彦 金雲 鎬 水越 康: ネット・コ
ミュニティにおけるアバタ効果の考察，立命館
ビジネスジャーナル Vol.4，pp17-36，2010．