WISS 2021

色の修飾語を用いた対話的なイラストの色編集
住田 桃子 ∗

Nolwenn Maudet†

福里 司 ∗

五十嵐 健夫 ∗概要.
イラスト制作の際，色の編集は非常に重要な工程である．しかし，色を調整するには複数のパラメータ（例：RGB 値や HSV 値）を設定しなければならず，特に初心者ユーザにとって，頭の中で想像する色を見つけることは非常に難しい．そこで本研究では，“Lighter” 等の色に関する単語（修飾語）を用いて，効率的に色空間内を探索する手法を提案する．具体的には，ユーザは修飾語を指定することで，修飾語に対するカラースライダを自動生成するものである．また，本システムは複数の領域に対して同時に色の編集を行うことができるため，画像全体の色の関係を維持したまま編集することができる．更に初心者
ユーザとアマチュアアーティストを対象としたユーザテストを実施し，本研究の有用性を検証した．

1

はじめにアーティストやイラストレータは，カラースライ
ダ等を用いてイラストの色編集を行っている．しかし，色は 3 つ (以上) のパラメータで構成されているため，特に初心者にとってパラメータ値に対する色を把握することは未だに困難である（例：画像加工においてどのパラメータを変更すれば良いのかの判断や，シーンにあった新色を追加する際の判断）．
これらの問題を解決するために，パラメータ空間（色空間）を効率的に探索する技術が複数提案されている．Shugrina ら [14] は，アナログの絵具パレットのように，PC 画面上で複数色のブレンドを直接行うためのデジタルパレットを開発した．更に，Shugrina
ら [15] は，ユーザが指定した色に（RGB/HSV 空間で）近い色を可視化する拡張機能も考案している．
これらの手法は，ブレンド操作の時にパラメータ値の直接的な操作（例：スライダ操作）を行う必要がないものの，ユーザは適切な色サンプルを用意しなければならない．更に，「今の色よりもっと薄くしたい」等の色の編集には不向きである．更に，入力イラストの色情報（初期条件）やイラスト全体のバランスを考慮しながら色を調整することも難しい．
そこで本稿では，“lighter” や “greener” 等の色に関する単語（修飾語）を用いて，イラストの色を効率的に編集するための「修飾語スライダ」を提案する (図 1)．提案手法では，入力イラスト中で「編集したい領域」に対する修飾語スライダを逐次構築作成することで，適切な色を設定することができる．
提案する修飾語スライダを定性的に評価するために，16 名の被験者（素人ユーザ 8 名とアマチュア・アーティスト 8 名）を対象としたユーザテストを実施した．その結果，提案手法は，ユーザに新しい色をイメージさせやすくする点や，既存のツールと組
∗
†

東京大学
The University of Strasbourg

Before

Edit

After

1

1

2

2

"deeper"

図 1. システムの概要．ユーザは画像領域と修飾語を選択し（左），生成された修飾語スライダを用いて選択領域の色値を調整する（中・右）．イラストはFLAT ICON DESIGN [17] から引用．

み合わせることで，より色の探索を効率化できる点といったポジティブな回答が得られた．

2

関連研究

2.1

色の編集

市販のペイントツールには，カラースライダや，プレーン，ホイール，パレットといった色の設定機
能が多数用意されているが，RGB/HSV 色空間（パラメータ値）の中から適切な色を見つけることは依然として難しい．このような問題を解決するために，色設定をサポートするための手法が数多く提案されている．これらは大きく三つのアプローチに分類される．
一つ目のアプローチは，ユーザが描きたい絵の構図を考える工程自体を支援する方法である．Meierら [7] や Jalal [5] は，色付きのシンプルな図形（例：円や四角形）を画面上に配置することで，描きたい絵の構図（イラスト全体の色のバランス）を事前に確認するシステムを考案している．しかし，これらは各図形に対する色の設定は自力で行わなければならない課題がある．二つ目のアプローチは，事前に用意された複数の色を基に新たな色を生成する手法である．Shugrina ら [14] は，アナログの絵の具パWISS 2021

レットを参考に，ユーザが画面上で複数の色を直接ブレンドできるデジタルパレットを考案した．しかし，この手法は，ブレンドするための適切なサンプル点（初期の色）を複数用意しなければならず，RGB空間内の色の設定を効率化することはできない．三つ目のアプローチは，RGB/HSV 空間内での探索をサポートする方法である [5][8]．例えば，Shugrina
ら [15] は，任意の色に対する（RGB/HSV 空間上の）隣接色を視覚化する機能を設計した．しかし，これらの手法はイラストの色編集を行うタスクにおいて，入力イラストの色情報を考慮することができない．これらを踏まえ，我々は入力イラストの色情報を考慮しつつ，より直感的な色の編集手法を検討する．

図 2. 提案システムのスクリーンショット．
Vector Representation of Modifier

2.2

自然言語処理分野における色の表現

任意の色に対して特定の単語（例：“赤” や “青”）が用いられている背景から，自然言語処理の分野では「色情報」と「言語情報」の関係に関する研究が盛んに行われている（例：色記述の生成，色修飾語の役割）．例えば，McMahan ら [6] や Monroe ら [11]は色を説明するための単語や文章をモデル化することで，任意の色に対する説明文を自動生成する手法を提案している．また，Monroe ら [12] は，言語情報を利用し，類似する色の中から各色を識別する方法を提案した．更に，Winn と Muresan [18] は色の修飾語（例：lighter）に対する色の変換ルールを提案し，Han ら [3] によって，このルールが一般化されている（詳細は第 3.1 節参照）．本研究では，色の修飾語による色の変換ルールを利用し，イラストの色の編集を行うタスクに特化した手法を検討する．
自然言語の修飾語を用いたパラメータ操作

言語情報を用いてユーザのデザインプロセスを支援する手法が提案されている [2]．Yumer ら [19] は，「よりファッショナブルに」などの自然言語の修飾語を用いて，3D 形状を変形させる手法を提案した．また，Streuber ら [16] は，クラウドソーシングによって得られたデータを用いて 3D アバターを生成するツールを設計した．
言語情報を用いた色情報の編集技術としては，主にカラーパレットの設計 [1] や線画イラストへの色付け [20] 手法が挙げられる．また，Heer ら [4] は，Web アンケートによって集めたデータを基に色の修飾語の確率モデルを構築し，カラーデザイン向けのインターフェース（例：修飾語によるピクセル選択機能）を構築した．これらの手法は，言語から直接色を生成するタスクに適している反面，入力画像の色情報を考慮しながら色値の編集は困難である．そこで本研究では，上記の手法を参考に，自然言語情報を用いたパラメータ操作を検討する．

9100"bluer"GloVe
100-d32

1633
FC23FC1

Reference Color

図 3. 色の修飾語を基に入力の色 ⃗r ∈ R3 を変換するネットワークの構造.

32.3

Target Color

Modifier

提案手法

本システム（図 2）は，Python 3 と JavaScriptをベースに，Flask フレームワークを用いた Web ア
プリケーションとして実装している．

3.1 色変換モデル
Han ら [3] は，“lighter” などの色の修飾語を用いて入力の色 ⃗r ∈ R3 を変換するモデルを提案した．
具体的には，Winn と Muresan [18] が提案するルールを RGB 色空間上で一般化するために，以下のモデルを提案した．

⃗t = M⃗r + β⃗(1)⃗t ∈ R3 を変換後の色，M ∈ R3×3 は変換行列，β⃗ ∈R3 は変換ベクトルを意味する.
次に，Winn と Muresan のデータセット [18] を⃗ を推定するネット
用いて，色の修飾語から M と βワークを構築する（図 3）．但し我々は，色の修飾語を特徴ベクトルに変換する際，Han らが用いた
300 次元の Word2Vec [9][10] の代わりに，GloVe色の修飾語を用いた対話的なイラストの色編集

表 1. 色の修飾語のリスト．

acidicbluer
bluishbrighterbrownerbrownishburnt
coolerdarkerdarkishdeeperdirtierdullerdustier
electric

faded
goldenergrayishgreenishgrosserhotterlighter
mediummidmoremuddiermurkieroﬀorangepaler

pastelpinkerpinkishredderreddish100-d [13] を用いることで計算コストの削減を行っ𝒄

対話的な色調整本システムを用いたイラストの色の編集の手順は，入力イラストの (1) 領域を選択，(2) 修飾語の指定，(3) 修飾語に対応したスライダによる選択領域の色の調整，を繰り返すものである．

3.2.1

𝒘𝒗𝒊𝒐𝒍𝒆𝒕“violet”“pastel”

領域選択

入力イラスト（SVG 形式）の領域を直接マウスクリックすることで，一つの領域を選択することができる（過去に選択された領域情報は上書きされる）．また，Shift キーを押しながらマウスクリックをすることで，複数の領域を同時選択することができる．視認性の向上のため，選択された領域にラベル ID (i ∈ {1, · · · , N }) を付与し，1.5 秒に 1 回点滅する機能を追加している．但し，この点滅は，ユーザがスライダ操作を行う際は自動的に OFF になる．
その一方で，Clear Selection ボタンを押すことで，選択された領域情報をリセットすることができる．

3.2.2

truer
ugliervioletweirderyellower

RGB Color Spaceた．本ネットワークには，任意の色の修飾語をテキスト入力することができるものの，精度が不十分な修飾語が存在する可能性がある．そこで我々は，良好な結果が得られる修飾語を選別し，リスト化した（表 1）．但し，任意の修飾語を指定できるように，本システムにテキストボックスを用意している（図2(右側)）．

3.2

richricher
rosiersandiersofter

色の修飾語に対するスライダの生成𝒘−1

図 4. 色の修飾語スライダを用いた RGB 空間内での色探索の一例.

は修飾語に対応する色に近づき，スライダの左側(= −1.0) は修飾語から離れた色を意味する．
また，右上部にあるマイナスボタンをクリックすることで，一度生成した修飾語スライダを削除することができる (図 2).

3.2.3

本システム下部に表示された修飾語のリスト（表1）をクリック（またはテキスト入力）することで，色変換モデル（式 1）に基づく修飾語スライダを生成する．スライダ操作による色の値 ⃗c ∈ R3 は以下のように計算する．

+1

サポート機能スライダ操作による色の編集を効率化するために，三種類のサポート機能を実装している．

a) プレビュー機能： 各スライダの下部に，選択された領域（ID 番号）に対応する色を直接表示する．

(2)

また，ユーザがスライダ値を調整した時，画像上の選択領域の色もリアルタイムに変更する．

w ∈ [−1.0, 1.0] は重み係数，⃗r は選択された領域の色， ⃗t は色変換モデルによって推定された色である．

b) スライダの範囲拡張機能： Extend ボタンを押すことで，スライダの値 w の範囲を拡張することができる（最大で −3.0 ≤ w ≤ +3.0 まで拡張可能)．

⃗c = (1.0 − w)⃗r + w⃗t

つまり，スライダ操作によって重み係数を変更することで，ユーザは自由に選択した領域の色を変更することができる（図 4）．スライダの右側 (= +1.0)c) スライダの更新機能： 修飾語スライダは，指定した領域の色情報 ⃗r を基にスライダを生成する．そこで，スライダ操作後の色 ⃗c を新たな領域の色 ⃗r = ⃗c

WISS 2021

図 5. ユーザテストで使用した SVG 形式のイラスト．

図 6. 修飾語スライダを用いた色編集結果の一例. 左側：“洞窟の中で怒っているような色味”，右側：“海岸で陽気な雰囲気の色味”.

表 2. ユーザテストで用いたアンケート内容．

#Q1
Q2
Q3
Q4
Q5

質問項目
色空間を把握できた.
適切な色を見つけやすかった.
言葉に合う新しい色を想像しやすかった.
色の微調整がしやすかった.
イラストの色編集が十分にできた.に代入することで，修飾語スライダの方向（変換行⃗ ）を更新することができる．
列 M と変換ベクトル β

4ユーザテスト

本手法の有用性を評価するために，16 名の被験者（デジタルイラスト作成経験のあるアマチュアアー
ティスト：8 名と素人ユーザ：8 名）を対象とし，従来の RGB/HSV スライダ（ベースライン）との比較実験を行った．

4.1 手順SVG 形式のイラスト（図 5）と編集内容を説明する文章（例：森の中で悲しんでいるような色合い，洞窟の中で怒っているような色合い）を被験者に与え，各手法を用いてイラストの色を編集してもらうタスクを行った．タスク完了後に，7 段階のリッカート
尺度 (1 =“全然満足していない” - 7 =“とても満足している”) を用いたアンケート（表 2 参照）に回答してもらうことで，各手法を評価してもらった．更に，簡単なインタビューを実施し，ユーザ体験に関するコメントや今後どのような拡張が必要なのかといったコメントを収集した．所要時間は，一人当たり約 1 時間である．

4.2

結果

図 6 にイラストの色編集結果の一例，表 3 にアンケート結果のスコアと Wilcoxon 符号順位検定の結果を示す．Q3 は通常の RGB/HSV スライダと比較し，提案手法のスコアが高いことがわかる．この結果から，修飾語に合うような「新しい色」をイメージするときに有用であったことが予想される．その一方で，Q4 では，通常の RGB/HSV スライダが高いスコアを示している．このことから，RGB/HSVスライダは色の微調整を行う際に適していることがわかる（但し，アーティストが RGB/HSV スライ
ダによる色編集操作に慣れていた点が影響している表 3. アンケート調査の結果．

#Q1
Q2
Q3
Q4Q5平均 ± 標準偏差ベースライン
提案手法

4.06 ± 1.83
4.88 ± 2.00
3.44 ± 1.41
5.63 ± 1.28
5.38 ± 2.49

4.94 ± 1.51
5.18 ± 1.41
5.69 ± 1.36
3.44 ± 1.93
5.25 ± 2.39

p値
1.72 × 10−1
5.86 × 10−1
2.63 × 10−3
4.88 × 10−4
7.54 × 10−1

可能性がある）．その他の質問項目については，平均スコアに多少の差があったものの，いずれも有意差は得られなかった．
また，被験者から，修飾語スライダは新しい色を考える時や，色空間の探索に優れているといった回答が得られた．例えば，4 名の被験者からは，「RGB/HSV
スライダは色の原理（計算方法）を知らないユーザにとって非常に扱いにくい．その一方，修飾語スライダは色値の変化の方向を簡単に設定することができるため，初心者にとても向いている」との意見があった．その他のコメントとして，3 名の素人ユーザからは「修飾語スライダ自体が楽しい」，2 名のアーティストからは「色と言葉を結びつける作業自体が新たな楽しみになるかもしれない」「ユーザの好みに合わせてスライダをカスタマイズできること」との意見があった．しかしその一方，6 名の被験者からは「RGB/HSV スライダは色の微調整に適しているため，修飾語スライダと RGB/HSV スライダを併用するとより便利になる」といったシステム自体の拡張に対する意見も得られた．

5

むすび

本研究では，色の修飾語に対するスライダを生成し，入力イラストの色を効率的に編集する手法を提案した．現実装では，色の修飾語の種類や言語が限定されているため，将来的には修飾語の種類の拡張（例：海，英雄など）や，様々な言語のカスタマイズ可能な機能を検討している．また，修飾語と色の対応についても，まだ不自然な結果が出てくることが多く，改善の余地があると考えられる．任意の修飾語とスライダの組み合わせは，色の調整以外の様々なコンテンツ制作支援に利用することが考えられるので，他の応用先についても検討する予定である．

色の修飾語を用いた対話的なイラストの色編集

謝辞
本研究は JST CREST JPMJCR17A1 の助成を受けて実施されたものである．

参考文献[1] H. Bahng, S. Yoo, W. Cho, D. K. Park,Z. Wu, X. Ma, and J. Choo. Coloring withWords: Guiding Image Colorization ThroughText-Based Palette Generation. In V. Ferrari,
M. Hebert, C. Sminchisescu, and Y. Weiss eds.,
Proceedings of 15th European Conference on
Computer Vision (ECCV), pp. 443–459, Cham,
Switzerland, 2018. Springer.
[2] S. Chaudhuri, E. Kalogerakis, S. Giguere, andT. Funkhouser. Attribit: Content Creation
with Semantic Attributes. In Proceedings ofthe 26th Annual ACM Symposium on User Interface Software and Technology, UIST ’13, p.
193–202, New York, NY, USA, 2013. Association for Computing Machinery.
[3] X. Han, P. Schulz, and T. Cohn. Grounding
learning of modiﬁer dynamics: An application
to color naming. In Proceedings of the 2019
Conference on Empirical Methods in NaturalLanguage Processing and the 9th International
Joint Conference on Natural Language Processing (EMNLP-IJCNLP), pp. 1488–1493. ACL,
2019.
[4] J. Heer and M. Stone. Color Naming Models forColor Selection, Image Editing and Palette Design. In Proceedings of the SIGCHI Conferenceon Human Factors in Computing Systems, CHI’12, p. 1007–1016, New York, NY, USA, 2012.
ACM.
[5] G. Jalal, N. Maudet, and W. E. Mackay. Color
Portraits: From Color Picking to Interactingwith Color. In Proceedings of the 2015 CHI
Conference on Human Factors in Computing
Systems, CHI ’15, p. 4207–4216, New York, NY,USA, 2015. ACM.
[6] B. McMahan and M. Stone. A Bayesian Modelof Grounded Color Semantics. Transactions ofthe Association for Computational Linguistics,
3:103–115, 2015.
[7] B. J. Meier, A. M. Spalter, and D. B. Karelitz.
Interactive color palette tools. IEEE Computer
Graphics and Applications, 24(3):64–72, 2004.
[8] N. Mellado, D. Vanderhaeghe, C. Hoarau,S. Christophe, M. Brédif, and L. Barthe.
Constrained Palette-Space Exploration. ACM
Transactions on Graphics (TOG), 36(4):60:1–60:14, 2017.
[9] T. Mikolov, K. Chen, G. S. Corrado, andJ. Dean. Eﬃcient Estimation of Word Representations in Vector Space. In Proceedings of theInternational Conference on Learning Representations (ICLR 2013) Workshop Track, 2013.
[10] T. Mikolov, W.-t. Yih, and G. Zweig. Linguistic Regularities in Continuous Space Word Representations. In Proceedings of the 2013 Con-ference of the North American Chapter of theAssociation for Computational Linguistics: Human Language Technologies, pp. 746–751. ACL,
2013.
[11] W. Monroe, N. D. Goodman, and C. Potts.
Learning to Generate Compositional Color Descriptions. In Proceedings of the 2016 Conference on Empirical Methods in Natural Language
Processing, pp. 2243–2248, Austin, Texas, 2016.
ACL.
[12] W. Monroe, R. X. Hawkins, N. D. Goodman,and C. Potts. Colors in Context: A PragmaticNeural Model for Grounded Language Understanding. Transactions of the Association for
Computational Linguistics, 5:325–338, 2017.
[13] J. Pennington, R. Socher, and C. Manning.
GloVe: Global Vectors for Word Representation. In Proceedings of the 2014 Conferenceon Empirical Methods in Natural Language Processing (EMNLP), pp. 1532–1543. ACL, 2014.
[14] M. Shugrina, J. Lu, and S. Diverdi. Playful
Palette: An Interactive Parametric Color Mixerfor Artists. ACM Transactions on Graphics(TOG), 36(4):61:1–61:10, 2017.
[15] M. Shugrina, W. Zhang, F. Chevalier, S. Fidler,and K. Singh. Color Builder: A Direct Manipulation Interface for Versatile Color Theme Authoring. In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems,
CHI ’19, p. 1–12, New York, NY, USA, 2019.
ACM.
[16] S. Streuber, M. A. Quiros-Ramirez, M. Q. Hill,
C. A. Hahn, S. Zuﬃ, A. O’Toole, and M. J.
Black. Body Talk: Crowdshaping Realistic 3D
Avatars with Words. ACM Transactions onGraphics (TOG), 35(4):54:1–54:14, 2016.
[17] TopeconHeroes. FLAT ICON DESIGN, Online
accessed: 25-january-2021.
[18] O. Winn and S. Muresan. ‘Lighter’ Can Still
Be Dark: Modeling Comparative Color Descriptions. In Proceedings of the 56th Annual Meeting of the Association for Computational Linguistics, Vol. 2, pp. 790–795. ACL, 2018.
[19] M. E. Yumer, S. Chaudhuri, J. K. Hodgins,and L. B. Kara. Semantic Shape Editing Using Deformation Handles. ACM Transactions
on Graphics (TOG), 34(4):86:1–86:12, 2015.
[20] C. Zou, H. Mo, C. Gao, R. Du, andH. Fu. Language-Based Colorization of SceneSketches.
ACM Transactions on Graphics(TOG), 38(6):233:1–233:16, 2019.