Color-coded Document Catcher :色彩の心理的効果を用いた文書閲覧支援インタフェース
市野 順子*1 竹内 和広*2 井佐原 均*2
はじめに

1.

なツールと電子的なツールそれぞれの特徴を分析する．
文章を読むための従来の非電子的ツールには，紙，黒WWW の急速な普及・発展に伴い，膨大な量の文書へ板などがある．紙は，パラパラとページをめくりながらアクセス可能となり，特定の文書を発見する検索エンジ

内容を概観でき，斜め読みし易い点が長所である．一方，ン，ページ間の関連を視覚化するツール，新たな知識をデータの再利用がしにくい点が短所である．

発見するテキストマイニング技術等，巨大なテキスト情

一方，文章を読むための代表的な電子的なツールには，報空間へアクセスするための仕組みは整備されつつある．

WebブラウザやAcrobatReader等の文書閲覧ソフトがある．

しかし，凡そどんな内容でどの辺りに知りたい情報がWebブラウザには，リンクを辿るという単純な操作で情書かれているか，といった文書の内容に関する把握は依報の連想的探索を支援する強力な機能として，ハイパー然ユーザの精読に任されている．しかもアクセス可能なリンクがある．しかし，現在の多くのハイパーリンクが，文書が大量であるが故に，逐一文書を精読することは大他人の視点で静的に設定されている，基本的に語単位できな負担であり，ユーザが拾い読みをする傾向は強まる．

しか探索できない，といった理由から必要とする情報にそこで本研究では，文書の構造やポイント，ユーザのなかなか辿り着くことができず，Web空間上で迷子にな必要な情報を素早く把握でき，拾い読みを容易にする文ることが多い．また，表示位置を動的に制御するスクロ

書閲覧支援システム「Color-coded Document Catcher」をールバーは，わざわざポインタを画面の端へ移動させて提案する．本稿では，提案システムのユーザインタフェ小さいつまみを掴まなければならないほか，文章が長いースを考察すると共に，実装したプロトタイプシステム

場合にはつまみの微小な移動で表示内容が急激に変化すの実現方法について説明する．

るといった問題がある．研究[2]では，文書を 1 ページご

我々は，コンピュータシステムを自己の知識を発展させるメディアとして捉えている．本研究が主題に据えるとに提示して読む方が，スクロールして読むよりもユーザの理解が良いことが示されている．

「読み」という知的活動は，どうすれば紙と鉛筆より使3.

い勝手が良く，かつ人間の知性や創造性を進化させるシステムを構築できるかという大きな課題の一端である．
2.
2.1

文章を読む

文章を読む行為3.1

従来研究

情報視覚化に関する研究

本来直接目で見ることができない情報を何らかの形で見えるようにする視覚化の研究は盛んに行われており，その中でテキスト情報を扱った研究も数多くある．

文章を読む行為を支援するためには，文章の読解過程

WebBook[3]では，ウェブページ群を 3 次元表示し，現をモデル化した知識が必要と考えられる．しかし，文章実の本のようにパラパラめくるインタフェースや，レンの読解過程に関しては，認知言語学や認知心理学の分野

ズのメタファを用いてページを拡大表示するインタフェで数多く行われ様々なモデルが提案されている[1]もののースを提供している．Data Mountain[4]では，ページのサ完全には明らかになっていない．殆どのモデルに共通しムネールを山の斜面に置くメタファを使用しており，多ている考えは，複数の文や段落が一次元的に並べられてくのページを一望できる．これらの研究は文書群の管理構成されている構造から，次々に既有知識を取り込みそには有効であるが，文書の内容を把握するインタフェーの間の関係を付け，一つの意味的なまとまりを持った構スとしては適切でない．また，表示できる情報量が多く造を作り出す過程であると捉えている点である．

なるため 3 次元的に視覚化することが主流になりつつあ2.2

文章を読む道具

高度で自然な支援が得られるユーザインタフェースを実現するために，文章を読む道具として従来の非電子的るが，必ずしも最適ではなくタスクやユーザによってはいくつかの問題が起きることも指摘されている[5]．
Popout Prism[6] では文書の概観と詳細を視覚化している．Webページ上の重要語を視覚的にポップアウトする*1: TIS㈱ 産業第 2 事業部 産業システム第 2 部
E-mail: ichino@karl.tis.co.jp*2: 通信総合研究所
E-mail:{kazuh, isahara}@crl.go.jp

ことでユーザの注意を引く．画面の左部にはサムネール
画像が表示され，点線で囲われた部分が右部の詳細画面全体との相対位置を示しており，表示位置を把握し易い．

しかし，文書の大まかな流れを把握するには全文を精読しなくてはならないため，ユーザへの負担は大きい．
3.2

自然言語処理を利用した文章特徴の抽出に関する研究

自然言語処理の分野においては，文章構造，テキスト

表 1 読解過程における要素的行為と提示すべき情報
要素的行為
提示情報
① 構造把握段落間の類似度② 重要箇所の特定
段落の重要度
③ 事実と意見の区別
段落に事実又は意見が含まれる程度

間類似度，重要語抽出など文章上の特徴を数値化する研究は古くから取り組まれている．本研究では，そのような数値化された情報を視覚的に提示することに着眼する．

(ⅲ) 的確かつ柔軟な連想的探索
紙の本以上に強力なインタフェースを実現するために

Salton は，テキストを日付や意味に基づき段落に分解は，連想的な探索を可能にするハイパーリンク機能は必し，楕円上の点で示された段落同士を線で結び段落間の須である．多種多様な情報空間の中でユーザを迷子にさ関連性を視覚的に表現している．これは，段落の構造をせずに効率的な探索を支援するためには，ユーザが必要直感的に把握するにはよいが，文章を提示していないたとしている情報を動的に反映した連想や，単語ではなくめ内容を読むことができない．研究[8]では，Webページの文章のある範囲をキーにした曖昧な連想を可能とする，論理構造を抽出し，ユーザの興味に適合した部分のみを的確で柔軟な情報探索機能を提供する必要がある．

[7]

抜き出しテキスト表示することで閲覧支援を行っている．
抽出した情報とWebページ本体を別画面で表示しているため，両方のテキスト情報を読まなければならない，その相対関係を把握するのが困難，といった問題がある．
一方，文章の要約を行う研究は，原文を縮約した結果を提示するものが大半である．これを文章の拾い読みの支援に適用することも考えられるが，提示する段階で情報が欠落しているため関連情報や詳細情報を確認できない，読み手自身の視点を通して必要な情報を抽出できない，といった点が課題といえる．

5.

Color-coded Document Catcher

前章でまとめた要件を満たす新たな文書閲覧支援の手法として我々が提案するのが「Color-coded DocumentCatcher」（図 2）である．本研究は Web 文書の閲覧への適用を前提として検討を行った．
5.1

色彩の心理的効果

色彩の心理的効果は，色感覚効果，色知覚効果，色感情効果に分けることができる．本研究では，色彩のもつ心理的効果の大きさと，色による視覚化はタスクやユーザに関わらず有効である[2]ことに着眼し，色彩を用いて文書閲覧支援システムの要件文書閲覧支援システムを実現する．色に関する心理的効以上の分析より，従来のツールや研究は利点もあるも果を分析する際の総論として文献[10]を参照し，本研究で4.のの，ページの切り替え方法，文章の概観のしにくさ，利用する効果を中心に以下にまとめる．

概観を重視した場合の精読しにくさなど，様々な問題点(1) 色感覚効果が見出された．それらを踏まえ，文書閲覧支援システム

色感覚効果は，外界の物理的色刺激が眼に入って最初のインタフェースの要件を以下にまとめる．に行う色の識別である．人間が識別できる色の数は 750(ⅰ) 読解過程の促進万程度にも及ぶ．色は色相，明度，彩度という直感的に文章の読解過程をできるだけ具体的に行え，後戻りが見分けることのできる 3 つの尺度を用いて説明すること少なければ情報を高速に処理でき，拾い読みが容易になができ，色相は赤や青といった色合い，明度は色の明るると考える．読解過程における要素的行為として，Webさ，彩度は色の強さを示す．本研究では，この人間の色文書などの多種多様な文書の閲覧を支援するという観点に対する高度な識別能力に着目する．

から，現在のところ表 1 に示す 3 つを考えた．その行為(2) 色知覚効果を具体的，発展的に行うためには適切な情報提示が必要

色知覚効果は，空間的・時間的に周囲にある他の色のとなる．文書を分解し関係付けを行う単位は段落とした．

刺激の影響を受けることで起こる効果である．本研究で(ⅱ) 読み位置認識＋精読＋概要把握の容易性

は，その効果の一つである，周囲の色と比較して彩度が現実の紙の本をパラパラと斜め読みするときのように，文書のどの辺りを読んでいるかを直感的に認知でき，か高い色は視認性が高く特に目立つという性質に着目する．
(3) 色感情効果

つ，読む行為に自然に意識を集中できる機能が必須であ

色感情効果は，知覚感情と情緒感情に分類できる．知る．アニメーションや音声を用いた情報提示は一見使い

覚感情は人間の視覚系の本来持っている特性に基づくもやすいが，感覚を刺激するため体験的認知を強要し，読のであり，情緒感情は個人が独自に持つものである．本

むという内省的認知を阻害する．内省を促し，体験を排研究では，知覚感情の一つである，明度が低いほど硬く[9]除するには抽象度の高い情報提示が必要である ．さら感じ，高いほど軟らかく感じる色の硬軟感に着目する．
色彩を利用したユーザインタフェースに，読解行為を妨げることなく，(ⅰ)で分析した文章上の5.2特徴も同時に把握できる機能を提供する必要がある．

4 章でまとめたシステムの要件に基づき，色彩の心理的効果を利用した文書閲覧支援システムのインタフェーにした（図 2 左）．このようにポインティングの範囲を大スの設計を行った．システム全体に関わるインタフェー

きくすることにより，ユーザは直感的に表示位置を切りスとして，色の識別能力の高さを利用し，各段落の特徴替えることができ，スクロール操作により読解が中断さを表す色を背景色としてマッピングすることで，文章上れるといった思考への影響を軽減することができる．の特徴を視覚的に提示するインタフェースを設計した．

要件(ⅲ)を満たすインタフェースとして，Detail 画面上要件(ⅰ)を満たすインタフェースとして，読解を促すの段落内の任意の場所でクリックすると，選択された段ための 3 つの文章特徴「段落間の類似度」，「段落の重要落の内容及び，ユーザが知りたい情報を基に連想される度」，「段落の事実／意見の程度」をそれぞれ色相，彩度，Web ページへジャンプするインタフェースを設計した

明度と対応させ，その 3 属性で決定される色を用いて段（図 2 右）．また，オリジナルの Web ページに埋め込ま落の特徴を示すインタフェースを設計した．図 1 に，3れたリンク操作もそのまま利用できるようにした．

属性のうち 2 軸を固定し 1 軸のみを変化させた色を用いた文章特徴の提示と，3 属性で決定された色を用いて 3提案したインタフェースの一部をプロトタイプシステムとして実装した（図 3）．

つの特徴を同時に提示する例を示す．
「類似度」の提示には，段落同士の距離を認知する必要があるため，感覚的に等しい間隔で配置されている色相による表現が適している．例えば黄色と橙色のように隣接する色相で示された段落同士は内容の類似度が強く，黄色と青色のように離れた色相で示された段落同士は弱い，といったことを感覚的に把握できる（図 1 左段上）．

ユーザ要求を満たす Web ページ「重要度」の提示には，色の「目立つ」度合いと相関のある彩度が適している．段落の重要度やユーザの興味の度合いに応じて配色する色の彩度を変化させることで，Overview

Detail
図 2 文書の概観と詳細の提示

自然にユーザの注意を引くことができる（図 1 左段中央）．
「事実／意見の程度」の提示には，色の硬軟感に影響を与える明度が適している．文章に事実が多く含まれる文章ほど硬い印象があり，意見が多いほど軟らかい印象があることから，段落に含まれる事実／意見の程度に応じて配色する色の明度を変化させることで，ユーザに両者の違いを認知させることができる（図 1 左段下）．
色相
黄橙
青

段落 A
段落 B
段落 C

彩度
高中
低

段落 A
段落 B
段落 C

重要度
大中
小

明度
低
高
低

段落 A
段落 B
段落 C

事実/意見事実意見事実図 3 プロトタイプシステムで閲覧している様子
6.

類似度
大小6.1
小
色の 3 属性を利用した
3 特徴量の同時提示
段落 A
段落 B
段落 C

図 1 色の心理的効果を利用した情報提示要件(ⅱ)を満たすインタフェースとして，任意の Webページに対して，段落の背景色に文章特徴を表す色彩が施された Detail 画面と，その左側に文書全体が表示されるように Detail 画面を縮小した Overview 画面を表示するインタフェースを設計した（図 2）．Overview 画面の，ある色で示された段落内の任意の場所をポインティングすると，Detail 画面の先頭に選択した段落が表示されるようシステムの実現方法

システムの概要

以上より，本システムは図 4 に示す処理を行う必要がある．まず，ユーザが閲覧した Web 文書から段落を抽出し，段落の特徴量（類似度，重要度，事実／意見の程度）を導出する．その特徴量を基に配色（色相，彩度，明度）を決定しこれを用いて，Overview ページと Detail ページを生成する．また，Detail ページには，ユーザの利用履歴を基にユーザの知りたい情報に適合した Web ページへジャンプするためのハイパーリンク情報が付加される．
次節では，段落間の類似度に基づいて段落を色相環上に配置するアルゴリズムについて説明する．
6.2

個体間の類似度に基づき個体を円環状に配置するアルゴリズム

本システムでは段落間の類似度を色相で表現する．色相は，色相環といって色味が変化していく様子が循環的な円周上に表される．そのため，個体間の類似度や距離に基づいて個体を円環状に配置する機能が必要となる．
この条件を満たすアーキテクチャを考察する．
数量化Ⅳ類や主座標分析は，個体間の類似度を表す行

ルを学習し，入力ベクトルに少し近付く．学習（更新回オリジナルWeb ページ数）が進むにつれて，近傍領域のサイズ，学習率係数の値を減らす． U i (t ) は出力層のユニット i が時刻 t に保持しているパターン， α (t ) は時刻 t の学習率係数である．
U i (t + 1) = U i (t ) + α (t )[ E (t ) − U i (t )]Web ページからの段落抽出
段落の特徴量導出(3)

学習の結果，入力ベクトル空間で近くにある段落が，ユーザ利用履歴ネットワーク上でも互いに近傍のユニットへと射影され特徴量を色情報へ変換る．同一の段落が複数のユニットにまたがって射影されOverview ページ生成

Detail ページ生成

た場合は，更新回数が最も多かったユニットをその段落の中心位置とし，色相環の偏角を決定する．

ユーザ要求を満たす
Web ページ

Overview2

出力層

Detail

図 4 システム概念図

10m m −1m −1 m 0 1 2Ui

Ucui1 u i 2 ui 3uin

E1 E2En

入力層列に基づいて個体を直交空間に配置する．本システムでは，個体を直交座標上ではなく極（円）座標上に配置す

図 5 円環状 SOM のネットワーク

図 6 更新される近傍領域

る必要があるため，適用できない．
7.

そこで本システムでは，出力層を円環状の 1 次元配列

まとめとすることにより従来の自己組織化マップ（SOM）を拡

色彩の心理的効果に注目し，文書閲覧支援システムに張した．これを用いて段落間の類似度に基づき段落を色必要な条件を考察し設計した．また，段落間の類似度に相環上に配置する．以下で，提案する円環状 SOM の概要

基づき段落を色相環上に配置するアルゴリズムについてを述べる．

考察した．

≪基本構造≫

今後は，段落の特徴量としての事実／意見の程度を抽SOM は 1 層のネットワークである．本システムのネッ
トワークは入力ベクトルとして n 個の段落の特徴ベクト出する方法の検討，提案アルゴリズムの有効性の検証，提案システムの評価実験を進める予定である．

ル E を受け取り，出力層は m 個の参照ベクトル U i が円環状に 1 次元に配列されている．この様子を図 5 に表す．

参考文献

段落の特徴ベクトル E は，索引語の重みに tf･idf の値を[1]用いたベクトル空間モデルを用いる．入力ベクトルと参[2]照ベクトルの次元数はいずれも索引語の総数と等しい．
≪学習≫
入力ベクトル E は，式(1)で定義される，段落間の類似度 sim( E ,U i ) を最大にするノード c を探す．
sim( E ,U c ) = max(sim( E ,U i ))(1)
類似度の測定には，式(2)で表される Dice 係数を用いる．

sim( Px , Py ) =2∑ Ti=1 xi ⋅ yi

∑ Ti=1 xi2 + ∑ Ti=1 yi2

[3]

[4]

[5]

(2)

xi , yi はそれぞれ段落 Px , Py の索引語 i に対する tf･idf 重[6]み， T は索引語の総数である．式(1)で得られた参照ベク
トル U c を持つユニットを勝者ユニットと呼び，勝者ユニットの前後に近傍領域を図 6 中の点線で囲った長方形の[7]ように定義する．通常の 2 次元 SOM の場合，近傍領域の[8]端が SOM を超えた場合は切り捨てられるが，本システム
では SOM が円環状であるため， m 番目の隣りのユニッ
トを 0 番目とし循環的に近傍領域を設定する．

[9]

近傍内の全てのユニットは式(3)に従って入力ベクト[10]

阿部, 桃内, 他: 人間の言語情報処理―言語理解の認知科
学, サイエンス社, 1994.
A. Piolat, et al.: Effects of Screen Presentation on Text Reading
and Revising, Int. J. of Human-Computer Studies, pp.565-589,
1997.
Stuart, K. Card, et al.: The WebBook and the Web Forager: AnInformation Workspace for the World-Wide Web, CHI96,
pp.111-117, 1996.
G. Robertson, M. Czerwinski, et al.: Data Mountain: UsingSpatial Memory for Document Management, UIST’98,pp.153-162, 1998.
Marc M. Sebrechts, John V. Cugini, et al.: Visualization ofSearch Results: A Comparative Evaluation of Text, 2D, and 3DInterfaces, Proc. 22nd Annual International ACM/SIGIRConference, 1999.
B. Suh, A. Woodruff, et al.: Popout Prism: Adding Perceptual
Principles to Overview+Detail Document Interfaces, CHI2002.
ACM Press, Vol.4, No.1, pp.251-258, 2002.
G. Salton: Automatic Text Decomposition Using Text Segments
and Text Themes, Proc. 7th ACM Conference on Hypertext,
1996.
品川, 北川, 他: ユーザプロファイルに基づくビューペー
ジの動的生成による WWW 閲覧支援, 情報処理学会論文
誌：データベース, Vol.41, No.SIG 6 (TOD7), pp.22-36, 2000.
田野: インターフェースシステム論, 電気通信大学大学
院情報システム学研究科「インターフェースシステム論」
講義資料, pp.39-40, 2001.
山中: 色彩学の基礎, 文化書房博文社, 1997.