芸術科学会論文誌 Vol.4 No.1 pp.1－12

Web ナビゲーション技術にみる
情報デザイン・情報視覚化の最近の動向
菊池 司 1)

伊藤 貴之 2)

岡崎 章 1)

1) 拓殖大学工学部工業デザイン学科
2) 京都大学大学院情報学研究科
2) 日本アイ・ビー・エム（株）東京基礎研究所と兼任

Recent Trend of Information Design and Information Visualization
Studying from Web Navigation Techniques
Tsukasa KIKUCHI, Takayuki ITOH, Akira OKAZAKI
E-mail: {tkikuchi, zak}@id.takushoku-u.ac.jp, itot@computer.org
1)

Department of Industrial Design, Takushoku University
2)

Academy of Informatics, Kyoto University

アブストラクト
日常生活や日常業務にあふれる膨大な情報の中から、利用者が必要としている情報を適切にわかりやすく提供するためには、視覚的な技術を用いることが非常に有効である。有効な視覚的技術を確立するためには、人間の感覚・感性の観点からと、コンピュータによる自動化の観点からの議論が有用である。
視覚的に情報を提供する技術の代表として、情報デザインと情報視覚化があげられる。前者は人間（デザイナー）が表現した情報を提示する技術であり、どちらかといえば感性の観点から発達した分野である。後者はコンピュータ（プログラム）が表現した情報を提示する技術であり、どちらかといえば自動化の観点から発達した分野である。
視覚的な情報提示技術が必要とされている代表的な分野に Web があげられる。本論文では Web ナビゲーシ
ョン技術に適用されている情報デザイン・情報視覚化の両技術を紹介し、その内容から情報デザイン・情報視覚化の最近の動向と今後の展望を論じる。
キーワード: 情報デザイン、情報視覚化、Web ナビゲーション
Abstract
Visual technologies are very effective for adequately and friendly providing information required by users, from huge
information in our daily life and work. It is necessary to discuss about visual technologies in the view of both humansense and automated technologies using computers.
Information design and information visualization, are typical technologies to visually provide information. Former
provides information represented by humans, and latter provides information represented automatically by computers.
Web is a typical technology area that requires visual technologies to provide information. This paper introduces
information design and information visualization technologies applied to Web navigation, and then discusses about theirrecent trends and future directions reflecting the introduced Web navigation technologies.
Keyword: Information design, information visualization, Web navigation.

の一途を急速にたどっている。それどころか、コンピュータの

1. はじめに普及にともない、私たちが日常生活や日常業務で扱う情報その近年のコンピュータの性能向上と低価格化により、コンピュ

ものが、膨大化・多様化・複雑化していると言われている。そータは日常生活や日常業務に急速に普及している。それにともの膨大、多様、かつ複雑な情報の中から、利用者が必要としてなって、コンピュータが扱う情報も、膨大化・多様化・複雑化いる情報を適切にわかりやすく提供する手段として、視覚に訴1

芸術科学会論文誌 Vol.4 No.1 pp.1－12
える情報提供技術を確立することが考えられる。人間は日常生

しかし現状では、インターネット全体どころか、1 箇所の Web活の中で、情報の 90%以上を目から入手しているという。つまサイトの中でさえ、ユーザーが購読したい Web ページを発見す

り人間の目は、もともと情報収集の重要な媒体として機能してることが容易でない事例も多くある。そこで近年では、Web サいるというわけである。このことから、コンピュータから人間

イトの中をユーザーが自在に徘徊できるように誘導するためのへの情報提供手段として視覚的技術が有効である、というのもナビゲーション技術の研究が進んでいる。特に Web は、コンピ

間違いないであろう。

ュータ技術に精通していない人を含めて、非常に多くの人に普コンピュータを用いて視覚的に情報を提供する技術の代表と及しているメディアでもある。一般的にいってコンピュータ技

して、情報デザイン[1,2,3,4,5]と情報視覚化[6,7,8,9]があげられる。

術に精通していない人にとって、コンピュータから必要な情報

両者ともに、コンピュータの情報表示媒体であるディプレイやを引き出すことは必ずしも容易ではない。その意味からも、Web

プリンタなどを用いて、情報を効果的に視覚表現する技術、とサイトのナビゲーション技術は重要である、と言える。

いう点では共通しており、両者の間に明確な境界線は存在しな

Web サイトのナビゲーション技術は、情報デザインと情報視い。強いて両者の差異をあげるとしたら、デザイナー（人間）覚化の両方の技術が活用されている典型的な分野である[12]。

が情報を表現しているのが情報デザインであり、
プログラム
（コ

本論文では、Web ナビゲーション技術を題材として、情報デザ

ンピュータ）が情報を表現しているのが情報視覚化である。言インおよび情報視覚化の各分野が近年どのように発展している

い換えれば、人間の感性の観点から情報を提示しているのが情かを概観するとともに、両分野の今後の動向を推察する。以下

報デザインであり、コンピュータによる自動化の観点から情報2 章にて、「情報デザイン」「情報視覚化」の定義について述べを提示しているのが情報視覚化である。
（なお情報デザインは本る。続いて 3,4 章にて、Web ナビゲーションの目的で情報デザ

来、コンピュータの有無にかかわらず情報提供のためのデザイ

インおよび情報視覚化の各技術を適用した事例を紹介する。最ン技術全般を意味する用語であるが、本論文ではコンピュータ

後に 5 章にて、これらの紹介例を通して見られる情報デザイン、を用いた情報提供のためのデザイン技術を対象としていること

情報視覚化の最近の動向を解説し、また将来の動向を予測する。

を注釈したい。
）
ムーアの法則 [10] によると、コンピュータの心臓部にあた2. 情報デザインと情報視覚化る半導体の集積度は 18 ヶ月で 2 倍のペースで向上しており、
そ2.1 情報デザイン

れにともなってコンピュータの本質的な性能、
例えば CPU の速度やメモリの容量も、同様に 18 ヶ月で 2 倍程度のペースで向上

情報デザインとは、言葉、絵、図表、地図、絵文字、漫画なしている、と言われている。その一方で、コンピュータに蓄積

どによるコミュニケーション（必ずしも電子的とは限らない）

される情報量の中には、例年 2 倍以上の速度で拡大している事のことである[4]。すなわち、情報を、人が効率的かつ効果的に例も多い。このような事例において、情報はコンピュータの性使えるような形で準備する技術と知識であり、現在では種々の能向上以上の速度で拡大しているので、年を追うごとに情報はマニュアル、時刻表、交通案内や道路標識、経路表示や地図なコンピュータから溢れてしまう、と考えられる、よって、そのども情報デザインであるといわれている。

ような情報を適切に提示する情報デザインや情報視覚化も、コ

つまり，情報デザインは以下の目的を果たすものであるとまンピュータの性能向上と一緒に進化する必要がある、と考えら

とめることができ、情報デザインと従来からの他のデザイン分れる。この点から、情報デザインや情報視覚化の研究の重要性

野との違いは、コミュニケーションの目的達成の過程で「効率は高まり続けている、と考えてよいであろう。

と効果」が重視される点にある。

さらに、ムーアの法則が成立しているのはあくまでも CPU 速

1． 理解しやすく、すばやく正確に取り出せ、効果的な行動

度やメモリ容量の話であり、例えばディスプレイやプリンタのにたやすく移せること。

解像度が18ヶ月あたり2倍程度の速度で向上しているという現2． 容易で、自然で、できるだけ快適なツールを使って相互象は見られない。つまりコンピュータが扱う情報量の拡大に対関係をデザインすること（人間とコンピュータのインタして、その表示解像度は同様には拡大していないのである。よ

フェースのデザインにおける多くの問題解決も含む）。

って年を追うごとに、ディスプレイやプリンタなどの表示性能

3． 人々が3 次元空間を快適かつ容易に歩き回れるようにすを有効に活用しながら情報を提示する技術の必要性が高まってること（都市空間、バーチャル・リアリティ空間も含む）。

いる、と考えるべきである。

従来のデザイン分野で、情報のデザインと最も密接に結びつ

コンピュータの性能向上よりも高速に情報量が拡大しているいているのはグラフィックデザインである。情報デザインとグ典型的な事例に、Web があげられる。インターネットに公開さラフィックデザインの区別はほとんどないように見えるかもしれている Web ページの総数は、非常に急速に増加しており、それない。どちらの目的も情報の提示であり、コミュニケーショの内容も多様化の一途をたどっている。このように膨大な情報ンである。しかし歴史的に詳しく見てみると、その違いがはっ量をもつインターネットの中から、ユーザーが有用な情報を発きりする。

見することは、必ずしも容易ではない。Google [11] に代表されこの数十年の歴史を見ると、グラフィックデザインは“アピる Web 検索エンジンは、そのような背景の中で発達を遂げていアランス”（体裁）を強調し、ある現代的な美的価値を表現してる。

きた。職業として現在教えられ、実践されているグラフィック

2

芸術科学会論文誌 Vol.4 No.1 pp.1－12の一種であるといえる。

デザインのルーツは、
基本的には 20 世紀初頭のアールデコ様式

もう少し個性的な情報視覚化技術で有名なものの一例として、にあり、ダダイズムに端を発するものである[13]。
一方、情報デザインは“コミュニケーション”を強調し、形Smartmoney 社 [16] が採用した Treemap [17] という情報視覚だけでなく内容も重視する[14]。ルーツも多様であり、情報理化技術があげられる。Smartmoney 社の技術は、長方形の画面領論や認知科学までをも含むのが特徴的である。

域を 2 次元的に多数の長方形に分割して、その大きさで各業界

情報デザインという語が急速に注目されるようになった第一の株取引のシェアを示し、さらに長方形群を再分割して、そのの理由に、複雑になった現代社会において情報を管理するには、大きさで各企業の株取引のシェアを示し、その長方形の色で株少しでも効率的かつ効果的に作動する、高度なコンピュータお価の上昇度（または下降度）を示している。この情報視覚化技

よびコミュニケーション・デバイスやネットワークが必要だと術は、株価の動向という日常的な情報に対して、各業界と各企いう時代的な背景が考えられる。単に大量の情報をコンピュー業という 2 段階のレベルを同時に理解できるように提示していタに保存し、それを取り出すだけでは、私たちの情報ニーズをる、という点で非常にスマートかつ実用性がある。

解決することにはならない。実際、あまりにも大量に蓄積された情報は、どこに何があるかわからず、サイバースペースで迷

3. Web ナビゲーション技術と情報デザイン子になったような気分を味わった経験がある読者も少なくないであろう。私たちに必要なのは、より多くの情報ではなく、適本章では、Web ナビゲーションおよび Web ユーザビリティに切な情報を適切な時に適切な人に少しでも効果的かつ効率よく関してデザイン的な側面から研究・実践している例を紹介し、提示できることである。

Web サイトデザインにおける情報デザインの動向について論じ

情報デザインが注目されるようになったもうひとつの理由は、る。本章では、Web ブラウザ上の情報のレイアウトデザインに

管理職、技術職、専門職のすべてのレベルで時間がますます貴よってユーザーをナビゲートする研究、実空間指向のデザイン

重になっており、業務目的において高度な情報提示技術が要求によってユーザーをナビゲートする研究、ユーザーのメンタルされている、という点である。情報デザインがうまくいってい

モデルの採用によってその両者の融合を目指す研究、についてないと作業の効率も落ち、組織として効果的な活動ができない

論じる。

ことは容易に想像できる。そのため、情報を効率的かつ効果的

3.1 レイアウト指向の Web ナビゲーションデザインに利用できるようにデザイン的側面からも支援しようという考え方が，急速に浸透してきた。

Web サイトのユーザビリティ向上の議論は、システムやコード技術などに比重がかかることが多い。しかし、サイトデザイ

2.2 情報視覚化

ンにおいても、適切な情報構成ということを考慮しなければな

情報視覚化は、コンピュータに蓄積されている情報を視覚的らない。デザインは「画面を装飾する」という意味ではなく、に提示するためのソフトウェア技術であり、主に情報を画面表

情報の配置に一定の秩序を持たせ、内容をより視覚的に伝達し示するためのコンピュータ・グラフィックス技術、画面表示結やすくする配慮を行い、メディアの特性を引き出すことを意味

果を対話的に探索操作するためのユーザーインタフェース技術、する。つまり、デザインは「情報の構成作り」であることに他などの技術を組み合わせた複合的な技術分野であるといえる。

ならず、レイアウトやデザインに関する正しい認識が Web サイ

また情報視覚化も情報デザインと同様に、人間とコンピュータ

トのユーザビリティ向上には不可欠である。
また、Web サイト作りはブラウザの背後を支える技術の知識のコミュニケーションのための重要な技術である、という議論を持って初めて Web デザインとなる。つまり、配信方法やコンが進んでいる[15]。

ピュータが持つ制限を知った上で、サイトに必要な機能を形作

情報視覚化の情報デザインに対する明確な差異は、コンピュる作業がデザインなのである。

ータの自動算出によってアピアランスが決定される点である。
そのため情報視覚化は主に、時々刻々と変化する情報を自動的

従来、グラフィックデザインの分野で確立されてきた手法をに提示する目的に向いているといえる。その特長ゆえに情報視応用していた Web サイトデザインのレイアウトに関して、近年覚化は例えば、コンピュータの利用状況、金融・通信・流通・

では実践・研究の両面から考え直そうという動きが見られる。

人事組織などの動向分析、出版物や特許のデータベース、とい矢野による書籍[18]では、Web サイトのレイアウトパターンにった目的での実用が多く報告されている。

もとづいた分類から、Web というメディアの特性による情報整

情報視覚化技術の最も単純かつ身近な例として、例えば PC

理法、Flash を用いたインタフェースまで、豊富な図版を用いなの基本ソフトに導入されているファイルシステム表示ソフトががら解説されている。この書籍では、Web というメディアの特あげられる。代表的なファイルシステム表示ソフトでは、ファ性を生かしつつ、ユーザビリティやアクセシビリティへの対応

イルシステムのフォルダの包含関係を木構造として表示し、マの仕方まで解説しており、Web サイトのレイアウトデザインをウス操作によって任意のフォルダの中身を自動表示する、とい学ぶための参考書として非常に有益であると思われる。

ったユーザーインタフェースを実現している。また例えば、PC

一方、Web サイトのレイアウトに関する研究ベースのアプロの表計算ソフトに付録されているグラフ作成機能も、数値デー

ーチとしては、M. MATSUMOTO らによる研究例[19]が報告さ

タを視覚的に提示するという意味では、単純な情報視覚化技術れている。この研究例では、VRSJ（日本バーチャルリアリティ3

芸術科学会論文誌 Vol.4 No.1 pp.1－12
学会）の Web サイトデザインをテーマとして、従来からの他学動に沿ったボタン群のレイアウトにすることによって、金融サ会における Web サイトデザインをも含み幅広く調査し、Web

ービスに必要となる多様な情報へのアクセス経路を整理していサイトのレイアウトに関して 5 種類の形式に分類している。さる点が非常に評価できる（図 2）。
前述したように，Web サイトを制作するデザイナーには、ブらに、この分類からユーザーの嗜好調査を行い、サイトのリニ

ラウザの背後を支える技術、およびその制約について知識が要

ューアルに活用するという手法を採用している。
レイアウト指向による Web サイトナビゲーションを実践し求される。なぜなら，コンピュータの OS の違いやインターネている具体的な例としては、IconMedialab lberia (Spain) のデザ

ットブラウザの違いによっては、デザイナーが作成したレイア

インによるカンペールの E ストアショッピングサイト[20]が挙

ウトデザインが正しく表示されない可能性があるからである。

げられる。本サイトでは、国際的に購買層を引きつけるためにレイアウト指向の Web ナビゲーションデザインの問題点はまインタフェース全体にイラストレーションによる説明を多用し、さにここにある。デザインとは、情報や機能といった抽象的な

Web ナビゲーション面では、ヒエラルキーのある構成の連続す概念に形を与える作業である。想定したレイアウトデザインをるフローに従った従来からのデザインではなく、2 方向にブラ形に定着させるには、出力先であるユーザーのコンピュータ環

ウジングできるオープンスペースを採用している。この手法に境やブラウザの性質を理解することが不可欠であり、また、イ

より、ユーザーに隠された階層構造をなくし、実際の店舗のよンターネットというコンピュータネットワーク上の基本的な知

うに明暗の使い分けによって 2 次元上に情報が配置されている

識、デザインに関する知識など、幅広い知識を持つ必要がある。

点がユニークである（図 1）。

さらには、各分野を担当する技術者と円滑に作業を進めるコミュニケーション能力も必要であると言える。

3.2 実世界指向の Web ナビゲーションデザイン
実際の地形を紙の平面に描き起こした地図と違って、Web には物理的に存在している「実体」性は薄い。サーバーやルータ
ー、ケーブルといったネットワークを構成する設備の所在は丹念に調べれば明らかにはできるが、それでは情報そのものの所
在を表す地図にはなり得ない。そこで、ディジタルな情報を実世界に存在するメタファを利用して視覚的に表そう、というデザインコンセプト、つまり視覚的実世界指向のデザインコンセ
プトが生まれる。
図 1. IconMedialab lberia のカンペール E ストサイトデザイン。
（文献[20]より引用。
）

図 3. メンデル遺伝博物館 Web サイトの情報構造。
（文献

図 2. Sony Bank によるオンライン銀行のインタフェースデ[23]より引用。
）

ザイン。
（文献[21]より引用。
）「NewsMaps.com」という Web サイトでは、ハイテク関連のニ

また，Sony Bank によるオンライン銀行のインタフェースデュース記事や企業から配信されるプレスリリースなどを対象に、

ザイン[21]では、商品詳細説明や取り引き画面を別ウィンドウ

そこで扱われるテーマの重要性やテーマ同士の関係性を地図とに切り分けることで、サイトの階層を削減し、すべてのツール

して視覚化することを試みている[22]。このサイトで使われてを一度に見渡せるようなレイアウトデザインとしている。
また、いる「テーマスケープ」という技術では、記事や議論のなかに

「考える」
、
「調べる」
、
「取り引きする」といったユーザーの行

出てくるキーワードを抽出し、同じようなキーワードが頻出す

4

芸術科学会論文誌 Vol.4 No.1 pp.1－12などの感覚が必ず存在する、というような感覚を指す。

る記事を一塊の地域に集める。関連する記事が多ければ多いほど、その地域は拡大し、特にテーマが集中するとそれは「山」

次に、文献[25]における研究では、情報検索サイトの Web サとして表現される。したがって、ニュース全体は、いくつかの

イトナビゲーションを題材として、情報を格納するフォルダを

高い山や低い山で構成された一種の山岳地帯のように見えてく

メタファとして利用し、フォルダを 3 次元空間内に表示するこるというものである。ユーザーは、日々のニュースの重要度やとによって各情報間の類似性を 3 次元空間の距離で表現するデ

関心度を地形の変化から読み取るという、ユニークなナビゲー

ザイン案を提案した（図 5）。また、フォルダ同士をドラック&

ションを実現している。

ドロップすることにより新しい情報を検索するという、ユーザ
ーの直感的操作を促すナビゲーションも提案した。

メンデル遺伝博物館の展覧会用 Web サイト[23]では、物理的な空間配置をそのままサイトの情報構造に利用している。図 3にその情報構造を示す。サイトインタラクションでは、テキス
トの流れに沿って配置されたキー・ヴィジュアルを入り口に、テーマごとにまとめられたイメージギャラリーに入り、ユーザ
ーが実際の博物館での見学と同様にそれぞれ自分のペースで展
示品の間をめぐることが可能となっている。
また、筆者らは視覚情報と直感的操作の融合を目指した Web
ナビゲーションに関する研究を行っている[24,25]。

図 5. 情報検索サイトにおける 3 次元空間 Web サイトナビ
ゲーション。

レイアウト指向の Web サイトナビゲーションが、ユーザビリ
ティを重視したものとなるために、アピアランスという観点からのデザインにおいては、オリジナリティを発揮するのが難し
い傾向にあるのに対し、実世界指向のデザインコンセプトは、
人間の認知に関わる様々な要素をデザインに取り込むことが可能であるため、多種多様な表現方法が可能となり、今後様々な分野でも表現されていくデザインコンセプトであろう。事実、地域コミュニティーの情報交換の場におけるコミュニティウェ
アのデザインや、プロダクト製品におけるデザインまで、実世図4. 絵画技法や移動感を利用したWeb サイトナビゲーシ

界指向のデザインコンセプトが見受けられるようになってきてョン。

いる[26]。
しかしながら、Web サイトナビゲーションにおける実世界指文献[24]における研究では、Web サイト内において自分がど向のデザインコンセプトにおいては、様々な表現手法が試みらこに位置しているのか、およびリンクをどのように移動したのれるがゆえに、Web サイトをブラウジングする際に特殊なプラ

かなどの感覚を、絵画において用いられている遠近法や情報デグインソフトを必要とすることがあることや、3 次元空間表現

ザインの分野において用いられている表現方法を利用し、ユーが多用され、その結果一見様々な情報を全体的に俯瞰できるよ

ザーに提供することができるサイトデザイン案を提案した（図うな錯覚に陥るが、ディスプレイという限られた 2 次元平面に

4 参照）。このサイトデザイン案は、ユーザーが日常生活の中でおいては必ず死角となる部分が存在し、情報の一覧性という面感じているであろう感覚を、絵画という静止したメディアの中では 2 次元表現には劣ることなどの問題点が挙げられる。
特に、で確立されてきた表現手法を利用することにより、Web サイト

視覚的な実世界の特徴を表現しようとする場合、視覚的ハンデナビゲーションで提供しようと試みたものである。ここでいう

ィキャップを持つユーザーへの配慮や、視覚という知覚そのも日常生活の中の感覚とは例えば、建物の中の部屋を移動するとのでも、ユーザー一人ひとりによって違うということ[4]を理解

きや外を歩く場合などに、瞬時にして目の前の景色が切り替わしておく必要があるなど、幅広い知識が要求されることは言う

ることはほとんどなく、絵画における空気遠近法と呼ばれるよまでもない。

うな遠近感、および徐々に目の前の景色が変化していく移動感

5

芸術科学会論文誌 Vol.4 No.1 pp.1－12

3.3 ユーザーのメンタルモデルを利用した Web ナビゲーションデザイン

いるグループウェアのコンテンツ名をカードに書き込んでもら

先にも述べたが、近年のコンピュータ及びネットワーク技術

順で行った。また、カード自体は、ユーザー自身が用紙を自由の目覚しい進歩と普及によって、インターネットは大容量のデな大きさに切って作成するものとし、これによってユーザーがータを共有する事が可能となり、その結果としてインターネッ

特定のコンテンツに対して他のコンテンツと比較してどれくらト上で公開されている Web サイトにも変化が見られるようにいの割合で認識しているのかということ，すなわちユーザーのなった。

メンタルモデルを把握できるようになった点において，従来か

い、書き込んだものを特定の用紙の上に配置していくという手ら行われているカードソートとは異なっている（図 6）。

Web ページはこれまで、情報を発信する役割と、その発信された情報に興味のあるユーザーらがアクセスすることによって漠然と形成されるコミュニティ形成ウェア、いわゆるコミュニティウ
ェアとしての役割があった。さらに最近では、特定のユーザーのみ
がアクセスし、共通の目的に向かってコラボレーションを行うためのプラットフォームとして、いわゆるグループウェアとしてWeb サ
イトを用いる機会が増えてきた。
グループウェアを「蓄積・非同期型」と「リアルタイム型」の 2 種類に分類するとしたら、Web サイトは「蓄積・非同期型」に属すると考えられる。またグループウェアを「同室型」と「遠図 6. カードソートの例。

隔型」の 2 種類に分類するとしたら、Web サイトは「遠隔型」に属すると考えられる[28]。
「蓄積・非同期型」「遠隔型」のグ

メンタルモデルとは認知工学や感性工学などの分野で用いら

ループウェアにおいては、大量に蓄積された情報をスムーズにれるもので、実際の機器やインタフェースの振る舞いをもとに取り出すことができるナビゲーションと、遠隔地にいる共同作

ユーザーが心的に作り上げる動作に関するモデルのことである。

業者の状態などに対するアウェアネス支援が、欠かすことのでユーザーが機器やインタフェースの振る舞いをもとに作り上げきない重要なグループワーク支援のための要素となる。

たモデルであるので、メンタルモデルに合致した機器・インタ

アウェアネス支援とは、対面環境におけるコミュニケーショ

フェースを構築することはユーザビリティ向上に大きく貢献す

ンでは当たり前の存在感、実在感や臨場感というものが、グルる。

ープウェア環境では欠落してしまうために、
それらの感覚の「ア

カードソートにおける、上下左右・前面背面の重なり具合、

ウェアネス（気付き）」を補完しようというものである[27]。アおよび各コンテンツの大きさから判明した、グループウェアにウェアネス支援研究は Dourish らの「誰が誰と話し、誰が話しおけるユーザーのメンタルモデルを利用した新しい Web グル

手や聞き手の周辺にいるのか、彼らはどのような行為をしていープウェアのインタフェースデザイン案を図 7 に示す。

るのか」といった日常の同期・対面作業では当たり前の情報が、図 7 の新しいデザイン案では、ユーザーのメンタルモデルか

グループウェア環境では欠けているという認識から出発した。

らコンテンツ階層、および操作フローを決定し、コンテンツ階

まず存在感や実在感のアウェアネスを伝達するグループウェア

層を 3 次元空間における立体として視覚化させることによって、環境の構築研究が起こり、現在では対面環境以上の臨場感のア

ユーザーのサイト内における位置アウェアネス支援を行ってい

ウェアネスを伝達するグループウェア環境を構築したいというる。さらに、各ユーザーの状態をアイコン表示させることによ研究開発が盛んに行われている。

って他のユーザーへのアウェアネス支援を行い、グループワー

このような中で筆者らの研究例[28]では、カードソートといクの活性化を行うことを意図してデザインした。

う手法を利用することによってユーザーのメンタルモデルを明

具体的には、左上にコンテンツ表示を 2 種類配置した。タグらかにした上で、Web グループウェアにおけるサイト構成を決で表示されている 6 つのコンテンツ（TOP， GROUP，

定するという手法を提案している。本研究によって、ユーザー

MEMORY， MAIL， SEARCH， LOG OFF）をそのまま下にのメンタルモデルを利用することにより、サイト内の位置アウ

立体表示させた。この立体化させたものは、カードソートからェアネスを支援することができることが明らかになった。以下得たユーザーのメンタルモデルをもとに作成したものである。

にこの研究例を紹介する。

例えば、図 7(a)に示すように GROUP にある複数のどのグルー

本研究において、ユーザーのメンタルモデルを明らかにする

プに現在参加しているのかを視覚的に、かつ直感的に把握させために用いたカードソートと呼ばれる手法は、従来から新しいるために立体化したものからフィールドを展開させ、コンテン

ラベリングシステムを作成する際に利用されていた手法で、ユーザーがどのように情報を知るのかを把握するのが目的である。
従来のカードソートでは、被験者に異なる内容の書かれたカー

ツ内の項目を選択していくと、フィールド内でエリアが表示されるようになっている。
また、各コンテンツにおいても、人型アイコン（図 7(a)参照）

ドの並べ替えやグループ化を行ってもらい、その結果からコンやファイル（図 7(b)参照）などのメタファを利用したアイコン

テンツとラベルの関連性を評価するという手順をとるが、本研で機能内容を表示することで、ユーザーが直感的に認識しやす究においては、既存のグループウェアのユーザーに、使用して6

芸術科学会論文誌 Vol.4 No.1 pp.1－12
ザインと同様に、ユーザーのメンタルモデルに則したデザイン

いようにデザインを行った。

を構築することが有効であることが示唆されている。なぜならば、ユーザーは新しいインタフェースに出会うと少なからずス
トレスを感じるものである。しかし、インタフェースデザインにおいてユーザーのメンタルモデルとの整合性がとれている場
合、インタフェースの操作に慣れるのに時間を必要とせず、ユーザビリティの向上に役立つと考えられる。すなわち、本研究のようなグループウェアとしての Web サイトに限らず、既に存在する Web サイト全般においても、サイトの再構築やリデザインを行う場合などにユーザーのメンタルモデルを利用することが有効な手段になることが予想される。

3.4 Web ナビゲーションのための情報デザインの今後の展望(a)以上、これまでに Web ナビゲーション技術における情報デザ
インを「レイアウト指向」、「実世界指向」、および「ユーザーのメンタルモデルを利用」の 3 つに分類し、それぞれに関して解説を行った。もちろん、ここでの分類方法、および取り上げた研究・実践例などは筆者が選択したものであって読者によっては異論があるかもしれない。それは、Web ナビゲーションのデザインに限らず、様々な人工物の「形」においては、ただひとつの最適解というものは存在せず、多様な解、しかも時代と共に変化し続ける解があり、それをつくり続けるのがデザイン活動であるがゆえに、それを顧みる解釈の仕方にも多様な解が存在して当然である。それが例えバーチャル空間における Web サ
イトのようなデザインであっても同様のことが言えるだろう。
Web サイトナビゲーションにおける情報デザインは今後，時代と共に変化し続ける多様な解を導くために、先に述べた「レ(b)イアウト指向」、「実世界指向」、および「メンタルモデルの利用」
がケース・バイ･ケースで融合されながら利用されていくだろう。

図 7. Web グループウェアにおける新しいデザイン案例。

また、ユーザー個々のニーズに対して Web サイトナビゲーショ
本研究では、新しくデザインされたグループウェアを用いてンをカスタマイズしていくようなシステム、およびデザイン手

一定のタスクを課した脳波測定実験を行った。通常、Web サイ法の構築が求められることが予想される。

トのインタフェースに限らず、様々なインタフェースでのユー
ザビリティチェックでは、ユーザーにアンケートをとる定性的

4. Web ナビゲーション技術と情報視覚化

な評価が行われることがほとんどである。しかしながら、定性的な評価では、実際にユーザーがインタフェースの操作性に関本章では Web サイトをナビゲートするための情報視覚化技

して評価しているとは必ずしも言い切れず、客観的な数値とし術を、その用途や表現スタイルから数種類に分類して紹介する。

て現れる脳波実験のような定量的な評価が望まれるようになっます、Web サイトの全体像を見せることでユーザーをナビゲーてきている。本研究では、新デザイン案においてアンケートにトするための、木構造視覚化、リンク視覚化、実空間指向視覚

よる定性的な評価と脳波実験による定量的な評価を併用した。

化、の各手法を紹介する。続いてユーザー自身のアクセス履歴

ここでは評価の詳細を解説することは割愛するが、定性的な評をもって、ユーザーが反復的にアクセスしたい Web ページへの価と定量的な評価を併用した点において、本研究は新規性、お誘導を図る、アクセス履歴視覚化手法を紹介する。続いて、ユ

よび信頼性が高いものとなっていると言える。

ーザーよりも Web サイトの設計者、管理者、分析者などを対象

本研究において行った脳波実験では、新しい Web グループウとした Web サイト視覚化手法について論じる。さらに、これら

ェアデザインでの一定タスクにおけるインタフェース操作におの紹介例を通して、情報視覚化技術の最近の動向について論じ

いて、リラックス値が増加しストレスを軽減できることが示さる。

れた。
このことから、バーチャル空間である Web サイトのナビゲー

4.1 Web サイトの木構造の視覚化

ションデザインにおいても、実世界の機器やインタフェースデ

Web サイトの開発者は、ユーザーの Web ページの閲覧順を想7

芸術科学会論文誌 Vol.4 No.1 pp.1－12
定しながら Web サイトを開発することが多い。このような Web

必ずしも、Web ページ間のリンクは 4.1 節で紹介した木構造でサイトにおいては、開発者の意図した順序にしたがって Web ペ

表現できるとは限らない。より一般的に考えると、Web ページ

ージを閲覧してもらえるように、Web サイトを誘導する情報を間のリンク構造は一種のグラフ構造であると考えられるので、提供することが重要である。これを目的とするナビゲーション

グラフ構造の視覚化手法を適用することで、Web ページ間のリ手段として Web サイトをトップページから順にアクセスするンク関係を視覚化することができる。このような考え方を用い道順を示すことがあげられる。あるいは、Web サイトの全体的て Web サイトの構造を表現している情報視覚化手法も、すでにな構成図を先に見せておいて、その中からユーザーにアクセス多く報告されている。

したいページを選択させるというアプローチも考えられる。ど一般的に Web サイトの研究においては、リンク数の多い Web

ちらのアプローチにしても、Web サイトの構成や構造を視覚的ページが重要なページである[36] といわれることが多い。著名にユーザーに提示することが重要である。このとき一般的に、な Web 検索エンジン[11]においても、リンク数をもって Web ペ

Web サイトを視覚的に提示する構成図をサイトマップと称するージの重要度を評価している。よって Web サイトのリンク構造

ことが多い。

を視覚化することは、
Web サイト中の重要な部分を理解させる、

サイトマップを画面表示するという形で Web サイトのナビゲという目的において一定の効果があると考えられる。

ーション技術を商用化している企業には、
例えば Inxight 社 [29]グラフ構造の視覚化技術を Web ページ間のリンク構造の視や Dynamic Diagrams 社 [30]などがある。このような商用サイト

覚化に適用した一例として、力学モデルを用いたグラフ構造のマップの多くは、Web サイトにて公開されている Web ページ群

自動画面配置手法を用いた手法が報告されている [37]。一方、の構成を、木構造で表現している。このとき Web ページ群を木自動配置ではなく対話的操作によってグラフ構造を理解させる構造で表現するためには、Web ページの URL のディレクトリ

視覚化手法も多く報告されている。塩澤らは、あらかじめ平面

階層を参照するか、あるいはトップページからの最短経路を構上に配置されたノードを持ち上げる操作によって、特定のウェ成するか、のどちらかの考え方を用いることが多い。

ブページのリンク関係を対話的に視覚化する手法を提案していこれらの商用化技術のベースとなっている技術は、木構造のる [38]。この手法は、Web ページを表す小球体を持ち上げると、

情報視覚化技術である。Inxight 社の技術は、Hyperbolic Tree [31]その小球体に連結された他の小球体が糸を引くように持ち上げという手法を用いて、トップページを根にした Web サイトの階られる様子から、「納豆ビュー」と名づけられており、その名前

層構造を表現している。この技術は、ユーザーの対話操作に連の面白さもあって新聞等にも多数紹介された。

動した局所ズームによる詳細表示を実現しており、まるでサイトマップの上で虫眼鏡を動かしているような感覚で詳細表示を操作できる点が面白い。Dynamic Diagrams 社の技術は、MAPA[32] という手法を用いて、Web ページを階層構造にしたがって縦横に並べる表現を用いて、ユーザーの対話操作にしたがって上位階層から下位階層へ段階的に移動できる操作機能を提供している。この手法は、まるで図書館の本棚のように整然と Web
サイトを表現しており、スマートな印象を与えている。3.2 節にて図 2 に示したメンデル遺伝博物館の Web サイトも、これに類似した手法で表現されている。
木構造や階層構造を表現する情報視覚化手法は、Web サイトのナビゲーションに限らず、非常に多くの目的を意識して、非常に多くの手法が報告されている [31,32,33,34,35]。この背景として、木構造や階層構造で表現される情報が、Web サイトに限らず日常生活に広く存在するから、という理由があげられる。
例えば会社組織には部、課、係という階層構造があり、大学組

図 8. Web サイトのリンク構造の視覚化例。
（文献[39]より

織には学部、学科、研究室という階層構造があり、自治体には引用。
）

都道府県、市町村、区、町会、という階層構造がある。このよ
うに、日常生活に多く存在する情報構造であるがゆえに、情報

このようにして、過去にいくつかのリンク構造視覚化手法が視覚化のニーズが高いということが、他の手法に比べて実用化報告されているが、残念ながら実用化に到達している例は少なの進んでいる一因であると考えられる。

い。その理由として以下の点が考えられる。まず Web ページ間のリンク構造は極めて非均一な密度を有する傾向にあり、情報

4.2 Web サイトのリンク構造の視覚化

視覚化の題材として難易度が高いことがあげられる。もう一つ

Web ページ間には多数のリンクが存在する。これを効果的にの理由として、グラフ視覚化手法の多くは 3 次元グラフィック

提示できれば、ユーザーがどのような手順で Web サイトをアクス技術に頼っているが、3 次元グラフィックス向けのスキルやセスすればいいかというナビゲーションが可能になる。しかし設備を必須とする技術は一般ユーザーには敷居が高い、という8

芸術科学会論文誌 Vol.4 No.1 pp.1－12
ことがあげられる。この件はリンク構造視覚化に限らず、情報やサムネイルとして表現し、それをアクセス順に線で結んでグ

視覚化技術全般に観察できる傾向である。このことから情報視ラフ表示する手法 [42,43,44] が多く報告されている。これらの覚化においては、3 次元グラフィックスよりも 2 次元グラフィ

手法は、Web ブラウザの「進む」「戻る」ボタンだけではカバックスをベースにした手法のほうが普及しやすい、という傾向

ーしきれないユーザー個人の Web アクセス履歴を適切に網羅があることは否めない。この傾向は 3.2 節にも論じたとおり、する手法であると考えられる。
これらの手法は、ユーザー自身の利用履歴をもって、情報視

情報視覚化のみならず、情報デザインの分野においても同様に見られる。

覚化によって提示する情報そのものをカスタマイズする手法、グラフ構造の視覚化技術は、一般的に 3 次元的な手法よりも 2という視点から考えると興味深い。同様な視点からの技術は、次元的な手法のほうが、難易度が高いと言われている。土井ら

Web ナビゲーション技術以外の分野においても適用可能であるは、Web サイトのリンク構造に 2 次元グラフ視覚化手法を適用と考えられる。

した事例を報告している[39]。図 8 にその表示例を紹介する。

4.5 Web サイトのアクセス統計の視覚化手法
4.3 実空間指向の Web サイトナビゲーションのための視覚化手法

イトの情報視覚化手法を紹介してきた。これとは別に、Web サ

3.2 章にて実空間指向の情報デザイン技術を紹介したが、同様イトの設計者、管理者、分析者などを対象とした、専門業務目

な研究は情報視覚化の研究としても議論が進んでいる。仮想空的の Web サイトナビゲーションとして情報視覚化手法を用い

間に Web ページを配置する視覚化手法の例として、仮想図書館ることが考えられる。このような専門業務においては、ユーザや仮想庭園にWebページを配置する手法[40,41]が報告されていーフレンドリーという要素はあまり重要ではない。むしろ親しる。この技術は、どのようなデザインが人間の感性に訴えるか

みやすさを求めて情報をデフォルメしてしまうと、それが不正という情報デザインとしての議論と、どのようなユーザーイン

確な情報として管理者や分析者に解釈される可能性がある。そタフェース技術がナビゲーションを支援できるかという情報視れゆえに、このような専門業務目的の情報視覚化では、むしろ覚化としての議論の、両面にわたる横断的な研究分野であると

棒グラフ・折れ線グラフ・帯グラフといった無味乾燥な情報提いえる。

示手法のほうが有効である場合が多い。

4.1 章～4.4 章では主に、個人ユーザーを対象として、Web サ

この技術も 4.2 節で紹介した技術と同様に、
3 次元グラフィッ

Web サイトの設計者、管理者、分析者などを対象とした、専クス技術やユーザーインタフェース技術を多用することから、門業務目的の情報視覚化では、Web ページそのものを視覚化す

情報視覚化技術としての実用にはまだギャップがある。
しかし、るというより、そのアクセス統計やネットワーク負荷などの情コンピュータに精通していない一般ユーザーの興味を引くには、報が重要である。Pitkow ら[45] や Chi ら[46] は、4.2 章で紹介

非常に魅力的なアプローチであることには間違いない。特に昨したグラフ視覚化手法を適用して Web サイトを表現し、その上今では Web の普及に伴うデジタルデバイド対策やアクセシビにアクセス数の集計結果を重ねた視覚化手法を報告している。

リティ対策が話題となっており、その解決手段としての有効性

Hao ら[47] は単純な球体の集合で、Web サイトにアクセスするが期待される。それに例えば、今後もしファミコンのように、3ユーザーの行動とウェブページの相関性を分析するための抽象次元グラフィックス技術やユーザーインタフェース技術が極度表現手法を報告している。Axelsson [48] は、Parallel Coordinateに発達した機器を用いた Web へのアクセスが普及すれば、現時という折れ線グラフを用いて、Web サーバーのアクセスログに点の問題点は一気に解決することも予想される。

記録された属性の相関性を視覚化する手法を報告している。このように、専門業務目的の情報視覚化では、親しみやすさを求

4.4 個人の Web アクセス履歴の視覚化手法

めるよりも、無味乾燥な表現手段を用いる事例が多い。これはWeb サイトの専門業務のための情報視覚化に限らず、情報視覚

4.1 章～4.3 章では、Web サイトの構成を視覚的に紹介するナ化全般に該当する傾向であるといえる。

ビゲーション技術を紹介してきたが、これらの技術は主に、Web

近年の代表的な事例として、山口らの手法 [49,50] を図 9 に

サイト設計者の意図とおりにユーザーを誘導する意義をもっている。しかし多くのユーザーにとって、Web サイトのトップペ紹介する。この事例では、数千個の Web ページを保有する大規ージから幅広く枝分かれする Web ページ群を全て閲覧すると

模な Web サイトに対して、4.1 章で紹介した階層構造の情報視いうことは少ない。むしろユーザーごとに固有の Web ページを覚化手法 [35] を用いてサイトマップを表現している。さらに、繰り返し閲覧する、という用途のほうが多いように思われる。

その Web サイトのアクセス統計を表現するために、サイトマッ

このような用途から考えると、必ずしも Web サイト設計者が提プを用いて数千本の棒グラフをたてる、という単純なアイディ

供するナビゲーション技術が最善のナビゲーション技術とは限アながらも難易度の高い視覚化を実現している。このような無らない。むしろユーザー自身によるアクセス履歴をナビゲーシ

機的な表現により、数千ページを保有する大規模な Web サイト

ョンとして用いることが有用である。そこで、ユーザー個人ににおいて、個々のページにわたるまでアクセス傾向を理解する、

よる Web のアクセス履歴を表現する情報視覚化手法が多く報という高性能な Web サイト分析を実現できる。

告されている。
代表例として、個人がアクセスした Web ページ群をアイコン
9

芸術科学会論文誌 Vol.4 No.1 pp.1－12
ゲーションにおいても、デザイナーの幅広い知識、共同作業を行う技術者などとのコミュニケーション能力などは必要不可欠となっている。
Web ナビゲーション技術に用いられている情報視覚化手法の特色を以下に示す。これらの特色はどちらかといえば、Web ナ
ビゲーションに限らず、情報視覚化全般にわたる最近の動向であると言うことができる。
•

Web ナビゲーション技術の分野では、Web サイトの全体像を木構造で表現する手法の実用化が進んでいる。同様な傾向として、Web ナビゲーション技術以外の情報視覚化についても、木構造を表現する手法の実用化が進んでいる。この一因として、木構造や階層構造が、日常生活や日常業務に非常に多く見られるデータ構造であるから、という理由が考えられる。

図 9 Web サイトのアクセス傾向の視覚化例。
（文献[50]

•

より引用。
）

Web ナビゲーション技術の分野では、3 次元 CG 技術を駆使した情報視覚化手法も多く発表されているが、実用化の観点ではあまり進んでいない。この傾向も同様に、Web
ナビゲーション技術以外の情報視覚化においても見られ

5. むすびる。この一因として、情報視覚化のユーザーは 3 次元 CGのスキルや設備を持っていない事例が多く、むしろ 2 次

本論文では、Web ナビゲーション技術に用いられている情報
デザインおよび情報視覚化の各手法を紹介した。

元 CG 技術を用いた情報視覚化技術のほうが歓迎される

Web ナビゲーション技術に用いられている情報デザイン手法

傾向にある、ということを実証している。
•の特色を以下に示す。
•

デザイナー、すなわち人間が主導となって情報を表現す

履歴を活用する手法が多く発表されている。これはユー

る情報デザインにおいて、Web ナビゲーションはレイア

ザー自身の利用状況をもって情報視覚化そのものをカスウト指向によるユーザビリティ向上を目指したデザイン

タマイズする手法の一つ、という視点から考えると興味コンセプトと、様々な人間の認知、またはメタファ要素深い。同様な視点からの情報視覚化手法は、Web ナビゲを利用した実世界指向型のデザインコンセプト、およびーション技術以外の分野においても適用可能であると考それらを融合した形のユーザーメンタルモデルを利用し

えられる。
•

たデザインコンセプトがある。
•••

情報視覚化はユーザーフレンドリーな技術としての側面

レイアウト指向の Web サイトナビゲーションでは、ユーが強く見られがちだが、専門業務においてユーザーフレ

ザビリティに配慮した 2 次元的なレイアウト展開となる

ンドリーな要素は必ずしも重要ではない。例えば Web サ傾向が強い。そのため、アピアランスの観点からのデザ

イトの管理者や分析者などのような専門家向けのナビゲ

インオリジナリティは発揮しにくい傾向にある。

ーション技術に代表されるように、むしろユーザーフレ

実世界指向の Web サイトナビゲーションでは、様々な表

ンドリーな要素を抑えた、機械的な視覚表現が歓迎され現手法が試みられ、デザインオリジナリティも高くなる•

Web ナビゲーション技術において、ユーザーのアクセス

る実用化事例もある。

傾向にあるが、その反面、特殊なブラウジングプラグイ

情報デザインと情報視覚化は、それぞれ全く異なる専門性か

ンソフトを必要とする場合があることや、ユーザビリテ

ら出発した研究分野であるが、最近では両者の融合の兆しも見ィという観点から考えた場合にはユーザーに対する敷居えている。例えば 3.2 節および 4.3 節に紹介した実空間指向の情も高くなる傾向がある。

報表現技術は、情報デザインのもつ感性的な要素と、情報視覚

認知工学や感性工学で用いられるユーザーのメンタルモ化のもつ工学的な要素の、両者を利用した技術であるといえる。

デルにもとづいたデザイン手法を提案した研究例がある。

また 3.3 節で紹介したメンタルモデルを用いた情報デザイン技

これは、カードソートという手法を用いて、ユーザー自術も、グループウェアとしての要素を最大限に活かすための展

身が気づいていない可能性のある概念モデルを表象化さ望として、蓄積された情報を自動的に提示する情報視覚化技術

せデザインに利用するという点において、非常に興味深の併用が有効に働くことが予想される。

い。しかしながら、Web サイトナビゲーションデザイン

このように、情報デザインおよび情報視覚化の今後の展望とを実施するに当たり、非常の多くの事前調査と入念な分して、両者の融合という大きな目標を掲げることができると考析を必要とするなど、デザイン開発に時間を要する点にえられる。そしてその達成のためには、デザイナーやアーティ

おいて問題があることは否めない。

ストによる感性的な議論と、コンピュータ開発者による技術的いずれのデザインコンセプトにもとづく Web サイトナビな議論の、融合の場が必要不可欠であると考えられる。

10

芸術科学会論文誌 Vol.4 No.1 pp.1－12
On-line Services, Information Design Source Book, pp.60-61, 2003.

参考文献[22] http://www.newsmaps.com/index_new.php[1] Wildbur P., Burke M., 猪俣監修, 図説インフォメーショング[23] Kahn+Associates, France, Mendel Museum of Genetics:

ラフィックス-情報をデザインするための法則と事例, エムデ

Designing a Web Extension, Information Design Source Book,ィエヌコーポレーション, ISBN4-8443-5554-6, 2000.

pp.238-241, 2003.

[2]情報デザインアソシエイツ編，情報デザイン-分かりやすさの[24] Furuya S, Kijima. A, Okazaki A, Kikuchi T, Kudo Y, Experience

設計-，グラフィックス社，ISBN4-7661-1290-3，2003

Design & Experience Visualization, 6th Asian Design International[3] 渡辺保史，情報デザイン入門-インターネット時代の表現術，

Conference Who’s Who in Design, pp.8-9, 2003.

平凡社，ISBN4-5828-5096-0，2001[25] 菊池，岡崎，感性と情報の融合を目指したデザイン学研究，[4] Robert Jacobson, Information Design, Massachusetts Institute of

平成 16 年度日本デザイン学会第 51 回研究発表大会学生作品プTechnology, ISBN4-501-53660-8，1999.

ロポジション，pp.14-15，2004.

[5] 安西，浜田，小澤，中谷，岡田，黒須，情報の創出とデザ[26] 菊池，工藤，岡崎，木嶋，古屋，デザイン領域の新しい広イン，岩波講座マルチメディア情報学 9，ISBN4-00-010969-3，

がりとしての Experience Design，
芸術科学会論文誌 Vol.3，
No.1，

2000.

pp.35-44，2004[6] Card S. K., Mackinlay J. D., Shneiderman B., Reading in[27]國藤，加藤，門脇，敷田編著，知的グループウェアによる

Information Visualization: Using Vision to Think, Morgan Kaufmann,

ナレッジマネジメント，日科技連出版社，ISBN4-8171-6135-3，

ISBN1-55860-533-9, 1998.

2001[7] Chen C., Information Visualization and Visual Environments,[28] 望月，菊池，岡崎，Web グループウェアにおける視覚情報

Springer, ISBN1-85233-136-4, 1999.

とアウェアネス支援に関する研究，2003 画像電子学会第 31 回

[8] Ware C., Information Visualization: Perception for Design, Morgan

年次大会，pp53-54, 2003.

Kaufmann, ISBN1-55860-511-8, 1999.

[29] http://www.inxight.com/[9] 小池, ビジュアリゼーション, bit 別冊ビジュアルインタフェ[30] http://www.dynamicdiagrams.com/

ース –ポスト GUI を目指して-, 第 2.1 章, pp.24-44, 共立出版,[31] Lamping J., Rao R., The Hyperbolic Browser: A Focus+context

1996. (http://www.vogue.is.uec.ac.jp/~koike/bit/bit.html にも掲載さTechnique for Visualizing Large Hierarchies, Journal of Visual

れている)

Languages and Computing, Vol. 7, No. 1, pp. 33-55, 1996.

[10] Moore’s Law,[32] Durand D., et al., MAPA: A System for Inducing and Visualizing

http://www.intel.com/research/silicon/mooreslaw.htm

Hierarchy in Web sites, Proceedings of the International Conference on[11] Google Inc. http://www.google.com/

HyperText '98, pp. 66-76, 1998.

[12] Kahn P., Lenk K., 木村訳, Web サイトマッピングプロフェッ[33] Koike H., Fractal Views: A Fractal-Based Method for Controlling

ショナルガイド～サイト設計の考え方、作り方, IDG ジャパン,

Information Display, ACM Transaction on Information Systems, Vol.

ISBN4-87280-432-5, 2001.

13, No. 3, pp. 305-323, 1995.

[13] Kinross R., Conversation with Richard Hollis on graphic design[34] Rekimoto J. ,Green M., The Information Cube: Using

history, Journal of Design History 5 (1), pp.73-90, 1992.

Transparency in 3D Information Visualization, Proceedings of the[14] Sless D., What is information design?, Designing Information for

Third Annual Workshop on Information Technologies & Systems, pp.

People, pp.1-16, Canberra: Communication Research Press., 1994.

125-132, 1993.

[15] 宮田, 伊藤, コミュニケーションツールとしての CG, 芸術[35] Itoh T., Yamaguchi Y., Ikehata Y., and Kajinaga Y., Hierarchical

科学会論文誌, Vol. 2, No. 2, pp. 74-82, 2003.

Data Visualization Using a Fast Rectangle-Packing Algorithm, IEEE

[16] http://www.smartmoney.com/

Transactions on Visualization and Computer Graphics, Vol. 10, No. 3,[17] Johnson B., Shneiderman B., Tree-Maps: A Space Fillingpp. 302-313, 2004.

Approach to the Visualization of Hierarchical Information Space,[36] Broder A., et al., Graph Structure in the Web, Proceedings of theProceedings of IEEE Visualization '91, pp. 275-282, 1991.

9th international World Wide Web conference, pp. 309-320, 2000.

[18] 矢野りん，Web レイアウト見本帳-Web Layout Style Book-，[37] Hendley R. J. , Drew N. S., Wood A., Beale R., Narcissus:

エムディエヌコーポレーション，ISBN4-8443-5630-5，2002

Visualizing Information, In Proceedings of IEEE Information[19] Miho MATSUMOTO，Shigeki YOKOI，Takami YASUDA，A

Visualization '95, pp. 90-96, 1995.

Research of Information Architecture and Design Methods for[38] 塩澤, 西山, 松下, 「納豆ビュー」の対話的な情報視覚化にAcademic Society’s Website，芸術科学会論文誌，Vol.1，No.3，

おける位置付け, 情報処理学会論文誌, Vol. 38, No. 11, pp.

pp125-131，2002

2331-2342, 1997.

[20] IconMedialab lberia, Spain, The Camper E-Shop: Building an[39] 土井, 伊藤, 力学モデルを用いた階層型グラフデータ画面

On-line Presence, Information Design Source Book, pp.70-75, 2003.

配置手法の改良手法とウェブサイト視覚化への応用, 芸術科学

[21]Sony Bank, Japan, MONEYKit by Sony Bank : Interface for

会論文誌, Vol. 3, No. 4, pp. 250-263, 2004.
11

芸術科学会論文誌 Vol.4 No.1 pp.1－12[40] Card S. K., Robertson G. G., and York W., The WebBook and the
Web Forager: An Information Workspace for the World-Wide Web,
Proceedings of ACM SIGCHI '96, 1996.
[41] Crossley M., Davies J., Taylor-Hendry R., and McGrath A., 3DInternet Developments, BT Technology Journal, Vol. 15, No. 2, p179,
1997.
[42] Ayers E., Stasko J., Using Graphic History in Browsing the World
Wide Web, Proceedings of 4th International World Wide Web
Conference, pp. 451-459, 1995.
[43] Frecon E., Webpath -- A Three Dimensional Web History,
Proceedings of IEEE Information Visualization '98, pp. 3-10, 1998.
[44] Bederson, B.B., Hollan, J.D., Stewart, J., Rogers, D., Vick, D.,
Ring, L.T., Grose, E., Forsythe, C., A Zooming Web Browser, Human
Factors in Web Development, Lawrence Erlbaum Association, pp.
255-266, 1998.
[45] Pitkow J., Bharat K., Webviz: a Tool for World Wide Web Access
Log Analysis, Proceedings of the 1st International Conference on theWorld Wide Web, pp. 271-277, 1994.
[46] Chi E. H., Card S. K., Sensemaking of Evolving Web Sites Using
Visualization Spreadsheet, Proceedings of the 1999 IEEE Symposiumon Information Visualization, pp. 18-25, 1999.
[47] Hao M. C., Garg P., Dayal U., Machiraju V., Cotting D.,
Visualization of Large Web Access Data Sets, Proceedings of thesymposium on Data Visualisation 2002, pp. 201-208, 2002.
[48] Axelsson S., Visualization for Intrusion Detection Hooking theWorm,' Proceedings of the 8th European Symposium on Research in
Computer Security, pp. 309-325, 2003.
[49] Yamaguchi Y., Itoh T., Ikehata Y., Kajinaga Y., Interactive Poster:Web Site Visualization Using a Hierarchical Rectangle Packing
Technique, IEEE Information Visualization Symposium, 2002.
[50] 山口, 伊藤, 池端, 梶永, 階層型データ視覚化手法「データ宝石箱」とウェブサイトの視覚化, 画像電子学会論文誌 Visul
Computing 特集号, Vol. 32, No. 4, pp. 407-417, 2003.

12