WISS2010

プレゼンとプレゼンの場をマンガ表現するインタラクティブシステム
An Interactive System that Express an Atmosphere of Presentation and the Presentation Itself
by Manga Expression

藤本 雄太

宮下 芳明∗

Summary. 本稿では，マンガ表現されたプレゼンを聴衆がチャットをしながら聴講し，そのチャット上の様子から会場の雰囲気をもマンガ表現するシステムを提案する．このシステムは，発表者が使用するプレゼンツールと聴衆が使用するチャットで構成されている．プレゼンツールは，マンガ表現に特化したインタフェースを持っており，簡単にコマ割り・集中線・描き文字・吹き出しなどを使用したマンガのような画面を作成することができる．またチャットは，マンガの見開きをみんなで指差しながら眺めているようなインタフェースになっており，プレゼン内容についてみんなでわいわいと話しながら読むというデザインになっている．プレゼンツールとチャットシステムは連動しており，チャット上での盛り上がり具合を可視化する「ざわ…」機能や，聴衆の多数意見を発表者に提示する飛び入り機能を実装している．

1

はじめに

マンガは多くの人々，とくに若い世代の人たちにとって最も身近なメディアのひとつである．絵や描き文字などを駆使して巧みに描かれるマンガは見る者を惹きつけ，ついその先を読ませてしまうくらいの魅力を持っている．例えば，ダイレクトメールに添えられたマンガやタイトルが「マンガでわかる」で始まる技術や学術の入門書，マンガで表現された社内マニュアルや営業パンフレットなどがあり，今日のマンガはもはやエンタテインメントの枠に留まらず教育やビジネスなどさまざまな場面で活用されている．
筆者らは「マンガのコマ割り表現を用いたプレゼンテーションツール」を開発してきた [1]．これは，プレゼンの内容をマンガ形式にすることで，ただ文字と図を並列させるよりも印象に残りやすい視覚的効果を与えることができ，プレゼンの画面を思わず見たくなるものにする．
本稿では，そのプレゼンツールに加え，さらにマンガの見開きをみんなで指差しながら眺めているよ
うなインタフェースのチャットを聴衆に提供する．そこでの盛り上がり具合を可視化する機能（「ざわ…」機能）と，聴衆の多数の意見が発表者のプレゼン画面に緩やかに介入する機能（飛び入り機能）も実装した．
筆者らは，このマンガ表現されたプレゼンツールおよびチャットのふたつで構成された，プレゼンとプレゼンの場をマンガ表現するインタラクティブシステムを提案する．
∗Copyright is held by the author(s).
Yuta Fujimoto and Homei Miyashita, 明治大学大学院理工学研究科新領域創造専攻ディジタルコンテンツ系

2システム概要

プレゼン時のコミュニケーションにはふたつの種類がある，ひとつは発表者と聴衆の間で行われる表の公的な会話で，これをフロントチャネルという．
もうひとつが，聴衆同士で行われる裏の個人的な会話で，これをバックチャネルという [2]．提案システ
ムは，このフロントチャネルとバックチャネルの両者を総合的にマンガ表現するものである．
フロントチャネルは，発表者から聴衆と聴衆から発表者のふたつの方向を有する．発表者から聴衆への情報配信は，マンガ表現されたプレゼン画面と発表者の発話によって実現される．発表者は，相手に伝えたい事実や想いをマンガの豊かな表現力を借りてデザインする．
聴衆から発表者への意見は，飛び入り機能によって実現される．飛び入り機能は，聴衆の多数意見をプレゼン画面に一時的に表示させるものである．その意見は，ただ文字として表示するのではなく，マンガのキャラクタが聴衆の意見を代弁するかたちで表示される．こうすることで，現実の人間が意見したという生々しさを取り払い，あくまでキャラクタがしゃべったというワンクッション置いた表現がなされ，そこにコミカルさが生まれる．
バックチャネルは，チャットを提供することで実現されるが，これもただ文字を並べるのではなく，あたかも自分たちがマンガを読み，それについて議論しているようなマンガ的インタフェースになっている．チャットは文字で会話をするものであり，マンガにおけるキャラクタ同士も文字で会話をしている．この類似点から，チャット上の会話はマンガ表現するのに適した題材である．

WISS 20103

聴衆側システム

画面に「ざわ…」という文字を重畳表示するものである（図 3）．これによって，発表者にもチャットがどれだけ盛り上がっているかを容易に把握できるようになる．

図 1. チャット画面
図 3. 「ざわ…」機能

チャット画面を図 1 に示す．画面下にあるコメン
ト欄にコメントを記入し，発言すると，画面の上に吹き出しとコメントが表示される．画面中央の見開きページの気になるところをクリックすると，図 2のように手が出てきてクリックした位置を指差した状態で，その横に吹き出しとコメントが表示される．
このチャット画面は，みんなでマンガを読みながら，その内容についておしゃべりしている様子を表している．

3.2

飛び入り機能チャットに投稿されたコメントは吹き出しに乗って画面上に現れる．その吹き出しを聴衆がクリックすると，吹き出しは次第に大きくなっていく．吹き出しがある一定回数クリックされると，そのコメントがプレゼン画面に表示される（図 4）．これによって発表者は，プレゼン画面を通して聴衆が今どんな議論をしているかを知ることができる．ここで発表者と聴衆のあいだで緩やかなインタラクションが生まれることが期待される．

図 2. コメント投稿の様子
図 4. 飛び入り機能

本システムではさらに，チャットによる議論の場を提供するだけでなく，以下のふたつの機能を設けた．

3.1「ざわ…」機能

チャット上でどれだけ議論が盛り上がっているかを可視化する機能として，「ざわ…」機能を実装した．
本機能は，チャットの書き込み量に応じてプレゼン4

発表者側システム

本ツールのプレゼンは，ページとコマで構成される．ページに自由な形状でコマを配置し，プレゼンを構成してゆく．マンガに見られるようなダイナミッAn Interactive System that Express an Atmosphere of Presentation and the Presentation Itself by Manga Expression

クなコマ割りもデザイン可能である．横書きのアメリカンコミックスタイルにも縦書きのジャパニーズコミックスタイルにも対応している．

4.1

編集モード

プレゼン内容の作成は以下の手順で行う．まず，ページを配置し，その上にコマを置いてゆく．そして，各コマのなかに文字や画像を置く．
ページの配置 コマを置く土台となるページを配置する．作成されたページはドラッグして位置を好きに変えられる．

スナップショットの作成 スナップショットとは，配置したページやコマのどの部分をプレゼン画面に表示するかを決める，カメラのようなオブジェクトである．この四角いオブジェクトは，ドラッグで移動，マウスホイールの回転で拡大・縮小ができる．この四角の枠内に収まる領域がプレゼン画面に表示される．

4.2

発表モードを実行すると最初のスナップショットで指定した領域が表示される．以降，右矢印キーを押すことで次の画面に進む．

4.3
コマの作成 ページ上にコマを作成する．ペイント
ツールで四角形を描くようにドラッグするとコマが作成される．作成されたコマは頂点をドラッグする
ことで任意の四角形に変形することができ，これらを並べてダイナミックなコマ割りを作成できる．
シーケンス表示の設定 本来，マンガは読み手が読む順序を制御する．一方でプレゼンは発表者が制御する．このギャップを埋めるために設けられた機能がコマのシーケンス表示である．最初からすべてのコマを見せるのではなく，発表者が予め決めた順番でコマを表示させていくことで，発表者に主導権を持たせ，聴衆の視点を導く（図 5）．発表者が予め表示の順番を設定できる．

図 5. シーケンス表示

コマの内容の作成 コマのなかを埋めていく．コマの内容は，文字と画像の 2 種類である．文字は，縦書き・横書き，白字・黒字，フォント（コミック・ゴ
シック・明朝の 3 種類），コマの外側・内側を選べる．画像は，モノクロ・カラー，コマの外側・内側を選べる．読み込んだ画像やテキストは，ドラッグによる移動とマウスホイールによるサイズ変更，重なり順の変更，回転，削除ができる．

発表モード

作例

〜コマ割りの効用〜

コマとは，絵を枠線で囲んだものをいい，絵・言葉に並ぶマンガを構成する三大要素のひとつである．
コマ割りとは，コマをどのような形状でどのように配置するかというレイアウトをいう．コマは一見すると枠線であるに過ぎないが，これを順序立てて並べることで物語における時間の流れを作り出す．コ
マ割りを行うことで，今まで平面という二次元の空間的広がりしか持たなかったものが時間軸という新たな広がりを獲得する．つまりコマ割りは，読者の視線を時間的・空間的に秩序立てて運ぶ支えなのである．マンガ評論家の夏目房之介は，コマ割りには読者に対して働くいくつかの機能があると述べている [3]．
「読む順序を与える時間分節の機能」，「読者の心理を誘導する圧縮と開放の機能」である．前者は先に述べた通り，平面に時間軸を与える機能である．後者は読者の興味・集中を誘導する機能である．
夏目は誘導にはふたつの要素があると述べ，それらを「圧縮」と「開放」と呼んでいる．圧縮とは，読者の心理を圧迫し，緊張感を与えることをいう．この心理的圧迫により，次の展開がどうなるのかと興味を引きつける．そして，次の展開で大きなインパクトのあるシーンを構築することで，今まで圧縮されていた読者の心理を一気に「開放」する．コマの大きさ，形，またその変化によって圧縮や開放という落差が生まれ，それがマンガの面白さをつくる演出効果になっているのである．マンガのコマ割りをプレゼンテーションにも導入すれば，圧縮と開放というメリハリがつけられ，重要なコマとそうでないコマ（マンガでは「捨てゴマ」と呼ばれている）を聴衆が判別しやすくなり，発話者の主張がより明確なものになると考える．
この章では発表者側のプレゼンツールでどのようなコマ割りのデザインが行えるかを作例を交えて示す．
図 6 は，大きな割合を占めている項目のコマを大きくして強調し，そうでない項目は小さいコマにすることで，その円グラフが主張する事実をしっかりと伝えること意図している．Bateman らの研究によればグラフなどのチャートは，適切な方法で装飾

WISS 2010

5.1

チャットのコメントと「ざわ…」機能

チャットにコメントが入力されると，クリックされた位置情報とともにその情報がサーバに送信される．それを受け取ったサーバは各聴衆のチャットクライアントに同様のメッセージを送信する．送信先にはプレゼンツールも含まれており，メッセージを受け取ったプレゼンツールは逐次，画面に「ざわ…」の文字を表示する．

5.2

図 6. 円グラフを用いた作例を施せば長期の記憶に残りやすいものになる [4]．この事例での主張は，アメリカと日本の割合が大半を占めているというものであり，コマ割りという装飾で読み手の記憶に残りやすくしている．

吹き出しのクリックと飛び入り機能

聴衆がチャット画面上に表示された吹き出しをクリックすると，チャットクライアントはその吹き出しの識別番号をサーバに送信する．サーバは各聴衆のチャットクライアントに同様のメッセージを送信する．クライアント側では，対応する吹き出しを大きく表示する処理を行う．サーバでは，吹き出しがクリックされた回数をカウントしており，一定数を超えたとき，プレゼンツールに，その吹き出しに対応するコメントを送信する．

5.3

プレゼン画面の配信

発表者がプレゼン中に特定のキーを押すことで各聴衆のチャットクライアントの画面に，現在のプレゼン画面が表示されるようになっている．プレゼン
ツールはプレゼン画面をキャプチャし，その画像をサーバにアップロードする．アップロードをし終えたら，サーバ経由で各聴衆のチャットクライアントに対して画面を更新するように命令を出す．

6

図 7. 提案とその反応

図 7 の作例では，主張するコマを上半分に大きく配置し，その背景に集中線を採用する．そして大きな描き文字を配置することで，読者の目に飛び込んでくるような強烈なインパクトを生じさせる．また，上半分のコマの主張に対する反応や反発的意見を下半分にコマを細かく分割して描くことで，これから激しい論争が起きそうな不穏な予感を見る者に与える．

5

通信

発表者の PC はサーバを介して各聴衆の PC に繋がっている．サーバは聴衆のチャットクライアン
トや発表者のプレゼンツールから送られてくるメッセージを適宜，処理する．

展望

本システムのインタフェース画面である図 2 は，筆者らが考えるプレゼンの理想形態である．そこには上下関係もなく誰もが自由に自分の考えを楽しく語れる世界がある．気軽に自分のちょっとした知識や意見を他者に披露することができ，それについて立場に関係なく，みんなで議論できるような環境づくりこそ，プレゼンの目指すべきゴールのひとつである．
筆者らはまた，誰でも簡単にプレゼンすることができる環境も必要だと考えている．コンテンツ配信にあまり積極的でなかった人たちが twitter というツールによって積極的にコンテンツ配信するようになったのと同じように，今まであまり主張することのなかった人々も積極的に意見を言うようになったり，自分の知識を披露するようになったりすることが期待される．プレゼンがただの知識の伝達手段から，自己表現の手段になりうる．
今までの，高名な人を呼んで会場を借りて大勢の聴衆がプレゼンを聴くという講演会的スタイルを打破し，どんな人でもプレゼンでき，別け隔てなく議論できる世界を構築することで，いうなればプレゼ

An Interactive System that Express an Atmosphere of Presentation and the Presentation Itself by Manga Expression

ンの民主化に貢献できると考える．
今後は，チャットログイン数の何割の同意で飛び入り機能が発動するかなどの細かなパラメータ設定を実験を通して決定していき，より自由に意見し，活発に議論できるシステムにしていきたい．

7

関連研究

WISS ではチャットを併用するプレゼンは 1997 年に始まったが，それ以外の学会などでも twitter をしながら聞くことが今日では盛んに行われている．
プレゼンを聞きながらチャットをするスタイルは標準となりつつある．西田らの On-Air Forum[5] はリ
アルタイムで進行するプレゼンに対して聴衆同士の議論の場を提供するシステムである．また，同じく西田らの Lock-on-Chat[6] は現在や過去に映し出されたスライドに対してもコメントできるようになっている．さらに西田らは，チャット上で意見する際に，何名かの同意を得て初めて表示される仕組みを持ったインタフェースを提案した [7]．これにより，発言者は立場に関係なく平等に扱われるようになっている．本システムの飛び入り機能は，同様なデザインポリシーに基づいている．
マンガに関する研究は主にマンガ的表現を借りてコンテンツを要約する研究が多い．その例として内橋らの研究が挙げられる．内橋らは映像を要約し，シーンの重要度に応じてそのサムネイルの大きさを変えてコマ割りのように配置し，インタラクティブに映像を再生するインタフェースを用いている [8]．
また，ウェアラブルカメラを中心に撮影した映像を，コマに収めて自らの体験をマンガ風に表現したページを自動生成する研究も行われている [9]．オンラ
インゲームの画像や発言内容を元にマンガをつくる研究も存在する [10]．中村らはニコニコ動画のコメント数を元に動画の印象深いシーンを抽出し，そのサムネイルをマンガ的手法に基づいて配置するシステムを提案した [11][12]．Tobita は，動画からマンガをつくるインタフェースを考案した [13]．坂本らは，個人的な経験や興味をストーリーに仕立て，マンガ形式で出力するコミックダイアリーを開発した[14]．このシステムによって，実体験の回顧やそれを相手に伝える手段としてマンガ表現されたものが有効であることが示された．このようにマンガの豊かな表現力を借りることで，見る者をただ楽しませるだけでなく，情報の一覧性が高められ，効率的な内容理解につなげられる事実を前提とした研究が数多く存在する．
プレゼンに関する研究は，聴衆のプレゼンの内容理解を助ける研究が多い．Harry らは，Backchan.nlというプレゼンシステムを開発した [15]．これは，説明を聞いていて疑問に思ったことを聴衆がインターネット上に投稿し，その他の聴衆が投稿された疑問に対して投票を行い，投票が多かった疑問をランキング形式でメインスクリーンの横のサブスクリーンに表示するものである．発表者もこのスクリーンを見ながら説明をするので聴衆との双方向コミュニケーションが可能となる．発表者と聴衆の間のインタラクションを意識した研究である．栗原らはプレゼンの練習を支援するシステム，プレゼン先生を開発した [16]．このシステムでは発表者の音声および行動を解析し，話の速度や視線など複数の項目について点数をつけることで自分のプレゼンの良し悪しを把握することができる．亀和田らは，プレゼンの練習
時に発表者が提示するスライドと聴衆が見ているス
ライドのずれを記録し，それを可視化することで本番のプレゼンの改善を図った [17]．プレゼン画面にチャットの書き込み内容をニコニコ動画にように重畳表示するプレゼンツール，ニコポイントも存在す
る [18]．
筆者らが開発したプレゼンツールのナビゲーショ
ン機能は ZUI を用いたプレゼンツールのそれに類似するところがある．ZUI を用いたプレゼンツールの研究として挙げられるのは Good らの CounterPoint[19] である．これは意味的につながりのあるスライド同士を無限に広い平面上の一箇所にまとめて配置する．そうでないスライドはやや離れたところに置くといったレイアウトを行うことで，予め設定した順番だけでなく必要に応じて好きなスライドへ移動し，即興的にプレゼンを行える．
Kurlander らは Comic Chat というチャットの発言をマンガ形式で表示させるシステムを提案した[20]．この研究は，コミュニケーションにおけるマンガ表現導入の先駆けともいえる研究である．

参考文献[1] 藤本雄太，宮下芳明，マンガのコマ割り表現を用いたプレゼンテーションツール，情報研報 2010HCI-139, Vol.2010，No.11，pp.1-7，2010．
[2] Wikipedia - Backchannel,
http://en.wikipedia.org/wiki/Backchannel[3] 夏目房之介，マンガはなぜ面白いのか―その表現と文法，日本放送出版協会，p.91，1997．
[4] Scott Bateman, Regan Mandryk, Carl Gutwin,
Aaron Genest, David McDine, and Christopher
Brooks, Useful Junk? The Eﬀects of Visual Embellishment on Comprehension and Memorabilityof Charts, CHI 2010, pp.2573-2582, 2010.
[5] 西田健志，栗原一貴，後藤真孝，On-Air Forum:
リアルタイムコンテンツ視聴中のコミュニケーショ
ン支援システム，WISS 第 17 回インタラクティブ
システムとソフトウェアに関するワークショップ論
文集, pp.95-100，2009.
[6] 西田健志, 五十嵐健夫, Lock-on-Chat: 複数の話題に分散した会話を促進するチャットシステム. コンピュータソフトウェア, 23(4):69-75, 2006.

WISS 2010

[7] 西田健志，五十嵐健夫，「あと一歩の勇気」を引き出すコミュニケーションインタフェース，第 48 回
プログラミングシンポジウム報告集，pp.153-160,
2007.
[8] 内橋真吾，ビデオ・マンガ要約を用いたインタラ
クティブなビデオ閲覧，インタラクション 2001 論文集，pp.31-32，情報処理学会，2001．
[9] 小関悠, 角康之, 西田豊明, 間瀬健二, ぱらぱらマ
トリクス: 漫画技法を用いた映像を要約するシス
テム, インタラクション 2005 論文集, pp.177-178,
2005.
[10] 首田大仁，Thawonmas, R, オンラインゲームのプレイログを用いた漫画の自動生成，ゲーム学会
和文論文誌，Vol.3，No.1, pp.41-46，2009.
[11] 中村貴洋，青木秀憲，宮下芳明, マンガ的手法を用いたニコニコ動画ナビゲーション, ヒューマンイン
ターフェース学会研究報告集 Vol.10 No.4 pp103110/情処研報 2008-HCI-130，Vol.2008, No.106,
pp.103-110, 2008.
[12] 中村貴洋，宮下芳明, マンガを原作とする映像のシーン対応に関する一考察, インタラクション 2010
論文 DVD, 2010.
[13] Hiroaki Tobita, DigestManga: interactive movie
summarizing through comic visualization, CHI
Extended Abstracts 2010, pp3751-3756, 2010.
[14] 坂本竜基，角康之，中尾恵子，間瀬健二，國藤進，
コミックダイアリ：漫画表現を利用した経験や興味

未来ビジョンの伝達支援，情報処理学会論文誌，Vol.43，No.12，pp.3582-3595，2002．

[15] Drew Harry, Joshua Green, Judith S. Donath,backchan.nl: integrating backchannels in physicalspace. CHI 2009, pp.1361-1370, 2009．
[16] 栗原 一貴，後藤 真孝，緒方 淳，松坂要佐，五十嵐健夫，プレゼン先生：音声情報処理と画像情報処理を用いたプレゼンテーションのトレーニングシス
テム，WISS 第 14 回 インタラクティブシステムとソフトウェアに関するワークショップ，pp.59-64，2006．
[17] 亀和田慧太，小林智也，西本一志，うつろひ：聴衆の注意状況を提示するプレゼンテーションツール，
インタラクション 2007 論文集，情報処理学会シンポジウムシリーズ，Vol.2007, No.4, pp.165-166,2007.
[18] ニ コ ポ イ ン ト，WISS Challenge 2008，2008．
http://www.wiss.org/WISS2008/[19] Good, L. and Bederson, B.: CounterPoint: Creating jazzy interactive presentations, HCIL Tech
Report 2003-03, University of Maryland, CollegePark, MD 207427, 2001.
[20] David Kurlander, Tim Skelly, and David Salesin,
Comic Chat, Proceedings of SIGGRAPH’96,pp.225-236, 1996.