WISS2014

視覚デザイン探索のためのクラウドソーシングを活用したパラメタ空間解析
小山 裕己

坂本 大介

五十嵐 健夫 ∗概要. 本研究では，パラメタ空間を解析しデザインの「良し悪し」の空間分布を推定することで，パラメタ調整に基づく視覚デザイン探索を支援する手法を提案する．まず，クラウドソーシングを用いたヒューマンコンピュテーションによって，様々なパラメタによるデザインの比較結果を集め，それをもとにパラメタ空間の解析を行う手法を提案する．次に，その解析結果を利用して視覚デザインの探索を支援するための2 つの新しいユーザインタフェースを提案する．(1) Smart Suggestion は比較的「良い」と考えられるデザインを選択的に提示する機能である．(2) VisOpt Slider は「良し悪し」の分布をヒートマップによって対話的に可視化 (Vis: visualization) する機能を有するスライダであり，更にユーザが値を編集している最中に「良い」パラメタへと対話的に最適化 (Opt: optimization) する機能も有する．また，本稿では提案手法を 4 つの異なるデザイン領域に適用した結果も報告する．
Not GoodGood「良し悪し」のVisualization
可視化機能Interactive
対話的な最適化機能
Optimization
パラメタ空間提示されたデザイン

ユーザの編集
User’s Edit

図 1. 本研究で提案する 2 つのユーザインタフェースの概念図．(左) Smart Suggestion．(右) VisOpt Slider．

1

はじめに視覚的なデザインを行う際に，デザインパラメタを編集することによってデザイン空間を探索すること (design exploration) や，それによって最適なデザインを与えるパラメタセットを発見することは，様々なデザインの過程において必要となる作業である．例えばある写真を補正する際には，その写真をPhotoshop や GIMP など写真補正ソフトウェアで開き，明るさ・コントラスト・彩度・カラーバラン
スといったデザインパラメタを調節することでデザイン空間を探索し，最も良い補正を実現するパラメタセットを発見するという作業が行われる．
このようなパラメタ調節は，特に多数のパラメタが存在している場合には，パラメタ空間 (デザインパラメタの張る空間) が広くなり，探索に多くの時間と労力が必要となる．また，よく知ったパラメタであればその影響が予測できるため，余計な探索を削減できることが多いが，見知らぬパラメタが存在している場合には，そのパラメタの挙動を予測できないために，最適なデザインを探すためにデザイン空間を隈無く探索する必要が出てきてしまう．
本研究の目標は，このように多数のデザインパラ∗

Copyright is held by the author(s).
東京大学

メタが存在する際のパラメタ空間の探索を支援することである．そのために，パラメタ空間内におけるデザインの「良し悪し」(goodness) の分布 (goodnessfunction ，すなわちパラメタ空間内の任意の点について，その goodness を計算することができる関数)を推定するための空間解析手法を提案する．本手法ではクラウドソーシングを用いたヒューマンコンピュテーションによって，2 つのパラメタセットによるデザインの一対比較 (pairwise comparison) の結果を大量に集め，このデータに基づいて goodnessfunction を推定する．次に，このようにして得られた goodness function によって実現されるデザイン探索支援のための 2 つのユーザインタフェース，
Smart Suggestion と VisOpt Slider を提案する．
Smart Suggestion (図 1 (左)) はデザインの候補をユーザに提示する機能であるが，ランダムな提示と異なり，比較的高い goodness を持つデザインのみを選択的に提示することができる．VisOptSlider (図 1 (右)) は標準的なスライダの機能に加えて，goodness の分布をヒートマップで可視化する機能 (Vis: visualization)，及び goodness がより高い値になるように各スライダの値を対話的に最適化する機能 (Opt: optimization) を付与したものである．
なお，これらの 2 つのユーザインタフェースは相補WISS 2014的である；ユーザはまず Smart Suggestion を用いて広大なパラメタ空間の中からデザインの候補を選び，続いてそのデザインを起点に VisOpt Slider を用いて更なるパラメタ調節を行うことができる．
本研究の貢献は以下の 2 点である：• クラウドソーシングを用いたヒューマンコンピュテーションによってパラメタ空間を解析することで，デザイン探索を支援する手法．

• 上記手法に基づいてデザイン探索を支援するための，2 つの具体的なユーザインタフェース．
本研究では，写真の色補正・カメラと光源・シェーダ・キャラクタの表情の 4 つのデザイン領域に対して提案手法を適用し，その効果を確認した 1 ．

関連研究

2
2.1

クラウドソーシングを用いた解析

クラウドソーシングとはインターネット越しに待機している不特定多数の群衆 (crowd) に対しタスクを委託 (outsourcing) するというアイデアを指した言葉であり，またヒューマンコンピュテーションとは人間を明確に計算資源と見做しシステムに組み込むことを指す言葉である [7]．両者は全く別の概念であるが，近年ではヒューマンコンピュテーションの実現手法として，計算資源としての人間を，大量に，一時的に，そして安定に供給することができるクラウドソーシングサービスを用いることが増えてきている [2][6]．このような手法により，人間由来のデータをコンピュテーションの結果として大量に生成し，解析に役立てることが可能となる．本研究もこの手法に基づくものであるが，特に連続値をとるパラメタからなるデザイン空間の解析にこの方法を適用する点が既存研究とは異なっている．
クラウドソーシングによって集めた大量のデータを解析することで，Secord ら [9] は物体を視る際の視線方向の評価に関しての，また Reinecke ら [8] はウェブデザインの評価に関しての計算モデルを構築した．これらの研究はある特定のデザイン領域を対象とする代わりに，一度計算モデルを構築すればその領域内の任意のデザインについて評価できるようにするものである．これに対し本研究は，各デザイン空間，すなわち各コンテンツと調整すべきパラメタセットの組について，それぞれデータを収集・解析し，計算モデルを構築する必要がある代わりに，特定のデザイン領域に限らず広く適用できる手法を提案する．
1

本稿では紙面の都合上，解析手法・評価・議論などの詳細を適宜割愛している．詳しい内容は [3] を参照されたい．

2.2

視覚デザインのパラメタ調整支援

デザインの探索支援のための方法として，DesignGalleries [5] に代表されるように，デザインの候補をユーザに提示する手法がある．本研究で提案する
Smart Suggestion も同様のアイデアに基づくもの
だが，推定された goodness の情報を用いて提示内容を決定する点や，候補を選択した後にも VisOptSlider によって更に探索を支援する点などが新しい．
Side Views [11] や Scented Widgets [13] は，GUIウィジェット上にデザインやデータを直接可視化することで，どのパラメタがより良いかをユーザが効率良く評価できるようにするものである．これに対し VisOpt Slider における可視化は，どのパラメタが評価するに値するかを伝えることで，ユーザが無意味な評価を避けることを目指す点で異なる．また最適化の機能との組み合わせが可能な点も新しい．
集合知を活用したデザイン支援システムとしては，Talton ら [10] によるモデリングツールが存在する．集合知を用いてデザイン空間を解析する点では本研究と同様であるが，本研究がヒューマンコンピュテーションによって短時間で効率的にデータを集めるのに対し，彼らの方法は複雑なタスクを行ってくれる熱心なユーザを多数必要とし，また年単位の時間がかかってしまう．また Xu ら [14] も集合知を活用したデザイン支援を行っているが，彼らの目的はある特定のデザインに対するフィードバックを集める点であり，本研究のようにデザイン空間全体を解析するものではない．

パラメタ空間の解析手法の概要

3n 個の連続値をとるデザインパラメタ xi ∈ [0, 1](i = 1, . . . , n) から構成されるデザイン空間を考える．本研究では，これらを縦に並べた n 次元ベクトル x ∈ Rn をパラメタセットと呼び，あるパラメタセット x に対して視覚的なデザイン (画像) I(x) が一意に定まるような問題を扱う 2 ．このような問題設定は実際に多くのデザインタスクに当てはまる．
解析の目標は，goodness function と呼ばれるス
カラー関数 f : Rn → R を求めることである．f はパラメタセット x を入力として受け取り，x に対す
る goodness の値 y = f (x) を出力として計算する関数である．本研究では，goodness を 0 から 1 の連続値とし，値が大きいほど好ましいものと定義する．図 2 に解析手法の流れを示す．以下，それぞれのステップについて説明していく．

3.1

サンプリング

まず始めに，システムは M 個のパラメタセット
x1 , . . . , xM をサンプリングする．現在の実装では，
2

ただし，例えば写真補正のデザインタスクでは，元となる写真が異なれば I も異なる点に注意されたい．

視覚デザイン探索のためのクラウドソーシングを活用したパラメタ空間解析

3.3

パラメタセットのサンプリング

2 点間における比較データの収集

各点におけるGoodness 値の推定

連続的な関数へのフィッティング

図 2. 解析手法の流れ．

サンプリング点における goodness の推定

続いて，クラウドソーシングによって得られた比較データ，すなわち相対的な点数の情報から，各サンプリング点における goodness の絶対値を推定す
る．我々はこの推定問題を，コスト最小化問題として定式化する手法を提案する．具体的には，コスト関数 E を E = Erelative + ωEcontinuous と定義し，これを最小化するような goodness の分布を求める．
ただし Erelative は相対的な点数の情報を反映する項，Econtinuous は近傍のサンプリング点同士が近いgoodness の値を持つようにする項，ω > 0 は両者の項のバランスを調整するパラメタである．

3.4

フィッティング

最後のステップは，各サンプリング点におけるgoodness の値をもとに，連続的な関数をフィッティ

図 3. クラウドワーカに実際に課したタスクの例．クラウドワーカは 2 つのデザインを比較し，5 段階で評価する．

一様なランダムサンプリングによって M 個のパラメタセットを選んでいる．

3.2

比較データの収集

次のステップは，各サンプリング点における goodness の情報の収集である．Goodness の値は本質的に人間の嗜好によって決定されるものであるという観点から，本研究ではクラウドソーシングによるヒューマンコンピュテーションを用いる．
単純なデータの収集方法として，goodness の絶対値をクラウドワーカに付してもらうという方法が考えられる．しかしこのような方法では一貫した回答を得ることの困難さや，ワーカ間でのスケールの不一致といった問題が生じるため，好ましくない．そこで具体的なデータの収集方法として，2 つのデザインをクラウドワーカに提示し，相対的な点数を付してもらう一対比較 (pairwise comparison) [9][2][6]を採用する．
クラウドワーカに提示する設問はWhich of the two images of [noun] ismore [adjective]? For example, [clause].
Please choose the most appropriate
one from the 5 options below.という形式をとった．ただし鍵括弧内はアプリケーションや目的に応じて適宜変更する箇所である．また本研究では 5 段階評価による点数付け (e.g. 1 点(5 点) は「左 (右) のデザインが該当」，3 点は「どちらとも言えない」に対応) を採用した．図 3 に実際のタスクの例を示す．

ングすることである．フィッティングによって得た関数は，ユーザインタフェースへ活用されるため，リアルタイムで計算可能である必要がある．また自然な可視化や最適化の機能を提供するために，滑らかな関数である必要がある．さらに様々なデザイン空間に適用するために，多峰性分布などを含む高度に非線形な分布も表現できる必要がある．これらの要求事項を踏まえ，本研究では RBF 補間 [1] を用いてフィッティングを行った．

4ユーザインタフェース

4.1 Smart Suggestion
Smart Suggestion
は比較的高い goodnessの値を持つパラメタセットを 9 つ生成し，それに対応するデザインをユーザに提示する機能である．ユーザは提示されたものの中から最も要求に合うデザインを選択するか，または気に入るデザインがなければ再び別の 9 つのデザインを即座に生成し直すこともできる．この機能は，その後の更なるパラメタ調整のための，良い起点を提供することを意図したものである．
提示するパラメタセットを生成するために，現在の実装では単純な方法を用いている：システムは 2000のパラメタセットをランダムに生成し，それら全ての goodness の値を評価し，上位 9 つを採用する．このようなシンプルなアルゴリズムを用いることで，ユーザの要求があり次第即座に提示を生成するだけの計算速度を実現できる．将来的には，より質の高い提示を行うため，提示デザインの多様性や分布の多峰性を考慮することなどの拡張が考えられる．

WISS 2014

表 1. クラウドソーシングに関する情報．Adjective はタスク設問に用いた形容詞を表す．各アプリケーションについて一定数のタスクを発注した．また各タスクは 10 回の比較を含んでおり，タスクあたりに対して固定金額の報酬を支払った．例えば，色補正については合計でクラウドワーカに対して 200 × 0.02 = 4.00 USD を支払ったことになる.
我々は単一のワーカが 2 個以上のタスクを実施することを許した．ワーカ数はタスクを実施したユニークなワーカの数を表す．時間は最初のタスクが着手されてから最後のタスクが完了するまでにかかった時間を表す．

パラメタ数

Adjective

タスク数

報酬 [USD/タスク]

ワーカ数

時間 [分]

6888853goodgood
goodrealistic
realistic
natural200200200200200600

0.02
0.02
0.02
0.02
0.02
0.02

452635464757302540342455

色補正
カメラと光源 (ドラゴン)
カメラと光源 (バニー)シェーダ (キッチン)
シェーダ (窓辺)表情モデリングxj

現在のパラメタセット

xixj
xi

図 4. VisOpt Slider における可視化の意味．各スラ
イダに付随する矩形領域は，そのパラメタに沿ったgoodness の分布を可視化する．

4.2 VisOpt Slider
VisOpt Slider (図 1 (右)) は，解析の結果として得られた goodness の分布を，ヒートマップを用いて矩形領域に可視化 (Vis: visualization) する機能を備えたスライダであり，ユーザは可視化内容を頼りに効率的にパラメタを調整することができることを意図したものである．更に最適化 (Opt: optimization)と呼ばれる機能も備えており，この機能を有効にすると，ユーザがあるスライダの値をドラッグして編集している間，システムは他のスライダの値をリアルタイムで更新し，より goodness の値が高くなるように少しずつ調節する．
各矩形領域は，パラメタ空間における，現在のパラメタセットを通り，且つ対象のパラメタの軸と並行な直線上の goodness の分布を，ヒートマップによって可視化している (図 4)．したがって，ユーザがパラメタを編集すると，それに伴い各矩形領域における可視化内容は動的に変化する．動的に変化する可視化内容から，どのパラメタをどの程度編集すれば質の高いデザインが得られるかを常に確認しながら，また，デザイン空間において探索するに値しない領域を避けながら，効率的にデザインを探索することができる．
VisOpt Slider に最適化機能の目的は，最適なパラメタセットを全自動で求めることではなく，対話的なデザイン探索を効率化することである．したがってここでの最適化機能は，スライダの値を突然更新するものではなく，少しずつ適切な方向へとガイドしていくような実装となっている．このような機能を実現するために，我々は最急降下法を固定回数だけ反復させる方法 [12] を採用した．具体的には，システムはスライダ値の変更に関する GUI イベントを受け取るたびに，最急降下法の計算を固定回数だけ反復し，スライダの値を更新する．最適化機能による値の更新はユーザの編集に対し比較的小さいため，分布が多峰性であっても局所最適解に値が固定されるいうことは実際には起きにくく，またユーザの編集意図を大きく妨げるといったことはないと考えられる．

アプリケーション

5

本手法を 4 種類のデザイン問題に適用した．各アプリケーションは異なるデザイン領域のものであり，これは本手法が特定のデザイン領域に限らず広く適用可能なものであることを示していることに注意されたい．我々はクラウドソーシングのプラットフォームとして CrowdFlower3 を用いた．表 1 にクラウドソーシングに関する情報を示す．

5.1

色補正

写真の色を補正することは単純で一般的なデザイン作業であるが，多くの人にとって馴染みのないよ
うな様々なパラメタを調節する必要がある．このようなデザイン領域に本手法を適用するにあたって，我々は明るさ，コントラスト，彩度，カラーバラン
ス (RGB) の 6 つのパラメタを選択した．実験には写真共有サイト (morgueFile4 ) から選んだ野菜の写真 (図 5 (左)) を用い，クラウドワーカにはより良い方を選んでもらった．
図 5 にいくつかのパラメタセットに対する VisOptSlider による可視化の様子を示す．これらの可視化
3
4

http://www.crowdflower.com
http://www.morguefile.com

視覚デザイン探索のためのクラウドソーシングを活用したパラメタ空間解析

図 5. 色補正に関するいくつかのデザインと VisOpt Slider における可視化の例．

図 6. カメラと光源におけるいくつかのデザインとその可視化の例．

からは，例えば左のデザインはコントラストをやや高くする必要があり，中央のデザインは明るさをやや高くし赤のバランスをやや低くすることで改善し，右のデザインは既に良いデザインとなっていることが分かる．

5.2カメラと光源

Secord ら [9] は三次元モデルを視る際の視線方向の評価に関する汎用的な計算モデルを提案したが，光源や画角など，三次元モデルを視る際に重要となる他の要因を考慮することができない．そこで我々はカメラと光源のデザインについて本手法を適用した．具体的にはカメラの位置 (−3.0 < xyz < 3.0)，画角，点光源の位置 (−3.0 < xyz < 3.0)，点光源の強さの 8 つのパラメタを対象とし，三次元モデルとしてドラゴンとバニーの 2 種類 5 に適用した．
結果，カメラと光源の強い非線形な関係性が観察された．例えば，カメラがドラゴンの左 (camera.z <0.0，図 6 (左)) から右 (camera.z > 0.0，図 6 (中央)) に移動した場合，光源もドラゴンの左 (light.z <0.0) に移動することでデザインが改善することが可視化内容から読み取れる．また図 6 (右) はバニーに対して図 6 (左) と同じパラメタセットを適用した例だが，可視化の内容が異なっている．このことは，各モデルの (すなわち各デザイン空間における)goodness の分布が異なっていることを示している．
5.3

シェーダ

シェーダを用いた三次元モデルの見えのデザインは，非専門家にとって難しく，またゲーム開発者やグラフィクス研究者であっても時間がかかってしまう部分である [10]．特に，“Fresnel Reflection” や“Metallics” といった非直感的なパラメタがあった場合に，そのパラメタが最終的なデザインにどう影響するかの予測ができず，探索に時間がかかってしまう．またシェーダの調節は照明環境によっても大き5Provided by The Stanford 3D Scanning Repository．

図 7. シェーダにおけるいくつかのデザインとその可視化の例．(左・中央) キッチン．(右) 窓辺．

く左右される．本研究では写実的な金属の質感を表現するためのシェーダである Hard Surface Shaders
Free6 を対象として実験を行った．このシェーダを用いてティーポットを描画し，クラウドワーカにステンレス製のティーポットとしてより写実的である方を選んでもらった．また側光であるキッチンのシーンと，逆光である窓辺のシーンについて実験を行った．
図 7 にいくつかのパラメタセットによるデザインとその可視化を示す．可視化内容から，“Reflection”というパラメタ (5 番目のスライダ) がこの例では最も重要な役割を果たしているということが，試行錯誤することなく分かる．また図 7 から，シーンに応じて goodness の分布が異なっていることも分かる．

5.4

表情モデリング

キャラクタの顔の表情は blendshape と呼ばれる手法を用いてデザインされるのが一般的である [4]．
Blendshape では顔の表情は予めいくつかのパラメタによって定義され，デザイナはこのパラメタを調節することで表情をモデリングする．しかし，調整すべきパラメタの数が多くなってしまうことや，パラメタ空間のうち映像表現として使える自然な表情からなる領域が非常に狭いために探索が難しいなどの問題がある．本研究では，53 のパラメタによって表情が定義された顔モデル 7 を用い，クラウドワー
カにはより自然な表情を選んでもらった．
図 8 にいくつかのデザイン例とその goodness の値を示す．このような高次元のパラメタ空間においても，我々の手法によって実用的な精度で goodnessfunction が構築できていると考えられる．ランダムな提示では 0.3–0.6 の goodness を持つデザインばかりが提示されてしまうのに対し，Smart Suggestion
は 0.7 程度のデザインを次々と提示することができる．これはユーザに有効な起点を与えるには十分効果的であると考えられる．また VisOpt Slider にお67

http://u3d.as/#/content/729
Provided by faceshift AG under CC BY 3.0.

WISS 2014

0.15

0.31

0.49

0.61

0.680.88

図 8. 表情モデリングのデザインの例．ここでは表情は 53 個のパラメタによって制御されている．それぞれのデザインの右下に表示されている数値は本手法によって計算された goodness の値を示している．

ける最適化機能もこのような高次元のパラメタ空間においてもよく動作することが分かった．ただし可視化については，ほとんどの矩形領域がほぼ同一の色で表現されてしまうことが多く，デザインの探索支援という観点では改善が必要である．

6

まとめ

本研究では，パラメタ空間の解析に基づくデザイン探索支援手法を提案した．我々の手法はまずクラウドソーシングによるヒューマンコンピュテーションを用いることで，デザインに対しその goodnessの値を計算する goodness function を構築する．次にその goodness function に基づいて，デザイン探索を支援するための 2 つのユーザインタフェースを提供する．また我々はこの手法を 4 つの異なるデザイン空間に適用し，その効果を確認した．
現在の大きな制約の一つとして，デザイン空間が変わるたびに (例えば色補正では対象の写真が変わるたびに) クラウドソーシングをし直す必要がある点が挙げられる．このような金銭的・時間的コストを改善するために，ランダムでない適応的サンプリング手法を用いることによる効率化や，過去に集めた類似のデザイン空間に関するデータを再利用することなどを検討していく必要がある．

謝辞
本研究は JSPS 科研費 26-8574, 26240027 の助成を受けたものである．

参考文献[1] C. M. Bishop. Neural Networks for Pattern
Recognition. Oxford University Press, Inc.,
1995.
[2] S. Chaudhuri, E. Kalogerakis, S. Giguere, andT. Funkhouser. Attribit: Content Creation with
Semantic Attributes. In Proc. UIST ’13, pp.
193–202. ACM, 2013.
[3] Y. Koyama, D. Sakamoto, and T. Igarashi.
Crowd-powered Parameter Analysis for Visual
Design Exploration. In Proc. UIST ’14, pp. 65–74. ACM, 2014.
[4] J. P. Lewis, K. Anjyo, T. Rhee, M. Zhang,F. Pighin, and Z. Deng. Practice and Theoryof Blendshape Facial Models. In EG 2014 -STARs, pp. 199–218. Eurographics Association,2014.
[5] J. Marks, B. Andalman, P. A. Beardsley,
W. Freeman, S. Gibson, J. Hodgins, T. Kang,B. Mirtich, H. Pfister, W. Ruml, K. Ryall,J. Seims, and S. Shieber. Design Galleries:
A General Approach to Setting Parameters
for Computer Graphics and Animation. In
Proc. SIGGRAPH ’97, pp. 389–400. ACM
Press/Addison-Wesley Publishing Co., 1997.
[6] P. O’Donovan, J. Lı̄beks, A. Agarwala, andA. Hertzmann. Exploratory Font Selection Using Crowdsourced Attributes. ACM Trans.
Graph., 33(4):92:1–92:9, 2014.
[7] A. J. Quinn and B. B. Bederson. Human Computation: A Survey and Taxonomy of a Growing
Field. In Proc. CHI ’11, pp. 1403–1412. ACM,2011.
[8] K. Reinecke, T. Yeh, L. Miratrix, R. Mardiko,Y. Zhao, J. Liu, and K. Z. Gajos. Predicting
Users’ First Impressions of Website Aesthetics
with a Quantification of Perceived Visual Complexity and Colorfulness. In Proc. CHI ’13, pp.
2049–2058. ACM, 2013.
[9] A. Secord, J. Lu, A. Finkelstein, M. Singh, andA. Nealen. Perceptual Models of Viewpoint
Preference. ACM Trans. Graph., 30(5):109:1–109:12, 2011.
[10] J. O. Talton, D. Gibson, L. Yang, P. Hanrahan,and V. Koltun. Exploratory Modeling with Collaborative Design Spaces. ACM Trans. Graph.,28(5):167:1–167:10, 2009.
[11] M. Terry and E. D. Mynatt. Side Views: Persistent, On-demand Previews for Open-ended
Tasks. In Proc. UIST ’02, pp. 71–80. ACM,2002.
[12] N. Umetani, Y. Koyama, R. Schmidt, andT. Igarashi. Pteromys: Interactive Design andOptimization of Free-formed Free-flight Model
Airplanes. ACM Trans. Graph., 33(4):65:1–65:10, 2014.
[13] W. Willett, J. Heer, and M. Agrawala. Scented
Widgets: Improving Navigation Cues with Embedded Visualizations. IEEE Trans. Visual.
Comput. Graphics, 13(6):1129–1136, 2007.
[14] A. Xu, S.-W. Huang, and B. Bailey. Voyant:Generating Structured Feedback on Visual Designs Using a Crowd of Non-experts. In Proc.
CSCW ’14, pp. 1433–1444. ACM, 2014.