情報処理学会 インタラクション 2014
IPSJ Interaction 2014

A6-2
2014/2/27

つながり X‐HairStyles : 直感的なヘアスタイル発見支援システム
ダワースレン エンクバト†1

岩淵志学†2益子宗†2田中二郎†3

本研究は，好みのヘアスタイルについて言語的なクエリや明確なイメージを持っていないユーザが直感的なインタラクションのみで好みのヘアスタイルを発見できるシステムを開発した．インターネット上のヘアサロンサイトでヘアスタイルを検索する際の従来の検索システムだと，キーワード主体のものがほとんどで上に述べたようなユーザが使いづらいという問題があった．そこでこの問題に対処するために我々は，ユーザの“直感による選択”を非言語的クエリと捉え，ユーザが選んだヘアスタイルを入力として，それらの関連を調べ，そしてユーザにわかりやすく提示することで，ユーザのヘアスタイルに関する理解を促すシステムを開発した．これにより，ヘアスタイルに詳しくないユーザでも自分好みのヘアスタイルについて言語的に理解しながら，目的のヘアスタイルを見つけることができる．

TsunagariX - HairStyles : Intuitive Hairstyle Exploring System
ENKHBAT DAVAASUREN†1 SHIGAKU IWABUCHI†2SOH MASUKO†2 JIRO TANAKA†3We proposed a system, that users do not have a clear image and linguistic queries about the hairstyle, can explore favorite
hairstyle with few intuitive interactions. The conventional online searching systems for hairstyles are mostly keyword-based
searching systems, thus make difficult to use those systems when user has no particular query, or no knowledge about hairstyle.
To address this problem, we consider the user’s intuitive selections of hairstyle as a non-verbal query in our system. When user
selects multiple hairstyles, our system shows the relations between the hairstyles and name of those relations graphically. By
using our system, the user can realize own favorite hairstyle types specifically, and can find right hairstyle.

1. はじめに

現在，インターネット上でヘアスタイル検索できる多くのサイトが存在するが，そのほとんどがキーワード主体のIT 技術の進歩により世界中がインターネットという 1 つ検索システムであり，ヘアスタイルに詳しくないユーザにのネットワークにつながり，誰もがそこに情報を載せたり，不向きである．また検索結果が大量であり，ユーザがその情報にアクセスしたりすることが可能になった．そして，中から更に探さなければならなかった．システムによってインターネット上で扱う情報の種類も多様にわたり，人々ランキングしてくれる場合があるが，キーワードの意味がが世界中の様々な情報にアクセス可能になっただけではな分からないユーザにとって有効ではなかった（図 1）．

く，インターネットを通じて買い物したり[a]，チケットを購入したり，病院や美容室[b][c][d]を予約したするなど日常生活に必要なサービスを手軽に得られるようになっている．
しかし，一方で情報の多様性に伴い，我々の選択肢が依然より増え，その中から自分の好みのものをいかに効率的に探し出せるかが大きな課題となっている．
そして，今まで情報を探すためにツールとしてキーワードを入力するとそれに関連する情報を提示してくれるキー

図 1

ワード主体の検索システムが多く開発されてきたが，明確

Figure 1

従来のヘアスタイル検索システムの問題点
Problems of traditional hairstyle search systems

なキーワードを持ってない曖昧な検査の際にこれらのシステムが有効といえなかった．その一つの例は，本研究の題材である“ヘアスタイル検索”である．

そこで我々は，ヘアスタイルについて詳しくない，あるいは明確なクエリを持っていないユーザがアスタイルを発見できるシステムを開発することを本研究の目的とする．

†1 筑波大学 大学院システム情報工学研究科
Graduate School of Systems and Information Engineering,
University of Tsukuba†2 楽天株式会社 楽天技術研究所
Rakuten Institute of Technology, Rakuten, Inc.
†3 筑波大学 システム情報系
Faculty of Engineering, Information and Systems,
University of Tsukubaa) 楽天市場，http://www.rakuten.co.jpb) 楽天サロン，http://salon.rakuten.co.jpc) Hot Pepper Beauty, http://beauty.hotpepper.jpd) Woman Excite, http://woman.excite.co.jp/© 2014 Information Processing Society of Japanそしてアプローチとして，人間は文章より画像のほうが圧倒的に速く情報を取得きるため，ヘアスタイルを画像で検索するシステムを開発する．そしてクエリとして“直感の選択”を用いる．人間は直感による選択は回数が多いほど高確率で正しいものを選択する[e]と言われており，検索e) Salience driven value integration explains decision biases and preference
reversal, PNAS’12, pp. 9659-9664, 2012.

321対象がヘアスタイルのような好みが重視されるもの場合において“直感”は重要な要素だと我々が考えた．
具体的にこのシステムでは，ユーザによって選択された複数のヘアスタイルを入力とし，それらヘアスタイルが持2.3 GUI
本システムの GUI は主に“ギャラリー領域”，“つながり領域”，“絞り込み領域”の 3 つから成り立っている（図 3）．
以下に詳しい説明を記す．

つ属性を出力としてユーザにわかりやすく提示することで，ユーザに好みのヘアスタイルの属性に関する言語的理解を促す．そしてユーザが，更に直感と新しく習得した属性を頼りに検索を続けることで，最終的に好みのヘアスタイルにたどり着くことができる．

2. 提案システム：つながり X‐Hairstyles
2.1 システム概要
本システムでは，好みのヘアスタイルに関する明確な属

図 3

GUI性（例：ナチュラル，ロング，ミディアム，ブラウン…）

Figure 3

GUIを理解していないユーザがシステムを利用するうちに好みのヘアスタイルの属性を言語的に理解し，最終的に目的のヘアスタイルにたどり着くことができる（図 2）．

(1) ギャラリー領域
この領域には画面左側に位置しており，ヘアスタイルのギャラリーが表示される（図 3 - A）．ユーザがこの領域からヘアスタイルを選択したり，選択していたヘアスタイルをこの領域に戻したりしてインタラクションを行う．また，選択された条件によってヘアスタイルが絞り込まれ，その結果がこの領域で反映される．
(2) つながり領域
この領域は画面中央に位置しており，ユーザが自分の好みのヘアスタイルを理解するための領域である（図 3 - B）．

図 2

つながり X－HairStyles

この領域では，ユーザが直感的に選択したヘアスタイルに

Figure 2

TsunagariX – HairStyles

含まれる属性やつながりを視覚的，かつ言語的にわかりやすく把握することができる．属性が円で表現されており，2.2 利用シナリオ
ある A さん（女性）が数日後に同僚の結婚式に参加する

その強さによって大きく表示される（図 4 - A, B）．また，属性を選択することでその属性で絞り込むことができる．

ことになっていた．しかし，彼女はヘアスタイルについて選択されている属性（図 4 - A）がその他の属性（図 4 - B）

あまり詳しくなく，自分の好みについては大まかなイメーより目立って表示され，それに関連するヘアスタイル（図 4ジしか持っていなかったためパーティに行くときのヘアス- C）もその他のヘアスタイル（図 4 - D）より目立って表タイルがなかなか決められずにいた．そして，ヘアスタイ示されるため一目で把握できる．ヘアスタイルと属性のつルについてインターネットで調べ見ると様々な種類があり，ながりが直線で表示される．

その一つひとつについて調べるのがとても大変だった．すぐ相談できるスタイリストさんも近くにはいなかった．
そこで彼女が“つながり X－ヘアスタイル”というシステムを利用してみた．彼女は，自分の中の大まかなイメージに従って，直感的に気になったヘアスタイルをドラッグして選んだり，違うと思ったヘアスタイルを戻したりしただけでシステムが，彼女の好みのヘアスタイルの種類（例：“ボブ”長さで“アッシュ”色の“ナチュラル”なヘアスタイル）をわかりやすく提示してくれた．彼女がヘアスタイルについて知識を深め，自分の好みのヘアスタイルを理解することができた．そしてそれをもとにヘアスタイルを更に絞り込んでいき，最終的に思い通りのヘアスタイルを

図 4

見つけて，インターネットで素早くサロンを予約できた．

Figure 4© 2014 Information Processing Society of Japan

つながり領域
Relation space322

(3) 絞り込み領域

2.4.3 絞り込み

この領域は画面右側に位置してあり（図 3 - C），現在のユーザが“つながり領域”内に提示された属性をクリッ

絞り込みの条件が色と共に言語的に表示される．例えば，クすることでその属性で絞り込むことができる（図 8 - B）．

“ナチュラル”と“ブラウン”という 2 つの条件が選択さ複数の属性を選択することで複数の条件で絞ることができれている様子を図 5 で示している．選択した条件によってる．その結果がギャラリー領域に反映される（図 8 - A）．

“ギャラリー領域”内のヘアスタイルを絞り込むことができ，次々と気になるヘアスタイルを発見しやすくなる．

図 8

絞り込み

Figure 8
図 5

絞り込み領域

Figure 5

Condition space3. 実装
本システムは OS やプラットフォームに依存しない WEB
アプリとして HTML と JavaScript，PHP を用いて開発した．

2.4 インタラクション
2.4.1

Refining

ヘアスタイルの選択

そして，ドラッグ＆ドロップやタッチ操作を可能にするたユーザが“ギャラリー領域”からヘアスタイルをドラッ

めに jQuery UI 及び jQuery UI Touch Punch を利用した．まグし，“つながり領域”の上にドロップすることでヘアスタ

た，ヘアスタイル同士の関連を可視化するために D3.js をイルを選択することでできる（図 6）．選択されたヘアスタ用いている．以下に実装について詳しく説明する．

イルはドロップされた位置に配置される．

3.1 システム構成
本システムのシステム構成を以下の図で表す（図 9）．ユーザはブラウザを通して本システムを利用する．システム
は PHP によって MySQL データベースを取得して JavaScriptで利用しやすいように JSON 形式に変換している．そして，
HTML と JavaScript を用いてシステムを実行する．

図 6

ヘアスタイルの選択

Figure 6

Selection of hairstyle

2.4.2 ヘアスタイルの除外
ユーザが選択したヘアスタイルを“つながり領域”から“ギャラリー領域”にドラッグ＆ドロップすることで選択
図 9から除外ことができる（図 7）．外されたヘアスタイルは“ギシステム構成

Figure 9

ャラリー領域”の一番下に配置される．

Setup

3.2 扱うデータ
本システムでは，楽天株式会社の楽天サロンのヘアスタ
イル情報を利用している．各ヘアスタイルは画像情報と別に 16 種類の関連データを持っているが，本システムではその中からヘアスタイルに最も重要な 5 種類の関連データを扱う．それらのデータに関する説明とそれぞれが持つ属性
図 7
Figure 7

ヘアスタイルの除外
Removal of hairstyle© 2014 Information Processing Society of Japanの数を以下の表にまとめた（表 1）．属性の数は合計で 46個である．

323

表 1

データセットTable 1

3.5 表示Dataset本システムでは JavaScript で SVG エレメントを Html 内に動的に作成，編集を行うことで描画している．

データ

属性数

説明

Taste

9

テイスト，イメージ

Haircut

12

髪型

Style

6

スタイル

上に SVG の circle メソッドを用いて円で描画している．円Length9

髪の長さの大きさは各属性それぞれの強さ数に比例している．円のColor

10

髪の色

属性
本システムではヘアスタイルの各属性を”つながり領域”

色はデータの種類ごとに色分けされており，強さが大きいほどはっきりとした色になるように各属性の強さによってそしてこれらのデータの中では Length と Color は各ヘア
スタイルに 1 つの値を持っており，ほかの 3 つのデータは透明度が設定されている．属性の名前も円の大きさに沿ってフォントの大きさ決まる．
また，属性の配置は強い属性ほど画面中心に近くて，す1 つのヘアスタイルに対して複数の値を持つことができる．
例えば，あるヘアスタイルが Taste(ナチュラル，フェミニ

べての属性がお互いに重ならないように設定している．

ン)，Haircut(エアリー，ストレート)，Style(ダウン，編み込

このような円の大きさや座標値を各属性の強さデータがみ)，Length(ミディアム)，Color(ブラウン)といった情報を代入されている配列を D3.js の d3.layout.pack()を用いて計持つことができる．

算している．

3.3 ドラッグ＆ドロップ

つながり

本システムでは，ヘアスタイルの選択や除外の作成など選択されたヘアスタイルと属性のつながりを SVG の lineに直感的な手段としてドラッグ＆ドロップを採用している．

メソッドを用いて直線で描画している．線の色や透明度はオブジェクトをブラウザ上でドラッグする際に jQuery の属性を表す円に従っている．
ヘアスタイルの選択や除外の瞬間に各属性の座標と選択以下のメソッドで実現する．
$(“オブジェクト名 ”).draggable();されたヘアスタイルの座標を基に直線を描画している．まそして，本研究では“ギャラリー領域”内の各ヘアスタ

た，ユーザがヘアスタイルをドラッグしている間もつながイルを“<ul>”リストエレメントの“<li>”アイテムエレ

りが常に見えるようにマウスの座標値に沿って線が動くよメントとして扱っており，各“<li>”エレメントに上に記うにアニメーション処理を行っている．

したメソッドを用いてドラッグ可能にしている．そして，絞り込みヘアスタイルが選択されるとき“<li>”エレメント内の画絞り込みの際に現在選択されている“属性”とその属性像情報を新規の“<div>”エレメント内に格納して，“つなを持つ“ヘアスタイル”，それらを結ぶ“つながり”をユーがり領域”の子エレメントとして作り直している．ヘアス

ザにわかりやすいように強調して描画する．

タイル除外の場合は逆の操作を行っている．

“15”にし，輪郭の色を“白”から“赤”に変更して一方で，領域をドロップ可能にする際のメソッドとして，いる．また，ほかの属性より識別しやすいように円の$(“領域名”).droppable();大きさが 10%変動するアニメーションを加えている．

が用意されており，各領域に適用してドロップ可能にしている．その際に，droppable()メソッドに変数を指定するこ

属性の強調は属性を表す円の輪郭の太さを“2”から

つながりの強調は属性が選択されたとき，属性から出とで，各領域の受付可能なエレメントを指定している．ている全ての“つながり”線の太さを“2”から“10”3.4 属性の強さの計算に健康する．

本システムでは JavaScript を用いて選択されたヘアスタヘアスタイルの強調は選択された属性に繋がっていイルが含む属性の強さを計算している．属性はヘアスタイるヘアスタイルを強調するために繋がっていないほルが持つ各データの中のどの値が選択されたヘアスタイル

かのヘアスタイルを小さくし，半透明にしている．

全体の中でいくつ含まれているかによって強さが決まる．

3.6 タッチインタフェースへの対応

例えば，3 つのヘアスタイルが選択され， Color データの本システムは PC での利用を前提でマウスによる操作を値がそれぞれブラウン，アッシュ，ブラウンだった場合，想定して開発した．しかし，近年タッチ操作が可能なタブブラウンという属性が 2 ポイントとアッシュという属性がレット端末がインターネット閲覧デバイスとして普及して1 ポイントということになる．

いることを考慮し，jQuery UI Touch Punch ライブラリを用

ユーザがヘアスタイルを選択，あるいは除外するたびにいることでタッチ操作もサポートしている．これによりマシステム内で選択されたヘアスタイルの各属性のポイントウスによる操作とタッチ操作において変わらない操作性をを計算しなおしている．

実現している．

© 2014 Information Processing Society of Japan324

4. 関連研究
本研究の先行研究として韮澤らによる“つながりExplorer”[1]，城崎らによる“つながりテーブル”[2]などがある．これらの研究ではユーザが購入した電子書籍，あるいは実際の本同士のつながりに応じて関連する新しい書籍をユーザの提案するレコメンドシステムである．本研究は，これらで得られた知見を基に商品同士のつながりから新しい上品を発見していく要素にユーザによる直感的な選択を加えることで直感的な検索システムを提案している．
非言語的クエリによる検索という分野で，実物のオブジ
ェクトを使ってユーザが持っている大まかなイメージで画スタイル同士を近づけたり，遠ざけたりするなどの動作をインタラクションの要素とした新たなインタフェースを検討してみたいと思っている．
そして本研究では“ヘアスタイル検索”を題材にシステムを開発したが，ヘアスタイルだけではなく，従来のキーワード主体の検索インタフェースでは困難だったファッシ
ョンやデザインなど視覚的情報が重視される検索にも使えると考えている．今後の発展として，現在のシステムをショッピングにおけるファッション情報も扱えるようにし，より直観的な買い物ができるシステムを開発したいと考えている．

像を検索できるシステム[3]がある．また，食材をクエリとしてレシピを検索できる“GraphicalRecipes”[4]というシステムがある．これらのシステムはユーザがクエリを知っている，あるいは自作できることを前提にしていることに対して，本研究ではユーザがシステムによって提示される画像を直感的に選択するだけで検索できるため，クエリに関する知識を要しないというメリットがある．
そして，山本ら[5]がユーザの主観的評価と対話的なインタフェースでユーザのイメージを反映したロゴデザイン作成を支援するシステムを開発した．本研究が既存の情報の中からユーザの好み（イメージ）に合ったものを検索できるところが異なる．
その他に，関連情報を視覚的に表示させながら検索を行うことができるシステムがいくつか存在している[6][7][8][9][10]．しかし，これらのシステムもキーワードを基に関連キーワード情報を視覚的に提示するシステムであり，キーワードを理解していないユーザに有効ではない．
本研究では，ユーザの選択に含まれる関連（キーワード）を評価して提示し，ユーザの興味と関連を結び付けることでより直観的な検索が可能．

謝辞

本研究は，筑波大学と楽天株式会社との教育研究一体型プロジェクトにより実施されたものであり，研究を進める際に貴重な意見や指摘，支援を頂きました筑波大学と楽天株式会社の関係各位に謹んで感謝致します．

参考文献
1) 韮澤賢三，岩淵志学，益子宗，田中二郎: つながり Explorer：
関連の提示に基づく対話的商品探索インタフェース，インタラクション 2011 論文集，pp.211-214 (2011).
2) ダワースレンエンクバト，城崎亮、岩淵志学、益子宗、田中二郎: "つながりテーブル: 実物の本を用いた関連商品検索システム"
インタラクション 2012 論文集, pp. 635-640 (2012).
3) Matković, K., Psik, T., Wagner, I., Purgathofer, W.: “Tangible ImageQuery”, 4th International Symposium, SG 2004, pp 31-42 (2004).
4) 野間田佑也，星野准一:“GraphicalRecipes:レシピ探索支援のための視覚化システム”, 芸術科学会論文誌, pp. 43–54 (2008).
5) 山本慎平, 鬼沢武久:“ユーザのイメージを反映する対話型ロゴ
タイプデザイン支援”、一般社団法人情報処理学会, pp. 1-9 (2009).
6) Costa, B. and Gouyon, F. and Sarmento, L.: “A Prototype forVisualizing Music Artist Networks”, ARTECH2008, pp. 245-248 (2008)
7) LivePlazma, http://www.liveplasma.com
8) InstaGrok, http://www.instagrok.com
9) Spysee, http://spysee.jp
10) TouchGraph, http://www.touchgraph.com

5. おわりに本研究では自分のヘアスタイルの好みを明確に理解していない，かつヘアスタイルの種類について詳しくないユーザが簡単なインタラクションによって好みのヘアスタイルについて言語的に理解していき，最終的にヘアスタイルを決め，サロンの予約まで行えるシステムを提案し，開発を行った．
著者のようなヘアスタイルに詳しくないユーザでも本システムを利用して，自分が直感的に選択したヘアスタイルの属性とつながりを視覚的，かつ言語的に見ることで好みのヘアスタイルをより理解できることが分かった．
問題点としては，選択されたヘアスタイルの位置関係をあまり活かしていないことである．今後の課題として，ヘアスタイル間の関連性を計算するアルゴリズムを実装し，関連性が高いヘアスタイル同士が引き寄せられるような引力モデルを導入してみたいと考えている．あるいは，ヘア© 2014 Information Processing Society of Japan325