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

162C74
2016/3/3

タッチパネルにおける円の描画操作に関する検討蟻浪 卓1,a)鈴木 優1,b)

概要：本研究では，タッチパネルで円を描画する最適な手法について検討する．我々は最適な描画手法を明らかにすることで，グラフィックを扱うアプリケーションの利便性を向上させることができると考えた．
円の描画手法を検討する実験を行った結果，最も正確に円を描ける手法は「円の直径の一端をタップし，そこから直径の長さだけドラッグする操作」であることが明らかになった．

An Exploration of the Circle Drawing Method on Touch Panel
Suguru Arinami1,a)Yu Suzuki1,b)

Abstract: In this study, we consider the most appropriate method for drawing a circle on a touch panel. We
thought that revealing the apropriate method makes graphics applications more convinient. We conducted
an experiment to reveal the best drawing method on the touch panel. The result indicated the most precise
method is that: “Tap the end of the direct line, and drag the length of the direct line”, “draw a circlefreehand”, and “Tap the end of the direct line, and drag the length of the direct line” are the condiates ofthe most apropriate method.

1. はじめに

2. 円の描画手法

画像編集ソフトなど，コンピュータ上でグラフィックを我々は，円の数学的特性を基に，次の 5 つの円の描画手扱うアプリケーションの多くには，円を描画するための機法を考えた．図 1 はそれぞれの操作を図示したものである．

能が備わっている．近年ではスマートフォンやタブレッ(a) 円の中心をタップし，そこから半径の長さだけドラッ

ト向けにもそれらのアプリケーションが開発されており，タッチパネル上で指を動かし，図形を描画する操作を行う場面も増加した．円の描画手法には様々なものがあり，アプリケーションによって実装されている手法は異なる．

グする(b) 円の直径の一端をタップし，そこから直径の長さだけドラッグする(c) 円に外接する正方形の任意の角 1 つをタップし，そ描画すべき円の条件によって，適した描画方法は異なる

こから対角までドラッグすると考えられる．そこで我々は，タッチパネルで円を描画す(d) 円周上の任意の 3 点をタップする

る最適な手法を明らかにすることで，グラフィックを扱う(e) フリーハンドで円を描画するアプリケーションの利便性を向上させることができると考

我々はこれらの他にもいくつかの手法を考えたが，実用的えた．本研究の目的は，指でタッチパネルを操作して円をでない，または上記の (a)〜(e) のいずれかに似通っている

描画する場合，どのような操作がより素早く，より適当なと判断し，本論文では扱わなかった．なお，本実験で対象円を描くことができるかを実験により明らかにすることである．
1a)b)

宮城大学
Miyagi University
p1322004@myu.ac.jp
suzu@myu.ac.jp© 2016 Information Processing Society of Japan

(a)

(b)

(c)
図 1

(d)

(e)

各操作の図765

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

162C74
2016/3/3

表 1とする操作は，タッチパネルの基本的な入力であるシングルタッチによるもののみであり，マルチタッチによる入力

描画すべき円と実際に描画した円との差異の度合い
(a)
(b)
(c)
(d)
(e)

(1)

0.758

0.617

-1.223-0.2730.122(2)-0.0170.982-0.964-0.1830.183(3)-1.100

0.739

0.383

0.205

-0.227(4)-0.7590.532-0.764

0.883

0.109

(5)

0.758

0.617

-1.223-0.2730.122

我々は円の描画手法の特性や優劣を分析するため，iPad(6)-0.2880.549-0.8830.281

0.341を用いた実験を行った．実験の対象とした描画手法は，2(7)-0.0750.302-0.638-0.2660.665

平均-0.1030.619-0.759

0.053

0.188

は対象外とした．

3. 円の描画手法に関する実験
3.1 実験の対象となる円の描画手法章で示した (a)〜(e) の 5 つである．

(7) に対応している．なお，差異が小さいものほど表中の3.2 実験のタスク値は大きくなっている．

実験の内容は，2 章で示した 5 つの操作それぞれで，次の 7 種の条件の円を描くというものである．

(1) 赤い点を中心，青い線分を半径とする円（赤い点と青い線分が表示される）(2) 青い線分を直径とする円（青い線分が表示される）(3) 正方形に内接する円（正方形が表示される）(4) 円周が 3 点を通る円（3 つの点が表示される）(5) 青い円に重なる円（青い円が表示される）(6) 手本と同じ円（画面左側の枠に表示される円を右側の枠に描き写す．グリッド無し）(7) 手本と同じ円（画面左側の枠に表示される円を右側の枠に描き写す．グリッド有り）(1)〜(5) の条件は，2 章で示した (a)〜(e) の操作に対応している（例：中心と半径を指定して円を描画する (a) の操

3.5 考察表 1 について，平均値が最も大きい描画手法は (b) であった．また，(1)〜(7) の全ての条件において (b) のものが 1 番または 2 番目に大きな数値であった．このことから最も適当な円を描画することができる手法は，“円の直径の一端をタップし，そこから直径の長さだけドラッグする操作” であると考えられる．問題が表示されてから被験者が円を描画し始めるまでの時間が最も短いのは，“フリーハンドで円を描画する操作” であった．また， 被験者が円を描画し始めてから描画し終わるまでの時間が最も短いのは，“円の中心をタップし，そかから半径の長さだけドラッグする操作” であった．我々はこの 3 つの操作を，タッチパネルで円を描画する最適な手法の候補とした．

作には，(1) の条件が対応している）．これらは，それぞれの制約がある状況下での円の描画をシミュレートしたものである．(6)，(7) は制約の無い状態で，思った通りの位置，大きさの円を描画する場合をシミュレートしている．(6)は円を描画する場所に図や柄などが無い場合，(7) はそれらがある場合を想定したものである．

4. 関連研究
意図した通りの図形を描画する手段についての研究は過去にも行われている．入力された線や図形をコンピュータが解釈し，整形するシステム [1][2] があるが，本研究は入力後の処理ではなく，入力方法そのものに着目しているという点で，これらの研究とはアプローチが異なる．

3.3 評価方法
この実験から得られるデータは次の 3 種類である．

• 描画すべき円と実際に描画した円との差異の度合い• 問題が表示されてから被験者が円を描画し始めるまでの時間• 被験者が円を描画し始めてから描画し終わるまでの時間
被験者それぞれのデータを，3.2 節で示した条件ごとに

5. まとめと今後の展望
我々は，タッチパネルで円を描画する最適な手法を明らかにするための実験を行った．実験の結果から，“円の直径の一端をタップし，そこから直径の長さだけドラッグする操作”，“フリーハンドで円を描画する操作”，“円の中心をタップし，そこから半径の長さだけドラッグする” の 3つを最適な手法の候補であるとした．今後は，実験結果を詳細に分析していく．

標準化し，その結果について，被験者全体の平均を求める．
この結果と実験の様子を記録した映像，実験後に被験者に参考文献

対して行ったアンケートの 3 つを分析に用いる．

[1]

3.4 実験結果[2]

表 1 は，描画すべき円と実際に描いた円との差異の度合

五十嵐 健夫，河内谷 幸子，松岡 聡，田中 英彦：正確な図を描くことのできる描画システム，全国大会講演論文集，pp.425–426（1997）
松田 浩一，近藤 邦雄：手書き図形入力のための時系列情報を利用した逐次清書法，全国大会講演論文集，pp.594–601（1999）いについての結果である．表の列は 2 章で示した描画手法(a)〜(d) に対応しており，行は，3.2 節で示した条件 (1)〜© 2016 Information Processing Society of Japan766