撓みのメタファを用いたビューポート制御インタフェース
大脇

築谷

喬之

*1

正憲*1
藤田
伊藤 雄一*1

和之*1
北村

高嶋 和毅*1
喜文*2
岸野 文郎*3

紙や布を指で縮めようとしたときに発生する「撓（たわ）み」のメタファを，スクロールおよびズーム操作に適用したインタラクション手法を提案する．この手法は表示するコンテンツを伸縮性の柔らかい材質と捉えており，通常のスクロールでは画面外へ押し出されていた領域が，コンテン
ツが歪められることによりビューポートに残る．これによりビューポートに残った領域を確認しながら次の操作へ移行することができるため，無駄なスクロールを減らすことができる．このインタラクション手法を評価するため，地図上のオブジェクトを比較して獲得するタスクを用いて，通常のドラッグ操作によるスクロールと比較した．その結果，提案手法は単純な移動では通常のスクロールと同様のパフォーマンスであり，元いた場所に戻る場合には，通常のスクロールに比べて操作量が尐なく高速であることがわかった．

A Viewport Control Method using Metaphor of Flexible Materials
MASANORI OHWAKI*1
KAZUYUKI FUJITA*1KAZUKI TAKASHIMA*1
TAKAYUKI TSUKITANI*1
YUICHI ITOH*1
YOSHIFUMI KITAMURA*2
FUMIO KISHINO*3
We propose a novel technique for scroll and zoom operations which regards the displayed content as aflexible material such as a piece of cloth. In the technique, when a user scrolls the content to acquire a new area,
originally displayed area remains in the viewport with distortion. This helps users decide next operation, whichleads to preventing them from doing unproductive scroll. We conducted experiments in which participants hadto acquire on-and-off screen objects in a map using our technique or traditional scroll. From the results wefound that our technique yielded as equivalent performance as the traditional one for simple off-screen
acquisition and better performance for scrolling back to original position.

1.

はじめに

ウェブページやドキュメント，地図など，人がコンピュータで扱うコンテンツの多くは，ディスプレイに収まりきらないサイズを持っている．そのため，ユー
ザが見たい箇所にアクセスするためには，スクロールやズームなどの操作を繰り返し用いることで，コンテンツの表示領域であるビューポートを制御し，その部分が表示されるように調節しなければならない．これは現実世界での紙面の閲覧に比べ負荷が高く 1)，特に大規模なコンテンツの閲覧では，ユーザがコンテンツ
内の注目している部分を見失うといった問題も発生しやすい 2)．このような問題は，近年の普及が目覚まし
い指やペンによる直接入力環境でも同様であり，より効率的なビューポート制御手法が求められている．
*1 大阪大学 大学院情報科学研究科

一般的なビューポート制御手法はスクロールとズー
ムである．これはコンテンツを見下ろすカメラ視点を操作するメタファを用いている 3)が，このようにコンテンツを見下ろす視点を制御することで効率化を図る
研究は数多くなされている．これには例えば，スクロ
ールとズームを連動させる手法 4), 5)やユーザの目的とする箇所に半自動的にスクロールする手法 6), 7)があり，
マルチタッチ環境でも 2 本以上の指を使って操作する
手法 8)が親しまれている．また，詳細と大局を分割して個別に表示する手法 9)もこのアプローチの一つと見なすことができる．しかし，これらの操作は視点側を移動させるため，実際の紙面の閲覧とはかけ離れた操作を必要とするものも多い．一方で，魚眼レンズのメ
タファを用いて表示を歪ませたり 10)，コンテンツを折りたたんだり 11)と，コンテンツ自体を変形するアプローチもある．これらは，実際の紙面に近い閲覧方

Graduate School of Information Science and Technology, Osaka

法であるものの，コンテンツを変形するための個別のUniversity

操作が必要であり，操作が煩雑になることがある．

*2 東北大学 電気通信研究所
Research Institute of Electrical Communication, Tohoku University*3 関西学院大学 理工学部
School of Science and Technology, Kwansei Gakuin Univeristy

そこで本研究では，コンテンツ側を変形するアプローチをさらに押し進め，実際の紙や布を扱うときにも見られる「撓（たわ）み」に着目し，従来のスクロー

情報処理学会 インタラクション 2011

ルやズーム操作を拡張するインタラクション手法を提複雑なカメラ制御として，画面外にあるオブジェク

案する．この手法では，コンテンツを柔らかい伸縮性

トの位置が既知である場合には，そのオブジェクトへを持った素材と捉えており，従来であればスクロール

半自動的にジャンプする手法がある 6), 7)．さらに，ユやズームにより平行移動や拡大・縮小されていただけ

ーザの操作を複数のカメラ操作と連動させる手法としのコンテンツを柔軟に歪ませる．これにより，例えばて，高速なスクロール時に自動的にズームアウトして画面外の情報を引き寄せてきて，離れた地点をビュー

大局を把握しやすくする Speed-dependent Automatic

ポートに表示させることが可能となる．また，コンテ

Zooming（SDAZ）4)や，地図上に設けたアンカーポイ

ンツに伸縮性を持たせ，歪められると元に戻る力（復ントが常にビューポートに表示されるようにパンとズ

元力）を働かせると，引き寄せた部分を離すことで元ームを連動させる手法が提案されている 5)．

の状態に戻すような挙動も可能である．これを応用す

複数のカメラを用いた例として，大局と詳細を同時ると，一度引き寄せた部分をビューポートに残すこともに画面内に表示させるというアプローチも検討されて元に戻すこともできるため，画面外の情報を確認しながいる．一般的には，詳細を大きく，大局を小さく個別

らビューポートを移動できる． さらに，撓んでいる部のウインドウで表示させる Overview + Detail という手

分を押し込むようにすると，その反発力が働いたよう法がよく用いられる 9)が，ユーザの指定する領域のみにズームアウトがなされる．このように，実世界でのを拡大して表示する DragMag15)という手法もある．

紙面を扱うような直感的で簡単な動作で，より多彩な

このように，視点側を制御する手法が多く提案され，その有用性が示されている．しかし，実世界で紙面をインタラクションを可能にする．
本稿では，まず今回実装した撓みスクロール・ズー

閲覧する際には，視点ではなく紙の方を動かすことがム手法のアルゴリズムについて述べる．今回は主に撓多いことを考慮すると，コンテンツ自体をユーザの手みスクロールを検証することで，撓みの有用性を評価で動かしてスクロールやズーム操作を実現するというし議論する．評価実験では，撓みスクロールと通常の考え方も有意義である．

スクロールを用いて地図上の 2 つのオブジェクトサイ

2.2

コンテンツを変形する手法

ズを比較するタスクを用い，その結果に基づいて，本Furnas らは，魚眼レンズのメタファを用い，注目し手法の有用性や今後の発展について，実際の利用シーている部分を拡大し，拡大部とその他との間を滑らかンを考慮に入れて議論する．

な歪みを用いて表現する Fisheye views10)を提案してい

2.

関連研究

2.1

視点を制御する手法

る．この手法では，大局と詳細を 1 つのビューポート
に表示するために大局と詳細の間の遷移部分を歪めることで連続的に表示している．Fisheye views の改善案

一般的な地図ビューアやドキュメントビューアのほについても多く検討されており，ドキュメントの閲覧

とんどでは，コンテンツを上空から俯瞰しているカメのために 1 次元方向にのみ歪みを適用した例 16)や，

ラ操作のメタファを用いたものとして，パン（スクロ

矩形のレンズを用いた例 17)もある．小関らは，拡大3)ール）とズームの操作が提供されている ．マウスで部と縮小部の間の情報を省略して表示することによっは，パンはドラッグ操作，ズームはスライダバーの操て歪みを軽減させる Emma を提案している 18)．他に

作およびホイールの回転により入力されることが多い

も Haik らは，3 次元仮想環境において，複数のカメが，近年普及しつつあるマルチタッチ入力の環境では，

ラ視点からの表示を合成させることで可視性を上げる

Apple 社の iPhone や iPad に代表されるように，二本手法について検討している 19)．Niklas らが提案していの指でつまむ動作（ピンチイン）や広げる動作（ピンる Mélange では，紙を折りたたむようなインタラクシ

8)チアウト）によるズーム操作が利用されている ．ペョンを用いてコンテンツの任意の場所を縮めることで，ン入力の環境では，デバイス上に手のひらを置いてい離れた場所にある 2 つのオブジェクトでもビューポー

るかどうかによってスクロールとズームの操作を切りトに表示させられる 11)．これらのコンテンツを変形替える手法が提案されている 12)．この手法は，手でさせる手法は，変形により幾何学的な情報が失われる

紙面を文鎮のように押さえる動作を参考にしている．

ことが欠点として指摘できるが，ユーザが見たい部分

この他にも，画面を 1 本指で斜め方向に小さく擦るジ

だけ大きくするなどの柔軟な表示が可能であることがェスチャ 13)や，ペンデバイスを回転させるジェスチ

利点である．しかし，コンテンツの変形に専用の操作

ャ

14)によるズーム操作もある．

が必要なことも多く，操作が複雑になりがちである．

撓みのメタファを用いたビューポート制御インタフェース

(a)

(b)

図 2 撓みの生成方法

ドラッグ中指を離したとき(c)

図 1 撓みスクロールの様子

3.
3.1

図 3 撓みズームの様子

フリックしたとき

提案手法
概要

方向と反対方向にはじくような操作（フリック操作）をすると，伸びていた布が元に戻るように，元のビューポートに戻る（図 1(c)）．これらの操作は撓みのメ
タファを忠実に再現しているわけではなく，スクロー

紙面を閲覧するようにコンテンツを柔軟に，かつ簡ル操作としての使いやすさを考慮した設計となってい単な操作で扱うことを目指し，撓みのメタファを利用る．実際に，フリック操作の使い方についてはいくつ

してスクロールとズーム操作を拡張する手法を提案すかのパターンを予備的に検討した結果，先に述べたよる．撓みとは，実際の紙や布を指で縮めようとしたとうな設計とした．ユーザはこれら 2 種類の操作を使いきに見られる歪みのことを指す．また．布などの伸縮

分け，獲得してきた領域をビューポートに残すか残さ性を持った素材では，撓みが生じると復元力により元ないかの選択を 1 回のドラッグ毎にすることができる．

に戻る性質がある．本手法では，地図やドキュメント

そのため，必要のない領域にビューポートを移動させなどのコンテンツをそのような素材に見立てることで，てしまうような無駄なスクロール操作を省くことが期

ユーザの操作に合わせてコンテンツが柔らかく変形し，待される．

操作をやめると復元力が働きアニメーションを経て元図 2 に撓みの生成方法を示す．提案手法では，まずに戻る．また，本手法ではユーザの操作時のみ動的に

ドラッグ開始時に，歪まずにビューポートに引き寄せコンテンツが歪むため，幾何学情報が失われるというられる領域 A を扇形で決める．この扇形の位置は，欠点の影響を比較的小さくできる．以下では，撓みス

ユーザのタッチ位置が弧状にあり，中心 O がドラッ

クロールとズームの詳細について述べる．

グ方向と 180 度反対側になるように決める．また半径3.2

撓みスクロール

は，画面外の領域が十分に収まるように，画面幅の撓みスクロールは，撓みの性質をスクロール操作に1.5 倍とする（図中ではわかりやすさのために小さい適用したものである．ユーザが画面上をドラッグする半径で示している）．次に，歪める領域 B を決めるが，と，画面外の領域が歪まずにビューポートに引き寄せ

これは領域 A と同じ中心を持ち，ドラッグ方向に伸られる．このとき，元々表示されていた領域は，縮めばした線と画面端とが交わる点 P が弧状にあるようられてビューポートに残る．この縮みは図 1(a)のような扇形から，領域 A を除いた部分である（図中ではに，新しく獲得してきた領域との連続性を保つように

半透明の灰色部分）．そして，ユーザがドラッグした表現される．ユーザがドラッグをやめると，縮んでいときには，領域 B を周囲との連続性を保つように歪た領域は布が引き伸ばされるように画面外に押し出さめる．この歪め方についてはいくつかの方法が考えられ，通常のスクロールと同じ結果となる（図 1(b)）．

れるが，今回は提案手法の有用性を知るためのプロト

ただし，ドラッグをやめるときに，ドラッグしてきたタイプとして，線形的に歪ませている．

情報処理学会 インタラクション 2011

3.3

撓みズーム

撓みズームでは，布の撓んだ部分を押し込むように際には撓みによる影響は無いといえる．このことを踏まえた上で，以下の本実験を実施した．
実験概要

すると，その反発力が働いたようにズームがなされる．

4.2

マルチタッチ入力の環境を用いた場合，ドラッグ中に地図やドキュメントなどのコンテンツを扱う場合，別の指で撓んでいる領域（今回の実装では任意の位

現在地と目的地の情報など，ビューポートに同時に表置）をタップすることでズームアウトの操作となる．

示できない離れた 2 地点を比較した後，目的地をビュ

マウスやスタイラスを用いた場合は，ドラッグ中の右ーポート内に収めたい場面がある．ズームを利用してクリックなどがこのズームアウトに割り当てられるこ

2 地点をビューポートに収める場合も考えられるが，とになる．ズームアウトの際，新しく獲得してきた領

ズームアウトにより詳細情報が失われてしまうため，

域と元のビューポートをちょうど含む領域が新たなビ

2 地点の詳細情報を比較する場合には適さない．このューポートになるようにズームレベルが調整される

ような場合は通常，スクロール操作を用いて比較を行（図 3）．これにより，ドラッグ中にズームアウト後

うが，2 地点がビューポートに収まらないほど離れてのビューポートを予想してからズームアウトをするかいる場合，スクロールによりビューポートを無駄に移しないかの選択ができるため，ドラッグ中の操作にさ動してしまう．また，目的地が元のビューポート内でらに選択の幅が広がる．同様の考え方でズームインのあった場合，改めてスクロールして戻らなければなら操作も可能ではあるが，ドラッグして一旦コンテンツ

ない．そのため，離れた 2 地点でもビューポートに表を尐しだけ縮め，そのままドラッグを逆方向に動かし示することができ，2 地点を比較した後にビューポーてコンテンツを伸ばしてからタップする必要があるた

トを移動できる操作は効果的であると考えられる．撓

め，やや煩雑になる．撓みズームは従来のダブルクリ

みスクロールでは，離れた地点でもビューポートに表ックやダブルタップによる操作と競合しないため，こ示することができ，必要とする地点を選択してからビの 2 つを併用することも可能である．

ューポートを移動できるので，これらの問題を解決で

4.

評価実験

きると期待される．そこで，距離の離れたわずかに大きさの違う地図上の 2 つのオブジェクトを比較し，大本稿では，撓みスクロールと撓みズームのうち，実きい方を選択するタスクを行う．このタスクは，ある際にコンテンツを撓ませる操作であり，撓みの性質を程度詳細な情報を比較する状況を想定し，詳細情報のより強く反映していると考えられる撓みスクロールの優劣の指標をオブジェクトサイズの大小に抽象化した性能を検証する．これにより，撓みメタファおよびそものである．

れを用いたビューポート制御の有用性を評価する．
4.1

予備実験

4.3

実験参加者

実験参加者は男性 10 名，女性 2 名からなる 12 名の撓みメタファを用いたスクロールの有用性を評価す

大学生または大学院生である．実験参加者全員が正常る測定項目としては様々なものが考えられる．その中視力あるいは正常矯正視力であり，日常的に計算機をでまず，ドラッグによる通常のスクロール（パン）操

利用している．ペンデバイスを用いた計算機の利用経

作と，撓みスクロールのパフォーマンスを比較するた験があるのは 11 名である．参加者は全員右利きであめ，方向が既知の画面外オブジェクトをスクロールしり，実験も右手で行う．

て獲得するというタスクを予備的に実施した．表示さ4.4

せるコンテンツとしては，2 次元的に広がる情報とし実験用アプリケーションは Microsoft 社の Visualて一般的な地図を用い，画面外オブジェクトまでの距

C++ 2005 を用いて実装し，計算機はタブレット PC

離は 600, 800, 1,000 pixel（全て画面外）の 3 段階としである lenovo 社の X61（CPU: Core 2 Duo L7500, 1.6

実験環境

た．参加者は 4 人で，入力には指とペンの両方を用い

GHz, RAM: DDR2-SDRAM 2GB, OS: Windows Vistaた（計算機：HP EliteBook 2740p Tablet PC，解像度：

Ultimate）を用いる．ディスプレイは 12.1 インチの液1,280×800 pixel）．実験の結果，平均タスク完了時間

晶ディスプレイを，1,024×768 pixel の解像度で使用は，撓みスクロールが 2.08 秒（標準偏差 0.432），通する．入力には，指とペンのいずれを用いることも可

常スクロールが 2.05 秒（標準偏差 0.311）で，どの条能であるが，手や腕によるオクルージョンが尐なく，件においても 2 つの入力手法間にタスク完了時間の差

小さなオブジェクトでも獲得することが容易なペンをは見られなかった．したがって，単純なスクロールの用いる．図 4 に実験風景を示す．図に示すように実験撓みのメタファを用いたビューポート制御インタフェース

図 4 実験風景図 5 タスクの初期画面

参加者は机に向かって姿勢を正して座り，左手でディブジェクトを同時にビューポートに表示できない距離

スプレイを固定して実験を行う．
4.5

実験タスク

として 1,000 pixel を用い，800 pixel はこの二つの中間である．これらの距離では全て，1 回のドラッグによ

今回の実験タスクにおける初期画面を図 5 に示す．

りゴールをビューポートに表示することが可能である．

実験が始まると地図が表示され，地図上には赤色のオターゲット距離と正解オブジェクト配置については実

ブジェクトが 2 つ配置される．1 つは初期画面の中央

験中ランダムに変更されるが，それぞれの条件で試行部にあり，以下ではこのオブジェクトをスタートと呼回数が同じになるように制御する．実験中に現れる 2

ぶ．もう 1 つは画面外に配置され，以下ではゴールとつのオブジェクトは全て赤色で，形状は円，三角形，呼ぶ．また，画面中央部には矢印と円が表示されてい菱形の中から選択される．オブジェクトのサイズはる．矢印はゴールがどの方向に配置されているかを 8

20, 25, 30, 35, 40 pixel の 5 種類から選択され，正解オ方向で示している．実験参加者はこの矢印を頼りに各ブジェクトは選択されたサイズより 5 pixel 大きく設手法によるスクロール操作を用いてゴールを探索し，定する．ゴールが配置される方向は画面中心から 45

ビューポート内に獲得する．ビューポート内に獲得後，度ずつ 8 方向とし，16 回反復のうち，各方向が 2 回それぞれのオブジェクトのサイズの大小を比較し，サずつ現れるように制御する．これら実験要因以外のオ

イズの大きいオブジェクトを画面中央部の円内に獲得

ブジェクトの形状，サイズ，および方向も全てランダした状態でペンを用いてタップするとタスク完了であムな順番で提示される．地図は縮尺約 3700 分の 1 でる．この円は，ビューポート内のなるべく中心に目的

極端に目立つランドマークがない中規模程度の都市のオブジェクトを配置してもらうためのものであり，予地図をグレースケールにして用い，探索の際のノイズ

備実験からこの円の半径は 150 pixel とする．サイズ

情報として利用する．地図画像は，オブジェクトが地の小さいオブジェクトを獲得しようとした場合や，円図上に十分収まるように 3,000×3,000 pixel のものをの外側にオブジェクトがある場合にはタスクは完了で用意する．また，撓みスクロールにおいて，撓みが戻きない．円と矢印の色は通常青色だが，2 つのオブジ

るアニメーション速度は撓んでいる様子がわかる程度

ェクトのいずれかが円内にある場合，その視覚フィーに速くしている．

ドバックとして黄色に変化する．タスクが完了すると，

4.7

一旦黒画面に切り替わり，もう一度タップすると次の参加者 1 人あたりの試行回数は，12 条件×16 試行

試行が開始される．
4.6

実験計画

実験手順

の 192 試行である．参加者にはできるだけ速くタスクを行うことを教示として与え，タスク完了時間を計測

本実験は，手法（撓みスクロール，通常スクローする．また，タスク中に参加者がドラッグした距離もル），ターゲット距離（600, 800, 1,000 pixel），正解オ

計測する．各手法の実験順序は，慣れの影響を考慮しブジェクト配置（スタート，ゴール）による 3 要因反て参加者間でカウンターバランスをとる．全試行を終

復実験である．正解オブジェクト配置については，撓

えた後，参加者に，各手法におけるオブジェクトの好みスクロールによるフリック操作の効果が表れると予みついて 7 段階で評価してもらう．実験時間は，各手測されるため，要因に含めた．実験参加者は，これら法に慣れるための練習時間を含めて 30 分程度である．

2×3×2 = 12 通りの組み合わせを 16 回反復する．タ

4.8

実験結果

ーゲット距離は，1 回のドラッグで画面中央の円内に各手法におけるターゲット距離とタスク完了時間の関ゴールを収められる距離として 600 pixel を，2 つのオ

係を図 6 に，正解オブジェクト配置とタスク完了時間

情報処理学会 インタラクション 2011

図 8 正解オブジェクト配置 vs ドラッグ距離

図 6 ターゲット距離 vs タスク完了時間

配置（F(2, 22) = 28.33, p < .01）全てにおいて主効果が見られた ．また手法とターゲット距離の交互作用（F(2, 22) = 10.07, p < .01）と手法と正解オブジェクト
配置の交互作用（F(1, 11) = 65.11, p < .01）が認められた．ナビゲーション手法と正解オブジェクト配置の交互作用について単純主効果を分析したところ，どちらのオブジェクトが正解でも撓みスクロールの方が通常
スクロールに比べて尐ないドラッグ距離でタスクを完
図 7 正解ターゲット配置 vs タスク完了時間の関係を図 7 にそれぞれ示す．タスク完了時間に関する 3 要因分散分析の結果，手法（F(1, 11) = 4.916, p< .05）とターゲット距離（F(2, 22) = 115.2, p < .01），
正解オブジェクト配置（F(1, 11) = 9.535, p < .01）全てに主効果が見られた．手法の主効果について Tukeyの多重比較を行った結果，ターゲット距離が 800 pixelと 1000 pixel のときに撓みスクロールが通常スクロー
ルに比べて有意に早くタスクを完了できていることがわかった（p < .05）．ターゲット距離についても同様の比較を行ったところ，ターゲット距離が長くなるにつれて有意にタスク完了時間が増加していることがわ
かった（p < .01）．正解オブジェクト配置についても同様に Tukey の多重比較を行ったところ，正解オブジェクトがゴールであるときに正解オブジェクトがス
タートである場合に比べて有意に早くタスクを完了できていた（p < .01）また，手法と正解オブジェクトの間に交互作用が認められた（F(1, 11) = 4.682, p < .05）．
この交互作用について単純主効果を分析したところ，
正解オブジェクトがゴールであるときには有意差が見られないのに対し，スタートのときのみ，撓みスクロールのタスク完了時間が通常スクロールに比べて有意に早かった（p < .01）．
図 8 は，各手法における正解オブジェクト配置とドラッグ距離の関係を示したものである．3 要因分散分
析の結果，手法（F(1, 11) = 240.9, p < .01）とターゲッ
ト距離（F(2, 22) = 193.5, p < .01）
，正解オブジェクト

了できることがわかった（p < .01）．
7 段階評定（7：良い，1：悪い）での実験参加者による主観評価の平均は，撓みスクロールが 5.75 ポイ
ント（標準偏差 0.72），通常スクロールが 4.42 ポイン
ト（標準偏差 0.64）であった．

5.

議論

5.1

実験結果について

評価実験の結果から，ターゲット距離が 800 pixelと 1000 pixel の場合，撓みスクロールは通常スクロー
ルに比べて高速に，かつ尐ない操作量でオブジェクトを比較して獲得できていたことがわかった．特に，正解オブジェクトがスタートであるときに撓みスクロー
ルのパフォーマンスが際立って高くなっていた．これは，フリックにより元のビューポートに戻す操作が有効に働いていたからであると考えられる．また，この操作はどの参加者も初めて体験するものであったにもかかわらず，ほぼ全員が戸惑うことなく使用できていた．このことから，本手法が紙や布のアフォーダンス
を十分に提供できており，参加者が直感的に扱えていたことが示唆される．実際にアンケートでも，実際の紙や布を触っているように感じたと答えた参加者もおり，通常のスクロールとは似て非なる体験をしていたことが伺える．
正解オブジェクトがゴールのときには，タスク完了時間に差は見られなかったものの，ドラッグ距離は撓みスクロールのほうが有意に尐なかった．これは，

撓みのメタファを用いたビューポート制御インタフェース

通常スクロールのときに，スタートとゴールを行き来った追加の操作が必要となるため，総合的な操作性にしてオブジェクトを見比べる場面が多々見受けられた

ついてはデバイスに依存すると予想される．したがっことで説明できる．アンケートからも，通常スクローて実験環境を変更して改めて確認する必要がある．
撓みズーム

ルではスタートのオブジェクトの大きさを記憶してお5.3

かなければならなかったのに対し，撓みスクロールで

本稿では撓みズームを評価の対象としなかったが，は 2 つのオブジェクトが同時に見えていることが多く，

撓みズームと撓みスクロールを用いて画面外にあるオ

比較しやすかったという意見が多く得られた．また，ブジェクトを獲得するというタスクの実験を予備的に

今回は大きさを比較するだけの単純なタスクであった

行ってインタビュー調査をした．その結果，撓みズー

が，じっくりと見比べる必要のある場合には撓みスク

ムアウトの操作を直感的だと答えた参加者が多かった

ロールがより効果的ではないかという意見もあった．

一方で，マルチタッチに慣れていない参加者や，新た主観評価では，撓みスクロールが 1 ポイント以上高な指の使い方に戸惑いがあった参加者には，操作が複い評価を得ており，実際の地図ナビゲーションなどで雑で難しいと感じられたようである．全体として，ド使いたいという意見もあった．また，地図が撓みによ

ラッグ中の操作でスクロールかズームか選択できるとって歪んで表示されることを煩わしく感じた参加者はいう利点に対しては期待できる反応が得られたものの，ほとんどおらず，注目している場所は歪んでいないか

ズームだけを行う場合には提案手法単体ではやや不十ら気にならなかったという意見や，むしろビューポー

分で，別に操作を用意する必要もあると考えられる．

トにスタートのオブジェクトが残るので見やすかった

これに，従来のダブルクリックやダブルタップを用いという意見が大半を占めた．これらのことから，撓み

るか，布を引っ張り上げる・押しこむ等の撓みのメタ

スクロールは参加者に好まれ，歪みによる悪印象も与ファを用いた新しい操作を導入するかについては今後

えていなかったと考察される．しかし，本実験ではゴ検討する予定である．
撓みの改良とインタラクションの拡張

ールのオブジェクトに導くための矢印を常に表示して5.4

視覚探索にかかる時間を省いており，地図のコンテンコンテンツの撓ませ方についても検討の余地がある．

ツを見る必要があるタスクではなかった．このため，

現在の実装では線形的に縮めているだけであるため，コンテンツの歪みによって視認性が悪化していないか

実際の紙や布の撓み方とは見た目が異なる．そこで，どうかの定量的評価には至っておらず，今後検討が必

実際の紙や布を扱っているような体験を提供するため要である．

の方法として，紙や布の動きをシミュレーションして5.2

提案手法の有効範囲

撓ませる方法が考えられる．あるいは，歪みの大きい

今回の評価実験では，ターゲット距離が 1,000 pixel

部分を間引きすることで歪みを尐なくした視認性の高までの範囲で撓みスクロールの有効性が明らかになっい撓みの方が，高いパフォーマンスである可能性もあた．結果からは，距離が長いときほど効果が出ている

る．この他にも，地図であれば都市名や幹線道路のみ

が，撓みスクロールの現在の実装では，1 回のドラッを表示し，ドキュメントであれば章のタイトルのみをグで目的のオブジェクトがビューポートに現れなかっ

表示するなど，コンテンツを考慮した情報を撓んだ部

た場合にはフリック操作を有効に利用できないため，

分に表示させる方法も考えられる．これら複数の撓ま

長距離では撓みスクロールの有効性が損なわれると考せ方を比較して評価する必要がある．また，撓みが元えられる．ただし，単純なスクロールを評価した予備に戻るアニメーション時間の検討が重要である．この実験では，通常のスクロールとの差は見られなかった

時間は常に一定とは限らず，ユーザが必要な情報ほどことから，1,000 pixel を超える距離も通常スクロール

遅いアニメーションにするなどの方法も考えられる．

と同等のパフォーマンスになると考えられる．なお，

一方で，撓みのメタファを部分的に応用する方法も長距離でのパフォーマンスの向上に向けた改良についある．画面中心からドラッグを開始すると，通常のスては後述する．

クロールが行われ，画面端からドラッグを開始すると，実験ではペンを入力デバイスとして用いていたが，

撓みスクロールが行われるように従来手法と撓みを融

基本的にはドラッグしか使わないタスクであったため，合させる．このような操作は撓みのメタファが有効な

マルチタッチの環境やマウスなどの他の入力デバイス

範囲で部分的に利用するため，従来のパン，ズームとでも同様の結果が得られると考えられる．しかし，撓

いった操作と干渉しない．したがって，すぐにでも応

みズームを含めた場合には，タップや右クリックとい用可能であると言える．

情報処理学会 インタラクション 2011

さらに，長距離でのパフォーマンスの向上に向けた
インタラクションの拡張も考えている．最近ではフリック操作を利用した慣性スクロール 20)が一般的になってきているが，それに倣いフリックの速度に応じて実際のスクロール量よりも多くの量を撓ませるように制御すれば，有効距離の改善に寄与すると考えられる．
また，今回の実装では同時に 1 回しか撓ませることができなかったが，ドラッグの繰り返しにより複数回撓
ませられれば，現在の有効範囲以上の何画面分も遠くにあるオブジェクトを引き寄せてくるなど，コンテン
ツの柔軟性は飛躍的に高まることが期待される．
実際の紙や布は複数本の指で扱うため，撓みのメタ
ファはマルチタッチの環境ではより効果的だと考えられる．例えば，複数回の撓みを複数方向から発生させることができ，3 点以上の離れたオブジェクトを同時にビューポートに表示可能になる．このような改良が進めば，テーブルトップディスプレイなどで複数人各々が競合せずに，見たい領域を閲覧することすら可
能になる．

6.

まとめ

紙や布を指で縮めようとしたときに発生する撓みのメタファを利用し，コンテンツを柔軟に変形させられるスクロールインタフェースを提案した．地図上の 2
つのオブジェクトサイズを比較するというタスクによる評価実験の結果，撓みスクロールは通常スクロールに比べて高速に，かつ尐ない操作量でオブジェクトを比較し獲得できることがわかった．今後は，撓みズー
ムの評価や，複数回の撓みを許可する撓みスクロールをマルチタッチ入力の環境にて実装する予定である．
謝辞

本研 究の一部 は，文部 科学省グ ローバ ル

COE プログラム（研究拠点形成費）の助成によるも
のである．

参

考

文

献

1) K. O’Hara and A. Sellen: A comparison of reading
paper and on-line documents, In Proc. of CHI ’97, pp.
335-342 (1997).
2) M. D. Byrne, B. E. John, N.S. Wehrle, and D.C.
Crow: The tangled Web we wove: a taskonomy of
WWW use, In Proc. of CHI ’09, pp. 544-551 (1999).
3) K. Perlin and D. Fox: Pad: an alternative approach tothe computer interface, In Proc. of SIGGRAPH ’93,
pp. 57-64 (1993).
4) T. Igarashi, K. Hinckley: Speed-dependent automatic
zooming for browsing large documents, In Proc. of
UIST ’00, pp. 139-148 (2000).
5) 藤田和之，高嶋和毅，築谷喬之，朝日元生，北村喜文，岸野文郎: 複数のカメラ操作を連動させる地図ナビゲーション手法の提案, インタラ
クション 2009 論文集，pp. 97-104 (2009).
6) P. Irani, C. Gutwin, and X.D. Yang: Improving
selection of off-screen targets with hop- ping, In Proc.
of CHI ’06, pp. 299-308 (2006).
7) 高嶋和毅，スリラムサブラマニアン，築谷喬之，
北村喜文，岸野文郎: ポインティング動作を用いたスクロール技術 DuH の提案, 情報処理学会
論文誌，Vol. 48, No. 12, pp. 3809-3818 (2007).
8) Apple - Scroll View Programming Guide for iOS:
Basic Zooming Using the Pinch Gestures.
http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/UIScrollView_pg/Zoo
mZoom/ZoomZoom.html
9) A. Cockburn, A. Karlson, and B. Bederson: A review
of overview+detail, zooming, and focus+context
interfaces, ACM Comput. Surv., Vol. 41, No. 1, pp. 131 (2008).
10) G.W. Furnas: Generalized fisheye views, SIGCHI
Bull., Vol. 17, No. 4, pp. 16-23 (1986).
11) N. Elmqvist, N. Henry, Y. Riche, J.-D. Fekete:
Mélange: Space Folding for Visual Exploration, In
IEEE Trans. on Visualization and Computer
Graphics, Vol. 16, No. 3, pp. 468-483 (2010).
12) 椎尾一郎，辻田眸: 文鎮メタファを利用した小型情報機器向けインタフェース, 情報処理学会
論文誌，Vol.48, No. 3, pp. 1221-1228 (2007).
13) A. Olwal, S. Feiner, and S. Heyman: Rubbing andtapping for precise and rapid selection on touchscreen displays, In Proc. CHI ’08, pp. 11-20 (2008).
14) X. Bi, T. Moscovich, G. Ramos, R. Balakrishnan, and
K. Hinckley: An exploration of pen rolling for penbased interaction, In Proc. of UIST ’08, pp. 191-200(2008).
15) C. Ware and M. Lewis: The DragMag image
magnifier, In Proc. of CHI ’95, pp. 407-408 (1995).
16) K. Hornbæk and E. Frøkjær: Reading of electronic
documents: The usability of Linear, Fisheye, andOverview+Detail interfaces, In Proc. of CHI ’01, pp.
293-300 (2001).
17) C. Gutwin and C. Fedak: Interacting with big
interfaces on small screens: a comparison of fisheye,zoom, and panning techniques, In Proc. of GI ’04, pp.
145-152 (2004).
18) 小関章太郎，山本大介，北神慎司，高橋直久:
Emma における Focus+Glue+Context 型地図の実
現法, 第 1 回データ工学と情報マネジメントに関するフォーラム，B1-1 (2009).
19) H. Lorenz, M. Trapp, M. Jobst, J. Dӧllner: Interactive
Multi-Perspective Views of Virtual 3D Landscapeand City Models, In Proc. of the 11th AGILE Int’l
Conf. on GI Science, pp. 301-321 (2008).
20) Apple - Apple - Magic Mouse - The world’s first
MultiTouch-mouse.
http://www.apple.com/magicmouse/