WISS 2022

南京錠を例とした Figma を用いた exUI 設計手法の検討
高橋 和也 ∗渡邊 恵太 ∗概要. ハードウェアから物理的なユーザインタフェースを切り離して外在化させる exUI が提案されている．これは，ハードウェアの操作をスマートフォンで行い，ユーザインタフェースを切り替えることによって製品の価値や体験を多様に定義するものである．本稿では，この設計手法を南京錠に適用し，アプリケーションを切り替えて複数の使用方法を定義可能な南京錠，metaLock を提案する．metaLock は解錠のトリガを自在に定義できるため，通常の鍵としての使い方にとらわれない自由な設計が可能である．また，従来は exUI アプリケーション制作に Web プログラミング技術が必要だったが，プロトタイピングツールのFigma を活用して画面設計を行えば即座に metaLock を操作できるシステムを構築した．提案手法により南京錠の使い方を誰もが自在に定義するとともに，施錠したものの価値もソフトウェア上で定義することを目的としている．

1

はじめに

金子らは，物理的なユーザインタフェースをプロダクトから無くし，すべての操作をスマートフォンで提供する手法，exUI を提案した [5]．この手法は，ユーザインタフェースを Web 上に外在化させ，ハードウェアの価値や体験を外部から定義するものである．物理的なインタフェースをハードウェアから排除することでプロダクトの機能や体験により高い柔軟性を与え，汎用性をもったハードウェアがコンテキストに合わせ専用的に振る舞うようになる．中里らは，この考え方を箱に取り入れた metaBox を提案
した [3]．この手法では，扉の付いた白い箱を exUIで設計し，外在化させたユーザインタフェースで鍵の開閉を制御している．中里らは，この metaBox におけるアプリケーション例として，解錠権限をユーザごとに付与した管理 box や，モノの売買が行えるシステムなどを提案していた．
本稿では，metaBox で用いられていた鍵の開閉制御に着目し，錠を exUI 設計した metaLock（図1）を提案する．metaLock は，インタフェースをWeb 上に外在化させ，スマートフォン上で解錠操作を行う南京錠型デバイスである．インタフェースと解錠トリガを変更することで，metaLock の使用方法をユーザが定義できる．本手法により，従来の南京錠のように一対の鍵を用いて施錠・解錠するという使い方に留まらない，より多くの価値を錠，および錠で施錠したものに対して付与する．

Copyright is held by the author(s). This paper is nonrefereed and non-archival. Hence it may later appear
in any journals, conferences, symposia, etc.
∗明治大学

図 1. metaLock と服薬管理アプリ

2

metaLockmetaLock は、内部に格納されたコンピュータによって錠の開閉を制御できる南京錠型のデバイスである．コンピュータはインターネットに接続され，ユーザは Web ブラウザ上で metaLock の施錠・解錠制御を行う．Web ブラウザ上に鍵のインタフェー
スを移したことにより，従来の物理的な鍵で解錠する南京錠とは異なり，解錠のトリガをユーザ自身が変更できる．本手法により，汎用的な形状である南京錠の価値をソフトウェア上で自在に定義でき，ユーザや目的，状況に合致した専用的な使用ができる．
中里らの提案した metaBox では箱に対してソフトウェア上で価値の定義付けを行うことを目的としていたが，本手法では施錠するものの種類を問わず，道具箱などの小さなサイズのものから家屋やビルといった大きなものまでに対してソフトウェア上で価値の定義付けを行うことが目的である．また，
metaBox では専用の API を用いてアプリケーションを制作していた．そのため，アプリケーション制

WISS 2022

作には Web プログラミング環境の構築やプログラミング技術を必要としていた．本手法ではプロトタイピングツールである Figma1 を用いて設計された画面のプレビューウインドウで metaLock を直接制御するシステムを構築した．画面をデザインするだけで動作するため，手軽に exUI アプリケーションの制作，および高速な価値検証を行える．

2.1

関連事例

インターネットや Bluetooth でデバイスに接続し，スマートフォンで解錠する南京錠はすでに一般に流通している．しかし，従来の南京錠がそれに対応する鍵で解錠するのと同様に，スマート南京錠と呼ばれるものにおいても事前に登録したスマートフォンで施錠・解錠操作のみを行うものが多い [1][4]．また，解錠権限の一時的な付与や権限に時間制限を設けた機能を搭載したスマートロックも一般に販売されているが，ユーザ自身が新たに鍵の定義を設計することはできず，あくまで予め用意された機能の中から選ぶだけである．

2.2 実装metaLock 内部には，シングルボードコンピュータの obniz Board2 とソレノイドを配している．obniz
Board の IO ピンにソレノイドを接続し，電流の ON／ OFF により鍵の開閉を制御する．管理者は Figma
でアプリケーション画面をデザインし，obniz デバイ
スごとに付与された固有の ID を予め指定したサーバへの URL を，トリガとしたい画面上のボタンに外部リンクとして設定する．ユーザは Figma のプ
レビュー画面をブラウザ上で開き，ボタン操作をすることで解錠・施錠を制御する．

Figma 上で画面遷移のみを表現したプロトタイプであるが，外部サービスを連携することなどで実装可能である．

3.1

南京錠型のデバイスであれば箱に入らないもの
でも施錠可能であることを利用し，権限を付与したユーザのみ自転車を利用する，シェアサイクルサービスとして用いることができる（図 2 左）．ソフト
ウェア上で機能を変更することにより，普段は個人の自転車として利用しつつ，長期間使わない期間にシェアサイクルとして利用できる．

3.2

3

アプリケーション例

metaLock の使用方法を定義付けるアプリケーシ
ョン例を以下に挙げる．金銭のやりとりについては，
12

https://www.ﬁgma.com/
https://obniz.com/ja/products/obnizboard

民泊サービス

指定した金額を支払うと解錠するようなトリガを設定し，家屋の鍵として取り付けると，その家屋はお金を支払ったユーザのみが解錠できるホテルとなる（図 2 中央）．ユーザに解錠権限を付与する機能を使用すれば，性別によって入れる区域や関係者のみが立ち入れる区域の設定など，建物や土地の入場制限にも用いることができる．

3.3

服薬管理システム

薬を飲み忘れてしまったり，摂取したかどうかを忘れて過剰摂取してしまったりすることを防ぐため，予め設定した時刻にだけ metaLock が自動で解錠され，一度閉めると次回摂取時刻になるまで施錠されるアプリケーションである（図 2 右）．複数の薬箱と複数の metaLock を用いると，頓服時刻の異なる複数種類の薬を服用している場合に，解錠している箱の薬だけを服薬すれば良いため，種類を迷わず摂取できる．

4

図 2. 3 つのアプリケーション

シェアサイクルサービス

議論

metaLock は，カギをかける場面において共通な形状であり，ひと目で錠であることが分かりやすいことを目指し，南京錠の形状を模している．インター
ネットに接続しソフトウェア上で解錠することが前提であり，ハードウェアの製造における制約が少ない．そのため，施錠の方式を変更したり，形状を大きく変更したりすることが可能である．既存の錠の形状にこだわらず，製造しやすく，扱いやすい形を目指すことが必要である．
本稿では，exUI プロダクトのインタフェースを手軽に実装できるようにするため，Figma で制作したプロトタイプをそのまま実際に運用する手法を提案した．しかし，鍵というプロダクトである以上，求められるセキュリティのレベルが高く，万全でない部分も多い．スマートロックにおけるセキュリティの研究は既に行われている [2] ため，そうした技術を用いてある程度の拡張性を維持しつつ脆弱性を減らしていくことが可能である．

南京錠を例とした Figma を用いた exUI 設計手法の検討

参考文献[1] J. CHEN and X. JIANG. Design of Sharing Bicycle Smart Lock System Based on Bluetooth andGPRS Communications. In DEStech Transactions on Engineering and Technology Research,
2017.
[2] M. Ye, N. Jiang, H. Yang, and Q. Yan. Security analysis of Internet-of-Things: A case studyof august smart lock. In 2017 IEEE Conference
on Computer Communications Workshops (INFOCOM WKSHPS), pp. 499–504, 2017.
[3] 中里 健也, 金子 翔麻, 渡邊 恵太. metaBox: 使い方を定義可能な exUI 設計の IoT Box の試作. 研究報告ヒューマンコンピュータインタラクション（HCI）, No. 4, pp. 1–6, 2019.

[4] 深井 裕二. スマートロックシステムの開発における IoT デバイスの導入検討. 北海道科学大学研究紀要, No. 48, pp. 161–166, 2020.
[5] 金子 翔麻, 中里 健也, 高田 一真, 渡邊 恵太. exUI:
ユーザインタフェースを外在化する手法とプロダク
トデザイン. 第 26 回インタラクティブシステムとソフトウェアに関するワークショップ（WISS2018）,
2018.