WISS 2023

操作説明動画から要約となる一枚の静止画を作成するシステムの提案
沼澤 翠 ∗

元村 愛美 ∗

五十嵐 悠紀 ∗概要. 本稿では，カーソル等による操作の説明を行う動画を入力とし，操作経路が一枚でもわかるような静止画を出力とするシステムを提案する．提案システム上では，ユーザが自ら設定できる項目を二つ設けている．動画からどのタイミングのフレーム画像を切り出して静止画作成に使用するか選択する項目と，それらが重なり合う際の画像の透明度の値を設定する項目である．これにより，操作説明を静止画で行いたい状況にあるユーザにとって，手軽かつインタラクティブに静止画作成を行えることを目指している．

1

はじめに

ヒューマンコンピュータインタラクション (HCI)の研究発表において，動画や画像を用いて提案するシステムの操作説明を行う場面は非常に多く，WISSに投稿される研究の多くも例外ではない．発表の聞
き手は，動画やデモンストレーションを見ることができれば，その説明を容易に理解できるかもしれない．一方で，紙媒体の資料や論文等，動画で説明を行う部分を静止画で説明しなければならない場面も多い．このような場で使用される静止画は，動画から抽出した時間毎のフレーム画像を数枚重ねるなどして作成される．しかし現状，資料作成者が手作業で作成することが多く，手間となっている．
動画から静止画やサムネイルを作成する研究は多々行われている．Goldman らは，動画を入力として静止画で動きを表現するストーリーボードを提案した [2]．Li らは，ニュース動画からサムネイルを自動生成するシステム NewsThumbnail[4] を提案した．生井らは，動画からのヴィネットイラストを半自動生成するシステムを提案した [6]．また，Correa
らは，動画から背景に矛盾が生じないように，適切に取得した複数のフレーム画像を繋げたり重ねたりすることで１枚の静止画を自動生成し，動画の流れを静止画で示した [1]．
我々は動画のイメージを活かした 1 枚の静止画をインタラクティブに作成するシステムを提案する(図 1)．動画から切り出すフレームや透明度などを設定し，数秒のデモ動画から 1 枚の静止画を生成することを可能にした．提案システムを利用することで，ユーザは，動画のイメージを忠実に再現する１枚の静止画を容易に作成することができる．さらに，ユーザ自身が，取得するフレーム画像を直接決定できるため，多くのフレームを密に重ねて動きの速い部分を表現する等，既存のシステムよりも説明する
Copyright is held by the author(s). This paper is nonrefereed and non-archival. Hence it may later appear
in any journals, conferences, symposia, etc.
∗お茶の水女子大学

図 1. 提案システム．上から，動画ファイルのアップロード，アップロードされた動画のプレビュー，切り出すフレームの確認と選択をするインターフェース，選択された画像の透明度を設定するインターフェー
ス，生成された一枚の静止画．

WISS 2023

情報量が多い静止画を生成できる．これにより論文のサムネイルやポスターの画像といった，静止画が必要な場面で使用する図の作成を支援する．

2

提案システム提案システムの概観を図 1 に示す．提案システム
は，ウェブブラウザ上で動作する．システム実装のツールとして HTML/CSS および Python を使用し，Web 開発のフレームワークには Flask を使用した．提案システムは 5 つの要素から構成される．
1：動画ファイルをアップロード，2：アップロードされた動画の再生，3：切り出すフレームの確認と選択，4：選択したフレームの透明度の設定，5：完成した画像の確認である．まず，ユーザはシステムにmp4 形式の動画をアップロードする（図 1 上から１番目）．すると，動画が再生されるので，ユーザはアップロードした動画の長さや大きさが画像生成に適切であるかを確認する．3：切り出すフレームの確認と選択では．スライドバーを動かしながら，取得するフレームの画像の選択を行う（図 1 上から２番目）．また，入力フォームに切り出すフレームの番号を打ち込み「決定」ボタンを押すことによって次に進むことができる．
「入力を追加する」ボタンを押すことによって入力フォームを増やすことができる．4：選択したフレームの透明度の設定では，スライドバーを動かすことによって任意の透明度に編集された画像を確認することができる．また，入力フォームに設定したい透明度を，0 から 255 までの値として入力し「設定」ボタンを押すことで次に進むことができる（図 1 上から３番目）．設定が完了すると，設定した内容が反映して生成された静止画が表示される（図 1 上から４番目）．ユーザはこの画像をダウンロードし，使用することができる．

3(a) 衣服を着せるインタフェース．

結果

提案システムによって生成された静止画を図 2 に示す．図 2（a）では，アバターに任意の衣装を着させるシステム [5] のデモ動画の一部から作られた画像である．ドラッグ操作で衣服を動かし，アバターに衣装として着せる様子を示している．図 2（b）は，ファイルのアイコンをドラッグで移動させる様子を収録した動画から作成されたものである．図 2（c）
は，クマの 3 次元モデルに衣服を着せるインタフェー
ス [3] のデモ動画の一部から作成した静止画である．
生成された静止画から，クマに着せた衣服をユーザが操作することで衣服が変動する様子が示される．

4るシステムを提案した．現段階のシステムでは，元動画の色味によって生成される静止画のわかり易さが変わってしまうという課題がある．また，図 2 に示したようなカーソル操作動画においては，カーソルの存在感が薄くなってしまいドラッグしていることが直感的にわかりづらい．今後は，これらの課題を解消するために，選択されたフレームの画像同士の重ね合わせる方法を改善し，画像からカーソルを抽出してインタラクティブに扱えるようにする．また，ユーザ評価を行い，ユーザが行いたい操作説明の意図に沿った静止画が生成されているかを調査する．

まとめと今後の課題

本研究では，動画から任意のフレームの画像を切り出し，それらの画像を任意の透明度で重ね合わせることで，一枚の静止画を生成することを可能にす(b) カーソルで移動させる場面．

(c) くまに着せた衣服を動かす場面．
図 2. 結果画像．

操作説明動画から要約となる一枚の静止画を作成するシステムの提案

参考文献[1] C. D. Correa and K.-L. Ma. Dynamic Video Narratives. ACM Transactions on Graphics (Proc.
SIGGRAPH), 29(4), jul 2010.
[2] D. B. Goldman, B. Curless, S. M. Seitz, andD. Salesin. Schematic Storyboarding for Video
Visualization and Editing. ACM Transactions onGraphics (Proc. SIGGRAPH), 25(3), 2006.
[3] T. Igarashi and J. F. Hughes. Clothing Manipulation. In Proceedings of the 15th Annual ACM
Symposium on User Interface Software and Technology, UIST ’02, p. 91–100, New York, NY,USA, 2002. Association for Computing Machin-ery.
[4] J. Li, S. Lin, F. Zhou, and R. Wang. NewsThumbnail: Automatic Generation of News
Video Thumbnail. In 2022 IEEE International
Conference on Systems, Man, and Cybernetics(SMC), pp. 1383–1388, 2022.
[5] 坂本夏海, 五十嵐悠紀. SiMirror Look: 写真から 2D
アバター用衣装を制作するシステムの提案. WISS
2022, ウェブ予稿集, 2022.
[6] 生井 麻結, 藤代 一成. 動画からのヴィネットイラ
スト半自動生成のプロトタイピング. Visual Computing 2023，予稿集, 芝浦工業大学 豊洲キャンパス, 9 2023.