情報処理学会 インタラクション 2015
IPSJ Interaction 2015A17
2015/3/5

位置・時間を主軸においたWeb コンテンツのストーリー形式まとめシステム
有山 大地†1

安藤 大地†1

笠原 信一†1

概要：Web 上には日々様々なユーザから投稿された「記事」が蓄積されていく．不特定多数のユーザによって投稿された記事は，情報の配置に統一性がない．さらに筆者が不特定多数であることは，「記事」の増加速度を速める事にもつながっている．そうして次々と蓄積された「散在する記事」は情報量こそ多いが，利用性に欠ける．そこで Web 上に散在する「記事」にストーリー形式で効果的にアクセスできるインターフェースを考察し，それを実装したシステムを提案する．

Position and Time based Summary Systemusing Story Style for Web Contents
Daichi Ariyama†1

Daichi Ando†1

Shinichi Kasahara†1

Abstract: A “article” which is contributed by various users is accumulated on Web every day. As for articles contributed by the various user, placement of the information does not have regularity. Furthermore,
it leads to quickening increase of the number of articles that the writers are anonymous people. “Articlesto lie scattere” accumulated in this way has much information, but lacks usability. Therefore I consider theinterface that can access the articles that exist on Web in a story style eﬀectively and I suggest the system
which implemented it.

1. はじめにステム（CMS）」と呼ばれる．[2]
現 在 用 い ら れ る「Wiki」形 式 の Web サ イ ト は ，2005 年ごろから提唱された「Web2.0」と呼ばれる新し「Wikipedia」をはじめ，テキストベースが主流であり，い Web の方向性により「ユーザ参加型」という要因を持文字と少数の画像のみで構成されることが一般的である．

つ Web コンテンツの価値が注目されるようになった．そしかし，Web サイトで扱う個々の事象にはそれぞれに多数の代表たる「Wiki システム」とは，Web サイト構築やプの要素が含まれており，特に「位置」「時間」「人物」などログラミングの知識が無くても簡単に記事を追加し，編集の要素が煩雑に絡み合うようなストーリー性を持つ一連のすることを可能にするシステムである．2001 年に発足した事象――それに付随する専門的な知識も含めて――に関し「Wikipedia」[1] をはじめとする「Wiki」形式は，近年ではては，文字と画像だけでは効率的に理解することが難しいゲームの攻略サイト，特定カテゴリのデータベース，また現状がある．テキストベースで記事を構成する場合，すべは企業内におけるプロジェクトの管理，そして作品のファての要素の価値が並列になりがちであるからである．本来

ンサイトなど，多様な場面で利用されている．また「Wikiであれば，取り扱う題材ごとに「位置」「時間」「人物」なシステム」のようにユーザが記事コンテンツ作成のみに注

どの情報について適宜評価を行い，その価値に準じた表示力するために，サイト構築をソフトウェアで自動的に行うの仕方を実装すべきである．言い換えれば，情報の見せ方ようにしたものは一般に「Web コンテンツマネジメントシに道筋をつけるべきである．現状ではそれが実現している†1とは言い難い．

現在，首都大学東京システムデザイン学部
Presently with Faculty of System Design, Tokyo Metropolitan University© 2015 Information Processing Society of Japan

道筋が無いということは「記事」同士の関連性も希薄に210してしまう．つまり，「位置」「時間」「人物」などの基本的列的にそれぞれ等しい価値で配置されることになる．

なつながりで情報を紐付けるためには複数の「記事」を参

しかし，ある目的を達成するために「記事」を参照する照して，自分でもう一度整理しなおさなければならない．

場合においては，それぞれの「記事」の持つ価値は同じで「Wiki」形式に頼ることは，Web サイトの制作を「単に情はない．「記事」の価値をピラミッド構造で考えた際に，知報を一ヶ所に集める作業」にしてしまう可能性がある．つりたい事象を頂点とし，関連性が下がるごとに情報の価値まり，異なる種類の情報に対しても同一の型を使用するこは下の階層へと移行する形になる．ある階層より下に位置とで なかば無理やり 情報をまとめている現状が存在しする「記事」はそのユーザにとってほとんど必要ないものている．しかしながら，手軽に多くのユーザが情報を記事となる．その為，サイト内に存在する記事の数が多ければとして投稿できる「Wiki」形式は，情報を広く収集する・多いほど，ユーザは自分にとって価値のない情報に触れる保存するという観点からみれば非常に効率的で利便性の高機会が相対的に多くなる．ユーザが目的を達成するためにいシステムであることも確かである．

は，その「記事」が自分にとって有用かどうか，「記事」に

そこで本論文では，Web 上に散在する「Wiki」形式でアクセスするたびに自分で判断するという工程を踏まなけ作成されまとめられた「記事」達を，さらに「記事」同士ればならない．つまり，同じフォーマットで並列的に並べのつながりを意識しやすい形でまとめ直すシステムを提案られた膨大な量の「記事」から自分にとって価値のある「記する．「記事」同士の繋がりを再構築することで，相互的事」を選定する作業は，全てユーザが負担することになる．に「記事」の利用性を高め，埋もれていた情報を再評価することを目指す．なお、まとめの再構築の基準を「位置」「時間」「人物」に分かりやすく置くために，本研究で対象とする題材は「物語」とする．

2. 「Wiki」形式による物語まとめの抱える問題

2.2 「5W1H」などの情報デザインの不統一
一つの「記事」の中には大抵の場合「5W1H」が含まれる．「5W1H」，つまり「いつ，どこで，だれが，なにを，なぜ，どのように」とは，ある事柄・出来事を正しく，漏れなく伝える為に必要であるとされる要素である．
しかし，同一サイト内に存在する記事であっても，この

図 1 は国内最大手の「STAR WARS」ファンサイト「ス「5W1H」の配置や表現方法が異なるケースが多い．これ

ター・ウォーズの鉄人！」[3] 内に存在する記事の一つであは不特定多数の編集者が，見出しや本文の配置という最低る．典型的な「Wiki」形式を用いて作成されており，テキ限のテンプレートを用いて記事の作成を行っている為におストベースの平面的な構造を持つ．編集者は作品に精通しこったデザインの不統一である．汎用性の高さは，同一サている不特定多数の人々であり，手軽に記事の追加・編集イト内でデザインの不和を生んでいる．どの情報を強調し，ができることが「Wiki」形式が持つ最大の特徴である．記

どのような項目を執筆するかというデザインの問題は，そ事は数枚の画像とテキストで構成されているが，この構成の多くを編集者個人の価値観に委ねられる．

が「Wiki」形式の典型的なデザインである．この人物のプ

しかし、本来ならば「5W1H」などの情報の配置や表現ロフィールには出身地の記事や，人物が関わった事件の記方法に関しても，同一の形式が用いられるべきである．つ事がリンクされている．図 2 はリンク先の「出身地」に関まり「5W1H」の情報の配置・見せ方について，全ての「記する記事である．図 3 は人物が関わった「出来事」に関す事」に対して同一の配置順序，及び表示形式が適用されるる記事である．それぞれ独立した記事になっており，時間べきである．「5W1H」のように，明らかにそれぞれの性質的・位置的なつながりは体感しにくい．また，出身地に関が違う情報を並列的に扱う行為は，情報を整理しているとする記事には「場所」に関する視覚情報が欠けており，どは言い難い．

こにあるのかという全体像が把握しにくい．
上記の内容を踏まえて考察すると，「Wiki」形式が抱え2.3 「記事」の時間的・地理的孤立る問題は「「記事」の価値の差が存在できない」「「5W1H」

出来事には必ず時間の流れと場所の情報が付随する．しなどの情報デザインの不統一」「「記事」の時間的・地理的かし，「Wiki」形式の多数の記事をテキストベースで並列孤立」の 3 点である．

的に個別に扱うという性質上，その記事の時間的な前後のつながりや，その他の記事との関連性を俯瞰的に把握することが難しい．記事同士の時間的・地理的つながりが見え

2.1 「記事」の価値の差が存在できない

にくいということは，情報の価値を最大限に生かしきれて「Wiki」形式で作成された「記事」は，ある明確な目的いないとも言える．出来事とは，周囲の事象から個別に切を達成するために作成されたわけではなく，図鑑のようにり離して考えられるものではなく，故にその一点にだけ注事実を記録するため作成されたものである．つまり個々の目すればよいものではないからである．記事をただ並列に「記事」は――Web サイト製作者が意図しない限り――並平面的に配置することが，情報の効率的な整理を妨げてい© 2015 Information Processing Society of Japan211

図 1 「スター・ウォーズの鉄人！」[3] における人物に関する記事

図 3 「スター・ウォーズの鉄人！」[3] における出来事に関する記事

Fig. 1 Article about the person in a STAR WARS fun site.

Fig. 3 Article about the event in a STAR WARS fun site.

記事

記事

記事

画像

図 2 「スター・ウォーズの鉄人！」[3] における場所に関する記事

図 4 「Wiki」形式における記事の配置とリンクのイメージ

Fig. 2 Article about the place in a STAR WARS fun site.

Fig. 4 The image of placement and the link of the article inthe ”Wiki” form.

る．
図 4 は「Wiki」形式によるまとめサイトにおける「記事」の選定を編集者が行う形のサービスではあるが，このようの配置とリンクのイメージである．「Wiki」形式のまとめな形態のまとめサイトは特筆すべき専用のインターフェー

サイトでは基本的にひとつの「記事」がそれぞれひとつずスを持たない．結果として，その役割は Web 上で収集しつで一度完結する様式を取っている．もしひとつの「記事」た平面的な記事を平面的に並び直すことに終始する．

で足りない情報があれば，リンクをたどって別の記事を参照するかたちになる．そうして独立して存在する「記事」

4. システムが備えるべき要件の検討を無意識的に煩雑なリンクで繋ぐことが「記事」同士の時「Wiki」形式による物語のまとめが抱える問題点をふま間的・地理的繋がりを複雑化し，かえって「記事」の孤立え，「Wiki」形式のサイトが持つ記事・情報のデザインをを生んでいる．

再編集し，効果的に配置可能なシステムが満たすべき要件

3. 関連研究Web 上の「記事」をまとめるサービスとして，例えば SNSを検討した．

4.1 「記事」を効果的に結び付けるインターフェース

サイトなどに投稿された画像や発言をまとめる「togetter」

Web 上に大量に存在し，散らばっている「記事」をその[4] や「NAVER まとめ」[5]，インターネット掲示板「2 ちゃままの形で利用することは効率的ではない．しかし「記事」

んねる」[6] への投稿をまとめた「2 ちゃんねるまとめブロの配置場所やアクセス方法を考えることで，膨大な情報のグ」などはテキストベースの情報をさらにテキストベース整理とアクセシビリティの改善を図ることは可能であるでまとめるサービスが存在する．これらのサイトの役割は，と考える．膨大に存在する「記事」同士を新たなインターWeb 上に無造作に存在する情報をある目的に合わせて収フェースで結びつけることにより，相互的に「記事」の価集し，要約・整理することにある．つまり，「記事の価値」値を高める．

© 2015 Information Processing Society of Japan212

4.2 「記事の価値」の選定をユーザ任せにしない
明確な目的を設定し，コンテンツが抱える「記事」の範囲を製作者側で絞ることで，ユーザが不要な情報に触れる機会を減らす．

図上に配置された 3D モデルに関連付ける．また，3D モデルはそれぞれ事実に即してアニメーションすることで時間と位置のつながりをより実感し易くする．

3D モデルに付随する記事は，3D モデル上の適切な位置に配置する．図式としては，地図上に 3D モデルが存在

4.3 「5W1H」に関して異なった表示を用意する「位置」「時間」「人物」などの要素に関して，それぞれを異なった表示形式で区別して表示できるようなインターし，3D モデル上に記事が存在する形となる．本システム
は Web 上での動作と OS 間の互換性，3D モデルの利用と操作を考慮し Unity[7] を用いて実装した．

フェースを実装し，ユーザの効率的な情報の理解を促す．

5.2 実際の実装
4.4 インタラクティブな要素を持つ中心とする出来事は「位置」「時間」「人物」ごとに表示

個々の「記事」の持つ情報は一つだけで完結するもので形式に変化をつけたことを評価できるよう，ストーリー性はなく，位置情報や時間情報と併せて視覚的につながりがのある出来事が望ましい．例えば「関ヶ原の戦い」や「日インタラクティブな仕組みで理解できることが望ましい．

本海海戦」，「タイタニック号沈没」といったような歴史的

5. 開発システム
5.1 概要な出来事である．ここでは日本海海戦をサンプルに用い，検討してきた要素を実際に実装した．実際の画面の動作チャートとしては以下のようになる．

これらの検討を踏まえ，本研究では「5W1H」に関する順序付けを行い，「位置」「時間」「人物」などそれぞれの記（1） タイトル画面（図 5）．何についてのまとめかを一目事の持つ要素ごとに異なった表示形態を提供するインターで把握できる．ここでは「日本海海戦」を取り上げている．

フェースを考察し，「記事」同士の繋がりを視覚的に理解し左クリックで次の画面へと移行する．

やすい形に再構成する，物語に特化した「まとめシステム」を開発した．4.1 項で述べた通り，開発の要は記事にアク（2） アニメーション画面（図 6）．「日本海海戦」の記録にセスするまでの道筋を示す「インターフェース」部分であ沿って，3D モデルの軍艦がリアルタイムで動く．画面をる．複数の筆者が各々の価値観に基づいて記事を編集した

ドラッグすることで，好きな視点から鑑賞することが出来ために起こった情報の「不統一」に関わる問題を， 未整

る．3D モデル上には艦長・司令の顔画像を配置した．ま理 の記事を直接編集するのではなく，インターフェースた，画面下部には日時とイベントが表示される．3D モデ側で「位置」「時間」「人物」に基づく表示形式を提供する

ルを左クリックすると（3）へと移行する．顔画像を左クことで，インターフェース開発側から解決することを図っリックすると（4）へと移行する．イベントをクリックすた．

ると（5）へと移行する．アニメーションの再生速度の変また 4.2 項及び 4.3 項で言及したように，「記事の価値」更や，一時停止，逆再生の機能も備えている．と「5W1H」要素の区別を製作者側である程度決定するために，本システムでは具体的な一つの出来事を中心軸に据（3） 3D 鑑賞画面（図 7）．画面をドラッグすることで，好える形式をとる．つまりある出来事を中心として，それにきな視点から鑑賞することが出来る．3D モデル上には主まつわる「記事」を収集したうえで，個々の「記事」を効要な艦の部品などにマーカーが設置されている．マーカー

果的に表示するインターフェースを持つシステムである．

を左クリックすることで（6）へと移行する．また，ウィン

このように「記事」のまとめに明確なテーマを持たせる

ドウの上部には主要な乗組員の顔画像を配置した．顔画像

ことは，その「記事」に至る目的を製作者側で決定する事を左クリックすると（4）へと移行する．と同義である。その為，ユーザごとに異なる「記事の価値」について，ある程度普遍的な価値基準を見出すことが出来（4） 人物の記事（図 8）．「Wiki」形式でまとめられた記る．

事を参照できる．

また 4.4 項で述べた視覚的な理解を助ける為，テキストデータに加え，インターフェースには 3D モデルとアニ（5） イベントの記事（図 9）．「Wiki」形式でまとめられメーションの要素を追加した．そうすることで，従来型のた記事を参照できる．

「Wiki」形式では不可能であった演出を可能にし，テキストベースの従来型「Wiki」が抱える「位置」「時間」を含（6） 部品の記事（図 10）．「Wiki」形式でまとめられた記めた要素の理解に関する問題を解決することを図った．記事を参照できる．

事同士のつながりを感覚的に理解できるよう，「記事」は地© 2015 Information Processing Society of Japan

213

図 8

図 5 タイトル画面

Fig. 5 Title screen.

図 6

図 9 イベントの記事

アニメーション画面

Fig. 6 Animation screen.

図 73D 鑑賞画面

Fig. 7 3D appreciation screen.

人物の記事

Fig. 8 Article about the person using the ”Wiki” form.

Fig. 9 Article about the event using the ”Wiki” form.

図 10

部品の記事

Fig. 10 Article about the parts using the ”Wiki” form.

介を行った．

6. おわりに「記事」の効果的なまとめとアクセス方法を考慮した本システムだが，現状では，「記事の選定」「5W1H ごとの表

本稿では Web 上に膨大に存在する「記事」について，そ示形式の変化」に関して，開発者個人が利用しやすいと考れぞれの「記事」が異なるフォーマットで散在している現える価値観に基づいたデザインとなっている．「記事」を状を調査し，インターフェースのデザイン側からその価絞り込んで制限を加えることの是非や，「位置」「時間」「人値を引出し，再活用する方法について考察した．さらに，物」に関する表示形式が適切かどうかは，必ず第三者からデータの参照方法にインタラクティブなアクセス方法を示の意見を集める必要があるであろう．次の展開として，本すことで「記事」にアクセスする道筋をデザインするインシステムと，従来型のテキストベースのまとめサイトとのターフェースの形を提案し，実際に開発したシステムの紹

第三者による比較実験を行い，学習可能性や利用性につい© 2015 Information Processing Society of Japan214

てのフィードバックを集めることを計画している．
参考文献
[1]
[2]

[3]
[4]
[5]

[6]
[7]

ウィキペディア
フ リ ー 百 科 事 典 ，入 手 先⟨http://ja.wikipedia.org/wiki⟩ (2014.12.04).
大 村 幸 敬:「Wikiを 使 っ た 情 報 共
有 〜 企 業 で の 活 用 事 例 〜 」 ，入 手 先⟨http://www.intec.co.jp/company/itj/itj6/contents/10.pdf⟩(2014.12.04).
ス タ ー・ウ ォ ー ズ の 鉄 人 ！,入 手 先⟨http://www.starwars.jp/wiki/⟩ (2014.12.04).
Togetter ま と め: ツ イ ッ タ ー を ま と め よ う, 入 手 先⟨http://togetter.com/⟩ (2014.12.04).
NAVER まとめ [情報をデザインする。キュレーション
プラットフォーム], 入手先 ⟨http://matome.naver.jp/⟩(2014.12.04).
2 ち ゃ ん ね る 掲 示 板 へ よ う こ そ, 入 手 先⟨http://www.2ch.net/⟩ (2014.12.04).
Unity
GameEngine,入 手 先⟨http://japan.unity3d.com/⟩ (2014.12.04).

© 2015 Information Processing Society of Japan215