WISS 2018

exUI: ユーザインタフェースを外在化する手法とプロダクトデザイン
金子 翔麻* 中里 健也* 高田 一真* 渡邊 恵太*

概要． スマート家電に代表される IoT プロダクトは，主にスマートフォンを通じてプロダクトの操作を行う．これまでに IoT プロダクトへのアクセシビリティや AR によるユーザインタフェースの付与を対象とした研究がなされており，Web ページやアプリ，AR といった外部のインタフェースによって，より柔軟な機能や価値を提供できるようになってきている．しかし，ほとんどの IoT プロダク
トでは従来の物理的なインタフェースを残しつつ，スマートフォンによる操作や拡張機能を提供しており，IoT によるインタフェースの柔軟性の真価を発揮できていない現状がある．そこでプロダクトからユーザインタフェースを外在化する手法 exUI を提案する．exUI では，物理的なユーザインタフェースを一切プロダクトから無くし，すべての操作をスマートフォンから提供する．本稿では exUI の特徴とフルスタック実装した 3 つのプロダクト例についてまとめる．

1

はじめにスマート家電に代表される IoT プロダクトは，主にスマートフォンで Web ページやアプリを通じて操作する．こういった IoT プロダクトが多数ある状
況でアクセスをよりスムーズにする研究[1][2][3[4][5][6]や，AR によって IoT プロダクトにグラフィカルなインタフェースを付与する研究がある[3][7][8]．プロダクトがインターネットと接続することで，Web やアプリ，AR といった外部のインタフェースによって，より柔軟な機能や価値を提供できるようになる．
しかし，ほとんどの先行研究や製品では，プロダクト従来の物理的なインタフェースを残しつつ，スマートフォンによる操作または拡張した機能を提供している．そのため，物理インタフェースがそのプロダクトが提供する機能や使い方を固定化し，IoTによるインタフェースの柔軟性の真価を発揮できていない現状がある．
そこで我々は IoT を前提としたプロダクトデザインを考え，プロダクトからユーザインタフェースを外在化する手法 exUI[9]を提案している．本稿では
exUI の特徴とフルスタック実装した exUI 手法による 3 つのプロダクト例についてまとめる．

2exUI

exUI は，物理的なユーザインタフェースを一切プロダクトから無くし，すべての操作をスマートフォンから提供する手法である（図１）．プロダクトには物理的なユーザインタフェースがないため，プロダ
Copyright is held by the author(s).
* 明治大学図 1 exUI のアーキテクチャ

クトデザインの制約が減る．例えば，真っ白な箱という極めてシンプルなデザインや部屋の環境に合わせたデザインにすることができる．また AR 機能を用いることで，その場限りで見た目を変えることができる．
これまでのプロダクトでは，物理的なユーザインタフェースによって機能や体験が定義されていた．
それをすべて Web 上のリソースで提供するユーザインタフェースによって定義することによって，プロダクトの機能・体験により高い柔軟性を与えることができる．
例えば，プロダクトに選局ボタンがあればラジオ，早送りボタンがあれば音楽プレイヤとして定義されるが，スマートフォンにつながるスピーカとして設計すると，インターネットラジオアプリを開くとラジオとなり，音楽アプリを開くと音楽プレイヤとなる．このようにプロダクトの価値・体験を外在化したユーザインタフェースによって定義することができる．物理的なボタンがほぼない Bluetooth スピー
カは exUI に近いプロダクトといえる．
2.1 特徴1.

exUI の特徴は次の 3 点である．
Web インタフェースがプロダクトを定義

WISS 20182.

3.

プロダクトの物理インタフェースを排除し，機能や体験をすべて Web インタフェースで定義する．必要に応じて見た目も WebAR によって後から定義する．
ユーザインタフェースの柔軟性
人や環境，時間帯や季節に合わせて変更が容易である．
Web の開発分析手法の活用
すべてインターネットを通して操作するので，ユーザの利用状況を把握でき，アジャイル開発や AB テストがしやすい．従量課金制やサブスクリプションなど多様なサービス体系での提供ができる．

2.2 実装プロダクトはすべて Web を通して動作する．スマートフォンでプロダクトの ID 情報を埋め込んだ
NFC タグを読み取ることで，そのプロダクトのユーザインタフェースを提供する Web ページ（HTML,CSS, JavaScript）を開く． Web インタフェース上で操作を行うとその情報を WebSocket 通信によってプロダクトに送信し，プロダクトが動作する．また， WebARonARKit[10]を用いて，Web ページ上で AR 機能を提供する．

3

プロダクト・アプリケーション

3.1 Stone

図 2．WebAR による見た目の変更．AR オルゴール．

謝辞
本研究にて三菱電機デザイン研究所と共同研究を行いました．

参考文献[1] Robert Xiao, et al. "Deus EM Machina: on-touchcontextual functionality for smart IoT appliances."
Proc. of CHI 2017. pp. 4000-4008, 2017.
[2] AA de Freitas, et al. "Snap-to-it: A user-inspired
platform for opportunistic device interactions."
Proc. of CHI 2016. pp. 5909-5920, 2016.
[3] Ke Huo, et al. "Scenariot: Spatially Mapping SmartThings Within Augmented Reality Scenes." Proc. ofCHI 2018. Paper No. 219, 2018.
[4] Thomas Seifried, et al. "CRISTAL: Design andImplementation of a Remote Control System Basedon a Multi-touch Display." Proc. ITS2009, pp. 37-44,

インタフェースの変更に応じてラジオや音楽プレイヤ，AR 木琴，AR オルゴールになる IoT スピー
カ． AR オルゴールでは WebAR によって見た目をオルゴールにする（図 2）．AR 木琴では，スピーカ周囲に表示した音板を，スマートフォンに連動して動く仮想のバチで叩くことで音を奏でる．

2009.
[5] 伊藤昌毅, et al. "Chameleon: 多様な状況下の機器指定を実現する複数インタラクション統合技術." 情報処理学会論文誌 Vol. 34, No. 4. pp. 1571-1585, 2011.

3.2 AnoHako

International Conference on Pervasive Computing,pp. 190-207, 2005.
[7] Valentin Heun, et al. "Smarter objects: using AR

ディスプレイやボタンを一切排除した自動販売機．
スマートフォンで NFC タグを読みとって開く Web
ページ上で購入でき，電子マネーで決済を行う．Web
ページはユーザアカウントと連動しており，パーソナライズしたユーザインタフェースを提供する．例
えば，お気に入りの飲み物だけを表示する，未成年者にはお酒を表示させないなどができる．
3.3 AirSketcher2
AirSketcher[11]は風の直接操作を可能とする手法である．AirSketcher では扇風機のカメラでマーカ認識をしていたが，AirSketcher2 ではスマートフ
ォンの AR 機能を活用し，スマートフォン側だけで計算処理を行う．扇風機側はモータ制御の API 機能のみで，センサや処理機能を外在化している．

[6] Genta Suzuki, et al. "u-Photo: Interacting with
Pervasive Services Using Digital Still Images".

technology to program physical objects and theirinteractions." Proc. of CHI EA 2013. pp. 2817-2818,
2013.
[8] Valentin Heun, et al. "Reality editor: programming
smarter objects." Proc. of UbiComp 2013 Adjunct.
pp. 307-310, 2013.
[9] exUI. http://www.ntticc.or.jp/ja/archive/works/exui/.
（2018/7/28 確認）[10] WebARonARKit. https://github.com/google-ar/
WebARonARKit.（2018/7/28 確認）[11] 渡邊恵太, et al. "AirSketcher: 扇風機の直接的な風の教示手法." コンピュータ ソフトウェア. Vol29,
No.4, pp. 316-323, 2012.