WISS 2018

単語と画像を元にしたウェブにおけるスタイルガイド自動生成システムの提案
長谷部 礼* 西村 綾乃*
概要．WEB アプリケーションやネイティブアプリの開発において，スタイルガイドと呼ばれるデザインについてのルールを策定することがある．ガイドラインを決定することで，デザインに一貫性を持たせ，作業者間でデザインの共通認識を形成する上での一助となる．デザインの知識が乏しい場合や，デザイナーがいない状況ではスタイルガイドを作成することは難しい．本研究では，アプリケーションのイメージを表す単語を選択し，ユーザが想像する雰囲気に近い画像を入稿することで，作業者がイメージする配色が自動生成されるシステムを作成した.

1

はじめに

WEB アプリケーションやスマートフォンのネイティブアプリなどの開発の現場では，目的や要件，コンセプトに合わせてデザインを変えてスタイルガイドと呼ばれるデザインや実装する上で必要なルールを設けることがある．スタイルガイドを設けることで，異なる職種を含む作業者間で，配色などデザインに対する共通した認識を得ることができる．しかしながら，企画の担当者が配色の知識を持っていることは少なく，企画段階でのスタイルガイドの設計は難しい．この場合，作成された成果物が出た段階で，企画者と作業者の間で互いのデザインについての認識の齟齬が生まれ，手戻りが発生してしまうこともしばしば起こる．
配色を策定する上で，イメージスケール[1]と呼ばれる雰囲気を表す形容詞とそれに紐づく色の組み合わせを分類したマッピングツールが存在する．このツールを用いることで，イメージする単語に基づいた配色を参照することができる．このような，デザインや配色に関する情報は多く出回っているが，デザインや色彩知識がない状態で配色を決める作業や，デザインのルールを策定するために必要な知識を体系的に取得することは容易ではない．
そこで本研究では，作成するアプリケーションを形容する単語，作業者がイメージする雰囲気にあった画像を入稿し，複数の単語と画像を組み合わせることで，自動で配色を生成するスタイルガイド作成補助システムを提案する．

2

関連研究

デザイン作業を支援する研究は多く存在する．井上ら[2]は，デザインに対する曖昧な感性を可視化しCopyright is held by the author(s).
* ヤフー株式会社て表現することで，共創における人間同士のコミュ二ケーション促進を目的とするシステムを提案している．暮橋ら[3]はコンセプトとなる単語と，それに関連する画像から抽出される特徴色を用いて配色案を提示するシステムを提案している．
一方で，画像の入力からデザインを提案するシス
テムには，FontMatcher[4]がある．これは，画像に写っているオブジェクト名と画像の印象を単語として抽出し，ベクトル空間に落とすことで，画像の説明文，画像に合うシステムが推薦するフォント，推薦フォントの説明が生成される．

3

システム概要本システムでは，3 つあるカラムごとに作業者がアプリケーションのイメージを表す単語を選択し，その単語のイメージに近しい画像を自らシステムに投稿することで，単語と画像に基づいた配色が生成される．また，単語は複数設定することが可能であり，作業者はそれぞれの単語と画像から抽出された色の比率をスライドバーによって調整することで，生成する配色を変化させることができる．本システ
ムは，配色を決定した後，作業者同士で実際の制作物のイメージの共有を促すことを目的に，生成された配色を元にしたプロトタイプを提示する．
使用する単語は，日本色彩研究所の PCCS[5]に記載されている単語を参照し，単語に紐付いた色の彩度と明度の調整に用いている．本システムでは，デザインのメインの色となるメインカラー，背景色となるベースカラー，全体の引き締め色となるアクセントカラーの 3 色がシステムを用いて生成される．
配色が生成されるまでの手順を以下に示す．

WISS 2018

図 2．配色サンプル

図 1．単語と画像から抽出された色の一覧．

1.
2.

3.
4.
5.

想定するデザインの雰囲気にあった単語を任意に選択する．
システム利用者が選択した単語の雰囲気に合うと思う画像を収集し，単語が配置されたカラムの中に画像 3 枚を上限に入稿する(図1)．
選択された単語，入稿された画像を元に，各カラムごとの比率を調整し重み付けを行う．
調整した結果に納得したら右側のカラムにある generate ボタンを押下する．
スタイルガイドが生成される（図 2）．

3.1 アルゴリズム
メインカラー，ベースカラー，アクセントカラーの色抽出の方法について，以下に述べる．
はじめに，入稿されたそれぞれの画像からメディアンカット法を用いて画像減色を行い，任意の数の色を抽出する．ここで，メディアンカット法とは，RGB の画素を，3 次元の直方体内の座標として考え，画素数が同じになるように中央値で分割していく手法である．今回は，任意の数は 8 色とした．次に，抽出した RGB 値を円錐型 HSV 値に変換し，色相環を 12 分割したクラスのどの部分に色相が属するのかを調べる．この時，彩度 S が 0.1(0.0≦S≦1.0)以下の色は除外する．同じクラスに複数の色が分類された場合は，HSV それぞれの平均値を算出し，その値をクラスの代表色とする．
抽出された色が最も多く属するクラスの代表色に，選択されたイメージを表す単語を元に彩度と明度を操作した色をメインカラーとする．ベースカラーは，一番使われていない色かつメインカラーと隣り合わない色の彩度と明度を上げた色とする．アクセント
カラーは，抽出した色の中に，色相環上でメインカ
ラーの反対側の位置に色を持っていれば，その色をアクセントカラーとする．もし持っていない場合は，補色を計算し，その色をアクセントカラーとする．

3.2 色の混合
ユーザはスライドバーを操作することで，それぞれのカラムから抽出された色を任意の比率で混ぜることができる．カラムをC" ，𝐶$ ，𝐶% とし，各カラムのスライドバーの比率を𝑆" ，𝑆$ ，𝑆% (0.0≦𝑆' ≦1.0)と表す時，それぞれのカラムで生成された𝐶'()* と𝑆' から生成される色𝐺()* は以下の式で定義する．
%'/" 𝐶'()* ∙ 𝑆'
𝐺()* =%'/" 𝑆'

4

まとめ

本研究では，作業者が選択した複数の単語や画像を元に配色を決定し，プロトタイプを生成するスタイルガイド作成システムを提案した．
今後は，ユニバーサルカラーにも対応した配色の生成や，プロトタイプ常に生成されるボタンなどのモジュールにもシステムで提案された配色を提示し，スタイルガイドで得られる情報の緻密化を図っていきたい．
また，実際に本システムを用いた場合，企画段階でのスタイルガイドの策定にどのような影響があるか実験を行っていく予定である．

参考文献
[1]

小林重順：カラーイメージスケール，講談社,2001.

[2]

井上敬文，田崎幸彦，加藤俊一：感性の可視化ににおける共創支援の試み，映像情報メディア学会技術報
告，Vol.30,NO20,pp25-28,2009.

[3]

暮橋昌宏，柳沢秀吉：コンセプト画像の特徴色を用いた配色探索支援システムの開発，日本デザイン学会
研究発表大会概要集，Vol.57,2010.

[4]

Saemi Choi, Kiyoharu Aizawa, and Nicu Sebe.
2018.

FontMatcher:

FontImageParingfor

Harmonious Digital Graphic Design. In 23rd
International Conference on Intelligent User
Interfaces (IUI '18). ACM, New York, NY, USA, 37[5]41.
日本色彩研究 PCCS ハーモニックカラー201,1986.