情報処理学会 インタラクション 2021
IPSJ Interaction 2021

2B182021/3/10

漫画画像を索引としたアニメのシーン探索システムの開発
加藤 祐樹1,a)

大和 幸司1,b)

松村 耕平1,c)

大井 翔1,d)

野間 春生1,e)

概要：友人同士でアニメに関して話をするとき，話題となっているアニメ中の特定のシーンの探索を行う機会がある．シーン探索はオンライン動画プラットフォームやビデオ再生ソフトウェア中のシークバーを操作して行う事になるが，特定のシーンを見つけることは困難である．我々はシーン探索中にシークバーを操作したときに表示されるサムネイルとして漫画画像を表示することで探索が容易になると考え，システムを開発した．本稿ではシステムの概要と今後の展望について述べる．

1. はじめに2000 年代初頭からアニメ市場は増加傾向にある．また，海外のアニメ市場においては 2015 年から劇的に増加してセリフ，シーンの動き等の付随的な情報がない．探索者はアニメの静止画から，ストーリーや状況を瞬時に把握することができないことが，特定のシーンを見つけ出すことの難しい要因となっていると考えられる．

いる [1]．総務省によると日本から海外に向けた放送コンテ

そこで我々は，アニメと同様のストーリーを描いた作品

ンツの輸出におけるアニメの割合が増加してきている [2]．

として漫画に着目した．我々は，アニメのシーク時に漫画以上のことから，アニメの視聴人数は国内外において増加をサムネイルとして表示することでアニメ中のシーン探索していることが考えられる．

が容易になると考えた．漫画は，セリフとシーンの描写が上述した背景のもと，特定の友人のみならず，様々なコ1 枚の画像にレイアウトされているという特徴があり，読ミュニティの中でアニメに関する話題が上がるようになっ者は一目でストーリーと状況を理解することができる．本てきた．このとき，話者間において話題となっているアニ研究では，アニメのシーク時にサムネイルとして漫画画像メ中で感動した名シーン，盛り上がりのあるシーン，バトを適用するシステムを構築したので紹介する．

ルシーン等，特定のシーンに関する話をすることがある．
例えば，「あのアニメの終盤の戦闘シーンめっちゃカッコ2. システムいいよね」『わかるー』「特にさ，主人公が相手の攻撃を...」YouTube*1 に代表される，ビデオ閲覧のためのプレイなどと話が盛り上がり，そのシーンを複数人で見返すこと

ヤーでは閲覧時にビデオの再生時間 (再生位置) を変更するや，そのシーンを知らない話者にシーンを紹介することがために，シークバーを操作する (以下，シーク操作) のが一あるだろう．

般的である．多くのプレイヤーではユーザのシーク操作を

しかし，アニメ中から特定のシーンを見つけることは簡補助するために，シーク操作中には，当該再生位置に対応単ではない．一般的に，シーン探索を行う際にはシークするサムネイル画像をビデオ映像の表示部分ないし，シーバーを操作し表示されるサムネイルから得られる情報を頼クバー上部に表示する．

りにする．シーン探索をする人 (以下，探索者) は，自身の我々は，上述したサムネイル画像について，アニメ映像記憶を頼りにアニメ中のおよその時間的位置にシークバー

作品に対して動画そのもののサムネイル映像に代えて対応を操作したり，サムネイル画像からストーリーを思い起こするシーンの漫画のページを表示するシステムを開発した．

したりして対話的にシーン探索を行う．

図 1 は，実装したシステムの画面である．図 1 上部では通常サムネイルとして用いられるのはシークバーの位置

アニメ作品「オーバーロード*2 」のある一場面が表示され(時間) に対応するアニメの静止画である．そこには音楽やている．ここで，ユーザがシーク操作を行うためにマウス

1a)b)c)d)e)

立命館大学ykato@mxdlab.net
kyamato@mxdlab.net
matsumur@acm.org
SHO.OOI@outlook.jp
hanoma@fc.ritsumei.ac.jp© 2021 Information Processing Society of Japan*1*2

YouTubehttps://www.youtube.com/© 丸山くがね・KADOKAWA 刊，オーバーロード製作委員会，アニメ公式サイト (http://overlord-anime.com/_season1/)，
原作:丸山くがね，キャラクター原案:so-bin, 漫画版脚本:大塩哲史, コンプエース編集部 (第 1 話から第 4 話 (約 97 分) を使用)

424

情報処理学会 インタラクション 2021
IPSJ Interaction 2021

カーソルをシークバー上に合わせたとき，あるいはシーク2B18
2021/3/10

アニメと漫画の同期操作としてシークバー上でマウスをドラッグしたときに，開発したシステムでは，シーク操作中のサムネイルとし

図 1 下部のようにサムネイル画像として対応する漫画のてアニメの静止画ではなく，漫画の画像を使用するため，ページを表示する．以下では，具体的な実装について説明

漫画のページとアニメのシーンを同期させる必要がある．

する．

シーンの同期のための方法として，アニメと漫画で一致する部分を抽出し，アニメの再生時間と漫画のページ数のデータベースを構築することが考えられる．一致する部分とは例えばキャラクターのセリフ，シーン中のキャラクターや背景の映像等である．
本研究では，セリフ及び映像の類似度を利用して同期を行うこととした (図 2，図 3)．具体的には，漫画のページの 1 コマ目と類似するセリフ，もしくは，漫画の絵に似ているアニメのシーンをサムネイルの切り替えタイミングとした．例えば，漫画の 80 ページ目の 1 コマ目の月と星空の風景に対してアニメ中の月が大きく映る 0:40:54 や，82
ページ目の 1 コマ目「空が澄んでいれば・・・，・・・星と月の明かりだけで十分明るいんです」に対してアニメ中の「星と月の明かりだけでものが見えるなんて！」というセリフ始めである 0:41:05 を切り替えタイミングとする．
このセリフや映像の類似度の検出と同期については自動化することが望ましいが，本研究のプロトタイプでは著者
図 1 表示画面

らによって人手で同期のためのデータを構築した．また，構築したデータは図 2，図 3 に示すように MySQL を用いたデータベースに格納・参照を行った．

実装
システムは Web アプリケーションとして実装した．ユー
ザは Web ブラウザを介してシステムを利用する．Web ア
プリケーションサーバとしては Python の Web アプリケー
ションフレームワークである Flask*3 を利用してユーザとのインタラクションの実現及び操作のログの取得を行った．
ビデオのプレイヤーは，Youtube のインタフェースを参考に HTML5, CSS, JavaScript (jQuery) を用いて実装した．ビデオの再生のためには JavaScript のライブラリ，Video.js*4 を利用し，短く分割した映像を M3U8 プレイリストとしてまとめ，HLS 形式でストリーミング再生できるように設計した．ビデオプレイヤーの基本的な機能として，動画の再生と停止，音量の変更，全画面表示，シークバーによる操作ができる．
サムネイルは，ユーザがシーク操作を行うためにマウスカーソルをシークバー上に合わせたとき，あるいはシーク操作としてシークバー上でマウスをドラッグしたときに表示される．具体的には，シークバー上のマウスカーソルの位置からビデオの再生時間を取得し，その再生時間に対応するサムネイル画像の ID を MySQL データベースから検索した上で，当該の ID に対応する PNG 画像を表示する．
以下にデータベースの構築方法について述べる．
*3*4

https://flask.palletsprojects.com
https://videojs.com© 2021 Information Processing Society of Japan

図 2 サムネイルの切り替え425

情報処理学会 インタラクション 2021
IPSJ Interaction 2021

2B182021/3/10

図 3 サムネイルの時間合わせ

3. まとめと展望
本研究では，アニメ映像中から特定のシーンを探索する操作において，シークバーを操作したときに表示されるサムネイルに漫画画像を表示することで探索が容易になると考え，システムを Web アプリケーションとして実装した．
今後，システムを利用した被験者実験を通してシステムの有用性の評価を行おうと考えている．
参考文献
[1]

[2]

一 般 法 人 日 本 動 画 協 会 ア ニ メ 産 業 レ ポ ー ト 2019
サ マ リ ー ，https://aja.gr.jp/download/anime_ind_rpt2019_summary_jp (2020).
出 典：「 平 成 30 年 版 情 報 通 信 白 書 」（ 総 務 省 ），https://www.soumu.go.jp/johotsusintokei/
whitepaper/ja/h30/html/nd251840.html (2018).

© 2021 Information Processing Society of Japan426