P08-004

画像ブラウザ「CAT」を用いた化粧の印象効果分析結果の可視化
野村有加(東京大学大学院 学際情報学府), 伊藤貴之(お茶の水女子大学 人間文化創成科学研究科),
山口泰(東京大学大学院 情報学環)

Yuka NOMURA, Takayuki ITOH and Yasushi YAMAGUCHIABSTRACT
Recently, many studies have examined the effect of facial makeup on the impression of theface. However, these experimental results are really complicated and difficult to clearly
understand because various factors affect impressions of makeup faces. We present atechnique to visualize correlation between makeup faces and impressions in this paper. Ourtechnique helps users to understand the results by using GUI which extended CAT(Clustered Album Thumbnails), an image browser to visualize a large amount of pictures.
Keywords: Impression evaluation, Makeup, CAT
1.

概要

2.

提案内容

化粧は，我々の行動や認知，感情に日常的に様々な影本手法では，化粧における印象評価実験に用いた顔画響を与えており，特に化粧を見る側に与える印象効果を像群を，その評価結果に基づくクラスタリング手法によ分析する事は重要な意味を持つと考えられる．化粧を印って，画像をクラスタリングし，多段階の階層構造を構

象評価実験によって定量的に評価し，化粧の効果や印象築する．具体的には，各画像において印象評価実験からの違いに関して統計学的に分析する研究は，従来から多得られた評価値から 2 種類を選択し，その 2 評価値に基く発表されてきた[1][2]．しかし，化粧を対象とした印象づいてクラスタリングを行う．さらに化粧条件や，化粧効果分析において，対象とする化粧条件や化粧を施したを施したモデルの条件に基づいて，画像群の階層構造を被写体の元々の顔特徴，見る者の年齢や性別などといっ構築する．そして 2 次元画面空間の x 軸，y 軸に 2 評価た属性など，様々な要因が複雑に影響しており，化粧条値を割り当てて，階層構造化された画像群を可視化する．

件が多様になるほど複雑な統計処理が必要となる．また，提案手法の概略を図 1 に示す．

その統計結果を既存の統計処理や単純な表示方法で処理するのには非常に複雑であり，その結果理解にも多くの手間や時間がかかってしまう．
上記のような背景から我々は，多様な条件での印象評
価実験結果から，複雑な化粧効果を分析する統計処理結果の視認性向上と理解を支援する手法を開発した．本手法において，可視化手法には大量画像の階層型データ可視化手法である CAT(Clustered Album Thumbnails)[3]を拡張した画像表示手法を用いる．CAT では階層構造を二次元の長方形群の入れ子構造で表現し，その画像群全体を一画面に表示することが可能である．このような特Fig.1 提案手法の概略

徴から，以下のような効果が得られると考えられる．
yyy

画面上で画像同士が重なるのを避ける CAT の特徴

2.1 印象評価実験概要

を活用することで，画像の一覧操作に有用である．

本手法が対象とする印象評価実験は，多種の化粧条件統計処理から有意な結果が出た事象を，実際の画像における印象評価の変化に関する分析，化粧操作を行う

を参照しながら，一画面で直観的に提示する事が可

元顔画像の性質による評価の違いの分析，回答者属性に能である．

よる評価の違いの分析，などを目的としている．実験刺この GUI を駆使することで，統計結果の分析と理激として，化粧を施す前の被写体は異なる人物で顔特徴解を助ける手段となる．に定量的に差異の見られる画像を複数用意し，それに対して様々な化粧条件を設定し，その組み合わせで画像群を生成する．そして SD(Semantic Differential)法が定め
1

P08-004
る複数の印象語に沿って，回答者に顔画像の印象評定を

2.3 印象評価値に基づいた画像クラスタリングしてもらい，その結果を数値化したものを評価値として本手法における画像クラスタリング手法には，以下の扱う．そして印象語ごとに，また回答者の属性ごとに，3 つの方法を採用した．

分析を実施するものとする．以下に，本手法が対象とす

y

る印象評価実験を定式化する．
yy法．

画像の集合を I = {i1, i2, ..., iN}とする．(ij は 1 枚の画

y

被写体条件ごとに分割する方法．

像，N は画像の総数)

y

画像群を分割した際の情報利得（情報エントロピー

1 枚の画像が有する属性を ij = {p, m1, m2, ..., mn}とすの減少）を，分割評価式とする方法．

る．(p は化粧を施す被写体，mj は 1 種類の化粧条件，
yy

各画像群の評価値の平均を閾値として分割する方平均値で分割することで得られた評価値に忠実に分割

n は化粧条件の個数)する事ができ，被写体条件ごとに分割することで化粧評

回答者の集合を E = {e1, e2, ..., eM} とする．(ej は 1

価の被写体による違いを視認しやすくなる．そして，情人の回答者，M は回答者の総数)

報利得を分割評価式として採用することで，化粧条件や1 人の回答者が有する属性を ej = {a1, a2, ..., ar}とす

被写体条件と印象効果との相関性が明確に可視化結果とる．(aj は 1 個の属性，r は回答者属性の総数)して得られる事が期待できる．

y

印象語の集合を W = {w1, w2, ..., wL}とする．

y

回答者による画像の評価を S = {s{111}, ..., s{LMN}}とすする．与えられた事例の属性とその値から，それが属す

yy以下，情報利得を分割評価式とした方法について詳説る．(s{jkl}は印象語 wj に対する回答者 ek による画像

るクラスタを分類する際に木構造によって分類されるクil の評価)

ラスを表現する事を決定木(decision tree)と呼び，これ同一の印象語，同一の回答者属性を有する S 値を，は概念分類の学習に頻繁に使用されている．以下にその各画像に対して集計する．

分割アルゴリズムを示す．
データ集合を X，総合評価となるクラスの集合を D と

画像を p, mj, S の集計値の範囲などでクラスタリングする．
本手法では，この実験によって得られた評定値や属性したとき，そのクラスの値 k(k∈D)が起こる確率を Pk(X)で表すとする．また，データは評価値の高い順に順位がに基づいて，画像をクラスタリングして階層型データを与えられているものとする．

構築し，これを可視化する．

1.

2.2 クラスタリング手法概要

H ( X ) = − ∑ Pk ( X ) log 2 Pk ( X )本手法では文献[3][4]と同様に，まず以下の 2 段階処理によって画像を階層構造としてクラスタリングする．
1.

k∈D

2.
3.

分割した Xij の平均情報量を求める．
k∈Dタと称する．
各々の高階層クラスタに属する画像を，さらに別のX を評価順位の値 i に応じて m 分割したデータ集合

H ( X ij ) = − ∑ Pk ( X ij ) log 2 Pk ( X ij )処理結果として得られるクラスタを，高階層クラス
2.

4.

m

X ijj =1

X

G ( X i ) = H ( X ) − ∑ H ( X ij ) ×して得られるクラスタを，低階層クラスタと称する．
上記の手順でクラスタリングされた画像群を，以下の5.

(2)

分割点における情報利得 G(Xi)を求める基準によってクラスタリングする．この処理結果とように一覧可視化する．まず低階層クラスタに属する画(1)を Xij とする(1≦j≦m)．

印象評価実験にて得られた評価値に基づいて何らかの基準を設け，画像をクラスタに分割する．このデータ集合 X に対する平均情報量を求める．

(3)

G(Xi)が最大となる順位 i にてデータを分割する．

像を並べて，それを長方形の枠で囲むことで，低階層ク画像群を x 軸，y 軸それぞれの評価値において，以上ラスタ自身を表現する．この処理を各々の低階層クラスのステップで得られた分割点で画像群をクラスタリング

タにて実行した後，低階層クラスタを表現する長方形領する．本手法において，X は 2.1 節で述べた画像群 I ま

域を並べて，それを長方形の枠で囲むことで，高階層クたはその部分集合であり，k は化粧条件 mj のとりうる値ラスタを表現する．最後に高階層クラスタを表現する長である．

方形領域を並べることで，画像群を格納する階層型データ全体を表現する．本報告では 2 階層の階層型データ構
築についてのみ論じるが，3 階層以上の構造を構築する

3.

GUI の実装
本手法における GUI の実装について説明する．

ことも可能である．その場合においても同様に，最低階[ハイライト表示] 特定の条件を満たす画像を探す時に，層のクラスタから最高階層のクラスタにむかって順に処その画像のみを選択的に表示できる．ラジオボタンを押理することで，画像群の一覧可視化を実現する．

下する事で，特定の条件を満たす画像だけがハイライト表示される．この機能によって，特定の条件を満たす画2

P08-004
像がどのように配置されているかを視認できる．

う．

[ボーダー表示] 図 2 に示すように，画像を表示させたまy

ま，画像の枠を条件によって着色表示する事ができる．

各条件の分散分析結果による有意差を調べ，有意差のみられた条件を総合評価となるクラスの集合 D として分割を行う．

この機能によって，注目したい条件の画像がどのようにy配置されているかを視認でき，また他条件の分布具合と有意差がみられない，またはクラスタ内での比較しながら結果を理解できる．

k(k∈D)が一様であり，分割点が見つからない[詳細度制御] 本手法でも CAT と同様，詳細度制御を実場合は分割を行わない．

現する．本手法において詳細度制御を行う事で，ズームアウト時には，そのクラスタの評価を表す代表画像をズームアウト時にも視認できる大きさで表示し，化粧の印
象評価に対する大まかな傾向を直感的に理解する事を可5.

ステップ 5 で再分割された画像群について dist の値が大きいクラスタをさらに入れ子にし，低階層クラスタとする．
この手法を採用した実行結果を図 3 に示す．

能している．そしてズームイン時に全ての画像が表示されるようにすることで，個々の画像を参照できる．
[マウス操作] 本論文での CAT の実装は，従来の機能に加え，左ボタンのダブルクリックにより拡大表示をし，カーソルが指す画像を中止できるようにした．
これらの GUI 実装による具体的な効果については，4章にてユーザテストの詳説の一部として述べる．

Fig.3 本手法による可視化結果
4.2 ユーザテスト
Fig.2 ボーダー表示による枠着色表示
4.

ユーザテストでは，本手法の有用性を示すため，統計結果への理解度を測る問題や，回答者自身の統計結果へ実行結果の考察を問う問題を作成して，正答率の集計と所要時間

4.1 可視化結果の測定を行った．本実験では，8 名(男性 2 名，女性 6 名)

本節で述べる実験では，まず女性の評価値を表す x 軸，の学生被験者に対し，以下の条件と手続きにおいて実験

男性の評価軸を表す y 軸それぞれにおいて，画像群を 2を行った．

分割する．その後，情報利得を分割評価式として採用す[提示条件 1(Graph)] 男女別の平均評定値のグラフ，おる．詳細には以下のステップで分割を行う．

よび全化粧顔画像を紙媒体で提示した．

1.

女性の評価値を表す x 軸，男性の評価軸を表す y 軸[提示条件 2(GUI)] 本手法で可視化を行った結果を提示それぞれにおいて，評価値の平均値で画像データをし，GUI を実際に操作して回答してもらった．

2 分割する．その結果として，画像データを第 1～4

この結果から，ほとんどの場合において本手法を用いた2.
3.

象限クラスタ(group1～4)に分類する．

提示手法のほうが正答率が高く，回答時間も短縮できて各象限に対して，被写体条件によって画像群をクラいる事がわかる．提示条件 1 では，紙媒体の評価値のグスタリングする．

ラフの中から特定の条件を確認し，実際の顔画像と見比クラスタ内の画像群を画像 ij の x 軸上での評価値 sx，べながら作業するのに時間がかかってしまう場合が多か

y 軸上での評価値 sy それぞれについて分割された閾

った．一方，提示条件 2 の本手法では，問題に応じて適値からの距離 dist の値を求め，降順に並び替える．

dist = ( s xj − c x ) 2 + ( s yj − c y ) 2
4.

当なクラスタに注目し，GUI を用いてスムーズに回答できている場合が多かった．

(4)

また，GUI の使いやすさや結果理解のしやすさなどに並び替えた画像に対し，3.3.3 節で述べた情報利得ついてフリーコメントを回答してもらった．以下に代表を分割評価式とした手法で以下の条件で分割を行的なものを示す．
3P08-004yy

グラフは，顔写真と評価値を見比べながら作業しな支援する可視化手法を提案した．可視化手法にはくてはならず手間取った．

CAT(Clustered Album Thumbnails)を拡張した画像表

GUI を用いた結果は非常に見やすく数値と顔画像示手法を用いることで，画面上で画像どうしが重なるのの情報を一目で把握できてスムーズに作業できた．

を避けた．また本手法では，画像の一覧操作に有用な

y

GUI の方が象限の区分けが理解しやすく直感的．

GUI を開発した．また本手法では，画像群を階層構造化

y

微妙な数値の差はグラフの方が読み取りやすい．

するためのクラスタリング手法の工夫により，化粧条件

yアイラインやアイシャドウなどの化粧条件ごとにや被写体条件と印象効果との相関性を理解しやすい形式

比べるには GUI が効果的．

で表現することを可能にした．本報告で示したユーザテ

y(GUI を用いると)操作が簡単で面白い．

ストの結果からも，その有用性は実証されたと言える．

y(GUI で)象限によって被写体条件の表示位置が異y

本手法を利用する事で，印象評価に関する統計処理をなるのは使いにくい．

理解できる専門家には，その複雑な統計処理結果と実際今回は元の顔画像が 4 枚なので，紙媒体(グラフ)での化粧顔画像を短時間で見比べるための，検証用ツールも問題ないが人数(被写体条件の数)が増えた場合，として活用できると考えられる．また統計処理に精通し紙媒体ではやっていられないと思う．ていない化粧品の一般消費者に対しても，印象評価実験

Table.1: 全問題における正答率と回答時間(分:秒)
Graph

GUI

による統計処理から有意な結果が出た事象を直観的に提示し，化粧アドバイスやプレゼンテーションツールとして活用できる事が期待される．

回答者

正答率

回答時間

正答率

回答時間

A

68.2%

14:21

90.9%

11:48

B

59.1%

14:40

86.4%

09:09

C

81.8%

20:11

95.5%

09:00

D

90.9%

13:50

100.0%

08:34

science, Vol. 3, pp. 199-210, 1981.

E

81.8%

17:35

81.8%

11:11

[2] 向田 茂，鈴木 絢香，磯野 勝宣，加藤 隆，”化粧による顔F

50.0%

16:07

95.5%

09:10

G72.7%

19:29

95.5%

12:25

H72.7%

10:02

100.0%

08:34[3] Gomi, A., Miyazaki, R., Itoh, T., Li, J., “CAT: A

平均75.75%

16:41

91.68%

10:21

Hierarchical Image Browser Using a Rectangle Packing

全体的に，紙媒体でグラフの提示で行う提示条件 1 よ

参考文献[1] GRAHAM, J. A., JOUHAR, A. J., “The effects of cosmetics
on person perception”, International journal of cosmeticの印象の変化について : 合成による刺激統制の試み”，電子情報通信学会技術研究報告. HCS, ヒューマンコミュニケーショ
ン基礎，Vol.102，No.3，1-6，2002．

Technique”, 12th International Conference on Information

りも，提示条件 2 の GUI の操作のしやすさやクラスタ

Visualization (IV08), pp. 82-87, 2008.

リングや配置の効果によって統計結果が理解しやすくな[4] 伊藤貴之，山口裕美，小山田耕二, “長方形の入れ子構造にるという意見が得られている．しかし，グラフでは微妙よる階層型データ視覚化手法の計算時間および画面占有面積のな評価の違いを把握する事ができるため，具体的には，改善”, 可視化情報学会論文集, Vol. 26, No. 6, pp. 51-61, 2006.

「平均値よりやや上回っているだけものを果たして高評価として良いのか」「可視化結果では平均値を基準に判断すると男女共に高評価な画像としているが，グラフの数値を見ると男女差があると判断しても良いような場合がある」といった意見もあった．
また「象限によって被写体条件の表示位置が異なるのは使いにくい」という意見については，現状のシステム
では，低階層クラスタについては文献[4]と同様，理想的な長方形配置位置決定の手法で配置される事を優先したため，被写体条件のクラスタの配置順が定義されていない事が原因である．この問題についても今後の課題として検討したい．

5.

まとめと今後の課題
本報告では，化粧の印象評価実験を試み，その複雑な化粧効果を分析する統計処理結果の視認性向上と理解を4