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

1B-35
2024/2/28

Bubble-UI: シャボン玉をメタファに用いた
空間 UI システム
小野 源太1

森本 浩輔1

安中 勇貴2

橋浦 健太2

渡邊 恵太1

概要：VR や AR で用いられる空間型 UI では，既存のハードウェアのインタフェース，もしくは物理現象のメタファが広く用いられている．メタファの活用にはインタフェースの挙動に対する適切なメンタルモデルを構築しやすくなり，正確な操作が期待できるというメリットがある．一方，物理現象をメタファとして用いるとその挙動に縛られ，デジタル空間であることの利点を十分に活かすことができない．また，視覚的表現を行わない操作メタファにはメンタルモデルを構築しづらいという問題がある．本研究では UIのメタファにシャボン玉を用いることで，操作時の挙動に対するメンタルモデルを構築しやすく正確な操作が期待できる手法 Bubble-UI を提案する．

1. はじめにVR や AR で用いられる空間型 UI では，既存のハードウェアのインタフェース，もしくは物理現象のメタファが広く用いられている．例えば Meta の Interaction SDK

Samples には物理ボタンやタッチパッドを模したインタフェースがある*1 ほか，Unity の XR Interaction Toolkit

Examples には同様の物理ボタンやレバーといったインタフェースが*2 ，Microsoft の MRTK Examples Hub には鍵盤やスライダといったインタフェースがある*3 ．既存のインタフェース・物理現象のメタファを用いることでインタフェースの挙動に対する適切なメンタルモデルを構築しや

図 1

シャボン玉をメタファに用いた空間 UI システム

すくなる．そのため正確な操作が期待できるというメリッ上するオブジェクト操作手法が提案されている．[2], [3], [4]．

トがある [1]．

例えば Song ら [4] は A handle bar metaphor を提案して一方で，物理現象をメタファとして用いるとその挙動にいる．この手法では両手間を結ぶ棒状の当たり判定を用い縛られる問題がある．たとえば広く普及している Poke 式てオブジェクトを掴み，操作を行う様子をハンドルのメタのボタンインタフェースである．Poke 式とは，ボタンを模ファで表している．また Benko ら [2] は風船をメタファにした平面状の操作パネルをつついて操作するインタフェー用いた手法を提案している．この手法では両手間の距離とスである．このインタフェースはユーザが操作する際に，同期して 3D カーソルの高さを変更する．この様子を片方指をボタン面に対して垂直になるように移動させ押し込むの手を支点として風船の紐を引くメタファで表している．

ような動きをしなければならない制約がある．
また，ユーザの動作にメタファを用いることで利便性を向
1
2

*1
*2
*3

明治大学 総合数理学部 先端メディアサイエンス学科
明治大学大学院 先端数理科学研究科 先端メディアサイエンス専
攻https://www.meta.com/ja-jp/experiences/5605166159514983/
https://github.com/Unity-Technologies/XR-InteractionToolkit-Examples
https://www.microsoft.com/ja-jp/p/mrtk-exampleshub/9mv8c39l2sj4© 2024 Information Processing Society of Japan

しかし，メタファの使用がユーザの動作や UI の挙動に対してにとどまっており，視覚的な表現には利用されていない．そのため，初めてその UI に触れるユーザが操作を理解しメンタルモデルを構築するまでに時間がかかるという欠点がある．
本研究ではこれらの問題を解決するために，シャボン玉をメタファとした新たな UI システム「Bubble-UI」を提案
し，それを活用した 2 つの実装例についてまとめる．

340

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

図 2

Bubble-Button を使用している様子

Bubble-UI は，シャボン玉をメタファとして用いた空間
UI システムである (図 1)．物理世界のシャボン玉にあると破裂する

図 3

Bubble-Holder でオブジェクトを移動させる様子

ため予備動作を要求しない．そのため，空中で腕を保持す

2. Bubble-UI

浮遊する

1B-35
2024/2/28という物理的特性， ”半透明”と”表面が揺らめく”という視覚的表現をメタファとして使用する．
シャボン玉というよく知られている物質を視覚的に再現している，それにより操作時の挙動に対するメンタルモデルを構築しやすい特徴がある．また，メンタルモデルとUI の挙動が一致することで操作の正確性向上が期待できる [1]．

2.1 実装本システムは Unity と Meta SDK を用いて作成した．
シャボン玉表現のシェーダーとして，頂点がふわふわと変形するシェーダーを作成した．頂点アニメーションには，World 空間を UV としてタイリングした Gradient Noise テクスチャの値を用いた．テクスチャを常にスクロールさせ連続的な変形を実現した．World 空間を UV として用いたことで，空間座標の変化でもアニメーションする．
また，シャボン玉が破裂するエフェクトを VFX Graphを用いて作成した．シャボン玉が消滅すると同時に飛沫が生成される．飛沫として約 100 ほどの小さな球が球状に配置され飛散する．

Bubble-Holder のレイキャストを用いて遠隔から掴む動作は，Meta の Interaction SDK の DistanceGrabbable を用いて実装した．

2.2 実装例 1 Bubble-Button
Bubble-Button は，ユーザが触れると即座に破裂し入力となる，球状のボタンインタフェースである (図 2)．
コントローラ，もしくは手によって直接触れることで破裂する．破裂時に入力判定が発生し，別オブジェクトの動作などを引き起こすボタンとして用いる．
特徴として，当たり判定が球状のため 360 度どの方向からでも触れられる．また，触れた瞬間に入力と判定される© 2024 Information Processing Society of Japanる時間が短くなり疲れを軽減する [5] と期待できる．

2.3 実装例 2 Bubble-Holder
Bubble-Holder は， 任意のオブジェクトをシャボン玉で包むことで, 一時的に空中に浮遊させる手法である (図 3)．
オブジェクトはシャボン玉に包まれた状態を解除されると，再び物理法則に従った状態に戻る．
ユーザの手から伸びるレイキャストでポインティングしながらコントローラーのグラブボタンを使用する，もしく
はハンドトラッキングでピンチのジェスチャを行うことでオブジェクトを遠隔で掴むことができる．オブジェクトは掴まれると同時にシャボン玉に包まれ浮遊する．そして手を握っている間，動きに追従して移動するようになる．
シャボン玉状態は手を離すだけでは解除されず，ポインティングしながら素早く指をタップすることで解除される．
特徴として，重力が働く空間においても，表現の齟齬を発生させずに無重力表現を用いることができる．また，”オブジェクトが空中に浮いている という状況の違和感を軽減する．

3. 終わりに本研究では, シャボン玉をメタファに用いた空間 UI とその実装例を 2 つ提案した．Bubble-Button はシャボン玉をメタファに用いたボタンである．操作性の向上と疲労の軽減，メンタルモデルの構築が容易になる可能性がある．

Bubble-Holder は任意のオブジェクトをシャボン玉で包むことで, 一時的に空中に浮遊させる手法である．利便性の向上やオブジェクト操作の正確性向上，メンタルモデルの構築が容易になる可能性がある．
今後これらの仮説をユーザスタディや実験を通じて検証していきたい．
参考文献
[1]

John M. Carroll and Judith Reitman Olson. Chapter
2 - mental models in human-computer interaction11thischapter appeared in its entirety and is reprinted from341

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

[2]

[3]

[4]

[5]

1B-35
2024/2/28

mental models in human computer interaction: Researchissues about what the user of software knows, j.m. carroll
and j.r. olson, editors,-the report of the workshop on software human factors: Users mental models, nancy anderson, chair, sponsored by the committee on human factors,
commission on behavioral and social sciences and education, national research council, published by the national
academy press, 1987. In MARTIN HELANDER, editor,
Handbook of Human-Computer Interaction, pp. 45–65.
North-Holland, Amsterdam, 1988.
Hrvoje Benko and Steven Feiner. Balloon selection: A
multi-ﬁnger technique for accurate low-fatigue 3d selection. In 2007 IEEE Symposium on 3D User Interfaces,
2007.
Florian Daiber, Eric Falk, and Antonio Krüger. Balloon
selection revisited: Multi-touch selection techniques forstereoscopic data. In Proceedings of the International
Working Conference on Advanced Visual Interfaces, AVI’12, p. 441–444, New York, NY, USA, 2012. Associationfor Computing Machinery.
Peng Song, Wooi Boon Goh, William Hutama, Chi-Wing
Fu, and Xiaopei Liu. A handle bar metaphor for virtual
object manipulation with mid-air interaction. In Proceedings of the SIGCHI Conference on Human Factors in
Computing Systems, CHI ’12, p. 1297–1306, New York,NY, USA, 2012. Association for Computing Machinery.
Juan David Hincapié-Ramos, Xiang Guo, Paymahn
Moghadasian, and Pourang Irani. Consumed endurance:a metric to quantify arm fatigue of mid-air interactions.
Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 2014.

© 2024 Information Processing Society of Japan342