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

3B-272024/2/28

配色の可視化と配色技法の推定によるイラスト制作支援ツールの開発
江馬龍之介1,a)

横山大作1,b)

概要：イラストの色塗りにおいて配色は，作品の印象を決定づける要素の一つである．一般的に色を塗る際，イラストレーターは経験に基づいて色塗りを行っているが，初心者は経験が浅いため配色バランスが崩れてしまいやすい．そのため，使われている色の数や色相の配置を利用者が把握することが重要である．
そこで，本研究ではキャンバス上の配色を色相環に可視化するとともに，意図に近いバランスの取れた配色技法を推定して，同様に表示する手法を提案する．推定は代表的な 6 種類の配色技法の中から行うことにした．配色バランスが取れているイラスト 20 枚に対して提案システムを試したところ，8 割のイラストに対して正しく主要な色の抽出が行われ，キャンバス上の配色を可視化することが出来た．また，6 割のイラストに対して推定された配色が納得できる結果になった．

1. はじめにイラストの色塗りにおいて配色は，作品の印象を決定づける要素の一つである．一般的に色を塗る際，イラストレーターは経験に基づいて色塗りを行っているが，初心者は経験が浅いため配色バランスが崩れてしまいやすい．具
体的には極端に彩度の高い色が色塗りの大きな面積を占めてしまっていたり，異なる色相の色を多く使いすぎてしまったりすることなどが挙げられる．このような初心者の課題に対処するためには，よく知られている配色技法を活用することが役立つ [3]．また，既存のイラストアプリの多くは配色のバランスを可視化するシステムは実装されておらず，ユーザが絵を見ながら配色を把握する必要がある．
しかしながら，初心者が配色のバランスを正確に把握し，修正することは難しいと考えられる．

図 1

システム利用例 実際に描画された色に対して測定を行い，その配色を色相環に黒で描画する．それに対して推定された配色を有彩色 (赤または緑) で描画する．(絵: ノーコピーライト
ガールより [2])

そこで我々は，よく知られている配色技法をキャンバス上の配色から推定し，制作を支援する手法を提案する．支援システムを利用することで，配色バランスをより鮮明にイメージすることを可能にし，利用者が円滑に色塗りを行えるようにすることを目指す.
作成したシステムの利用イメージを図 1 に示す．キャン
バスから色の情報をリアルタイムに取得し，現在の配色として色相環上に黒で描画，それに対して推定されたバランスの良い配色を色相環上に有彩色 (赤または緑) で描画することによってユーザの配色支援を行う．配色技法は，よく知られている 6 種類の配色技法の中から現在のキャンバスの配色を基に最も近いと考えられる配色技法を提示する．
キャンバス上の色の現在の配色と，推定されたバランスの良い配色の 2 種類を見比べることで，利用者はバランスの取れた配色をイメージしながら色を塗ることができる．
配色バランスが取れているイラスト 20 枚に対して提案
システムを試したところ，使われている配色は 8 割，推定された配色は 6 割のイラストに対して，人が判断する配色

1a)b)

明治大学 (Meiji University)
ee207008@meiji.ac.jp
dyokoyama@meiji.ac.jp© 2024 Information Processing Society of Japanと同じ配色を推定できた．提案手法はイラスト初心者が配色を決定するためのある程度の指針になると思われる．

1186

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

3B-27
2024/2/28

本論文の構成は以下の通りである．第 2 章で関連研究にいて記述する．キャンバスから色情報を均等にサンプリンついて記述する．第 3 章で提案手法についての説明を記述グしていく．サンプリングされたデータを色とその色の出し，第 4 章でその評価について記述する．最後に，第 5 章

現回数のデータに変換し，人の目では黒や白に見える色やで本論文のまとめを記述する．

出現回数が非常に少ない色が除かれるように明度と彩度，2. 関連研究

出現回数を限定して有効な色を決定する．
実装ではサンプリングは 100 × 100 のグリッド状に行っユーザの配色を支援する方法として，使うべき色の組みた．また彩度が 20 以上かつ, 明度が 25 以上 80 以下，サン合わせを推薦してくれる手法が挙げられる．例えば Web

プリング後の出現回数が 3 回以上のデータを有効な色としサービスの Adobe Color[1] は入力画像の中でカラフルやて判断するように設定している．

ダークなどのカラームードを基に 5 色のカラーパレットを作成する．このサービスはカラーパレットを推薦してくれ

なお，人物画を対象としたため，肌の色や線画の主線の色，影の色は無効な色として設定した．

るが，配色技法などを提示してくれるわけではない．
配色の推薦に関する研究は様々なものがある [4][5]．Qiu
ら [6] はベクターグラフィック文書のためのマルチモーダ

3.2 配色技法推定
使われている配色を基に利用者が意図していると考えらルな色の推薦を提案した．これは画像イメージや周辺テキれる配色技法を推定する．

ストなどからカラーパレットを推薦し，デザインに組み込

3.2.1 配色技法

む．この研究は完成したコンテンツに対して推薦が行われ配色の推定を行うにあたって，よく知られている配色技るため，色塗りをしている最中に配色を推薦してもらうこ法から 6 種類を選び，その中から最も近い配色技法を選択ととは目的が異なる．

することにした．以下，利用する配色技法の説明を行う．

3. 提案手法
提案手法では，利用者が配色バランスをより鮮明にイメージすることを目的としてキャンバス上の色を基に配色を支援する．イラスト初心者が直面する問題として，配色バランスが崩れてしまうことが挙げられる．具体的には色

図 3 はそれぞれの技法の色相環上の位置関係である．
ドミナントカラー配色:

3 色以上を使った配色で，同一・隣接・類似色相を用いる配色 (色相差: 0〜3)
ダイアード配色:色相環で向かい合う 2 色を用いる補色

色相配色 (色相差: 12)
スプリットコンプリメンタリー配色

補色関係にある 2 色を使いすぎてしまったり，配色を気にせずに色を適当に選のうち，どちらか一方の色相を分裂させて 2 色にするんでしまうことが原因である．そのため，使われている色分裂補色配色 (色相差: -)の数や色相の配置を利用者が把握することが重要である．
そこで，本研究ではキャンバス上の現在の配色を色相環上に可視化するとともに，キャンバス上の配色と最も近い配色技法を推定し，色相環上に表示させる．これにより，初心者であっても配色をより具体的にイメージすることが可能になり，バランスの取れた配色を実現することが可能になる．

トライアド配色:

3 色を色相環が 3 等分になるように分割する配色 (色相差: 8)
テトラード配色:

4 色を色相環が 4 等分になるように分割する配色 (色相差: 8)
ヘクサード配色:

6 色を色相環が 6 等分になるように分割する配色 (色相差: 4)

3.2.2 配色推定アルゴリズム

提案システムの構成を図 2 に示す．初めに，キャンバスキャンバスの色の数に適した配色が推定されるように図上の色の情報を PCCS*1 で使われている 24 階調に分割し4 のアルゴリズムで意図に近い配色を求める．3.1 の方法

色相の頻度分布を抽出する．次に，頻度分布よりベースカで取得した色相分布の色の数で大まかに分類し，その後個ラーやマイノリティカラーを抽出し，3.2.2 で説明される推別の条件を基にキャンバス上の配色に最も近いとされる配定アルゴリズムを用いて，抽出された色を基準として最も色技法を推定する．

近い配色技法を推定する．最後に，使われている配色と推本アルゴリズムを実現するために使用している個別機能定された配色を色相環上に表示する．具体的な手順は以下には以下がある．に記す．

平均色相測定:いくつかの色相の平均を求める機能．色相の平均を求める際，度数の総和を色の数で割ったと

3.1 色相分布分析
初めにキャンバス上に塗られている配色の取得方法につしても，度数法では正しく平均を求めることが出来ない．そのため，色相の値を弧度法に変換し sin と cosの平均を求めた後に度数法に戻すことで色相の平均を*1

PCCS(日本色研配色体系): 一般財団法人日本色彩研究所が開発した表色系．ヒュー (Hue) と呼ぶ色相と，明度と彩度をまとめたトーン (Tone) で色を整理し，表示する．[3]© 2024 Information Processing Society of Japan計算している．
マイノリティカラー抽出:

キャンバス上の色の中で，他の1187

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

図 23B-272024/2/28

本システム概要図 図のような流れで利用者は推定された配色を参考に色塗りを行う．

からである．
色相差測定:

キャンバス上の色の色相差を求める機能．配色の推定を行う際，同じ色の数であっても色相差によって最も近い配色技法が異なってくるため，その判断を行うために用いる．

3.3 ユーザーインターフェース
3.3.1 実行環境
GUI は，p5.js*2 と react で構成した．ビルトツールにはVite を利用している．動作状況は，画像のように使用している色の数が極端に多いと動作が重くなるが，イラストの色塗りのようにいくつかの色を塗る程度であれば安定して動作している．また，p5.js の特性上フレームレートを 60以上にすることが出来ないため，描画に遅延が生じてしまう問題点がある．

3.3.2 操作方法
色の描画:

マウスの左クリックによってマウスの座標に選択中の色が描画される．
描画サイズの変更:

キーボードの”+/-”キーをタイプするか，画面上の調整バーをクリックすることで描画サ
図 3

イズを調整することが出来る．

配色技法

消しゴムモードの切り替え:

イプするか，画面上の”e”ボタンをクリックすること色相とのユークリッド距離が最も遠い色相を抽出する

で消しゴムモードに切り替えることが出来る．もう一機能．スプリットコンプリメンタリー配色で分裂色を求める際に用いる．
ベースカラー抽出:

キャンバス上の色の中で最も多く使われている色相を抽出する機能．キャンバス上の色が 1色の場合，その色を返す．色が 2 色の場合，出現回数が多いものを返す．色が 3 色以上場合，マイノリティカラーを除いた色相の平均を返す．これは，全ての色度切り替えると描画モードに戻る．
色相の変更:

マイノリティカラーの方が出現回数が多いことがある© 2024 Information Processing Society of Japan色相バーまたは色相環をクリックすることで色相を調整することが出来る
彩度・明度の変更:

カラーピッカーをクリックすることで，明度と彩度を調整することが出来る

3.3.3 色相環の表示方法
図 5 のように，推定結果を色相環の対応する位置に点で相の中で最も多く使われている色相を返すと，マイノリティカラーを除いたいくつかの類似色相などよりもキーボードの”e”キーをタ*2

p5.js: Processing を Web 向けに改良した JavaScript ライブラ
リ1188

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

図 43B-27
2024/2/28

配色推定のフローチャート図キャンバス上の色の数に応じて推定する配色の可能性を大まかに分ける．その後，色相差を基にどの配色との類似度が高いかを判断している．

を参考に次に塗る色を塗っていく．更にそれに対して推定された配色を参考に次に塗る色の決定や色の修正を行っていく．これを繰り返すことで，キャンバス上の色の配色がバランスのが良いと知られている配色技法に近づいていく．

4. 評価
インターネットから取得したイラストを使い，システムの動作を確認する評価を行った．取得した配色バランスが取れているイラスト 20 枚に対して提案システムを試した
ところ，使われている配色は 8 割，推定された配色は 6 割のイラストに対して，人が判断する配色と同じ配色を推定できた．試したパターンの中で，成功した例，失敗した例
を自作イラストの例を用いて記述する．

4.1 色相分布分析の評価
4.1.1 正しく色が抽出できた例
図 5色相環による配色表示 現在の描画色が白，現在のキャンバスの配色が黒，推定された配色が赤で描画されている．

図 7 の色は彩度，明度ともに有効範囲内の値を取っているため，有効色として色相環上に表示されている．その際，実際の色相は 40 度だが，固定した 24 階調に変換されるた描画し，点の間に線を描画する．この表示により利用者はめ 45 度の位置に点が描画されている．

使われている配色と推定された配色を把握することが可能

4.1.2 正しく色が抽出できなかった例になる．色相環上での配色の表示は主に 2 パターン行われ

図 8 で使われている色は緑色が塗られているように見える．一つはキャンバスの使われている配色の表示である．

るが，彩度の値が 16 で低すぎるため，色相分布分析が行

これは色相環上に黒で描画される．もう一方は推定された

われた際に無効な色として除外されてしまっている．今回配色の表示である．使われている配色に新たに加える色をは，彩度が 20 以上の数値が有効色として判断されるよう推薦するものは色相環上に緑で．使われている配色を修正にしたが，基準値を下げすぎると人には無彩色に見えるよしたものを推薦するものは色相環上に赤で描画される．

うな色 (影など) が有効色と判断されてしまうことがあるた

3.3.4 利用イメージ

め今後も調整が必要である．

図 6 のように利用者は最初に色を自由に塗っていく．それに対して最も近いと考えられる配色が推定される．それ© 2024 Information Processing Society of Japan1189

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

3B-272024/2/28

図 6

図 7

システム利用の流れ

正しく色が抽出できた例 40 度の色相が 45 度に変換されている

4.2 配色技法推定の評価
4.2.1 ベースカラーの判断が正しくできた例

図 8

正しく色が抽出できなかった例 彩度が低すぎて色相環に表示されていない

4.2.2 配色技法を正しく推定できた例 (スプリットコンプリメンタリー配色)

図 9, 図 10 を見て分かるように，キャンバス上の色の中

図 11 のようにスプリットコンプリメンタリー配色を推でも多く塗られている色がベースカラーとして抽出され，定することが出来ている．ベースカラーの色相の平均に対配色技法の推定に用いられていることが分かる．

して，向かい合う色を推定していることが分かる．

© 2024 Information Processing Society of Japan1190

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

3B-27
2024/2/28

必要がある．

4.4.1 配色技法推定
キャンバス上の色の数が 1〜3 色で少ない場合には配色の推定が上手く機能しているが，4 色以上になると配色推定アルゴリズムで正しく認識できず，見当違いの配色を推薦してしまうことがあった．推定する配色技法を決定する際に，色相差を基準により細かく配色技法を推定することが必要であると考えられる．

5. まとめ本研究では，イラストの色相分布を基に最も近いと考えられる配色技法を推定し，色相環に表示する手法を提案し
図 9

ベースカラー: オレンジ 最も多く利用されているオレンジをた．配色バランスが取れているイラスト 20 枚に対して提ベースカラーとして推定が行われている

案システムを試したところ，正しく主要な色の抽出が行われ，8 割のイラストに対して使われている配色，6 割のイラストに対して推定された配色が納得できる結果になった．
そのため，提案手法はイラスト初心者が配色を決定するためのある程度の指針になると思われる．今後，システム全体の有用性についてユーザーテストを行う予定である．また，今回は色相に着目した配色推薦システムの作成を行ったが，トーンに着目した配色推薦システムを作成することが今後の展望として挙げられる．
参考文献
[1]
[2]

図 10

ベースカラー: ピンク 最も多く利用されているピンクをベースカラーとして推定が行われている

[3]
[4]

[5]
[6]

図 11

Adobe Inc.：Adobe Color，https://color.adobe.com/
ja/create/image, (参照 2023/12/17).
ノ ー コ ピ ー ラ イ ト ガ ー ル：令 和 の 白 雪 姫 ．，
https://fromtheasia.com/illustration/
freeprofilepicgirls, (参照 2023/12/20).
カラボ色大学：最短合格！色彩検定 2 級・3 級テキスト＆問題集 第 2 版，株式会社ナツメ社 (2020).
KITA, Naoki; MIYATA, Kazunori. Aesthetic rating andcolor suggestion for color palettes. In: Computer Graphics Forum. 2016. p. 127-136.
COHEN-OR, Daniel, et al. Color harmonization. In:ACM SIGGRAPH 2006 Papers. 2006. p. 624-630.
QIU, Qianru; WANG, Xueting; OTANI, Mayu. Multimodal Color Recommendation in Vector Graphic Documents. In: Proceedings of the 31st ACM International
Conference on Multimedia. 2023. p. 4003-4011.

配色技法を正しく推定できている例 (スプリットコンプリメンタリー配色)(絵: ノーコピーライトガールより [2])4.3 考察4.4 色相分布分析
肌の色や線画の主線の色，影の色は無効色であると判断したが，この色の除外が適切なのかどうかは今後検証する© 2024 Information Processing Society of Japan1191