👏

最高にシームレスなチェックインシステムを開発したので見てほしい【コワーキングスペース】

に公開

こんにちは。能登半島でエンジニアをしている岡田です。

この度自社が運営するコワーキングスペース NORAspace のチェックイン(解錠)システムを開発しました。そこで良いUXが生まれ、技術者の皆様から批評をいただきたく記事に残すことにしました。

開発の経緯

コワーキングスペースに大事な要素は、設備の充実や安心して使えることはもちろんですが、

「パッと入れてサッと帰れる」

が、非常に大事だったりしますよね。

私はこれまで、
出先で30分使おうとしただけのコワーキングスペースのために

1. アプリをインストールして
2. ユーザー登録して
3. 入室まで10分以上…
4. チェックアウト後、二度と使わないアプリの誕生

と、なんとも言えない経験を何度もしてきました。

また「入り方が分からない…初見で入りにくい…」という場所もありますね。

そのあたりをLINEアプリに全部解決してもらおう!という思想で、今回のシステムが誕生しました。

- 使い慣れてるLINEで操作を完結したい
- 専用アプリをインストールさせたくない
- リッチメニュー、リモコンみたく使えそう
- 入口専用の機械なのは高そうなので付けたくない
- 工事したくない

と、「脳とお金の無駄リソースを一切省いた仕組み」を作ることに決めました。

目標

開発にあたり目指したのは

「初めて来て30秒でチェックインできる仕組み」

です。

技術構成

LIFF (LINE Frontend Framework)と公式LINEのリッチメニューを活用し、LINE内ブラウザですべての操作が完結する仕組みになっています。

フロントエンド ・・・・・ React 
バックエンド ・・・・・・ Node.js
認証系 ・・・・・・・・・ LINE OAuth
DB・・・・・・・・・・・・Firebase
スマートキー ・・・・・・ SESAME
決済 ・・・・・・・・・・ Stripe

ユーザー新規登録の流れ

新規登録は、2ステップ(約10秒)で完了します。

施設の入口に 友だち追加用のQRコード が貼り付けてあるので、お手持ちのスマートフォンでスキャンして追加。
友だち追加をした際に送るメッセージをカスタマイズし、[初回登録を行う] というバナーを、あいさつメッセージと共に送信します。

初回登録を行う


ユーザー情報の利用を許可


新規登録完了

チェックインの流れ

チェックインは2パターンに分かれます。

A: 時間利用のユーザー 最短20秒で完了
B: 月額会員のユーザー 10秒で完了

チェックインの流れです。

1. チェックイン用QRコードをスキャン
2. チェックインボタンを押下
3. 決済(月会員は不要)
4. チェックイン完了、解錠


リッチメニュー


チェックイン画面


Stripeの決済画面にリダイレクト

決済方法は Link, Apple Pay, Google Pay, PayPay, クレジットカードです。

Apple Payを使っているiPhoneユーザーは、1タップで決済が完了しチェックインが完了します。
Stripe × Apple Pay、控えめに言って神体験。


チェックイン完了、解錠

時間利用は、先にオーソリを取得しチェックアウトの際に金額確定で決済する仕組みを採用しています。

リッチメニューからブラウザを開くと、自動でユーザー認証が通るミドルウェアを作成していますので、ログイン情報を控えておいたり、来るたびにログインし直したりは必要ありません。

安全担保のために

リッチメニュー1タップでパッと鍵が開く仕組みにしたかったですが、悪用や誤操作での問題を防ぐ必要があり、以下の対策でまとめました。

- チェックインは施設入口のQRコードからのみアクセスが可能。
- アクセスしたチェックイン画面で位置情報を検証し、近くにいない場合はチェックインできない 

他にも

  • 鍵が空いた時にログが管理者へSlackで通知
  • スマートフォンアプリで常時監視可能な防犯カメラ

という体制です。
ひとまずコワーキングスペースとしての安全は確保できています。

QRリーダーの許可と位置情報の許可により、想定より+2タップ となりましたが、許可するだけなので許容範囲でしょう。

初来店時でも、スマホの画面を7タップくらいすればコワーキングスペースに入室できます。
かなりGOODなユーザー体験です。

テスト運用

弊社社員の宮澤くんがテスト運用を担当したところ、まさかの Apple pay 未経験で、決済を完了するためにクレカ情報を手打ちしていました。普通に3分くらいかかっていました。初運用の30秒入場は惜しくも叶わず。

翌日彼は嬉々とした顔で『Apple pay すげえ!コンビニで財布いらないじゃん』と言っていました。

ともあれ、「初来店時、"最短"30秒でチェックインできるシステム」が完成しました。

施設について

NORAspaceは、石川県七尾市(能登半島)にあるコワーキングスペースです。
能登半島は、美味しいものや優しい人, 美しい自然も豊富な、とても素敵な場所です。
日々PCと向き合う私たちにとって、最高の環境が揃っています。

その中に、働きやすいコワーキングスペースを作りました。
ノマドワーカー、リモートワーカー、ワーケーションなど
ガチで働きたい人からパッと寄りたい人まで、お気軽にお立ち寄りください。

設備
○ 27インチモニター
○ オフィスチェア(オカムラ バロンチェア)
○ 全席電源タップ
○ 安定したセキュアWi-Fi
○ クリエイター向け書籍


施設名
NORAspace(ノラスペース)

所在地
〒926-0806
石川県七尾市一本杉町86 1F

https://noraspace.net


Discussion