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

C41
2015/3/7

HMD による携帯型情報端末の表示領域拡張におけるインタラクション方式の検討: カードゲームを対象として
下仲 悠希1,a)

阪口 紗季2松下 光範1,b)

概要：本研究の目的は，HMD と携帯型データ端末の連携方式のデザインである．この目的を実現するた
め，これまでにメガネ型ウェアラブルデバイスを用いてスマートフォンの画面を AR 技術で拡張するシス
テム Oﬀ Screen を提案している．このシステムは，メガネ型ウェアラブルデバイスに表示される仮想オブジェクトを電子端末によって操作可能にした．しかし，カーソルを用いた操作を使用しているため，表示された仮想オブジェクトの操作性が低い，端末相互のシームレスな連携が実現されていない，などインタラクションに関わる問題が存在している．そこで本研究では，このシステムのインタラクションの改善を試みる．本稿では，カードゲームにおけるカードの選択を例としたデザインを行う．提案手法は，カーソルによる操作を撤廃し，電子端末内情報と仮想オブジェクト情報の切り替えをカードの切り替え動作と対応させることで，直感的で容易な操作を実現する．

Interaction Method for Expanded Screen of Portable Information
Device with Head Mounted Display: A Card Game Case
Yuki Shimonaka1,a)Saki Sakaguchi2

Mitsunori Matsushita1,b)

Abstract: The goal of our research is to design a utilization model that combines a head mounted display(HMD) and a portable data assistance (PDA). As the first step of this, we have been proposed a system
named OﬀScreen, that can extend display region of a PDA by displaying virtual objects around the PDA
through HMD. This system permits a user to manipulate the displayed virtual objects by controlling a cursor
with the PDA s screen, however, its manipulatability is insuﬃcient and seamless combination between devices is hardly achieved because the system employed a traditional cursor operation for the manipulation. To
improve such manipulatability, this paper proposes a novel interaction method. We focus on card selection
task in card game as an example. The proposed method puts an end to cursor-base manipulation. Instead ofthis, the method provides intuitive and easy manipulation of virtual objects: a user can switch information
to be focused with flipping behavior, from PDA screen to virtual objects and vise versa.

1. はじめに
近年，メガネ型ウェアラブルデバイス（以下，メガネ型る次世代の携帯型情報端末として注目されている．また，ユーザの目の付近に情報が表示されるというデバイスの特徴から，現実世界の情報に仮想的な情報を重畳表示するデバイスと記す）が様々な分野で注目を集めている．メガ

Augmented Reality（以下，AR と記す）としての利用がネ型デバイスは，ハンズフリーで場面を選ばず利用できる期待されている．

ことなどから，スマートフォンやタブレット端末に代わメガネ型デバイスの操作方法は，メガネ状のフレーム部分へのタッチ操作やユーザの音声を認識することによるも

1

2a)
b)

関西大学 総合情報学部
Faculty of Informatics, Kansai University
関西大学大学院 総合情報学研究科
Graduate School of Informatics, Kansai University
k015778@kansai-u.ac.jp
mat@res.kutc.kansai-u.ac.jp© 2015 Information Processing Society of Japanのなどである．しかし，そのために情報へのアクセス方法が制限され，扱う情報の種類が増加した場合，情報ごとのアクセス方法の違いに対応しきれず，ユーザがアクセスする情報とそれに対するインタラクション方法との齟齬が発生

874

することが考えられる．そこで，メガネ型デバイスの利点

トを操作する為に専用のコントローラを用いる手法がある．

を活かした利用法として，篠木らはメガネ型デバイスとス

実世界オブジェクトを仮想オブジェクトのコントローラとマートデバイスの連携利用を目指したシステム Oﬀ Screen

して用いる手法は，さらに実世界オブジェクト本来の操作を提案している [3]．Oﬀ Screen は，メガネ型デバイスを装と異なる使用方法を用いて仮想オブジェクトを操作する手着したユーザがスマートデバイスで作業している時を想定

法と，実世界オブジェクトの使用方法を継承して仮想オブし，メガネ型デバイスを通してスマートデバイスをみるこジェクトの操作する手法に大別できる．実世界オブジェクとで，スマートデバイスの画面外に情報を仮想的に拡張展

トの本来と異なる使用方法を用いて仮想オブジェクトを操開して表示するシステムである．このシステムによって，作する手法では，基本的な操作要件を満たしてることが多スマートデバイスへのジェスチャ操作を行うことで，メガいが、新たな操作方法の習得が必要となることがある．そネ型デバイスのディスプレイに表示される仮想情報の操作の一方で、実世界オブジェクトの使用方法を継承して仮想が可能となった．しかし，この研究では技術的な連携に重オブジェクトの操作する手法は，特別な使用方法を覚える点をおいており，AR による仮想オブジェクトの操作性の必要がないため，操作方法の習得が容易であると考えられ低さなど，インタラクションに関する課題を残している．

る．そこで本研究でも，仮想オブジェクトの操作方法としそこで，本研究では，Oﬀ Screen を基に，メガネ型デバて，実世界オブジェクトであるスマートデバイスをコントイスとスマートデバイスの連携におけるインタラクションローラとし，その使用方法を継承する手法を採用している．のデザインを目的としたシステムを提案する．なお，Oﬀ

しかし，コントローラであるスマートデバイスにも情報をScreen はスマートデバイスの表示の拡張およびメガネ型表示させ，表示情報と仮想オブジェクトとのシームレスなデバイスの仮想オブジェクトの操作を行うシステムであ連携が可能である点で，本研究は異なっている．

り，想定する対象情報はスマートデバイスで表示可能な全ての情報である．しかし，それら全てを対象とした場合，扱うインタラクションの種類が膨大になるため，まず場面

3. Oﬀ Screen
本章では，Oﬀ Screen の概要とシステムの課題を述べる．

を絞った検討が必要であると考えた．そこで，操作対象が2 次元平面オブジェクトであり，オブジェクトの複数表示

3.1 概要や，選択，移動などの基本的な操作が想定されることから，

Oﬀ Screen は，メガネ型デバイスを用いて AR によるス

本稿では研究の端緒として，カードゲームを対象とし，そマートデバイスの情報表示領域の拡張を行うシステムであのインタラクション方法について提案を行うこととする．

る．システムの概念図を図 1 に示す．メガネ型デバイスを

2. 関連研究
本章では，AR による仮想オブジェクトの操作方法に関する研究について述べる．

装着したユーザがスマートデバイスで写真を撮影すると，スマートデバイスの画面外に仮想情報として写真が表示される．通常，スマートデバイスでは写真の撮影，撮影した写真の閲覧や比較，削除などは，画面を切り替えて行う

AR によって表示された仮想オブジェクトを操作するた必要があるが，このシステムではそれら一連の動作を画面めの手法の一つとして，暦本の TRANSVISION が挙げらの切り替えなく，一括して行えるようになっている．仮想れる [1]．TRANSVISION では，仮想オブジェクトが表示情報の表示には， Vision Based AR に基づいた AR を利されるディスプレイにカメラやセンサを取り付け，そこか用している．Vision Based AR は，カメラ画像の特徴点情ら仮想電波を放射させる．それをディスプレイ内に表示さ報を用いてカメラの位置姿勢を推定する手法である．Oﬀ

れる仮想オブジェクトに当てることで，仮想オブジェクト

Screen では，特徴点情報として電子端末の枠に取り付けたの選択を行う．その後，ディスプレイをコントローラとしマーカの認識を使用している．て動かしたり，回転させることで選択された仮想オブジェ

操作方法はスマートデバイスで使用されているものを継クトを操作することができるシステムである．しかしこの承しており，スマートデバイスの画面外に拡張表示された手法では，仮想オブジェクトの操作にシステム固有のイン仮想情報は，端末へのジェスチャ入力を用いて操作する．

タフェースを用いる必要があり，現実の物体を操作するのメガネ型デバイスに表示するスマートデバイスの情報は，と同じような操作感を与えることはできない．

スマートデバイスからメガネ型デバイスに情報を送信する

そこで加藤らは，Tangible User Interface を基に，Tan-ことによって行う．同様に，メガネ型デバイスに表示されgible AR を提唱した [2]．Tangible User Interface は，情る仮想カーソルは，電子端末からメガネ型デバイスにジェ報に物理的実体を与え，直接触れて感知・操作できるようスチャ操作の情報を送信することによって操作する．このにすることを目指したインタフェースである [4]．Tangible

システムでは，スマートフォンやタブレット端末などを対AR では，日常にある実世界オブジェクトを仮想オブジェ象としており，Bluetooth を介したデータ通信とサーバをクトのコントローラとして用いる手法と，仮想オブジェク介したデータ通信が可能である．Bluetooth を介したデー© 2015 Information Processing Society of Japan875

そのため，ユーザによって操作難度に差が出たり，使用環境によっては操作性が担保されないといった問題が発生することが考えられる．

( 2 ) 仮想オブジェクトの操作
仮想オブジェクトの操作に用いるカーソルは，選択対象の提示の他，仮想オブジェクトの移動状態，拡大縮小などの状態などを提示する機能も有している．カー
ソルを移動させて操作対象とする仮想オブジェクトを選択する操作と，仮想オブジェクトを移動させるための操作が同一であり，ユーザがそのどちらを行おうと
図 1 Oﬀ Screen の概念図しているか認識するためには，カーソルの状態を確認しなければならない．ユーザは操作の前にカーソルの状態を確認する作業を挟まなければならず，操作対象とする仮想オブジェクトの選択が円滑に行えるデザインにはなっていない．

( 3 ) アプリケーションの機能
端末の画面にはカメラの映像を表示し，撮影した写真が仮想オブジェクトとして表示されるが，それぞれ端末側が写真撮影機能，仮想オブジェクト側が閲覧，編集機能として独立している．メガネ型デバイスに対するスマートデバイスが，仮想オブジェクトの操作用コントローラとしてのみ機能しており，相互の連携した利用が考慮されていない．
本研究では，これらの課題を解消するために，仮想オブ
図 2 Oﬀ Screen 使用時の実際の様子

ジェクトの操作方法の改善，またメガネ型デバイスに表示される情報とスマートデバイスに表示される情報をシーム

タ通信では、仮想カーソルを操作するためのジェスチャ操作の情報とマーカ情報を、スマートデバイスからメガネ型デバイスに送信する。サーバを介したデータ通信では，スレスに連携させることを目指す．

4. デザイン指針

マートデバイスの画面に拡張する画像情報などを，スマー

本章では，4.1 節で本研究で対象とする部分に関する，トデバイスからメガネ型デバイスに送信している．これにカードゲーム内での動作とユーザが行う操作の手順，またより，サーバを介してスマートデバイスからメガネ型デバスマートデバイスでのカードゲームにおける基本的な操作イスに何らかの情報を送信している途中でも，仮想カーソ方法について述べ，4.2 節で対象とするインタラクション

ルによる情報の操作を可能としている．図 2 は，Oﬀ Screenのデザイン指針を述べる．

使用時の実際の様子である．

4.1 カードゲームにおけるインタラクション
3.2 システムの課題

現在，スマートフォンやタブレット端末などのスマートOﬀ Screen では，メガネ型デバイスに表示される仮想情デバイスでは，ソーシャルゲームを初めとした，ゲームア報のスマートデバイスによる操作を可能にした．しかし，プリケーションが数多く存在する．これらの中にはカードインタラクション面に関して以下の点で課題を残している．

を扱ったものも多く見られるが，本研究ではそれらの全て( 1 ) カーソルの操作を対象とはせず，Trading Card Game を題材としたもの

仮想オブジェクトの操作方法として，カーソルによるを対象とする．Trading Card Game とは，トレーディング操作を採用していたが，カーソル自体も仮想オブジェカード（個々に異なる様々な種類の絵柄の交換や収集を意クトであるため，ユーザはカーソルが操作のための図して，販売・配布されることを前提に作られた鑑賞用・ツールだと気付かない場合があると考えられる．さらゲーム用のカード）として販売されている専用のカードをに，カーソルが背景と同色などの理由で視認すること用いて行うカードゲームのことである．

が困難な場合，ユーザは選択対象を認識することがで4.1.1 カードゲームの流れとユーザの手順きず，仮想オブジェクトを操作することも難しくなる．

© 2015 Information Processing Society of Japan

カードゲームにおける主なルールを以下に示す．また，

876

相手側の使用エリア行われるものであり，強制的に行われるためである．

ユーザ側の使用エリア

略表示されている．ユーザがこれらのカードのうちの 1 つ（2）のフェーズでは，ユーザはまずカードを自身の手札から選択する．ユーザの使用するスマートデバイスの画面内には，自身の手札となっているカードがやや小さめに概場場のカード捨て山にタップ操作を行うと，そのカードが拡大表示され，カードの詳細情報の表示と共に，そのカードを選択している状態となる．その際画面内に「出す」，「召喚する」などの表示手札山札がされ，それをタップするとカードが自身の場に出される．
（3）のフェーズでは，自身の場にあるカードのうち 1 つをタップすることで選択状態とし，画面内の「攻撃する」

図 3カードゲーム全体のイメージ図などの表示をタップすることで攻撃状態へ移行，次に攻撃対象とする相手プレイヤーの場のカードをタップすること

カードゲーム全体のイメージを図 3 に示す．なお本稿では，で攻撃を行う．または，自身のカードをホールドドラッグゲームをプレイするものをプレイヤーと呼ぶこととする．

し，攻撃対象とする相手プレイヤーの場のカードにドロッ• 基本的に 1 対 1 で行う．

プすることで攻撃動作を行うものもある．

• トランプなどのカードゲームにおける「場」，「手札」，「山札」，「捨て山」と呼ばれるエリアが存在する．ただしトランプなどとは異なり，それらは各プレイヤーごとに個別に処理する．

• プレイヤーは自身のカードセット（山札）を用意し，それを用いてゲームを行う．

4.2 対象とするインタラクションのデザイン指針
本研究では，3.2 節で述べた Oﬀ Screen に関する課題を解決するために，インタラクションデザインを行う上で満たすべき要件を，(1) 直感的で表示情報の変動と適合した操作方法であること，(2) 情報の選択状態が容易に確認できる• ターン制のシステムを用いており，各プレイヤーは自こと，(3) 情報の比較が容易であること，(4) 端末の画面内分の番に，決められた回数，決められた順番で行動をに表示された情報（以下，実情報と記す）と端末の画面外起こすことになる．どちらかのプレイヤーが一通りのに仮想オブジェクトとして表示された情報（以下，仮想情フェーズを終えると，もう一方のプレイヤーが同じよ報と記す）のシームレスな連携が可能であること，の 4 つうに各フェーズを行う．

であると考えた．また，スマートデバイスにおけるカード• 各プレイヤーにはゲームごとに固有のポイントが設定ゲームで発生するインタラクションを，「選択」と「比較」されており，カードによる攻撃を行うことでそれを減の 2 つであると考えた．「選択」は，4.1.2 項で述べたようらしていく．にユーザが手札や場のカードを選ぶ際に行われる．「比較」• どちらかの所持するポイントがなくなれば，なくなっは，カードの選択時，ユーザがどのカードに決めるかの指たプレイヤーの負けが決まる．または，違反行為など，針として，各カードごとに設定されているステータス情報指定された行為を行った場合，そのプレイヤーが負けを見比べる際に行われる．そこで上記 4 つの要件を満たすとなることもある．

インタラクションの設計を行うために，「情報の選択」，「情ゲーム内でプレイヤーが行う各フェーズは，以下の 3 つである．

報の比較」の 2 つの観点からデザイン指針を作成した．

4.2.1 情報の選択( 1 ) プレイヤーが使用可能なカードを，自身の山札の上か仮想オブジェクトの操作を行う場合，ユーザは仮想オブら指定された枚数引いて持ち札（手札）とする．

ジェクトに直接手を触れることができないため，ユーザに( 2 ) 手札からゲームごとに決められた数のカードを自身のは現在自身がどのオブジェクトを操作しようとしているの場に出す．

かを明確に認知させる必要がある．また，選択している情( 3 ) 場に出したカード，または既に自身の場にあるカード

報を変更する際には，変更されたことが一目で分かる表示を用いて，対戦相手の場のカードに攻撃を行う．

であり，ユーザが変更動作を行っていると自身で認識でき

4.1.2 スマートデバイスにおける操作方法
スマートデバイスでカードゲームを行う際に，ユーザがることが必要である．なお，カードゲームにおいて選択される情報は，手札や場などのカードである．

端末に対して行う操作について，各フェーズごとに述べる．

これらを満たすために，提案システムでは選択対象を端（1）のフェーズでは，ユーザが何らかの操作をすること末の画面内に表示し，それ以外のものを仮想オブジェクトはなく，基本的に自動で行われる．これは，山札から手札として端末の画面外に表示するようにした．これにより，にカードを加える動作は各プレイヤーのターンの開始時にユーザは端末に表示されている情報を見ることで選択対象© 2015 Information Processing Society of Japan877

を即座に認識することができる．さらに，視点の中央付近に選択対象が表示されることで，現在その情報に注目しているとユーザに意識させることができると考える．また，選択の切り替えについては，画面外の仮想情報を端末画面の左右に並んで表示し，端末に左右のスワイプジェスチャ入力を行うことで隣接する情報に選択を切り替えることができるようにした．選択の切り替えを実情報と仮想情報の切り替えに対応させることでユーザに切り替え動作を認識
図 4

させやすくし，さらにスワイプでカードを横にずらす動作をカードの切り替えと対応させることで，カードの選択操作を直感的に行えるようにした．

4.2.2 情報の比較
スマートデバイスなどの電子端末では通常シングルウィンドウ・シングルタスクであり，注目している以外の情報は表示方式上隠れてしまうため，複数の情報を比較する際にはウィンドウや画面の切り替えを行うが，ユーザは同時に複数の情報を比較することができない．比較をする際には，一度比較元を拡大表示しそのデータを記憶，その後その拡大表示を解除し，再度他の比較対象を拡大表示して記憶したデータと比較するという動作が必要であり，容易とは言えない．また，比較対象のデータが複雑になるほどユーザの負担は大きくなる傾向がある．
こういった問題を解消するために，提案システムでは，選択されていない状態でもステータス情報を完全に隠してしまわず，仮想オブジェクトとして表示されるカードの周囲に，付加情報として仮想表示することとした．これにより，注目しているカード以外の情報も同時に確認することができ，カードの切り替えを行わずシームレスな比較を行うことができると考える．

Vuforia*2（Vuforia SDK v2.8）を使用した．Vuforia は，特定の図形を持つマーカではなく，特徴点が多い画像情報をマーカとして事前に登録することで，マーカの一部からカメラの位置姿勢を推定することが可能である．

5.2 操作方法
4 章で述べたデザイン指針に基づき，現在選択中のカー
ドはスマートデバイスの画面に表示され，その周囲に ARによる仮想情報として選択外のカードを並べて表示した．
シースルー HMD を通して見た概観を図 4 に示す．選択するカードは端末に左右のスワイプジェスチャ入力を行うことで切り替わるようにした．端末の画面を左右にスワイプするだけでカードの選択が可能であり，カードがユーザの入力動作に対応した動きをすることで，直感的で容易な選択動作を行うことができる．また，各カードが持つステータスをカードとともに仮想化して表示することで，情報比較のための動作を取り除き，複数のカード間の情報比較を容易に行えるようにした．

6. まとめ

5. 実装
4 章で述べたデザイン指針に基づいて，メガネ型デバイスとスマートデバイスの連携におけるインタラクションのデザインおよび実装を行った．なお，本稿で実装したインタラクションは，カードの選択時を対象としたものである．

5.1 構成本システムでは，スマートデバイスに iPhone4（MC604J，本稿では，メガネ型デバイスとスマートデバイスの連携におけるインタラクションデザインの端緒として，カードゲームのインタラクションをリデザインしたモデルを提案した．今後は汎用的な利用に向けて，幅広いインタラクションを対象としたモデルを設計していく予定である．
参考文献
[1]

iOS 6.0.1）を使用した．メガネ型デバイスには代用としてシースルー HMD を使用した．シースルー HMD は，[2]

HMZ-T2（SONY）に Lightning Digital AV Adapter（Apple Inc.）と市販のモバイル端末用のカバーを用いて iPhone5[3]（ND144J/A，iOS 7.1.2）を取り付けて作成した．マーカ情報や端末のジェスチャ操作のデータ通信に用いる Bluetooth[4]は，それぞれ iPhone4 および iPhone5 に搭載されているBluetooth を用いた．AR SDK*1 には， QUALCOMM の*1

AR を開発する為のツールのセット© 2015 Information Processing Society of Japan

提案システムの概観*2

Rekimoto, J.: Transvision: A hand-held augmented reality system for collaborative design, Proc VSMM’96(1996).
M. Poupyrev I. 鉄谷信二 橘啓八郎加藤博一: 拡張現実感技術を用いたタンジブルインタフェース, 芸術科学会論文
誌, Vol. 1, No. 2, pp. 97–104 (2002).
松下光範, 篠木良: Oﬀ Screen: 枠認識に基づく表示領域の拡張, IPSJ SIG technical reports, Vol. 2014, No. 24, pp.
1–8 (2014).
石井裕: タンジブル・ビット: 情報と物理世界を融合する，新しいユーザ・インタフェース・デザイン（〈特集〉仮想と現実の融合）, 情報処理, Vol. 43, No. 3, pp. 222–229 (2002).

https://developer.vuforia.com（2014/12/8 確認）

878