情報処理学会第 82 回全国大会

5ZC-06

グラフィックデザインのためのセマンティクスを考慮したスマートな色提案
玉置 尚吾†

北 直樹‡

斎藤 隆文§

東京農工大学 工学部情報工学科

1. はじめにペイントアプリケーションを使ってイラストや図表の色付けを行う際，図 1 に示すような OS標準のカラーパレットや，RGB，HSV の値をカラースライダーで選択することが多々ある．OS
標準のカラーパレットはアプリケーションと独立している．独自のカラーパレットを実装したアプリケーションも汎用的なパレットであり，編集内容に応じて動的に変化するものではない．
汎用的なパレットを使用した色の探索は，非効率的な作業であり，デザインの可能性の広がりは限定される．そこで，入力として画像のレイヤ名が与えられた際，レイヤ名の単語やフレーズに基づいて，画像のセマンティクスを考慮した複数の色候補を生成して提示する新たな色提示方法を提案する．これにより，ユーザーの創造性とデザインプロセスの効率化を支援することができる．

を生成することは，アーティストやデザイナーを支援し，カラーパレットから自動で色付けできる.

2.2 カラーパレットの生成手法
これまでにユーザーのテキスト入力を基にしたカラーパレットの生成方法が研究されている．
学習ベースの手法は，大規模なデータから意味的な関連性を学習することにより，カラーパレットを生成する．Text2Colors [1]は，一単語ではなく，フレーズレベルのテキスト入力をサポートする生成モデルである．

3. 提案システム提案手法では，あらかじめレイヤ名が設定された SVG 画像を入力とし，Text2Colors [1] を色候補の生成モデルとして用いる．画面に入力画像を表示し，レイヤごとの色付けやレイヤ名の変更が可能である．システムは Web アプリケーションとして実装する．色候補を提示するシス
テムの画面表示を図 2 に示す．

(b) 色候補の表示

図 1 OS 標準のカラーパレットとカラースライダー

2. 関連研究
本章では，色と言語の関係とカラーパレットの生成手法に関する先行研究について述べる．

2.1 色と言語
色は高レベルのセマンティクスの概念と強く関連しており，色と言語の関連性は十分に確立されている．テキスト入力からカラーパレット
Semantics-Aware Smart Color Suggestion for Graphic Designs†Shogo TAMAOKI, Department of Computer and Information
Science, Tokyo University of Agriculture and Technology.
‡Naoki KITA, Department of Computer and Information
Science, Tokyo University of Agriculture and Technology.
§Takafumi SAITO, Department of Computer and Information
Science, Tokyo University of Agriculture and Technology.

(a) システムの画面表示(c) 候補色の色付け
図 2 色候補提示の画面表示

提案システムでは，ユーザーがレイヤ上で右クリックを行うことで，レイヤ名に基づいた 5 色の色候補が円形に表示される（図 2 b）．図 2 は“sea”というレイヤ名に基づいて提示された色候

4-171

Copyright 2020 Information Processing Society of Japan.
All Rights Reserved.

情報処理学会第 82 回全国大会

補である．円形メニューのいずれかの色をクリックすると，その色が画像に色付けされる（図 2c ）．
ユーザーが画像の全体イメージをフレーズとして持つ場合には，全レイヤに対して，色の探索に使われるテキストを追加で入力できる．図 3 aは，全体イメージとして，“eco”というテキストを追加で入力した際の，円形メニューである．
表示される色候補は 10 色に増える．円形メニュ
ーの左半分は，図 2 b と同じ色で，“sea”を基に生成された色候補である．右半分は，“sea”と“eco”を基に生成された新たな色候補である．また，ユーザーはアプリケーション内でレイヤ名を変更することで，新たな色候補を得ることができる．図 3 b は，レイヤ名を “sea”から “earth”に変更した際に新たに表示される円形メニュー
で あ る ． 円 形 メ ニ ュ ー の 右 半 分 は ， “earth” と“eco”を基に生成された色候補である．

(a) 全体イメージの入力 (b) レイヤ名の変更
図 3 全体イメージの入力とレイヤ名の変更によって新たに得られる色候補

アプリケーション内での全体イメージの入力とレイヤ名の変更によって，多様な色候補を表示でき，ユーザーの色探索を支援する．

4. ユーザースタディ
提案手法がユーザーの創造性を支援することを検証するために，ユーザースタディを実施した．本研究の目的は，ユーザーの創造性を支援することであるため，提案手法による効果を定量 的 に 評 価 す る た め に Creativity Support
Index(CSI) [2] を 使 用 す る ． CSI ス コ ア は ，Collaboration,Enjoyment,Exploration,Expressiveness, Immersion, Results Worth Effort の 6
項目でツールの創造性を定義し，最大 100 点でスコアリングされる．に色付けを行うタスクを課した．タスク完了後，CSI スコアを測定するためのアンケートを実施した．

4.2 結果ユーザースタディには 6 名が参加し，タスクには 10 分間の時間を与え，SVG の編集ソフトである Inkscape [3] を従来手法とした．CSI スコアの測定結果を表 1 に示す．Collaboration は，別ユーザーとの共同作業がないため，ここでは 0 (該当なし)とする．
表 1 CSI スコアの測定結果
CSI の項目
従来手法
提案手法
Collaboration
0 [0%]
0 [0%]
Enjoyment
10.2 [20%]13.2 [21%]Exploration
9.8 [19%]
14.8 [23%]Expressiveness11.7[23%]
13.2 [21%]Immersion
7.0[14%]9.5 [15%]
Results Worth Effort
12.0[24%]
13.5 [21%]
CSI
50.7
64.2
CSI スコアの測定後に行ったアンケートでは，「最初のイメージと違っても，提案された色を試したくなる」「デザインアイデアが多様」等の肯定的な意見が挙げられた．また，「気に入った色の保存ができれば良い」等のインターフェースに関する改善点も挙げられた．

5. おわりに提案手法による色候補の提示方法を用いることで，ユーザーの創造性を支援し，ユーザーが多様な色候補を探索できることを CSI スコアによって検証した．今後は，インターフェースの細かい点を改善し，ユーザーにとってさらに使いやすく，より創造性を支援可能なシステムとする必要があると考える．

参考文献

4.1 実施方法
ユーザースタディでは，実験参加者に汎用的なカラーパレットと，それに提案手法を加えたツールの 2 つのツールを用いて，グレースケールのSVG (Scalable Vector Graphics) 形式の画像に自由

4-172[1]. Hyojin Bahng, Seungjoo Yoo, Wonwoong Cho,
David Keetae Park. Ziming Wu, Xiaojuan Ma,
Jaegul Choo: Coloring with Words: Guiding
Image Colorization through Text-based Palette
Generation, European Conference on ComputerVision (ECCV) 2018.
[2]. Erin Cherry, Celine Latulipe: Quantifying theCreativity Support of Digital Tools through theCreativity Support Index, ACM Transactions on
Computer-Human Interaction (TOCHI) 2014.
[3]. Draw Freely | Inkscape, https://inkscape.org,
2020 年 1 月 8 日アクセス．

Copyright 2020 Information Processing Society of Japan.
All Rights Reserved.