WISS2014

操作の気持ち良さを再現するためのインタラクティブアニメーション分析
ツール
大島 裕樹

宮下 芳明 ∗

概要. 本稿では，ソフトウェアにおける「気持ち良い」操作感を定量的に分析するためのツールを提案する．多くのソフトウェアではユーザの操作に対応してインタラクティブにアニメーションが再生され，操作感に大きな影響を与えている．そして優れたアニメーションは，ユーザに気持ち良い操作感をもたらしている．提案する分析ツールは既存のアニメーションをキャプチャし, フレームごとの動作を定量的に記録するものである．ユーザは記録を通して気持ち良いとされる操作を分析し，自身のプログラムで再現することができる．本稿では実際に，アプリケーション内のスクロールアニメーションや，アクションゲームにおけるジャンプアニメーションの分析を行い，ツールを用いた定量的分析が有用であることを示した．

はじめに

1

「スーパーマリオブラザーズ」[1] におけるジャンプの軌跡は，実は単純な放物線になっていない．
そのため，放物運動として模倣したアクションゲームを作っても，マリオのジャンプにおける「気持ちよさ」は再現できない．ゲームに限らず，たとえばiPhone のスクロールなど，あらゆるアプリケーションにはインタラクティブなアニメーションが設定されている．しかし，プログラムとしてそこにどのような処理やパラメータ設定がなされているのかは，動作を眺めたり操作したりするだけでは気付くことが難しい．本稿ではユーザの操作に応じた動作「インタラクティブアニメーション」を記録・分析するツールを提案する (図 1)．これによって、アプリケーションにおける操作感の再現や，操作における「気持ち良さ」の解明が可能になる．

1.1

気持ち良い操作感

コンピュータやスマートフォンなどのデバイスに触れる上で，操作に対応したアニメーションは欠かせない．ページのスクロールやズームが自然に感じるのも，操作に対して適切なアニメーションが割り当てられているからである．筆者らはこれまで，インタラクティブアニメーションの分析と再利用を目的としたツールを提案してきた [2]. 本稿ではこのツールをさらに発展させ，定量的分析を通して優れた操作感の分析を行う．
インタラクティブアニメーションはユーザの操作感に大きな影響を与える．操作時に感じるサクサク∗Copyright is held by the author(s).
Yuki Oshima, 明治大学大学院理工学研究科新領域創造専攻ディジタルコンテンツ系, Homei Miyashita, 明治大学大学院理工学研究科新領域創造専攻ディジタルコンテン
ツ系, 独立行政法人科学技術振興機構, CREST

既存のプログラム
記録

分析ツール
分析・理解

新しいプログラム
再現・改良

ユーザ

図 1. 分析ツール概要

感やヌルヌル感は，適切にアニメーションが割り当てられているために感じるものである．逆に必要以上に鈍重なアニメーションなどが割り当てられていれば，ユーザはもっさりとした操作感を味わうことになり，快適な操作からは遠ざかってしまう．
渡邊は気持ちの良いインタラクションデザインに関して，道具の「透明性」と「自己帰属感」が重要であると述べている [3]．例えば iPhone 操作の気持ち良さは，直接操作しているかのように指の動きに画面が滑らかに連動するためであり，意識しなくても操作可能な透明性によるものであると述べている．
この気持ち良さの定義はタッチスクリーン上の操作に限ったことではなく，マウスカーソルとマウスの関係や，ゲームコンテンツとゲームコントローラの関係についても同様のことが言える．
操作に対するアニメーションは，対象が自己帰属していると感じさせる上で非常に大きな働きをしている．しかし，ただ似たアニメーションを実装しただ
けでは操作の気持ち良さの再現はできない．iPhoneの例で述べられたように，重要なのは入力に対する

WISS 2014

アニメーションがユーザに自己帰属感を与えることであり，アニメーションの挙動だけを似せても気持ち良い操作感は得られない．筆者らは過去の研究でインタラクティブアニメーションの記録と再利用を試みてきたが，気持ち良い操作感を実現するためにはユーザの入力とアニメーションの関係をより深く分析する必要がある．本稿で新たに追求するのは，これまで存在してきたインタラクションデザインに定量的分析による知見を付加することである．GUI
やゲームコンテンツの操作からアニメーションと入力状況を記録し，定量的に分析することで気持ち良い操作感を再現可能にする．

1.2

完成されたプログラムの分析支援

アニメーションを伴う GUI が広く扱われる現状に対して，より良い GUI を構築するためにはユーザの操作への理解が重要である [4][5]. そして理解を深めるためにはまず既存の環境に触れる必要がある．
GUI にアニメーション技法を取り入れる思想は古くから存在しており，アニメーションの導入により動作に関する情報を簡潔に伝えることができるとされている [6]．また GUI の進化の過程で，どの操作にどのアニメーションを割り当てるべきか，改善が行われてきた [7]．こうして過去に評価され，現在まで参考にされ続けてきたインタラクティブアニメーションには，ユーザに気持ち良い操作感をもたらす要素が含まれている．しかし，それらのアニメーションは多くのユーザにとって「完成されたプログラム」として見る機会しかなく，どのようなアルゴリズムで動作しているかは想像するしかなかった．分析ツールが目指すのは，そのようなブラックボックス化したインタラクティブアニメーションを，プログラマが再利用できるように記録と分析をすることである．
本稿ではコンピュータの操作に加えて，ゲームコンテンツを分析対象として議論する．操作に反応して画面内のキャラクターなどが動くという点で，ゲームコンテンツはインタラクティブアニメーションが多量に用いられたコンテンツと言える．ゲームコンテンツを制作する場合にも，既存作品の動きを模倣することは珍しくないが，直にソースコードを見る機会はほとんどない．そのため GUI と同様にゲームコンテンツの分析も価値のあることである．
ゲームコンテンツにおけるキャラクターの挙動はコンテンツの質に直結する．移動速度やジャンプの挙動，キー入力に対する反応速度などを適切に調整しなければ，操作していて気持ち良いゲームコンテンツは生まれない．Bret Victor によるコンセプト
ビデオ [8] においては，プログラムのパラメータに応じてゲーム内のキャラクター挙動を推測する手法が示されており，ゲームコンテンツにおけるパラメータ調整の重要さと，既存環境での調整の難しさを物語っている．ストレスを感じない移動速度はどの程度か，適切なジャンプ力はどれくらいか，これらの議論は過去のゲーム作品の中でも行われてきたはずである．そして，多くの人に親しまれている過去の名作におけるキャラクターの挙動は，それらの議論に対する一つの解答であり，困難な調整の末に完成されたパラメータとして大きな価値がある．
過去の優れた GUI やゲームコンテンツに対して，インタラクティブアニメーションを分析することは，より良いコンテンツを生み出すために必要不可欠である．本稿で提案する分析ツールは，アニメーションの分析に対して有用に働くと考えている．

2

提案する分析ツール

本稿で提案する分析ツールは，インタラクティブアニメーションをキャプチャして動作の軌跡を視覚化し，アニメーションの軌跡を数値として出力するものである．ここでは定量的分析のための機能について，ゲームコンテンツの分析を例に挙げて述べる．

2.1

分析する領域の指定

インタラクティブアニメーションを定量的に分析するためには，動作している部分を指定してキャプチャする必要がある．記録領域の指定には領域指定フレームを使用する．フレームは一般的なウインド
ウと同様に移動とサイズ変更が可能で，必要に応じて調整できる．キャプチャはディスプレイに表示された内容に対して行われるため，分析対象を前面に配置するのが前提となる．またツールは指定領域外の動作は記録しないが，これは指定領域内で起こるアニメーションの分析を最も効率よく行うための配慮である．ツールが目的とするのは，ユーザが存在を認知できているアニメーションの分析である．指定した領域はプレビューとしてツール上に表示され，同時に画像差分によるアニメーション検出の様子もプレビュー表示される (図 2)．
プレビューウインドウ

指定領域プレビュー
前フレームとの差分

キャプチャフレーム
分析するプログラム

図 2. キャプチャフレームとプレビュー

操作の気持ち良さを再現するためのインタラクティブアニメーションの記録と定量的分析

2.2

分析範囲の一列配置記録

アニメーションを分析するためには，実際の挙動を観察する必要があるが，連続して動いている様子を見るだけでは正確なアニメーション把握には不十分である．分析ツールでは，指定領域内でキャプチャした画像を，一列に並べることで動作を視覚的に記録する．予め領域指定がされているため，システムには一列に並べるのに適した画像が保持されており，後からの細かな調整は不要である．
上下に移動するアニメーションに対しては横に並べ，左右に移動するアニメーションに対しては縦に並べることで，アニメーションをフレーム毎の軌跡として記録することができる (図 3)．記録した内容はツール上に保持される他，数値データとして csv形式で出力される．

記録済みフレーム数と最大キャプチャ数

動作を一列に並べて軌跡を視覚化

跳躍時間の差が視覚的に分かる
フレーム毎の高度を比較できる
図 4. 静止画による比較が有効なケース

画像と並べて表示する (図 5)．提案ツールがリアルタイムでのキャプチャを取り入れたのも入力状況の記録のためであり，録画からでは分からない情報を得ることができる．ユーザは分析に必要なキーを指定することで，視覚的に入力状況とアニメーションの関係を確認することができる．また，マウスによる操作やタッチパネルによる操作を記録する際には，カーソル座標なども合わせて記録する．

図 3. 一列配置でのアニメーション記録

フレームごと動作の様子を並べることで，移動量や加速度を視覚的に認識することができ，アニメーションの挙動をより正確にユーザに伝えることができる．実際の描画内容を記録することで，コンテンツ内のグラフィックによる表現も記録することができ，移動の軌跡だけでは生み出せない操作感の分析にも繋がる．画像としての記録の他に，フレーム間の画像差分から対象が移動した方向と距離，加速度を数値として記録しており，アニメーションを自作プログラムに再利用する際にはこの数値を用いて近似した関数を生成する．同系統のアニメーションの差を検証する際には，静止画による比較が有効である (図 4)．GUI であれば，OS の違いやソフトウェアの違いによる微妙な差を検証することができ，ゲームコンテンツであれば運動性能の比較や，アクションに要する時間の差などを検証することができる．

2.3

入力状況の記録

インタラクティブアニメーションは，ユーザの操作に対して行われるアニメーションである．気持ち良い操作感を分析するためには入力と動作の関係が重要であり，入力の長さによる挙動の変化や入力から実際にアニメーションするまでの時間などを知るために，入力状況の把握は不可欠である．分析ツー
ルでは，アニメーションの記録中のキー入力を監視し，入力があったフレームが分かるようにキャプチャキーが入力されていた時間を表示
図 5. アニメーションに対する入力状況

2.4

一方向に限定されないアニメーションの記録

ゲームコンテンツにおけるダッシュジャンプのように，縦方向と横方向のアニメーションが組み合わさった動作に対しては，フレーム毎に記録する位置を調整して対応をする．ユーザはアニメーションする範囲を予想してキャプチャフレームの範囲を決定する．全体キャプチャ範囲の他に，分析対象に合わせて 1 フレーム辺りの記録サイズを指定することができ，キャプチャ時には 1 フレーム毎に隣り合う領域を記録して，軌跡を作成することができる (図 6)．
ダッシュジャンプの例を考えると，跳躍開始地点と着地地点を含むようにキャプチャフレームを配置すれば良い．この場合横方向の移動は等速とは限らず，フレーム毎に記録位置がずれるが，これは分析ツール側で調整できる．ユーザの手間は増えるが，

WISS 2014

1 フレーム辺りの記録領域キャプチャフレーム

䝇䜽䝻䞊䝹㊥㞳㻔䝢䜽䝉䝹㻕て行った (図 8)．スクロールは単純な等速移動や当加速度移動では行われておらず，数値データから検証した結果，残りの移動距離に応じてフレーム毎の移動量を決めていると推測できた．
50040030020010000

図 6. 動作方向が限定できない場合のキャプチャフレーム

3

アニメーション分析例

ここでは，ツールによるインタラクティブアニメーションの分析例を挙げる．現在分析ツールは Windows 上で実装されているため，分析対象は Windows 上で動作するものに限定する．AndroidOS やiOS 上でのアニメーションに関しては，エミュレータやミラーリングによりツールの使用が可能であるが，実機上での動作を十分に再現できていないと判断したため，今回は分析対象から除外した．

3.1「Word 2013」における滑らかなスクロールアニメーションの分析

Word 2013 などの一部のソフトウェアではペー
ジアップ・ダウンキーを押した際にスムーズなスクロールアニメーションが実行される．ここではスクロールに対してツールによる分析を行った．文章に対して記録を行う場合は，スクロール範囲に適当な文字を入力し，その文字の動きを記録する (図 7)．

0.2

᫬㛫㻔⛊㻕

0.3

図 8. ページスクロール時の座標変化「スーパーマリオブラザーズ」におけるジャンプアクションの分析

3.2

ゲームコンテンツ内のアクションは，操作の快適さのために現実の物理法則からかけ離れた動作をすることがある．例えば多くのアクションゲームで当たり前に行われている空中での左右移動は，現実世界では非常に困難な動作である．今回は一例として，
一見自然な動きに見えるスーパーマリオブラザーズ
におけるジャンプの分析を行った．
記録は垂直にジャンプするマリオに対して行う．
記録領域は横幅をマリオ 1 人分，縦幅を接地時の足元からジャンプ頂点での頭頂部までとした．ジャンプボタンは跳躍開始から着地まで押し続け，最高高度でのジャンプを分析する．測定は 10 回のアニメーションを行った平均を用い，得られた平均値をグラフ化して動作の特性を考察した (図 9)．
80䝆䝱䞁䝥㧗ᗘ㻔䝢䜽䝉䝹㻕

複雑に速度を変化させるアニメーションに対しても，一方向の成分のみを抽出した記録を行える．

0.1

y = -0.6426x 2 + 14.678x -14.192

7060504030
201000.0

スクロール範囲でキャプチャ
分析用に入力した文字

図 7. スクロールの記録環境

分析は，ページダウンキーを入力した際のアニメーションを 10 回繰り返し，平均値をグラフ化し0.1

ศᯒ⤖ᯝ

0.2

0.3

㏆ఝ䛧䛯ᨺ≀⥺

0.4

0.5

0.6

0.7

0.8

᫬㛫㻔⛊㻕

図 9. マリオのジャンプの軌跡

グラフは接地時の座標を基準としてジャンプの高度推移を示したものであるが，単純な放物運動でないことが確認できる．ジャンプの頂点を境に運動が変化していることから，上昇時と下降時で異なるアルゴリズムが作用していると推測できる．理由は推測の域を出ないが，着地点の制御や敵を踏みつける快感などを求めるマリオのゲーム性において最善とされたのがこの軌跡なのではないだろうか．比較と操作の気持ち良さを再現するためのインタラクティブアニメーションの記録と定量的分析

して最新作である「New スーパーマリオブラザー
ズ U」におけるジャンプを分析した (図 10)．グラフから分かるように，最新作においてもマリオのジャンプの軌跡が健在であり，マリオのジャンプの気持ち良さがこの軌跡に込められていると考えられる．

䝆䝱䞁䝥㧗ᗘ㻔䝢䜽䝉䝹㻕180

y = -1.4021x 2 + 33.798x - 36.927

160
140
120
100
80
60
40
2000ศᯒ⤖ᯝ

0.1

0.2

0.3

㏆ఝ䛧䛯ᨺ≀⥺

0.4

0.5

0.6

0.7

0.8

᫬㛫㻔⛊㻕

図 10. 最新作におけるマリオのジャンプの軌跡

4

関連研究

プログラムの分析を試みた研究として，Andrew
らの Whyline がある [9]. これはプログラミングにおけるデバッグ作業の効率化を目的としたシステム
で，実行時の動作に対して質問を選ぶことで，ソースコードの該当箇所を示すものである．本稿で提案する手法は，ソースコードにアクセスできないプログラムに対しての使用を想定しているが，実行時の動作を元に分析するという思想は一致している．GUI
改善のための分析ツールとしては，森らの研究が挙げられる [10]．この研究では操作分析のために大量の履歴を記録し，再生する機能を備えている．操作
内容は経過時間を横軸としたグラフ上に記録をしており，時間軸に対応して操作内容記録は本稿の分析ツールにも用いられている．
プログラミング支援の観点から，外部環境の動作を利用した開発環境の提案が多数存在する．カメラから動作を取り込み，実装に活用した研究として
Kato らの VisionSketch が挙げられる [11]．これは動画の指定領域の変化を記録し，画像処理を行うシステムであり，処理の結果をプログラムに組み込むことで簡単に動画や画像をベースにしたプログラムを実装できるものである．本稿の分析ツールでは，GUI やゲームコンテンツを記録の対象にしているが，対象物の特定領域に対して記録を行うという点で共通している．また機能の一つに，指定領域内の様子を一列に並べてタイムラインのように表現するものがあり，領域内の変化を時間軸に対応させて視覚化する手法は提案する分析ツールでも取り入れている．同様にカメラからの入力を扱った開発環境として Picode がある [12]．Picode ではロボットの姿勢制御のように，ソースコードから実行内容を全く連想できない事態に対して，写真を組み込むことで情報の視覚化を試みている．Fukahori らの CapStudio
では，実行画面のプレビューを用意し，リアルタイムにパラメータを調整する開発環境を実現している[13]．本稿の分析ツールは過去のインタラクティブアニメーションを，そのまま記録して再利用するものであるが，記録元のパラメータを直接利用することが最適とは限らない．パラメータを変化させた際の挙動を確認する上で，CapStudio で取り入れられた対話可能なプレビューの導入は有効であり，分析ツールにも機能のひとつとして取り入れている．
Jeremy らの PhysInk は，ゲームデザイナーなどにとって日常的に行われている物理的な動作の記述を支援するツールである [14]．PhysInk では物体の動作はタイムライン上で管理されており，特定の時間に移動した後に軌跡を書き足すことでそれ移行の挙動を変更でき，時間を指定して後の挙動をシミュ
レーションする思想は分析ツールでも取り入れている．提案する分析ツールでは，フレーム毎の内容を入力状況と合わせてタイムライン上に配置している．
フレームに対して入力を設定することで，挙動のシミュレーションを実現する．

5

おわりに

本稿では，インタラクティブアニメーションを分析するツールを提案し，実際に二次元空間上でのアニメーション分析を行った．GUI におけるアニメーションを分析する思想は今後も必要とされていくと考える．コンピュータの普及以来，操作の要となるGUI は進化してきたが，二次元空間に配置されたウインドウやアイコンにカーソルでアクセスするという環境に大きな変化はない．多くのユーザに慣れ親しまれた環境が継続する限り，過去の気持ち良いとされたインタラクティブアニメーションの分析には価値があり，再現が求められる機会は必ずあると考える．近年はタッチ操作に対応したデバイスも増加し，気持ち良い操作感の解明はより重要視されていくと考える．
一方でゲームコンテンツに関しては GUI とは異なる境遇にある．現在のゲームコンテンツは三次元空間上で展開されるのが当前になっており，環境の差から過去の名作における動作を取り入れる余地はないように見える．しかし直接の利用は難しくても分析結果を活かす機会はある．気持ち良いジャンプや快適な移動速度は，環境が変わっても考察が求められるものであり，二次元のコンテンツで得た知見を，三次元のコンテンツで活かすこともできるのではないだろうか．より良いインタラクティブアニメーションを生み出すためには，過去に評価されてきた動作を分析することが重要である．提案するツールはその分析に貢献できると考える．

WISS 2014

参考文献
[1] 任天堂. スーパーマリオブラザーズ. 1985.
[2] 大島 裕樹, 宮下 芳明. インタラクティブアニメーションの分析・再利用のためのツール. エンタテイ
ンメントコンピューティング 2014 予稿集, 2014.
[3] 渡 邊 恵 太. iPhone は な ぜ 気 持 ち が よ い のか？. http://www.tel.co.jp/museum/magazine/
human/120709 topics 02/.
[4] Sarah A. Douglas, Anant Kartik Mithal. The effect of reducing homing time on the speed of afinger-controlled isometric pointing device. CHI’94 Proceedings of the SIGCHI Conference on
Human Factors in Computing Systems, pp.411416, 1994.
[5] I. Scott MacKenzie, William Buxton. Extending Fitts’ law to two-dimensional tasks. CHI ’92
Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 219-226,
1992.
[6] Bay-Wei Chang, David Ungar. Animation: fromcartoons to the user Interface. UIST ’93 AdfunctProceedings of the 6th annual ACM symposium
on User interface software and technology, pp.4555, 1993.
[7] Patrick Baudisch, Desney Tan, Maxime Collomb,
Dan Robbins, Ken Hinckley, Maneesh Agrawala,Shengdong Zhao, Gonzalo Ramos. Phosphor: explaining transitions in the user interface using afterglow eﬀects. UIST ’06 Proceedings of the 19th
annual ACM symposium on User interface software and technology, pp.169-178, 2006.
[8] Bret Victor. Inventing on Principle. http://vimeo.com/36579366.

未来ビジョン
どんなインタラクティブコンテンツも，いずれは過去のものとなる．そうして消えていく
宿命の中で，せめて残していくべきなのは，開発の際に見いだされ，そのコンテンツに内在する「操作感の知見」だと考えている．技術革新が進めば進むほど，過去のデバイスに触れる機会は少なくなり，ゲームのようなソフトウェ
アも，再生可能な環境が失われていく．スマー
トフォンの OS やアプリも，アップデートが頻繁に行われ，いつの間にか新しいものにすり替わっていく．様々なものが失われ，取り返しのつかない過去のものになる前に，私たちはそのインタラクティビティに関する知見を引き出し，残し，積み重ねられるようにしなければならない．本稿で提案した分析ツールやその思想は，今日の優れたコンテンツが過去のものとなる未来にこそ，必要なものであると考えている．

[9] Andrew J. Ko, Brad A. Myers. Debugging reinvented: asking and answering why and why notquestions about program behavior. ICSE ’08 Proceedings of the 30th international conference on
Software engineering, pp.301-310, 2008.
[10] 森孝 弘, 西田 知博, 斉藤 明紀, 都倉 信樹. 大量の GUI 操作履歴を分析するための走査・再生ツール. 情報処理学会研究報告. HI, ヒューマンインタ
フェース研究会報告 vol.96, pp.1-8, 1996.
[11] Jun Kato, Takeo Igarashi. VisionSketch: integrated support for example-centric programmingof image processing applications. GI ’14 Proceedings of the 2014 Graphics Interface Conference,
pp.115-122, 2014.
[12] Jun Kato, Daisuke Sakamoto, Takeo Igarashi.
Picode: inline photos representing posture datain source code. CHI ’13 Proceedings of theSIGCHI Conference on Human Factors in Computing Systems, pp.3097-3100, 2013.
[13] Koumei Fukahori, Daisuke Sakamoto, Jun Kato,Takeo Igarashi. CapStudio: an interactive screencast for visual application development. CHI ’14
Extended Abstracts on Human Factors in Computing Systems, pp.1453-1458, 2014.
[14] Jeremy Scott, Randall Davis. Physink: sketching physical behavior.UIST ’13 Proceedings of the26th annual ACM symposium on User interface
software and technology, pp.9-10, 2013.

残念ながら現状では，知見の積み重ねによる改良が不十分なまま配信されるコンテンツも多い．見栄えの良いアニメーションや演出によって操作感が犠牲となるケースも，ユーザ視点でたくさん見つけられてしまう．本来であれば他社製品であろうとその操作性を調査し，より良いインタラクションを追求すべきである．
しかし，その必要性が浸透する段階にすら達してはいない．そういった意味でも，声を大にして分析支援ツールの意義を叫ぶ必要がある．
コンテンツの分析が手軽になれば，それだけ知見の積み重ねも促進され，あらゆるインタラクティブコンテンツがより良い操作感をもつはずである．
知見の積み重ねを怠り，気持ち良い操作感から遠ざかった挙句，原点回帰の名のもとに過去の操作手法に立ち戻るようでは，コンテンツの操作性はいつまでも前に進まない．本稿がインタラクティブコンテンツにおける知見の継承についての議論につながることを願う．