インタフェースデザイン

本節では，前節でマイニングを行ったデータの視覚化を行う．表示システムには javascriptプラグインのprocessing.js²⁴を用いる．

・横断検索結果の配置

クラスタリングの結果に対して，言語の意味構造を研究する意味論では，その意味的 関係性および文章ごとの背景の理解を促すための項目として発話者の「主観/客観」と いう立場から分析を行うことがある[107]．そこで，本研究においても「主観/客観」の 視点を用いることで，諸事象における社会背景と意識の獲得を促進することが期待され

24Processing.js team : Processing.js”, [online] http://processingjs.org/, 2014(引用年).

図29: 感情メタデータカラーマップ

る．筆者は，この比較とクラスタリングを可能にする情報視覚化によって，Twitterの 言葉の特徴を引き立てる視覚化が可能になると考える．そこで，文章を書き込むユー ザの立場及び言葉の特徴によって「主観/客観」の性質の判定を行う．ここでは，ユー ザが私情で綴る文章や話し言葉で書かれる文章を主観的要素として位置づける．一方，

組織が読み手を意識して推敲した文章や，コンピュータによって自動的に処理される 結果である書き言葉を客観的要素として位置づける．まず，本研究で用いるサーチエ ンジンの検索結果の順位決定ではPageRankが利用されている[94]．このシステムは，

「ウェブ文書の被リンク数」や「文書内でのタグ構造の正当性」から客観的且つ機械的に 表示リストを生成する．検索エンジン最適化の取り組みを行う組織や読み手を意識し た書き言葉によるページが優位に表示されるという傾向がある．検索予測候補は，ユー ザの入力補助を目的とし，ユーザとシステムの両者によって表示文字列が決定される．

つまり，主観的な立場のユーザの知見と客観的な情報を提示するシステムの両方の要 素を備える[108][109]．Twitterの検索システムはユーザに人気の投稿あるいは時間が 新しいものを上位に表示する仕様である．

100

図30: 集合知の配置

これまでの議論より，Twitter→サーチエンジン検索予測候補→サーチエンジン検索 結果の順で主観的→客観的な性質を備えると位置付け，分類ごとに配置する．ウェブ 百科事典は検索語の定義になるため，「主観/客観」の分類は行わない．

モチーフの選択「木」

概念マップの手法に基づき，要素同士をノードで繋ぐ．一般ユーザの興味と関心を惹 くデザインを目指し，「木」のモチーフを用いて視覚化を行う．ユーザに馴染み深いモ チーフの選択は，ユーザの関心を引きつけることに有効である[110]．クラスタリング した項目ごとに，天地方向の上位に主観的，下位に客観的な性質の集合知を配置する

(図30)．最も主観的なプラットフォームであるTwitterの検索結果は，葉として上位に

表示される．検索予測候補は，主観的なものと客観的なものを結びつけるものと捉え，

木の幹として再現する．サーチエンジン検索結果を木の根，ウェブ百科事典の検索結

図 31: アニメーション表示の時間遷移

果を地面として表現する．ユーザが入力した検索語は種→幹→葉の順にアニメーショ ンで成長する．表示の時間遷移を図31に示す．以降，アニメーションの流れに沿って 詳細を述べる．

モチーフの演出「種」

フォームから入力された検索語は検索ボタンを押すと種となり，地面に落ち，接 地すると発芽する(図32-a)．芽がでると言葉の種は成長する．種に合わせて幹が 成長し，言葉の葉が生成され，木となる．

モチーフの演出「葉」

一度の検索でTwitterから15件の検索結果を取得する．ツイートごとに，キー ワード抽出によってキーワードが記された葉テキストを最大20個生成する．各ツ イートには時系列順に１〜15の番号を与える．初期位置は，ツイートの番号と本

稿6.4.2小節で得られたキーワードの重要度を示す得点で決まる．木の幹を中心と

して時計回りに12[°]ずつ，15個のツイートが枝として配置される．枝に対して 画面中央から順に得点の高い葉テキストが配置されるが，葉はランダムに浮遊する ため，初期位置に留まる事は無い．テキストサイズはキーワード抽出で与えられ る得点に比例するため，コンテンツ中の言葉の重要度も比較可能である．葉は円 で表示し，半径はテキストサイズの1.3倍である．葉の色には，本稿6.4.3小節で 得た感情メタデータを反映させる．同一ツイートの葉テキストは，枝で結ばれる．

葉テキストのマウスオーバーによってテキストは拡大し，同じツイートから生成 されたテキストの透明度が高くなる．これによって視認性を高める(図32-b)．葉 テキストをクリックすると，元ツイート文が表示される(図32-c)．元ツイート文

102

図32: 詳細図

のモチーフは実である．実はマウスクリックで葉から落下し，地面に触れると消 える．実をマウスオーバーする間は落下を一時停止し，視認性を高める．マウス アクションによって葉の位置は変化するが，衝突判定によって重なることはない．

モチーフの演出「幹」

Yahoo!Japanの検索予測候補は幹の左側に，Google検索予測候補は幹の右側に配置

される．幹に円を接地させ，その上に検索予測候補のテキストを重ねる(図32-d)．

各テキストは衝突判定によって，重なって表示されることはない．マウスオーバー で円とフォントサイズが拡大する．

モチーフの演出「根」

Google search APIで得られる4件のテキストに，検索結果のランクに対応させる

y座標を与える．各テキストは衝突判定によって，重なって表示されることはな

い．マウス操作で位置を自由に変化させる事や拡大が可能である．

モチーフの演出「地面」

ウェブ百科事典の検索結果を地面として表現する．地面は長方形の上にウェブ百 科事典の検索結果テキストを重ねることで表現する．長方形とテキストの幅の拡 大アニメーションによって概念の成長のメタファーを表現する．

2次検索

葉テキストを地面にドラッグアンドドロップ，あるいは検索予測候補テキストを x軸方向に伸ばすと，そのテキストを検索語句とする新たな木，または枝を生成 する(図33)．これを2次検索と呼ぶ．2次検索におけるTwitter検索結果は5件 までとし，キーワード抽出数は各10件までとする．同一画面に複数検索結果を表 示する事によって，言葉の概念の拡張を行う．葉テキストから生成した木は再び 地面にドラッグ＆ドロップすると消え，幹から生成した枝はドラッグ＆ドロップ で幹に戻すと消える．