プロジェクト報告書 Project Report

提出日 (Date) 2018/1/26

マンガ工学

Manga engineering
1015131 村上聖将 Kiyomasa Murakami
1 背景

2 課題の設定と到達目標

我々は日々多くのマンガを目にしている。マンガは単本プロジェクトでは、マンガ的表現を活用する 2 つのにストーリーを語るためだけではなく、様々な情報を表グループと、基本的な観点としてマンガ自体を調査する示するためのメディア技術として利用されている。そこ

1 つのグループの計 3 グループに分かれ活動を行った。

で本プロジェクトでは、マンガをメディア技術の一つとここではそれぞれの課題と目標について記述する。

して工学的に理解・活用することを活動内容とした。は

2.1

じめに、既存の例を調査した。

マンガ×コミュニケーション

本グループは、LINE や iMessage のようなチャット

マンガ自体に関する例として、以下の研究がある。マツールでは感情が伝わりにくいことやニュアンスの伝達

ンガでは読者がそれぞれのコマを作者の意図した順番でがあまりできていないことがあると考えた。そこで、吹読むために、視線誘導の手法が多く使われている。マン

き出しや漫符といったマンガ的表現をチャットツールにガの視線誘導要素の実験では林ら [1] が行った分析があ組み込むことで、問題が解決できると考えた。到達目標

り、スピード線、特に水平線を横長になるように配置しとして、基盤となるチャットツールの作成、吹き出しのたものは注意の移動が強く喚起されるという効果がある変換機能、漫符の付加機能の実装を目標とした。

ことがわかっている。細馬 [2] の実験ではフキダシから2.2セリフを取り除いたものを被験者に見せ、フキダシの順番の予測を答えてもらう実験を行っている。

マンガ×体験

本グループは、小出ら [5] を参考に、自身の動きにマンガ的表現が乗せられると新しい体験となるのでないか

マンガの表現を利用したものとしては以下が挙げらと考えた。さらに、そのコンテンツ自体が新しい表現にれる。小関ら [3] はウェアラブルカメラなどが記録したなるのではないかと考えた。また、新しい体験を複数人大量の映像データを要約するためにマンガの技法を用が行うことで新しいコミュニケーションが生まれるのいている。また、坂本ら [4] は経験を他者へ伝達する支ではないかと考えた。小出ら [5] の MangaGenerator で援のため、ライフログをマンガにすることで読みやすは、ユーザの姿勢の状況に応じてマンガ的表現を表示しく見せやすいものとしている。他にも、無料通話アプていた。また、MangaGenerator では決められたあるコ

リ LINE は、メッセージが吹き出しに囲まれて表示さマにしか自分が登場することができなかった。そこで本れ、スタンプという 1 コママンガと言える絵を送信する

グループは MangaGenerator のように、ユーザの姿勢こともできるため、これもマンガの活用例だと言える。に応じてマンガ的表現を自由に表示することにより、ママンガ自体を活用した例としては、小出ら [5] が制作しンガに入り込んだと思える体験メディアの試作を行うこた、既存のマンガのあるコマに入り込むことができるととした。到達目標として、幾つかのユーザの動きに対MangaGenerator という体験型コンテンツがある。

応してマンガ的表現を表示させることと、マンガ的表現

このように、マンガを活用している例では、オノマトペや効果線などのマンガ的表現が多く用いられている。
上記を踏まえ、本プロジェクトでは、マンガ的表現の活用方法を考えるとともに、基本的な観点としてマンガの読まれ方を調査した。

が表示された状態の画面をキャプチャし、マンガのように配置して出力することを目標とした。

2.3

マンガ×リテラシ

本グループは、視線計測装置を用いて様々なタイプのマンガを資料に実験を行うことで、観察された視線の動きから、普段気付かないマンガの特徴を見つけられるに、テキスト入力欄の横で漫符を選択できるように工夫のでは無いかと考えた。そこで、「読みやすいマンガとを行った。成果物の実際の様子を図 1 に示す。結果、吹は？」をコンセプトにマンガを読むときの視線計測を行

き出し 4 種類と漫符 4 種類が表示でき、表現が豊かにすい、研究することにした。特に、視線誘導に使われるマることができた。

ンガの要素がどのようなものであるか、それらの要素の配置によって視線がどのように動くか、また読者に与えられる印象はどうなるかを分析、考察することを目標とした。

3 課題解決のプロセスとその結果
3.1 マンガ的表現を用いたチャットシステム
課題解決のため、本グループでは、「データベース班」、「機能班」、「デザイン班」の３つの班に分かれた。また、どのスマートフォンでも動作できるように、WEB

図 1 マンガ的表現を用いたチャットシステムの使用例

アプリを開発することを決めた。データベース班では、主にチャット機能やログイン機能といったデータベースの知識を必要とする部分の開発を行った。言語は

JavaScript を使用した。機能班では、吹き出しや漫符といったマンガ的表現を加える部分の開発を行った。こちらも JavaScript を使用した。デザイン班では、画面設計を行った。言語は HTML と CSS を使用した。デー
タベース班では、前期に PHP を使用して、チャット機
能を実装しようとしたが、文字を入力して送信すると同じページを見ている相手にリアルタイムに届く「双方向通信」の機能が必要であるため難航し、機能の完成には至らなかった。また、それらを動かし、データを保存するサーバ、そのサーバでデータを管理するためのデータベースも必要であった。そこで、後期からは、チャット機能を実装するために、Vue.js と firebase を使用することにした。理由として、双方向バインディングによる相互更新することができることと、firebase のリアルタイムデータベースにより、JavaScript だけでデータの読み書きができるためである。これによりチャット機能を完成することができた。機能班では、吹き出しの変換を行うために、送信する文章の最後から「！」や「？」のようなキーワードを探索し吹き出しを自動変換する機能を実装した。また、漫符はアバター画像の右上に表示させることで、よりマンガのような見た目になるようにこだわった。この機能も、送信する文章の最後から「（笑）」や「（怒）」のようなキーワードを探索し、漫符を自動付加する。また、「（笑）」などと入力する手間を省くため

3.2入り込めるマンガ課題解決のため、はじめに Kinect の基本的な動作と使い方を学習した。その後、目標のために Kinect v2 とC# を用いてプログラムを制作した。このプログラム
では、Kinect v2 で取得したカラー画像をそのまま表示し、ユーザの姿勢に応じて「バンザイ」と書かれた画像を表示するというものであった。このプログラムから今後の見通しを立て、Kinect を用いてユーザの動作を画面上に投影するマンガに入る機能、動作に応じて画面が変化するマンガを動かす機能、そしてユーザが体験したものをマンガとしてまとめて表示・共有するマンガになる機能という 3 つの柱を立てた。また、これらの機能を実現するために、後期から Unity を用いることを決定した。後期ではまず Unity での Kinect の使用方法を確認するため、前期に制作したものを Unity で制作した。

10 月下旬に発表する機会があったため、そこでの発表を目安に、機能の追加を行った。マンガに入る機能として、Kinect からのカラー画像ではなく、灰色の背景を表示し、ユーザの動作はユニティちゃんを通じて表示させるようにした。これは、カラー画像のままだとマンガ感が薄いことを解決するためである。更にマンガの世界観に合うようにシンプルなシルエットの 3D モデルを使用することを目的に、試作としてユニティちゃんを使用した。マンガを動かす機能として、前期では認識する動作は 1 つで表示される表現も 1 つであったが、両手を前に突き出すことで正面にビームのようなエフェクトも表示できるようになった。マンガになる機能については、

この時点では一切作成していなかった。この段階での発表を聞いて頂いた方からは高評価を頂けた。よって、方向性はそのままに機能の拡充を行いつつ、未完成であった部分の作成や細かな修正を行った。最終的には、マンガに入る機能として、複数人を同時に認識し、表示できるようになった。さらに、マンガの世界を表現するために、表示される 3D モデルは黒い人形のものとした。マ

図 2 入り込めるマンガの様子

ンガを動かす機能として、8 つの動作から 11 個の表示が行われるようになった。特に、動作と表示の対応が単調にならないように、複数人で同じ動作をすると表示内容が変わる、片方がある動作をしているともう片方の動作はそれまでとは違う動作をするようにした。例えば、1 人で両手を上げると「わーい」、2 人以上で両手を上

図 3 入り込めるマンガのシステムブロック図

げると「バンザイ」、片方がビームを撃っている状態でもう一方が両手を上げると「ギャアア」と表示されるものである。他にも、足が一定以上上がったあとに下がると「ドン」と表示される機能や、2 人以上でなければ表示されない機能などが加わった。マンガになる機能について、Unity 上でマンガ的表現の表示が行われた際に、画面を画像として保存する機能を追加した。また、こた。また、マンガの形式によってどのように読みやすさの印象が変わるのかを分析した。前期では、翻訳されたマンガ、ページ移行の形式が見開き形式と縦スクロール形式とで異なるマンガ、1 つのコマの中で右から左に状況が動くように人物配置がされている日本語のマンガの3 種類を資料に視線計測、分析を行った。その結果、セの画像を選択しマンガのように配置する機能を Python

リフの位置と人物の位置、流線の使用方法、視点や人物で実装した。この機能は、画像を単純に 4 枚縦に並べ、の配置などにより視線誘導が行われることが分かった。

それにコマ枠となる黒線を引いた画像、つまりマンガ

このとき、右の行から読む縦書きの日本語のマンガは視を生成するものである。さらに、そのマンガを Google線が右から左に動くため、人物の動きなども右から左にDrive の共有フォルダへアップロードし、その URL を動くように配置したほうが視線が戻ることが少なくなる

QR コード化して表示する。これは、生成されたマンガことが推測された。後期では、ストーリーマンガを読むの共有を容易に行えるようにするためである。入り込めるマンガの実際の様子を図 2 に示す。また、図 3 は、入り込めるマンガのブロック図である。Kinect でユーザの動作を取り、その動きを Unity 上で 3D モデルに反映し、さらにその動きに応じてマンガ的表現を表示する。
マンガ的表現が表示されたときの画像を選択し、マンガ際の視線移動、細馬 [2] の実験を元にした吹き出しを読むときの視線の動き、夏目 [6] の予測・分析を元にしたコマ構成の視線の動きの影響の 3 種類について、視線計測装置を用いて確認するなどの実験を行った。その結果、マンガの中のキャラクターの視線の動きが読者の視線の動きに影響があること、吹き出しのセリフの内容でを生成する。そのマンガを Google Drive にアップローはなく人物配置や吹き出しの配置で再読が発生し吹き出ドし、QR コードを生成して表示する。これが入り込めしの解釈も変わること、コマ構成によって視線の動きがるマンガの一連の流れである。成果発表会でのデモンス
トレーションでは、多くの人の体験して頂き、高評価を得られた。よって当初構想していた目標は達成できたと考えられる。

3.3 マンガの読まれ方の調査
本グループでは、マンガの読まれ方や印象にどのような要素がどのように影響するのかということを分析し変わることが判明した。また、前期と後期に行った視線計測の分析内容からわかった視線移動に影響する要素を配置することで、視線移動をコントロールすることが可能か確かめる実験を行った。実験の結果をまとめたものを図 4 に示す。また、図 5 は実験の様子である。その結果、ある程度視線の動きを予測通りにコントロールできることが判明した。そのため、当初の目標を達成できたと考えられる。

を用意しなくても、Web カメラなどで入り込めるマンガと同じような動作ができるようになると考えている。
マンガになる機能では、自分がマンガになったと感じられるように、最後に出力される画像の人物は、それぞれ自身の画像にすることを考えている。また、人間が画像を選択することで単調な 4 コママンガを生成しているが、この選択を自動化し、起承転結をつけた 4 コママンガを生成できないかと考えている。さらに、単調な 4 コ
マではなく、複雑なコマ割りのマンガを生成することも

図4

視線の動き (複数結果をまとめたもの)考えている。

4.3

マンガの読まれ方の調査

マンガでの視線誘導の要素とそれらがどのように影響するかということと、それらの要素を適切に再現することで視線の動きをほとんどコントロールできることが判明した。これらの分析結果をもとにしてマンガ制作の支援システムの開発が可能ではないかと考えている。具体的には、制作中のマンガの視線移動を評価することで、作者の意図が読者により伝わりやすくするための支援シ
図5

視線計測実験の様子

ステムなどが考えられる。

参考文献

4 今後の課題
4.1 マンガ的表現を用いたチャットシステム
成果物は、チャットが可能であり、ある程度形にすることができたが、マンガ的表現がまだ少ない。そのため、対応するキーワードをさらに増やし表現の幅を増やすことを検討している。また、現在の段階ではログイン機能を実装できていないため、他人とチャットするにはURL を共有する手間がある。そのため、ログイン機能を実装し、このアプリだけでチャットできるようにする必要がある。さらに、各ユーザごとのアバターを設定できるようにすることも課題である。

4.2 入り込めるマンガ入り込めるマンガは、概ね期待通りに動作するが、Kinect の性質上、体をクロスさせる動作などはうまく骨格を取得できない。そのため、Kinect を複数台利用することを検討している。Kinect 二台以上の情報を統合することで、骨格検出の精度を高めることができると推測している。また、機能の根幹が Kinect の骨格検出に依存しているので、Kinect 無しでも動作できるような改良も行いたい。画像から骨格情報を検出する OpenPoseなどといった技術を用いれば、Kinect のようなセンサ[1] 林聖将, 松田剛, 玉宮義之, 開一夫：マンガのスピー
ド線の視覚的効果 空間的注意喚起の実験的検討, 認知科学,Vol.20,No.1,pp79-89.

[2] 細馬宏通:吹き出しの順序と帰属について 鈴木雅雄,
中田健太郎 (編)：マンガ視覚文化論

見る、聞く、語る,pp151-176, 水声社 (2017).

[3] 小関悠, 角康之, 西田豊明, 間瀬健二：ぱらぱらマト
リクス： 漫画技法を用いた映像を要約するシステム,
インタラクション 2005

[4] 坂本竜基, 角康之, 中尾恵子, 間瀬健二, 國藤進：漫画表現を利用した経験や興味の伝達支援, 情報処理学会論文誌, Vol.43, No.12, pp.3582-3595, 2002 年12 月[5] 小出雄空明, 國富彦岐, 藤村航, 奈良優斗, 白井暁彦：
マンガ没入型 VR エンタテイメントシステムにおけるコンテンツ制作手法, 第 18 回日本バーチャルリア
リティ学会大会論文集 (2013 年 9 月)

[6] 夏目房之助：マンガはなぜ面白いのか その表現と文法,pp139-147, 日本放送出版協会 (1997).