WISS 2016

Deconaby:ウェブ上の画像に対する解説アニメーション付与システム
樋川 一幸*

松田 滉平*

中村 聡史*

概要．ウェブ上には，アプリケーションの導入方法などの説明を目的としたウェブページが多数存在する．そうしたウェブページでは，画像を用いて視覚的によりわかりやすくする工夫がなされているものも多いが，コンテンツが静的なものであるため，文章が画像のどの部分を示しているのかがわか
りにくいことがある．また，画像やテキストを理解するうえで知識を要求されることも珍しくない．
そこで本稿では，ウェブブラウザで閲覧中の任意の画像に対して，画像上に解説を行うアニメーショ
ンをマウスで手軽に重畳付与および共有可能とする手法を提案する．本手法により，わかりにくい解説ページを他者へわかりやすく伝えることが可能になると期待される．

1

はじめに

ウェブ上には，パソコンのアプリケーションの導入方法や駅から学校までの道のりなど，ユーザに説明することを目的とした図 1 のような HOWTO に関するページが多数存在している．そのため，何かわからないことを調べる際に，ウェブ検索してHOWTO に関するウェブページにたどりつき，解決を試みるということが一般化している．

図 1．HOWTO に関するページ例

こうした HOWTO に関するウェブページでは，画面のスクリーンショットや地図といった画像を使用することで視覚的によりわかりやすくする工夫がなされているものも珍しくない．しかし，画像やテキストの理解に専門的な知識が必要な場合や，画像やテキストの説明が煩雑である場合，そして画像とテキストがうまくリンクしていない場合など理解することができず，解決までに時間や手間がかかってしまう．また，画像は 2 次元的な広がりをもつ静的なものであるため，画像内のどこに注目したらよい
Copyright is held by the author(s).
*明治大学

か，何をすべきかといった流れがわかりにくいという問題がある．一方，HOWTO に関するウェブペー
ジで，テキストがユーザの不慣れな言語や専門用語で書かれている場合や，テキストに誤りがある場合にも，そのページはユーザにとって利用が困難なページと言える．こうした問題に対して，動画を用いることで理解容易性を向上させることができるようになるが，動画を作って説明するページは制作に手間がかかるため多いとは言えない．また，既存のページをわかりやすくするためにページを改変することは，オリジナルのコンテンツを侵害する者であり難しく，既存のページ同等のコンテンツを一から作るのは手間である．ここで，既存のウェブページについて，後付けで操作方法などを手軽に付与できるようになると労力をあまりかけることなく，理解しやすくなると期待される．
そこで本研究では，ウェブ上の任意の画像に対して，マウスカーソルの移動やクリックなどの操作を付与し，ウェブ上の画像にアニメーションの形で重畳提示することにより，HOWTO に関するページを理解しやすくする Deconaby システムを提案する．
本システムにより，オリジナルのコンテンツを侵害することなく活用し，ユーザのニーズに合わせたオ
リジナルのアニメーション付きページを作成，および閲覧することが可能となる．本システムにより，操作に不慣れなユーザの理解を促し，ユーザが悩むことを防止できると期待される．
本稿では，Deconaby システムを提案，および実装するとともに，事前に用意したページに操作アニ
メーションを装飾として付与することで，このシス
テムがどの程度ユーザの支援に繋がるのかを検討す
る．

WISS 2016

2

関連研究

松田らの Decoby[1]は，ウェブ上の画像や動画に対してユーザの好みのエフェクトを付与し，他人と共有することで，好みの形でコンテンツを伝えることを可能としている．Decoby が面白さなどの印象付与を目的としているのに対し，本研究では装飾により，ウェブ上のコンテンツをわかりやすくすることを目的としている点で異なる．
また中村ら[2]は，ウェブ上の動画に対して音響的装飾を手軽に行う手法を提案している．これは，動画に対して，自分好みの装飾をするばかりでなく，新しい動画視聴体験を実現している．個人で好きな装飾を付与できる点では本研究と同じであるが，本手法では，画像に対して視覚的にわかりやすい解説
アニメーションを付与するものである．
椿ら[3]は，ブラウザ上での操作を記録，および自動で再生可能なシステムをウェブアプリケーションとして構築しており，ウェブ上でのユーザ自らの操作を記録し，ウェブに依存する習慣的操作を短縮することを可能としている．我々の研究では，習慣的操作の短縮を目指すものではなく，他者に共有して操作方法などを教えることが目的であり，本質的に異なるものである．
中村ら[4]は，プロキシを利用してユーザのウェブ
ブラウジング行動を共有することで，インターネッ
トに不慣れなユーザを遠隔支援する手法を実現している．本研究ではインターネットに不慣れな人だけを支援をするのではなく，ウェブページのわかりづ
らい操作説明や，道順の説明などに困っている人す
べてに対し支援をすることができる．また，ウェブ
上での操作を他のユーザに提示することで支援する点では本研究と同じであるが，直接ブラウザでの操作を提示するのではなく，ウェブ上の画像に対してアニメーションとして操作を提示する点で異なっている．中村らの研究ではリアルタイムの遠隔支援を行っているが，本手法では，アニメーションを一度付与してしまえば，ユーザの任意のタイミングで何度も確認を行うことができるという利点もある．
一方，中村ら[5]は，ウェブアプリケーションの操
作ログとウェブモニタリング技術を利用することで，操作支援が必要と思われる場面を自動で検出し，それを解決に導くために次に操作する場所をハイライ
ト表示することで直感的でわかりやすい支援をするシステムを提案している．本手法では，ユーザが画像上にアニメーションを付与することで支援対象ユーザに最も相応しい支援を行うことを目的とするものである．また，本手法はハイライト表示だけでは示すことができない具体的な操作をアニメーション
として提示することも可能である．

画像に対して動的なアニメーションを付与するという研究も多数存在する．岡部ら[6]は，静止画像に流体アニメーションを対話型編集により簡単に付与できる手法を開発している．また，崎山ら[7]は料理
画像に対し，アニメーションを付与することで魅力的にできるシステムを実現している．さらに，このシステムにこれに機能追加を施した SizzTass[8]は，
静止画に動きを付与し，動画化することが可能である．SizzTass は知識がなければ膨大な時間がかかってしまう動画化の作業を誰でも数分で簡単に行えるものとした．これらの研究は，画像をよりリッチなものとすることを目的としているが，我々はウェブ上の画像をよりわかりやすくすることを目的としている．

3

Deconaby: 解説アニメーション付与手法

3.1

提案手法

我々が提案する画像に対してのアニメーション付
与手法は，ウェブ上の画像に対してオリジナルのコ
ンテンツを改変することなく，アニメーションを重畳しユーザの理解を支援することを可能とするものである．例えば，パソコンのアプリケーションを導入する方法を説明するページの場合，実際の導入ページのスクリーンショット画像が掲載され，その画像のクリックする部分が説明されているという構成になっていることが多い．このスクリーンショットの画像上にその説明の部分をクリックするようなア
ニメーションを直接付与することができれば，ユー
ザはどこをクリックするのかというテキストを確認する必要がなくなる．また，ある施設までの道が説明されているようなページで，説明されている施設の位置と最寄りの駅の位置が示されてはいるが，最寄り駅が複数あるといった理由で，どこからどのよ
うに行けばよいか，わかりづらいものが多くみられ
る．こうしたページに出会ったユーザは，説明を理解することができず，地図アプリケーションなどを利用して問題を解決することになる．このような地図画像に対して，そのユーザに適した経路をアニメーションとして付与，および提示することが可能となれば，閲覧者の手間がかかることなく，そのページ内で理解を完結させることができると期待される．
図 2 は，ウェブページに対して Deconaby を用いたアニメーション付与のイメージである．ウェブページ上の任意の画像に対し，画像と同じサイズの追加レイヤを作成し，そのレイヤ上でアニメーション
させることで，あたかもオリジナルの画像にアニメーションが付与されたかのように見せるというものである．アニメーションはレイヤ上でマウスの移動とクリックを行うことで付与することができる．

Deconaby:ウェブ上の画像に対する解説アニメーション付与システム

図 2．画像に対するアニメーション付与

本システムは，付与したアニメーションを簡単に他者と共有できる必要があるため，アニメーションを付与したページの URL を新たに発行し，それを閲覧者に送ることで共有できるシステムを構築する．
これにより，閲覧者は送られてきた URL を開くだ
けで，アニメーション付きウェブページを見ること
ができる．
3.2

実装

Deconaby を Google Chrome のブラウザ拡張として JavaScript とそのライブラリである jQuery とP5.js を用いて実装した1．また，ユーザの付与したアニメーションを記録，および共有するサーバ機能
を PHP と MySQL を用いることで実装した．
本システムの装飾の機能は画像に対する操作を行うものであるため，通常はアニメーションが再生されるだけであり，必要になった時のみ装飾機能をオンにできるようページの上部にメニューバーを設けている．ユーザはこのボタンを利用することで，システムのオンオフを切り替えることができる．
ユーザが本システムの装飾機能をオンにすると，ページ内の DOM ツリーの中から IMG タグの要素を取得し，ページ内の画像の数と位置を検出する．
この時，サイズが小さすぎる画像はアニメーション
付与にそもそも適していないため対象画像から除外
する．
次に，取得した IMG タグの要素の数だけ P5.js
によって生成した透明な追加レイヤをそれぞれのサ
イズに合わせて作成し，ページ上での画像の位置に合わせてレイヤを重ねる．また，レイヤの上でのマ
ウスのクリックと軌跡に対応したアニメーションを記録できるようにし，記録が終了した後はその画像上で記録したアニメーションが再生される．なお，
アニメーション付与の際にクリック操作が必要となるが，A タグにより画像がリンクとして指定されている場合はクリックするとページを遷移してしまう．

1

http://nkmr.io/deconaby/

そのため，装飾モードの時にはリンクを無効にしておく．
ユーザがページ上でのアニメーション付与をすると，システムは記録サーバにページ上で付与したア
ニメーションの情報を JSON 形式で送信し，他者と共有可能とする．ここで記録サーバでは，送られてきたデータをそのままデータベースに格納するが，1 つのページについて複数のユーザから装飾される可能性があるため，本システムではオリジナルのURL に ID を付与することで，アニメーションを付与したページと付与したアニメーションの情報との紐づけを行う．実際には URL の末尾にハッシュ値（URL 内の#の後に記述される部分）としてアニメーション ID を付与する．なお，ID はアニメーショ
ンが記録された際に自動生成される．例えば，「http://example.jp」のようなページにアニメーシ
ョン付与し，保存した際に XXXX という ID が生成された場合，「http://example.jp#ID=XXXX」がこのアニメーション付きページを見ることができる
URL となる．
Deconaby システムを導入したブラウザでこの ID付き URL を開くと，システムが記録サーバに XXXXという ID でアニメーション情報を Ajax の非同期通信により要求する．記録サーバは ID と一致する
アニメーションの情報をデータベースより検索し，その情報をシステムに送ることで，閲覧ページの画
像上にアニメーションを再生する．なお，#以降の値
は本システムを導入していなければ無視されるので，その場合は，通常のアニメーションが付いていない
ページを見ることができる．また，後述する装飾モード情報もサーバに記録されるので，送られてきたアニメーションを閲覧する際，記録時のモードをそのまま閲覧することができる．
3.3

装飾モード

様々な HOWTO に関するページに対応したアニメーションを付与できるようにするため，
本稿では，
マウスカーソルモード，足跡モード，指モードの 3
種類のアニメーションの装飾モードを用意した．
マウスカーソルモード（図 3）は，パソコン上での操作解説支援を想定したモードであり，クリックのタイミングで波紋が提示されるようになっている．
複数クリックするポイントを記録することで，どの順番でクリックするのかを示すという使い方も可能
である．
足跡モード（図 4）は，地図画像での道順解説支援を想定したモードである．このモードでは，マウスの軌跡を人型のアイコンが移動し，通った軌跡上WISS 2016

図 3．マウスカーソルモード

図 6．ユマウスオーバー時（上）と装飾記録時（下）の装飾
メニュー

図 4．足跡モードに足跡を表示することで人の歩行を表現したアニメーションである．アニメーション再生時，クリック
した場所でしばらく人型のアイコンが止まるので，その場所に誘導しているということを示すことができる．
指モード（図 5）は，スマートフォン上での操作説明を想定したモードである．このモードでは，指がマウスの軌跡を移動し，クリックの代わりにタップを表現したアニメーションになる．
以上の装飾モードを切り替えることにより，本システムを利用しているユーザは意図するアニメーシ
ョンを付与することが可能となっている．
3.4

図 5．指モード

操作方法

Deconaby システムをインストールするとウェブ
ページ上部にメニューバーが表示され，このボタンによりシステムのオンオフを切り替えることができる．システムがオンになっている時に，アニメーション付与可能な画像にマウスオーバーすると，図 6上の赤枠で囲われているような装飾メニューが出現
する．装飾メニュー内のモード切り替えボタンをクリックすることで装飾モードを切り替えることができる．なお，それぞれの画像に対して，別の装飾モードを選択し，装飾することも可能である．
装飾メニューが出現している状態でマウスをクリックすると，選択したモードでアニメーションの記録が開始される．ユーザが画像上でマウスを動かす

Deconaby:ウェブ上の画像に対する解説アニメーション付与システムと，システムはマウスの軌跡を残像として描画し，画像上でマウスがクリックされた場合は，そこでクリックしたことがわかるようなアニメーションを描画する．1 つの画像に対して，複数回クリックをしたアニメーションを付与することもできるので，どこをクリックするのかだけではなく，クリックする
順番も示すことができる．また，図 6 下の装飾メニ
ューに表示されている stop ボタンをクリックすることで記録を終了する．ただし，画像上で最後にクリックした後に stop ボタンをクリックするまでの軌跡は，残像は描画されるが解説アニメーションとして不要な情報であるため，記録には残さないようにする．また，一度もクリックされなかった場合は装飾の意図がないと判断し，アニメーションを付与
しない．
ページ内の任意の画像すべてにアニメーション付
与が終了したら，ページ上部のメニューバーの中の「装飾を保存して URL を発行する」をクリックすることで別タブに URL にハッシュ値が付与されたページが開かれる．ユーザはこの URL を利用して他者にわかりやすくしたウェブページを伝えることが可能となる．

4

考察

4.1

実験による分析

実験協力者 14 名（20~23 歳の大学生）に，本シ
ステムを利用して，こちらで用意した操作説明や道案内などの HOWTO に関する 22 個（パソコン上の操作について 10 個，スマートフォン上の操作について 5 個，地理や経路について 7 個）のウェブペー
ジ上の画像に対し，家族に対して説明することを想定してアニメーションの付与を行ってもらった．
実験協力者により装飾されたページについて調査したところ，操作方法に関するページではどのユー
ザも同じ場所をクリックしている傾向が見られた．
また，ページ内のテキストで説明されている事柄をアニメーションとして再現しているものがほとんどであった．以上のことより，これまでに付与されているアニメーションの軌跡から，アニメーションパ
ターンの推薦を行うことなどが考えられる．
用意したページ内の画像にはクリックする部分を赤枠で囲ってわかりやすく説明されているものもあったが，すべてのマウス操作について赤枠が用意されていないことが多かったため，その部分をアニメーションで補完しているという装飾も見られた．また，複数個所が赤枠で囲まれている部分はどちらから順に処理するかわからないことがあるが，そうした点をアニメーションにより表現することができていた．一方，テキストによる説明が，その操作が基本的なものであることから省かれているものもあり，それを補完する装飾もあった．つまり，装飾としては，テキストに書かれている内容をアニメーションとして付与している装飾と，ページの説明不足を補うような 2 つのパターンに分類されると言える．
付与されたアニメーションの特徴として，家族に対する説明という設定から，家のパソコンの OS に合った操作方法を示す装飾，この道は混んでいることが多いため別のルートを案内する装飾，また家族が使用すると考えられる駅からの道案内をする装飾などが見られた．こうした状況に合わせた提示が可能なのが本システムのメリットであるといえる．また，装飾情報は基本的には共有することになるが，その装飾 ID を知らない他者はそのアニメーションにアクセスできないため，プライベートな情報をア
ニメーションとして埋め込むことができるというのもメリットの一つであるといえる．
また，画像上のある部分を強調するために，その部分をぐるぐると囲むような装飾や，文字の部分を指モードでなぞるような装飾も見られた．さらに，
地図に対して足跡モードではなく，指モードで駅や目的地を指し示すような装飾も見られた．こうした説明的な装飾は当初想定していないものであり，興味深いものであった．
実験協力者からのフィードバックによると，装飾を行うことによって視覚的にわかりやすくなったという感想や，手軽で使いやすかったという感想が多く，本システムには有用性や利用性があると考えられる．また，本システムには実装されていないアニ
メーションとして，ダブルクリックやドラッグアン
ドドロップ，スワイプなどの操作を表現したいという意見も見られた．こうした表現の実装により支援されるユーザにとってはより良いものになると考えられる．しかし，本システムの操作がクリックのみであるため，その手軽さがよかったという意見もあった．そこで機能を増やす場合は，手軽さを喪失す
ることなく機能を拡張する必要がある．
本システムの機能を超えた要望として，ウェブペ
ージ自体に対してどこをクリックするかなどの装飾を施したいといった意見も見られた．現在のシステ
ムがウェブ上の画像のみを装飾の対象としているのは，わかりづらい画像で説明されている HOWTO ページが多く存在しており，まずはそれらを解決することが研究の第一歩であったためである．また，ページ自体を対象とすると，ウインドウのサイズ変更
によるコンテンツの位置の変更の影響が大きかった
ことも理由の一つである．しかし，将来的にはウェブページ全体を装飾可能とすることで，より汎用的な解説アニメーションの付与を実現予定である．

WISS 2016

4.2

応用

本システムの利用により，ユーザの不慣れな言語で書かれたページであっても，装飾の付与者がその言語を理解して装飾してくれていれば，閲覧者がその言語を十分に理解していなくても画像上のアニメーションのみで理解できる．これにより不慣れな言語を読まずに目的を達成することが可能となり，内容すべてを伝えきれない場合であっても，少なくとも理解の助けになると考えられる．
現在はマウスカーソル，足跡，指といった単純なパターンしか用意していないが，料理の作り方を紹介するページの食材の画像に対しては，どの部分をどうやって切るのかを包丁が動くアニメーションで示すことが効果的であると考えられる．また，テン
トやプラモデルなどの組み立て方や折り紙の折り方を説明するページに対しても，その内容に適した装飾が考えられる．こうした装飾モードの追加についても，今後検討予定である．
本システムは Web 上の URL をもつすべての画像に対してアニメーション装飾を付与可能であるため，
スクリーンショットを URL で共有できるソフトである，Gyazo[9]を利用することによって，手軽に画面キャプチャを行い，そこに説明のためのアニメーションを付与して他者と共有することも可能である．
なお，Gyazo には GIF 撮影機能があるため，マウス
カーソルの動きと組み合わせることによって，本手法のような表現は可能である．しかし，GIF アニメ
ーションだけでは説明が十分ではなく，わかりやすく説明するにはテキストを用意する必要がある．本
システムは，既存のコンテンツを活かすことが可能であるという点で Gyazo の GIF 撮影機能とは異なる．
本稿では，静止画のみについてアニメーションを付与可能としていたが，Decoby[1]のように時間拡張することによって，動画の再生時間に対する装飾を付与することも可能である．動画へ拡張することにより，スポーツ動画内で人の動きなどの解説アニ
メーションを付与したり，ダンス動画内で気を付けるべき足や手の動きを指示したり，音楽を演奏している動画で指の動きを指示したりといったことが可能になると期待される．

今回は解説アニメーションとして，マウスカーソ
ル，足跡，指の 3 つのモードを用意したが，HOWTO
に関する他の種類のページと，それに対応する相応
しい装飾モードを検討する予定である．また，画像の位置判定ができないページや，うまく記録ができない画像があるページが確認されているのでそういったページにも対応し，システムの実用性を高める予定である．
現状では，本システムを導入しているブラウザ上
でのみアニメーションを付与，閲覧することができるが，システムを導入していない他のパソコン上やスマートフォン上などでも URL を開くことで，本システムによって付与されたアニメーションを閲覧できるサービスを構築する予定である．

謝辞
本研究の一部は JST CREST および JST ACCELの支援を受けたものである．

参考文献[1] 松田滉平, 中村聡史. ウェブ上のコンテンツに対する視覚的装飾手法の提案. HCG シンポジウム 2015,
2015.
[2] 中村聡史, 石川直樹, 渡邊恵太. 個人的な小さな幸せを実現するブラウザ上での動画編集・共有手法 .
WISS2013, 2013.
[3] 椿晃一郎, 疋田輝雄. ブラウザ操作の自動再生シス
テムの構築. 第 73 回情報処理学会全国大会講演論文集, pp.4.489-4.490, 2011.
[4] 中村大介, 疋田輝雄. 動的ウェブページのブラウザ
共有. 情報処理学会シンポジウムシリーズ, pp.15941604, 2010.
[5] 中村友洋, 新谷隆彦, 恵木正史, 櫻井隆雄. 操作ログを利用した Web 操作支援システム, 電子情報通信学
会技術研究報告. LOIS, ライフインテリジェンスとオフィス情報システム, pp.55-60, 2009.
[6] 岡部誠, 安生健一, 五十嵐建夫, Hans-Peter Seidel.
静止画の流体を動かすための対話型編集手法 .
Visual Computing(VC) 研 究 会 / グ ラ フ ィ ク ス とCAD(GCAD)研究会 合同シンポジウム 2009 予稿

5

まとめと今後の方針

本研究では，わかりづらい HOWTO に関するページをよりわかりやすくするため，そのページの画
像上に解説アニメーションを付与することで視覚的に理解しやすくするとともに，そのアニメーション
を他者と共有可能とする Deconaby システムを提案
および実装した．

集, 2009.
[7] 崎山翔平, 岡部誠, 尾内理紀夫, 平野廣見. 料理画像
をアニメーションすることによる魅力的な料理画像
生成システム. WISS 2013, 2013.
[8] 崎山翔平, 岡部誠, 尾内理紀夫, 平野廣見. SizzTass:
静止画に動きを付与する動画作成支援シス テム.
WISS 2014. 2014.
[9] Gyazo. https://gyazo.com/ja. (2016/09/03 確認)

WISS2016 採録判定時のコメント
採録区分：ショート採録
判断理由：
様々な情報提供が Web コンテンツとしてなされる現状において、ユーザ毎に個別のアノテーションを施せることは重要であり、現代の技術で実装したことと合わせて評価できます。一方
で、Web ページ上の画像にマウスの軌跡を重畳することでアノテーションを付加するというア
イデアそのものに新規性は乏しく、3 つの「装飾モード」を選択した根拠やこれらの有用性も明確ではありません。今後の発展を含め会場で議論する価値があると判断し、ショート採録となりました。
レビューサマリ：全体の構成：Web ページ上の画像に具体的な説明を付加するため、マウスポインタの軌跡を重畳することで実現するとともに、利用者ごとに異なる動画を追加可能である。また、今回提案された 3 つの「装飾モード」はよく実装されている。
検討予定の装飾モードのアイデアも提案されており、今後の発展に期待が持てる。
改良に向けたコメント等：
・静止画のみが装飾の対象となっていること、提案している 3 つの装飾モードが選択されたことの根拠が不明確のため、これらを選択するにあたっての事前調査や考察を示して欲しい。
・第 4.2 章では、「不慣れな言語を読まなくても動画の付与により内容が理解できる」としていながら、同じ章で「GIF アニメーションだけでは不十分で説明のテキストが必要」としているのは矛盾している。テキストとの併用は必要なのか不要なのか、見解を明らかにして欲しい。
・ベースとなるページコンテンツは URL で管理されると思われるが、ページコンテンツがアップデートされた場合に対するロバスト性を備えているのか、示して欲しい。
推奨される参考文献（国際会議等）：

Federico Bartoli, et al., “WATTS: a Web Annotation Tool for Surveillance Scenarios”, Proceedings of ACM
MM ’15, pp.701-704, 2015.
Marcel Karam, Maha Abou Ibrahim, “Synchronous online help support with visual instruction aids for workflowbased MVC web applications”, Proceedings of ACM SIGDOC ’09, pp.105-114, 2009.

本論文に対する各査読者の詳しいコメントは以下のページを参照のこと：

http://www.wiss.org/WISS2016Proceedings/oral/14.html＊本ページは論文本体ではありません【Deconaby:ウェブ上の画像に対する解説アニメーション付与システム】