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

1-510-29
2017/3/2

MouseTutor：マウスに手を動かされるチュートリアル
塩出研史†1

宮下芳明†1

概要：コンピュータのソフトウェアのチュートリアルには，文章・画像・動画などを用いたものが存在する．これらの方法では，得られる情報が視覚・聴覚情報に限定されている．一方で，マウス操作を多用するペイント系・3D モデ
リングのソフトウェアを代表に，視覚・聴覚情報だけでは理解の困難なソフトウェアが存在する．本研究では，実際のソフトウェア上で自動的に動くカーソルに合わせ，マウスの位置を制御するチュートリアルを提案する．マウスの位置は XY ステージとコンピュータによって制御される．本システムは，従来のチュートリアルで得られた視覚・聴覚情報に加え，物理的にユーザに対して働きかけることによって，ソフトウェアの使い方の理解を促進することが期待される．本稿では，システムの基本的な設計，評価および今後の展望を述べる．

MouseTutor: Tutorial That Moves the Hand
KENSHI SHIODE†1

HOMEI MIYASHITA†1

Abstract: There are many kinds of software tutorials such as using documents with text and images, movies. These methods only
produce auditory or visual information. On the other hand, there are software that are not easy to understand from auditory andvisual information such as painting software and 3D modeling software. In this paper, we propose the software tutorial that controls
the mouse position as the cursor moves automatically on the software. The mouse position is controlled by XY table and thecomputer. This tutorial system has visual, auditory and physical information and is expected to improve the tutorial quality forusers. We describe the detail of the system, technical evaluation and future prospects.

1. はじめに本研究では，実際のソフトウェア上で自動的に動くカーソルに合わせ，マウスの位置を制御するチュートリアルを初めてコンピュータのソフトウェアに触れるとき，我々提案する．提案手法は視覚情報と聴覚情報に加え，物理的はチュートリアルを通じて使い方を学ぶことが多い．チュにユーザに働きかけることによって，ソフトウェアの使いートリアルには，文章や画像を中心とした説明書や，デモ方の理解を促進する．また，マウスの位置が自動的に制御ンストレーション動画が存在する．近年では，実際に操作されるため，ユーザの手はチュートリアル中のカーソルにするソフトウェア上で，ユーザがクリックやタイピングな合わせて動くこととなり，結果的にカーソルの動きが目でどの操作をするべき場所が矢印や丸印で強調されるインタ追いやすくなり，理解の向上が期待される．

ラクティブなチュートリアルを作成する試みも行われるようになってきた[8,9]．
しかしながら，これらのチュートリアルはディスプレイ上の視覚情報とスピーカやヘッドフォンからの聴覚情報に

以下本稿では，実際のソフトウェア上で自動的に動くカーソルに合わせ，マウスの位置を制御するチュートリアルの概要と設計，評価と考察および今後の展望について述べていく．

限定しており，ソフトウェアの使い方を学ぶときに物理的な情報を得ることができない．一方で，ソフトウェアを使用する際，マウスの操作には，左クリック・右クリック・

2. 関連研究左ドラッグ・右ドラッグなどの様々な要素が関係する．た2.1 ソフトウェアのチュートリアルに関する研究

とえば，3D モデリングのソフトウェアではドラッグ操作を説明書や動画を通じて行われるチュートリアルから，ユ使う場面が非常に多く，動画から左ドラッグ・右ドラッグーザにより効果的な学びを促すチュートリアルに関する研などの違いを見分けることは難しい．また，ペイント系の究はこれまでに数多く提案されてきた．

ソフトウェアではスプレーに代表されるように，ドラッグユーザに主体的な学びの機会を与える研究として Help-操作のスピードも重要なパラメータとなる．これらの要素

Based Tutorials[3]があげられる．チュートリアルの段階から，を視覚情報と聴覚情報のみから理解することは難しい．

ユーザにヘルプ機能の使用を促すことによって，チュート†1 明治大学総合数理学部先端メディアサイエンス学科
Department of Frontier Media Science, Faculty of Interdisciplinary Mathematical
Sciences at Meiji University© 2017 Information Processing Society of Japan216

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

1-510-29
2017/3/2

リアル終了後にユーザが解決困難な問題に直面した際の，ヘルプ機能の使用率を向上させた．また，GamiCAD[4]はゲーム的な娯楽要素を CAD のチュートリアルに与えるシステムであり，ユーザのモチベーションの向上を促した．
Sketch-Sketch Revolution[10]はチュートリアルの流れの把握を支援するシステムであり，ペイント系ソフトウェアのインタフェースの操作方法だけでなく，熟練したアーティストの描き方のワークフローの習得も可能にした．
理解しやすいチュートリアルの形式に関する研究として MixT[7]があげられる．静的なテキストや画像のみの説
明と動的な動画のみの説明ではなく，両方を組み合わせたチュートリアルを自動生成するシステムである．本研究で実装したチュートリアルの形式に近い EverTutor[8]は，実際に操作をしながら段階的に進めるインタラクティブなチュートリアルを，ソフトウェアの操作手順のデモンストレーションから自動生成するシステムである．Stencils-BasedTutorials[9]は，使用するソフトウェア画面を半透明のレイ

図 1 カーソルに合わせて動くマウスヤで覆い，操作するべき場所にホールを設けるチュートリ

Figure 1 The mouse moves as the cursor moves.

アルの手法を利用し，ユーザの誤操作や理解度の改善を試みるシステムである．Pause-and-Play[12]は，動画形式のチュートリアルがユーザに対して何度も一時停止や再生，巻き戻しを必要とする問題を解決するため，動画中の重要な操作ごとにユーザの進捗状況を確認し，自動的に一時停止や再生を行う手法を用いたシステムである．
これらの研究は，ユーザに対して視覚的または聴覚的なトウェアの使い方の理解を支援する．
2.3 カーソルの動きに関する研究
カーソルの動きをより易しく理解できるようにするための方法はこれまで多く提案されてきた．

情報を工夫することによってチュートリアルの理解を支MixT[7]は，チュートリアル動画の中で，ドラッグ操作を援・拡張した．本研究ではマウスの位置を制御し，ユーザ黄線，マウスの左ボタンが押された場所を緑丸，左ボタンに物理的な体験を与えることによってソフトウェアの使いが離された場所を赤丸で表すことによって，カーソルの動方の理解を支援する．

きを可視化する工夫が行われたシステムである．樋川らの

2.2 位置制御や触覚に関する研究を用いて地図上にカーソルの軌跡を表示することによって，X 軸，Y 軸方向に動くことで位置決めをする XY ステー

提案システム[11]では，Google Chrome のブラウザ拡張機能最終的な目的地だけでなく通る目印を示した．また，操作ジや磁石を用いてものを動かし，物理的にユーザに働きか手順を説明している Web ページ上の画像に対し，カーソルける試みはこれまで多く行われてきた．の動きをアニメーションとして付与することによってどのLivingDesktop[2]はユーザの行動を予測することによっ順番でクリックするのかを示すことも可能にした．て，マウスやキーボード，デスクトップディスプレイの位

これらの手法は，全て視覚的に装飾をすることによって置を制御するシステムである．dePENd[1]は一般的なボールカーソルの動きを捉えようと試みるものであった．本研究

ペンの強磁性を利用し，XY ステージに設置した磁石によでは，カーソルの動きに合わせてマウスの位置を制御し，ってペン先を誘導することで，ユーザにインタラクティブ物理的にカーソルの動きの理解を支援する．

な描画経験を与えた．The actuated workbench[5]は磁石を用いて物体の位置を制御し，コンピュータを直感的に操作できるインタフェースである．Haptic Mouse Interface[6]は，ユーザのカーソルがクリックするべき場所に到達したときに，電磁石が生み出す引力によって触覚的なフィードバックを与えた．
これらの手法に対して，本研究では XY ステージのプロッタ部分にマウスを配置し，XY ステージのプロッタ部分の位置を制御する．マウスの位置を自動的に制御し，ソフ© 2017 Information Processing Society of Japan

3. 設計
本研究で提案するシステムは，XY ステージに取り付けられたマウスの位置をチュートリアル中のカーソルの動きに合わせて制御することによって，ユーザに対して物理的な働きかけを行い，ソフトウェアの使い方の理解を支援する(図 1)．カーソルの動きは実際のソフトウェア上で制御され，直接ソフトウェアに対して操作が行われる．

217

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

1-510-29
2017/3/2

本システムは主に XY ステージ・マウス・チュートリア
ルのプログラムを導入した PC によって構成される．
3.1 ハードウェアの設計
図 2 は本研究で提案するシステムのハードウェアの概観である．XY ステージは X 軸 230mm，Y 軸 280mm の Smart
Laser Mini を加工したものを用いた．Smart Laser Mini はArduino Mega 2560 R3 を用いており，G コードで制御することができる．これによって，XY ステージのプロッタ部分の動きによってマウスの動きは誘導されるため，マウスの位置を X 軸 230mm，Y 軸 280mm の範囲で制御することができる． XY ステージの制御は，コンピュータと USB 接

図 2 提案システム (a)全体図 (b)マウス部分
Figure 2 Proposed system. (a) Overview. (b) Mouse.

続し，G コードを用いたシリアル通信を行うことにより，リアルタイムにカーソルの動きと連動して行われる．

れたときは L_DOWN，マウスの右ボタンが押されたときはR_DOWN，マウスの左ボタンが離されたときは L_UP，マウスの右ボタンが離されたときは R_UP，その他の場合は3.2 チュートリアルのプログラム設計
提案手法を実現するためのチュートリアルのプログラム

MOVE の値が格納される．X タグ内にはカーソルのスクリは，Hot Soup Processor 3.4(以下 HSP)を用いて実装した．まーン上での X 座標，Y タグ内にはカーソルのスクリーン上た，チュートリアルのプログラムは Win32API を用いておでの Y 座標，Key タグ内には押されたキーの情報が記録さり，Windows 上で動作する．

れる．

3.2.1 マウスの動きを記録する機能3.2.2 チュートリアルを再生する機能

本システムではソフトウェアの操作方法のデモンストレ

マウスの動きを記録した XML 形式のファイルを元にチーションを記録することによってチュートリアルを生成すュートリアルを再生する．マウスボタンを使用しなければるために，デモンストレーション中のマウスの動きを記録ならない操作が出現するまで，カーソルの座標移動は HSPする処理を実装した．の mouse 命令によって自動的に制御される．マウスボタン

マウスの状態は HSP の await 命令を用いて 5 ミリ秒ごとを伴う操作が出現したとき，カーソルの動きを停止し，ユに記録され，最終的に XML 形式で別ファイルとして保存ーザがそのマウス操作を行うまで先に進まない．カーソルされる(図 3)．Msg タグ内には押された，また離されたマウの座標移動が自動的に制御されている間，HSP の comput 命

スのボタンの情報が記録される．マウスの左ボタンが押さ令を用いて G コードで XY ステージを制御し，カーソルの図 3 マウスの動きの記録データ
Figure 3 Mouse movement record.

© 2017 Information Processing Society of Japan218

情報処理学会 インタラクション 2017
IPSJ Interaction 2017(a)1-510-29
2017/3/2(b)図 4 チュートリアル中に示されるマウス操作の例 (a)左ク

図 6 実験で被験者が作成したテープケースリック (b)左ドラッグ

Figure 6 Scotch tape case users made in the experiment.

Figure 4 Examples of mouse operations displayed in the tutorial.
(a) Left click. (b) Left drag.

7654
321
2.00 5.00

2.33 6.67

3.67 7.00

5.00 3.67

4.00 5.00

流れに従って進めやすい

集中しやすい内容が理解しやすい

0
マウスボタン操作が カーソルの動きが分かりやすい
目で追いやすい動画

提案手法

図 7 アンケート結果(7 段階のリッカート尺度)
Figure 7 Questionnaire result (7-Likert scale).
図 5 実験風景
Figure 5 Experiment environment.

4.2 実験手順
PC 操作に習熟した 20~22 歳の大学生 6 人(男性 6 人)に対動きと同期してマウスも自動的に移動する．また，ダブルして実験を行った．被験者のうち 3 人には動画のチュートクリックの判定は，Win32API の GetDoubleClickTime 関数

リアルを行わせ，残りの 3 人には本システムを用いたチュを用いて得られる時間内に同じ座標で 2 回のマウスのボタートリアルを行わせた．本システムを用いたチュートリア

ンダウンが行われたかどうかを基準とする．

ルの実験風景を図 5 に示す．動画の再生には Windows Mediaマウス操作が出現しカーソルの動きが停止している際，Player を用い，再生の停止や巻き戻しなどの全ての操作をStencils-Based Tutorials[9]の装飾を参考とし，カーソルの座許可した．実験のチュートリアルは，モデリングソフトウ

標を中心とした円部分以外を半透明のレイヤで覆い，ユーェアである 123D Design を用いて簡単なテープケースを作ザがマウス操作を行わなければならないスクリーン座標を成する内容であった(図 6)．

強調する視覚的な装飾を行った(図 4a)．また，MixT[7]のカ

また，本システムの有用性を確認するために，チュートーソルの動きの装飾を参考とし，ドラッグ操作の軌道は線リアルを実施した後，7 を最高値として 7 段階のリッカーとして残るよう装飾を行った(図 4b)．

ト尺度によるアンケートを行った．アンケートでは 1)マウスボタン操作が分かりやすい，2)カーソルの動きが目で追4. 実験
4.1 実験目的

いやすい，3)流れに従って進めやすい，4)集中しやすい，5)内容が理解しやすい，という 5 つの質問項目を設けた．同時に，本システムを体験した感想を述べさせた．

本システムを用いることによって，従来の動画のチュートリアルに比べてマウス操作の理解を促進することを確かめるために実験を行った．また，本システムの使用感覚や，どのような場面で本システムを使用したいかといった調査

4.3 実験結果
アンケートの回答結果を図 7 に示す．1 要因参加者間分散分析を行った結果，1)マウスボタン操作が分かりやすいを行った．

© 2017 Information Processing Society of Japan219

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

(F1,4=27.00，p<.01)，2)カーソルの動きが目で追いやすい(F1,4=84.50，p<.01)，という 2 つの項目において有意差が見られた．
動画のチュートリアルを行った被験者からは，動画の停止や再生の操作を繰り返し行う必要があり，実際に操作しているソフトウェア画面と動画の間で視線を何度も移動する必要があるため，疲労を感じるといった意見が得られた．
また，動画からはどのマウスボタン操作が行われたのか分かりづらく，マウスボタン操作が行われたタイミングも分かりづらいという意見もあった．
本システムを用いたチュートリアルを行った被験者からは，マウスの動きが分かりやすく，イメージが掴みやすいといった意見があった．マウス操作の中でも特にドラッグ操作の軌道が分かりやすいといった好意的な意見があった．
また，本システムをどのような場面で使用したいか尋ねた
ところ，ビジュアルプログラミング言語・画像処理ソフトウェアなどのマウス操作を多用するものを学ぶ場面が挙げられた．一方で，視覚情報に限定された動画のチュートリアルに比べ，提案手法では物理的な情報を与えるため，一度に与えられる情報量が多く，理解することに集中できないといった意見も得られた．

1-510-29
2017/3/2

6. おわりに本研究では，従来的なチュートリアルではマウス操作の理解が難しいという問題を解決するために，実際のソフトウェア上で自動的に動くカーソルに合わせ，マウスの位置を制御するチュートリアルを提案した．提案手法によって，ユーザは自動的に動くマウスに手を動かされながら，特にマウスの動きを多く用いるソフトウェアの使い方の理解を深めることが期待される．
本システムでは，マウスが常に XY ステージのプロッタ部分に固定されているため，ユーザはマウスを持ち上げて位置を調節するクラッチ操作を行うことができない．今後，ユーザがクラッチ操作を自由に行うことができるように改善する予定である．また，本システムはチュートリアルの対象となるソフトウェア側との連携は行わず，マウスの動きのみを制御している．そのため，チュートリアルを作成したときと全く同じ条件下でチュートリアルを実行する必要があり，一般的に普及させるには難しい．一般的な普及について考えると，実際のソフトウェア上でのカーソルの動きではなく，動画ファイル上でのカーソルの動きに対してマウスを連動させることが考えられる．また，本システ
ムでは XY ステージを使用しており，大規模なシステムとなってしまっている．そのため，例えばマウス自体にモー5. 考察
実験結果から，提案手法はマウスボタン操作の理解を促進することが分かった．これは，マウスの位置が自動的に制御される他に，マウスボタン操作を必要とする場面になると，ユーザが指定のマウスボタン操作を行うまで先に進まないというチュートリアルの仕様になっていることも要因として考えられる．また，提案手法によってカーソルの動きが目で追いやすくなるということが分かった．カーソ
ルの動きと同期してマウスの位置が制御されるため，ユーザは物理的感覚を用いてカーソルの位置を把握できると考えられる．
提案手法では，マウスの位置を自動的に制御することによる物理的な働きかけがあるため，集中することが難しいという意見があった．そのため，動画を見ても分かりにくかった部分だけマウスの位置制御を行うというように，動画のチュートリアルと提案手法を融合させたものも今後検討していく．他に，XY ステージの精度の問題で，カーソルの微細な動きを表現できないという問題があったため，自タを取り付けるなど工夫することによって，低コストで小規模なシステムに改善する必要がある．
本実験では理解の部分を重点的に取り扱ったが，その後のソフトウェアの習熟度や学習的な有用性に関しては取り扱っていない．今後，長期的な実験として習熟度を分析する予定である．また，本実験ではユーザからの意見の定性的分析のみであった．そのため，マウスボタン操作やカーソルの動きに対するユーザの認識を定量的に行うための実験システムを作成する予定である．
本研究ではマウスの動きに着目したが，今後はマウスに着目したチュートリアル手法の改善とともに，タッチパネルやトラックパッドなどを用いた環境での直感的なチュートリアル手法を目指したい．

参考文献
[1]

[2]

然な動きに感じないという意見があった．XY ステージの精度をより高いものにし，本システムを改良する予定である．
また，本実験ではマウス操作を多く必要とするモデリン

[3]
[4]

グソフトウェアを取り上げ実験に用いたが，他のソフトウェアでも使用感覚を確かめる必要がある．

© 2017 Information Processing Society of Japan[5]

山岡潤一, 筧康明: dePENd: ボールペンの強磁性を利用した手描き補助システム, 情報処理学会論文誌, Vol.55, No.4,
pp.1237-1245 (2014).
Bailly, G., Sahdev, S., Malacria, S., and Pietrzak, T.:
LivingDesktop: Augmenting Desktop Workstation with ActuatedDevices, Proc. ACM CHI ‘16, pp.5298-5309 (2016).
Novick, G., Andrade, D., Bean, N., and Elizalde, E.: Help-Based
Tutorials, Proc. ACM SIGDOC ‘08, pp.1-8 (2008).
Li, W., Grossman, T. and Fitzmaurice, G.: GamiCAD: A gamified
Tutorial System for First Time AutoCAD Users, Proc. ACM UIST
‘12, pp.103-112 (2012).
Pangaro, G., Maynes-Aminzade, D. and Ishii, H.: The actuatedworkbench: Computer-controlled actuation in tabletop tangibleinterfaces, Proc ACM UIST’ 02, pp.181-190 (2002).

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

1-510-29
2017/3/2[6]

Park, W., Park, S., Kim, L. and Shin, S.: Haptic Mouse Interface
Actuated by an Electromagnet, Proc. IEEE CISIS ‘11, pp.643-646(2011).
[7] Chi, P., Ahn, S., Ren, A., Dontcheva, M., Li, W., Hartmann, B.:
MixT: automatic generation of step-by-step mixed media tutorials,Proc. ACM UIST ’12, pp.93-102 (2012).
[8] Wang, C., Chu, W., Chen, H., Hsu, C., Chen, M.: EverTutor:
Automatically Creating Interactive Guided Tutorials on
Smartphones by User Demonstration, Proc. ACM CHI ’14,
pp.4027-4036 (2014).
[9] Kelleher, G., Pausch, R.: Stencils-Based Tutorials: Design andEvaluation, Proc. ACM CHI’05, pp.541-550 (2005).
[10] Fernquist, J., Grossman, T., Fitzmaurice, G.: Sketch-Sketch
Revolution: An Engaging Tutorial System for Guided Sketchingand Application Learning, Proc. ACM UIST ’11, pp.373-382(2011).
[11] 樋川一幸，松田滉平，中村聡史: ウェブ上の画像に対する解説アニメーション付与システムの提案，研究報告ヒューマン
コンピュータインタラクション，2016-HCI-169, No.14, pp.1-8(2016).
[12] Pongumkul, S., Dontcheva, M., Li, W., Wang, J., Bourdev, L.,
Avidan, S., Cohen, M.: Pause-and-Play: Automatically Linking
Screencast Video Tutorials with Applications, Proc. ACM
UIST ’11, pp.135-144 (2011).

© 2017 Information Processing Society of Japan221