XYzon: 商品の比較検討を支援する XY グラフ型検索
神 原啓介†

塚田浩二†,††

Amazon のような一般的なオンラインショッピングサイトでは，商品の検索結果をリストや表で表示するが，これらは「複雑・曖昧な条件で探しにくい」「商品同士の比較がしにくい」「商品ごとの値段の開き具合，相場や価格帯が分かりにくい」といった問題がある．本研究ではこれらの問題を解決する XY グラフ型商品検索を提案し，その実装として Web アプリケーション「XYzon」を試作した．XYzon は「XY グラフを用いた視覚的に分かりやすい検索 UI」「目星をつける比較インタフェース」「Web ブラウザ上で利用可能」という 3 つの特徴を持つ．

XYzon: A search technique for items in e-commerce sites
using XY graph visualization
Keisuke Kambara† and Koji Tsukada†,††Although visualization techniques using lists or tables are widely used in e-commerce sites(e.g., amazon.com), users often have problems to search their target items: that is, (1) difficulty to search by ambiguous/complex conditions, (2) difficulty to compare items each other,and (3) difficulty to understand averages or ranges of prices. To solve these problems, we
propose a novel search technique, XYZon, which helps users search items in e-commercesites using the XY graph visualization. We developed the XYZon as a Web application, anddiscussed its basic usages.

1. は じ め に

こうした検索結果は，一般的に値段順や人気順のリストで表示される．ここで，単に安い商品が欲しい時

近年，Web 上での購買は一般的なものになり，日はリストで上位に来たものを買えば良いが，実際に買本国内のインターネット利用者のうち 80%以上の人がい物をするときはもっと条件が曖昧で複雑なことが多オンラインショッピングをしたことがあると答えていい．例えば「値段は安めの方が良いが，すごく良いも☆

る ．のなら少々高くても良い」「安めで，人気で，重量は軽実店舗での購買に比べ，オンラインショッピングのめで，画面は小さすぎないノート PC が欲しい」「平メリットは多い．例えば「店舗に行く必要が無い」「時均相場の中心ぐらいで人気なものを探したい」といっ間を気にしなくて良い」「商品の数や情報が豊富」「他た条件で買い物をする場合，単純なリスト表示では探人のレビューを読める」「ニッチな商品を買える」「様々しにくい．

な検索機能が使える」「大規模なデータに基づいた商なぜなら，リスト表示は 1 種類の軸でしか表示さ品推薦機能を利用できる」といったメリットがある．

れないため，複数の軸で比較検討するという用途にはこのように Web 上の購買では多くの商品を閲覧であまり向いていないためである．ソート条件を変えてきる反面，一方で適切なものを選び出す手間も増えた．

ページ遷移すると前のページの結果が見えなくなり，特に欲しい物が決まっていない場合や，検索結果が何興味を持った商品の場所が分かりにくくなってしまう．

百・何千件とある場合，それら全てに目を通して，比また，リスト表示では価格や人気度合いの開き，分布較し，一つのものを選び出すのは大変である．

といった情報を知るのが難しい．例えば，一般的な商品検索では値段や人気，発売日，商品ごとの指標でソー† お茶の水女子大学 お茶大アカデミックプロダクション
Ochanomizu University, Academic Production†† 科学技術振興機構 さきがけ
JST PRESTO☆
インターネット白書 2009

トできるが，単純に並んでいるだけでは，それらの差分が視覚的に分かりにくい．また，商品ジャンルごとの平均相場や価格帯といったことも分かりにくくい．
一方，価格.com のような商品比較サイトでは，細情報処理学会 インタラクション 2011

かな検索条件を指定して絞り込み，気になる商品を表にして比較することができる．買いたい商品の細かな条件が分かっている場合は，このような細かな条件指定や比較表は便利であるが，条件がはっきりしない場合や商品知識に乏しい場合は，条件指定操作を繰り返すことになり検索が複雑なものになってしまう．また，

図 2 検索キーワードとカテゴリ選択
Fig. 2 Search keyword and category

商品数や条件数が増えると表が大きくなり比較が難しくなるという問題もある．
本論文では，以上のようなリストや表を用いた商品検索の問題点を解決する「XY グラフ型商品検索」を提案する．XY グラフを用いることで，検索結果を視覚的に分かりやすく表示し，欲しい商品の条件が曖昧な場合の検索や，商品の比較・検討といった購買の流れを支援する．

2. XYzon

図 3 軸の切り替え
Fig. 3 Switching an axis

かる」といった特徴により，例えば「どの価格帯に商XY グラフ型検索により Amazon の商品を検索する品が集中しているか」「高くても売れている商品はどWeb アプリケーション「XYzon 」を試作した．XY-

れか」「人気が高めで安い商品はどれか」といったこzon では商品のキーワード検索の結果を図 1 のようにとなどが分かる．

☆

XY グラフ上に表示する．X 軸，Y 軸および Z 軸（画さらに，図 5 のようにグラフをズームすることで，像の大小）には，それぞれ値段や売れ筋，評価といっ検索結果全体から徐々に興味のある範囲を絞り込んでた変数が割り当てられ，それらを切り替えることで複見るといった操作ができる．

数の条件を掛け合わせながら商品を比較・検索できる．

2.1.2 目星をつける比較インタフェース

気になる商品を見つけたら，目印を付けておくで，条気になる商品にチェックを付けることで，XY グラ

件を切り替えたときでも他の商品と比べやすくなってフの中で商品が目立つように強調表示される．こうすいる．

ることで検索条件を切り替えたあとでも，すぐにその2.1 特徴商品が見つけられるため，他の商品と比較しやすい．

XYzon の主な特徴は以下の 3 つである．

2.1.3 Web ブラウザ上で利用可能• XY グラフを用いた視覚的に分かりやすい検索 UI

XYzon は Web アプリケーションとして実装してお• 目星をつける比較インタフェース

り，Web ブラウザがあればすぐに利用することがで• Web ブラウザ上で利用可能

きる．Amazon の商品情報を利用しているため，検索

2.1.1 XY グラフを用いた視覚的に分かりやすいした商品を Web 上で実際に購入することができる．

検索 UI

2.2 機能と使い方

商品の検索結果を XY グラフ上にプロットすること検索キーワードを入力すると図 1 のような検索結果で，複数のソート条件を掛けあわせながら，視覚的にが表示され，さらに図 2 のように商品のカテゴリを絞

分かりやすい形で商品を探し，比較検討することがでり込むこともできる．X 軸，Y 軸のソート条件は図 3

きる．のようにコンボボックスで変更する．この際，商品のXYzon では計 3 つ（X,Y,Z 軸）の条件を同時に掛「売れ筋」は冪乗則に従うことが多いため対数軸になけあわせて見ることができ，これらのソート条件を自る．商品の写真をクリックすると，図 4 のように写由に切り替えることで，様々な条件の組み合わせで商真が拡大して，商品の詳細情報を見ることができる．

品を探すことができる．また，グラフ上に商品を配置

図 5 のようにマウスで範囲選択すると，選択した部分することにより，商品の分布の傾向や，各商品間・クが拡大表示される．このようにズームすることで画像ラスタ間の距離などが一目で分かるようになる．この

どうしの重なりが減るため，商品が集中した場所を見ような「複数の条件の掛けあわせ」「分布や距離が分る際に用いる．また，背景（商品画像以外の場所）をクリックすることでズームアウトする．

☆

http://xy-zon.appspot.com/

XYzon: 商品の比較検討を支援する XY グラフ型検索

図 1 XYzon のスクリーンショット
Fig. 1 Screenshot of XYzon

ing API を利用した．入力された検索キーワードに関連する売れ筋の商品上位 100 件を取得し，値段や人気，評価といった変数を元に配置する．
これらのソースコードは Web 上で公開している☆ ．

3. 議論

正式な評価実験は行っていないが，本章では著者および身近な知人らと XYzon を利用し，そこで挙がった意見や感想などを元に議論を行う．

3.1 XYzon が有効なケース
図 4 商品の詳細情報表示
Fig. 4 Displaying details of a product

XYzon を実際の買い物に利用してみたところ，特に「製品数が多く」「あまり詳しくないジャンル」の買い物をするときに便利という意見が多かった．例えばデジタルカメラのように多くの製品がある場合，まず最初に，だいたいどれぐらいの相場なのか（どの価格帯に集中しているか），どの価格帯のどの製品が特に売れているといったことを知りたい．このようなとき XYzon でデジタルカメラを検索することで，相場や価格帯，目立った売れ筋の商品がすぐに分かる．また，売れ筋を軸にして見たとき，他の商品群から飛び抜けて上位にある商品があると，それが特に人気が高

図 5 ズーム操作
Fig. 5 Zooming operation

い商品であることが一目で分かる．
逆に欲しい商品の条件がはっきりしている場合は，あまり XYzon を使うメリットを感じなかった．その

2.3 実

装

ような場合は既存の商品検索で十分対応できるためで

Web ブラウザ上で利用できるように，XY グラフあると思われる．また，候補数が非常に多い場合，後表示部分は HTML と JavaScript で実装した．また，述する商品画像が重なる問題などがあり，一覧性が低Web アプリケーションサーバの実装と運用には Google
App Engine を利用している．
商品情報の取得には Amazon の Product Advertis-☆

https://github.com/kambara/xyzon にてソースコードを公開

情報処理学会 インタラクション 2011

くなって探しにくくなるという問題があった．

3.2 商品画像が重なる問題と対処法の検討

4. 関 連 研 究

画面内に多くの商品写真を表示しようとすると写真

ImageCube5) では XY グラフを用いて，自動車のカ同士が重なりやすくなる．ズーム表示することであるタログ情報を視覚化している．XYzon のインタフェー

程度重なりを減らしてみることはできるものの，現状スは ImageCube のものに近い．XYzon ではさらにではこの問題を完全には回避できていない．そこで，

Web ブラウザ上で多くの種類の商品情報を検索する

この問題に対して試験的な実装やいくつか対処法の検ことができ，また商品の比較をしやすくなっている．

討を行った．

Web 上で視覚的に分かりやすい表示で商品検索す奥に隠れた画像を表示するため，全ての商品画像をるサービスとして，Bing Visual Search3) や Data-

上下左右ランダムに動かすインタフェースを試験的にPlayers☆ を用いたカメラ検索インタフェースのデモ：実装した．この方法により隠れた画像を一時的またはCamerafinder4) などがある．

部分的ではあるが見ることができる．しかし実際にこのインタフェースを利用したところ，画面が常に不規

5. まとめと今後の課題

則に動いているため気が散り，あまり実用的とは言え商品の比較・検討を支援する XY グラフ型検索を提なかった．動き方や速度を控えめにすることこで，実案し，XYzon を試作した．XYzon は「XY グラフを用できる可能性はある．

用いた視覚的に分かりやすい検索 UI」「目星をつける

画像ブラウザの CAT

1)などで使われている，代表画像を用いる手法がある．重なりあった画像の中から比較インタフェース」「Web ブラウザ上で利用可能」という 3 つの特徴を持つ．

主要な画像（代表画像）を選び，それだけを表示する

今後は Amazon 以外の多くの EC サイトに対応すというものである．非常に多くの画像がある場合，クることで，さらに多くの商品を検索できるようにす

ラスタを要約して見やすくなる見やすくなるが，代表る．また，画像が重なるなど UI の問題を改善してい画像以外はすぐに見ることや選択することができなくきたい．

なる．

リストや表が中心となっている商品検索の UI を変
2)

画像ブラウザの PhotoSurfing

で導入されている

ような，画像間の距離を調整することで重ならないよ

えていくことで，多くの人がより良い買い物をできる，
新しい購買体験の実現を目指す．

うに配置するという手法も考えられる．この手法で軸参 考を線形にすると XY グラフが大きくなりすぎて画面内に表示しきれない・XY グラフに疎な部分ができやすくなる．また，軸を非線形にすると画面内に無駄なく配置することはできるが，商品間やクラスタ間の距離（値段の差など）が分かりにくくなり，比較が難しくなる．

3.3 応用XY グラフを用いた検索は商品検索以外にも応用可能である．複数のソート条件があるような検索に適しており，画像検索や動画検索など Web 上の様々な検索インタフェースに応用が期待できる．
さらに，iPad のようなマルチタッチデバイス向けの検索インタフェースとしても活用できると考えている．指でタッチパネル操作をする場合，細かなクリッ文

献

五味愛，宮崎麗子，Li, J.，伊藤貴之：CAT:大量画像の一覧可視化と詳細度制御のための GUI，
画像電子学会誌， Vol.38, No.4, pp.1108–1105(2008).
2) Horibe, H.，Itoh, T.：PhotoSurfing: A 3D
Image Browser Assinsting Association-Based
Photograph Browsing, NICOGRAPH International 2007 (2007).
3) Microsoft: Bing Visual Search,
http://www.bing.com/shopping.
4) Visokio: CameraFinder,
http://www.visokio.com/demos/camerafinder.
5)
鄭雲珠， 五味愛，伊藤貴之：ImageCube:
多次元データ可視化手法としての画像ブラウザ，WISS2010, pp.121–122 (2010).

1)

ク操作をするのは難しいが，一方でピンチイン・アウ
トのようなズーム操作をしやすいため，XY グラフのズーム操作によってすばやく商品検索できる可能性がある．
☆

http://www.visokio.com/dataplayers