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

2-6F-072017/3/2

往復を前提とした一時的スクロール手法の提案
高田 勝也1

宮下 芳明1

概要：ページ内の別の位置にある文章や図を，一時的に参照したい場合がある．このとき，多くの場合はスクロールによってページ内を往復することによって解決する．本研究ではスマートフォンにおける新しいスクロール手法として，往復を前提とした一時的スクロール手法を提案する．従来のフリックによるスクロールとは別に，画面に円を描く動作によってスクロールを行う．この場合のみ指を離すとスクロールを開始した位置へ自動でページが移動する．これにより，従来のフリックによるスクロールでは往復する必要があるようなスクロール動作を，片方向のスクロールのみで完了することができる．

Proposal of Temporary Scroll Method on the Premise of Backward
Scrolling
KATSUYA TAKADA1

HOMEI MIYASHITA1

Abstract: It is necessary to refer to sentences and diagrams at diﬀerent positions in the page when you
read long document. In many cases, it is solved by going back and forth within the page by scrolling. In
this paper, We propose a temporary scrolling method assuming round - trip as a new scrolling method insmartphone. Apart from flick scrolling, scrolling is performed by drawing a circle on the screen. In thispaper, the page automatically moves to the position where the scroll is started at the timing when the finger
is released. It is possible to complete the scroll operation requiring reciprocation by scrolling with normal
flicking by scrolling in one direction.

1. はじめにフォンで使用されているスクロール手法である．フリックの特徴として，指を画面から離したあともしばらく画面がウェブページなど縦に長いコンテンツを閲覧する手法と動き続けるという点がある．これによって動く幅はスマーしてスクロールがある．これにより，ユーザがページ内をトフォンの機種やウェブページによって異なる．また，指スムーズに移動することができる．スクロールはデスクが画面に触れている状態で操作しているときは，指を動かトップやノート PC のウェブブラウザやエクスプローラなした方向・幅と同じ方向・幅で画面が動くため，ページ内ど，多量のコンテンツを管理・閲覧する手法として使用されの情報を自然に追うことができる．次に，円を描くようにてきた．近年，スマートフォンの登場によって，スクロー

指をスライドさせるリングという手法がある．リングはルはより注目される操作となった．小さな画面上でも快適

iPod などの一部電子機器で使用されてきた．物理デバイスな閲覧を行えることは，スマートフォンの操作において重を基本としていたが，画面に円形のコントローラを描画す要なためである．これらのことからも，スクロールを快適ることでタッチインタフェースでも使用できるスクロールにすることはウェブページの快適な閲覧に多く貢献する．

手法として注目されている．リングの特徴としては，画面近年これらの操作手法において注目されているスクローに指を置いたままスクロールを無限に続けることができる

ル手法が二つある．まず，直線に指をスライドさせるフという点である．フリックでは長いページを閲覧する際，リックという手法がある．フリックは現在多くのスマートスマートフォンの画面端まで指を動かした時一度指を離し

1

明治大学総合数理学部先端メディアサイエンス学科
Department of Frontier Media Science, Faculty of Interdisciplinary Mathematical Sciences at Meiji University© 2017 Information Processing Society of Japanて再度画面に触れるといった動作を繰り返す必要がある．
リングにおいては回転動作を画面内で行い続ければ，画面417

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

2-6F-072017/3/2の動きの少なさに着目し，円形スクロールによる操作手法

Radial Scroll Tool を提案した．Moscovich らは円形スクロール Virtual Scroll Ring を作成し，マウスとタッチパッドで操作した場合の性能を評価した．Tu らは小型端末において円形スクロールとフリックによるスクロールの操作時間の比較を行った [3]．これらの研究からは，スクロールを行う距離によって操作手法の有意性が変化することが示されている．

図 1

論文の一部分（左）とその後（右）Fig. 1 Part of paper

2.2 小型デバイスのスクロール手法に関する研究
携帯電話やスマートフォンなどの小型デバイスでは，情報の閲覧方法としてスクロールが採用される場合が多い．

端などの障害物に接触しない．よって，画面から指を離さそれらのスクロールに関する研究も多く行われている．椎ず無限にスクロールを行うことができる．

尾はデバイス自体を移動させることによってデバイスの画

スクロール動作はフリック，リングの他，スクロールバー面をスクロールする手法を提案した [4]．椎尾らはまた，ボ自体を用いる場合や，ページの先頭，最後尾にすぐさま移タンによって操作内容を切り替えるインタフェースを開発動する機能などがある．これらのスクロール手法は，主にした [5]．Baudisch らはページ内の不要なコンテンツを消早さによって評価され，ページ内の閲覧を快適にするため去することにより，小画面のデバイスでもスムーズな情報用いられる．本研究ではスクロールを必要とする状況の中の閲覧を行う Collapse-to-Zoom を提案した [6]．前川らはでも一度閲覧した場所をもう一度閲覧し，その後ページの携帯電話などのモバイル端末において，Web ページ内を自閲覧を続けるため元の位置に戻るという場合を想定する．

動でスクロールし閲覧する手法を提案した [7]．スマート

例えば，図や表を含んだ論文をスマートフォンで閲覧する

フォン上でのスクロール手法は，手の疲労の考慮する傾向場合があげられる (図 1)．論文では，実験データをもとにや小型であるが故の動作を用いる傾向がある．また，小型考察や議論が行われている場合も多く，ページをまたいでということもあり，デバイス自体を保持して行う動作を前資料を参照する場面が想定される．この「ページ内を読み提としている場合が多い．

進めている途中，一度見た情報を閲覧するため逆方向のスクロールを行ったのちもとの位置に戻る」，という行動を

2.3 PC 上でのスクロール手法に関する研究「一時的スクロール」と定義する．本研究ではこの「一時的通常のデバイスにおいても，情報の閲覧を効率化するたスクロール」に着目して新たなスクロール手法を提案する．

めの様々なスクロール手法が提案されている．大和らは視本研究では，ユーザが使用する新たなインタフェースと線を用いることでテキストウィンドウを自動でスクロールして，フリックとリングの要素を組み合わせたスクロールするインタフェースを提案した [8]．五十嵐らはスクロー手法を提案する．提案手法において，ページを読み進める

ル速度によってページ全体の倍率を変化させ，文書全体のためのスクロールはフリックで行う．過ぎてしまった図や把握を支援する手法を提案した [9]．小林らはマウスカー

文章などの情報にアクセスする場合，リングによるスクソルの位置によって挙動を変えるスクロール手法であるロールを用いてその位置までスクロールする．このとき，More Wheel を提案した [10]．土田らは画面に表示されたスクロールの開始位置が記録される．スクロールによって円を動かすことにより，レバーを傾けるような動作でスク情報の閲覧が完了したのち，指を画面から離すと記録されロールを行うレバースクロールを提案した [11]．Malacria

たもとの位置へと戻る．これにより，ユーザは本来往復のらは Edge-scrolling を用いて現在のフリックに近いよう双方向で行う必要がある一時的スクロールを片方向のみのなスクロール手法をタッチパッド上で作成している [12]．

動作で完了させることができる．

溝口らはページ全体の概観を画面横に表示する Overview

2. 関連研究2.1 円形スクロールに関する研究

Scrollbar を開発し，その性能と問題点の調査を行っている [13]．Hwang らは内容によって自動で速度を変化させ，ズームを行う Contextual Drag を提案した [14]．Cockburn

一般的なスクロール手法であるフリックとは別に，円をらは全てのページをサムネイル表示することにより，ペー描くような動作によってスクロールを行う手法に関していジ移動と探索の高速化を図った Space-Filling Thumbnails

くつかの研究が行われている．Smith，Moscovich らは従を提案した [15]．また，Lee らは高速なスクロール下で目に来のスクロールに代わるタッチインタフェース上での円留まった文章や図から，内容を把握していくスキム・リー

形スクロールの手法を提案している [1], [2]．Smith らは手ディングを支援するシステムを作成している [16]．これら© 2017 Information Processing Society of Japan418

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

1. 円の左端にしたい部分に指を置く

2. 横にスライドする

2-6F-072017/3/2

3. 円が表示される

図 2

4. 円に沿って指を動かしスクロールする

5. 指を離すとスクロールする前の位置に戻る

操作方法

Fig. 2 Operation procedureの手法はスクロールそのものをサポート，あるいはスクロールに加えて新たな操作を提示している．特徴的な部分をシステムによって定め，省略ないし強調することによってスクロールを支援するものもある．しかし，これらの研究において，捉えることのできる情報はシステムによって定められた一部の図やタイトルのみである．特徴的ではな
いがユーザにとって気になった部分，または読み進めた後始点終点で気になった部分へ戻ることは想定されていない．本研究では一時的スクロールという概念を用いることによって，より操作者の任意の場所へスクロールできる手法を提案する．

3. 提案手法
3.1 提案手法の操作提案手法の一連の操作を図 2 に示す．本手法を起動させ回転によるスクロールに変化させるには，横方向へのスライドを用いる．スライド後に図 3 のように円が現れ，回転によるスクロールが行えるようになる．このとき，円の位

図 3 起動方法

置はスライドを始めた位置によって決定する．円の大きさ

Fig. 3 How to startはあらかじめ決められており円周が画面縦幅の半分の長さを持つ円である．スマートフォンを右手で持つ場合，円はスライドによって描かれた線分を直径として描画されるため，円周をなぞることができないといった問題を防ぐことができる．また，画面外に円が表示され，スクロールしにくいといった問題も起こりえない．なお，横方向のスライドは横方向へのスクロールと同じ動作だが，多くのスマートフォン対応ページでは縦方向のスクロールで閲覧することを前提に作成されているため，横方向へのスクロールは考慮していない．
提案手法が起動するとスライドに対する挙動が変化し，回転によるスクロール以外は受けつけなくなる．回転によるスクロールを行っている際，赤い円が指の位置と半透明な円の中心との位置関係を示す．ユーザはこの赤い円が半透明な円の周囲を回転することで，自身がどの程度の速度© 2017 Information Processing Society of Japan

でスクロールを行っているかを視認できる．指を画面から離すことでスクロールが解除され，回転によるスクロールで移動する前の位置まで自動でページがスクロールされる．
円の中心に指を近づけてスクロールを行うと，フリックにより短いスライド距離で長い距離をスクロールできるという点がある．一方円の中心から指を遠ざけてスクロールを行うとより長いスライド幅で短い距離をスクロールできる．これにより，ユーザは任意のスクロール速度に調整してスクロールを行える．またスクロール方向は，時計回りで下方向，半時計回りで上方向とした．

3.2 一時的スクロールの動き
本手法の特徴として，提案手法を用いた場合は，指を離したときにもとの位置へと戻るという点がある．使用する419

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

2-6F-072017/3/2

場面として，一時的に別の位置にある文章や図を参照したい場合を想定した．このとき，スクロールを行ったのちに即座にもといた文章の位置にもどり，そのまま文章を読み進めるといったことができる．
本手法ではページがもとの位置に戻る際，イージングのアニメーションを伴う．イージングとは，アニメーションによってオブジェクトが進む場合に，一定の速度ではなく，特徴をもった挙動で進む処理のことである．指を離した直後は勢いよくページが巻き戻るが，次第に鈍くなり，停止する．この動作をページスクロールに用いることによって，ユーザはページが巻き戻ったことを認識できる．これにより，今ページ内のどの位置にいるか混乱することなく閲覧を続けることができる．
提案手法では「一時的スクロールの行き先」が不明瞭な場合と「一時的スクロールの戻り先」がわからなくなるという場合を解決することができる．まず提案手法では，従来のスクロールとは異なる操作を用いることによって操作者が任意の場所へスクロールし，「一時的スクロールの行き先」を発見することができる．次に提案手法を用いることによって，「一時的スクロールの行き先」を発見した後で，自動的にもともと読んでいた場所である「一時的スクロールの戻り先」へと戻ることができる．提案手法が最も効果的に働く状況とは，この二点を解決する状況であると考えられる．

3.3 起動方法について
提案手法はフリックのスクロールと円形のスクロールを共存させるシステムとなっているため，起動するためのジェスチャが必須であり，本研究では横スライドを用いたものを採用した．起動方法は実装された方法以外の起動方法も考えられた．考えられた方法は 2 種類ある．
まず，同じ横スライドではあるが，スライドさせる幅が異なり，スライドを開始した点が円の中央となるものが考えられた．この場合に指を画面左端に置いてからスライドさせると，円が画面外に表示されてしまうことがある．操作においては円の中心が画面内に含まれていれば操作はできる．しかし，円の位置が指を動かすうえで操作しづらい位置に来てしまう可能性がある．これを解決するため指を最初に置いた位置を円の左端とし，指から最も遠くなる部分が必ず指の届く範囲に収まるようにした．
次に，スライドではなく指で画面上に円を描く動作にするというものが考えられた．円を描く動作を行うと，その中心に円を表示する．これにより，スクロールの動作を行う際に，違和感なく操作できる位置に円を表示させることができると考えられた．しかし，操作を軽快に行うためにはスライドのほうが適切であると考えたため，提案手法ではスライドを採用した．

4. 実験
4.1 実験環境
参加者は 19 歳〜23 歳までの男子大学生 5 名であった．
参加者はすべて右利きであり，スマートフォンを右手で持ち右手の親指で操作を行うよう命じた．実験プログラムはProcessing-3.0.2 を用いて作成した．Processing は Java をベースとしたプログラミング言語である*1 ．実験には An-droid 端末である Nexus5X を使用した．ディスプレイの大きさは 1080 × 1794pixels であった．これは Processing によって測定された width と height の値である．

4.2 実験タスク
操作手法およびスクロール方向を実験要因とした．操作手法は従来手法と提案手法の 2 水準とした．スクロール方
向は上方向と下方向の 2 水準とした．この実験におけるスクロール方向とは，スタートしてから最初にスクロールさせる方向のことである．実験は以下の手順で行った．

( 1 ) スタート地点をタップして開始( 2 ) 指示された方向に指定された手法でスクロールする( 3 ) ★が表示されている欄が完全に画面内に納まるまでスクロールする( 4 ) 欄が完全に表示されると欄自体が点滅し，参加者に知らせる( 5 ) スタート地点までスクロールし，改めてタップする
これを 12 回繰り返し 1 セットとした．このうち最初の 4回は練習とし，結果のデータには含めなかった．1 タスクにかかった時間は 1 でタップを行ってから 5 でタップを行うまでの時間とし，タスクが終了してから次のタスクを行うまでの時間は含めない．これを 2 手法 2 方向の計 4 セット行い，合計 48 回のタスクを一度の実験で行わせた．
★の表示される欄は 10000pixels，20000pixels，30000pix-els，40000pixels の 4 種類とした．この距離はページの最上部または最下部から，★が完全に表示されるまでの距離を示している．練習では 10000pixels から 40000pixels まで順番にタスクを行わせ，その後の 8 タスクではこれらの距離がランダムで選択される．1 つの距離は本番中に偏って選択されることはなく，全て 2 回ずつ選択される．

4.3 実験結果
実験の結果を距離ごとに記す（図 4）．各距離ごとに参加者 5 人の 2 回分のデータに対し分析を行った．
実験の分析は距離ごとに 2 要因参加者内分散分析で行った．距離 10000pixels において，従来手法と比べ提案手法が有意に早くタスクを完了することができた (F(1，9)=8.65，p<.05)．距離 20000pixels において，従来手法と比べ提案*1© 2017 Information Processing Society of Japan

https://processing.org/420

3500

2500

300030002000

6000
4000
2000

0

下

提案

通常

16000
14000

完了時間(ms)

12000
10000
8000
6000
4000
2000
0
下
通常

1000

提案

通常

10000pixels の 結 果 (左 上)，20000pixels の 結 果 (右 上)，

1000

下

提案

4500

5000

4000

4500

3500

4000

3000
2500
2000
1500
1000

上

通常

提案

通常

提案

3500
3000
2500
2000
1500
1000
500
00
下

提案

30000pixels の結果 (左下)，40000pixels の結果 (右下)

1500

上

通常

上

2000

0
下

500

下

2500

500

提案

20000
18000
16000
14000
12000
10000
8000
6000
4000
2000
0

上

1500

0

上

完了時間(ms)

通常

上

2000

500

0
下

図 4

8000

完了時間(ms)

4000

完了時間(ms)

3000

10000

完了時間(ms)

12000

5000

1000

完了時間(ms)

2-6F-072017/3/2

6000完了時間(ms)完了時間(ms)

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

上通常提案下上

図 5 2000pixels の結果 (左上)，4000pixels の結果 (右上)，6000pix-els の結果 (左下)，8000pixels の結果 (右下)Fig. 4 Result of 10000pixels (Upper left), 20000pixels (Up-Fig. 5 Result of 2000pixels (Upper left), 4000pixels (Upperper right), 30000pixels (Lower left), 40000pixels (Lowerright), 6000pixels (Lower left), 8000pixels (Lower right)

right)の交互作用に有意差は見られなかった．
手法が有意に早くタスクを完了することができた (F(1，9)=13.01，p<.01)．距離 30000pixels において，従来手法

4.5 考察と比べ提案手法が有意に早くタスクを完了することがで

図 4 および図 5 より，4000pixels 以上の距離においては，きた (F(1，9)=12.94，p<.01)．距離 40000pixels において，提案手法が従来手法より有意に早くタスクを完了できるこ

従来手法と比べ提案手法が有意に早くタスクを完了することが判明した．4000pixels の距離とは，今回使用した端末とができた (F(1，9)=7.52，p<.05)．また，全ての距離にの画面縦幅のおよそ 2.2 倍のスクロール量であり，4 ペーおいて上下方向によるタスクの完了時間に有意差は見られジ以上の論文を閲覧する場合や，より長い web ページなどなかった．また，全ての距離において手法要因と方向要因の文献を閲覧する場合に有用であると考えられる．また，の交互作用に有意差は見られなかった．

4000pixels 以下の距離においても，提案手法は従来手法と同程度の早さでスクロールを行える．これにより，一時的4.4 追加実験
前述の実験では，距離 10000pixels から 40000pixels までの範囲を調査したが，より短い範囲での特性を調べるため，追加で実験を行った．追加実験では，距離を 2000pixels，4000pixels，6000pixels，8000pixels とし，改めて実験を行っスクロールを行う場合においては，提案手法が従来手法と比べ優れた性能を持つと考えられる．

5. 議論
5.1 推奨される状況

た．参加者は 21 歳〜22 歳までの男子大学生 4 名であった．

提案手法が従来手法よりも有意に早くタスクを終えるこ

参加者はすべて右利きであり，スマートフォンを右手で持とができた原因として，自動スクロールによる短縮が考えち右手の親指で操作を行うよう命じた．

られる．これにより，一時的スクロールを行う距離が長い実験の結果を距離ごとに記す（図 5）．各距離ごとに参ほど，提案手法は従来の手法より早く一時的スクロールを加者 4 人の 2 回分のデータに対し分析を行った．実験の完了できると考えられる．これはスクロール距離が短いほ分析は距離ごとに 2 要因参加者内分散分析で行った．距離ど従来のスクロールと差がなくなるということでもある．

2000pixels において，従来手法と提案手法の有意差は見らスクロール距離が極端に短い場合，自動スクロールによるれなかった．距離 4000pixels において，従来手法と比べ提短縮が効果的でなくなるため，従来手法と提案手法には有案手法が有意に早くタスクを完了することができた (F(1，意な差が見られなかったと考えられる．本手法は従来のス7)=18.78，p<.01)．距離 6000pixels において，従来手法とクロールを行う場合と合わせて使用する．よって指を少し比べ提案手法が有意に早くタスクを完了することができた

スライドさせページを閲覧する方法と提案手法とを共存さ(F(1，7)=38.33，p<.01)．距離 8000pixels において，従来せ，一時的スクロールを行う距離によって手法を使い分け手法と比べ提案手法が有意に早くタスクを完了することがることが推奨される．

できた (F(1，7)=25.43，p<.01)．また，全ての距離において上下方向によるタスクの完了時間に有意差は見られなかった．また，すべての距離において手法要因と方向要因© 2017 Information Processing Society of Japan

5.2 起動動作について
提案手法が従来のスクロールと異なる点として，スク421

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

2-6F-072017/3/2

ロールを行う動作とスクロールを起動する必要があるかどうかの二つがあげられる．結果より，4000pixels 以上においては，提案手法のほうが早くスクロールを完了できるこ[13]とが明らかになった．従来のスクロールと比べて提案手法は回転によるスクロールの起動動作を行う必要があるが，その起動動作にかかる時間を含めても提案手法のほうが早[14]

くタスクを完了できていた．これより起動動作にも問題がないと考えられる．

[15]

6. おわりに本研究では一時的に情報を閲覧したい場合に使用する，往復を前提とした一時的スクロール手法を提案した．通常[16]

Edge and Slide-Edge: Scrolling by Pushing Against theViewport Edge. CHI ’15, pp.2773-2776, 2015.
Ko Mizoguchi, Daisuke Sakamoto, Takeo Igarashi.
Overview Scrollbar: A Scrollbar Showing an Entire Document as an Overview. INTERACT 2013, pp.603-610,
2013.
Sungjae Hwang, Junghyun Gim, Junwoo Yoo, Andrea
Bianchi. Contextual Drag: Context-based Dynamic Friction for Dragging Interaction. CHI EA ’15, pp.167-167,
2015.
Andy Cockburn, Carl Gutwin, Jason Alexander. Faster
Document Navigation with Space-Filling Thumbnails.
CHI ’06, pp.1-10, 2006.
Byungjoo Lee, Olli Savisaari, Antti Oulasvirta. Spotlights: Attention-Optimised Highlights for Skim Reading. CHI ’16, pp.5203-5214, 2016.のページ閲覧はフリックのスクロールを用い，一時的に閲覧したい情報に移動する場合にはリングのスクロールを行う．リングのスクロールを行った場合には，指を画面から離すとスクロールを行う前のページ位置に戻る．これにより，ユーザは片方向のスクロールのみで一時的な情報の閲覧が可能となる．
参考文献
[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

G.M.Smith, m.c.schraefel. The Radial Scroll Tool:
Scrolling Support for Stylus- or Touch-Based DocumentNavigation. UIST ’04, pp.53-56, 2004.
Tomer Moscovich, John F. Hughes. Navigating Documents with the Virtual Scroll Ring. UIST ’04, pp.57-60,
2004.
Huawei Tu, Feng Wang, Feng Tian, Xiangshi Ren. A
Comparison of Flick and Ring Document Scrolling inTouch-based Mobile Phones. APCHI ’12, pp.29-34, 2012.
椎尾 一郎. Scroll Display: 超小型情報機器のための指示装置. 情報処理学会論文誌, val.39, No.5, pp.1448-1454,1998.
椎尾 一郎, 辻田 眸. 文鎮メタファを利用した小型情報機器向けインタフェース. 情報処理学会論文誌, Vol.48, No.3,pp.1221-1228, 2007.
Patrick Baudisch, Xing Xie, Chong Wang, Wei-Ying Ma.
Collapse-to-Zoom: Viewing Web Pages on Small Screen
Devices by Interactively Removing Irrelevant Content.
UIST ’04, pp.91-94, 2004.
前川 卓也, 原 隆浩, 西尾 章治郎. モバイル端末のためのWeb ページ自動スクロール方式. 日本データベース学会
Letters, Vol.4, No.2, pp.29-32, 2005.
大和 正武, 門田 暁人, 高田 義弘, 松本 健一, 鳥居 宏次. 視線によるテキストウィンドウの自動スクロール. 情報処理学会論文誌, Vol.40, No.2, pp.613-622, 1999.
Takeo Igarashi, Ken Hinckley. Speed-dependent Automatic Zooming for Browsing Large Documents. UIST’00, pp.139-148, 2000.
Masatomo Kobayashi, Takeo Igarashi. MoreWheel: Multimode Scroll-Wheeling Depending on the Cursor Location. UIST ’06, pp.57-58, 2006.
土田 知章, 任向実. 手の動きの最小化を図った “レバースクロール” の提案. 情報処理学会研究報告ヒューマンコ
ンピュータインタラクション（HCI） 2005(114(2005-HI116)), pp.49-56, 2005.
Sylvain Malacria, Jonathan Aceituno, Philip Quinn,Géry Casiez, Andy Cockburn, Nicolas Roussel. Push-© 2017 Information Processing Society of Japan422