OneStay 線上 Check-in
完整架構與 UX 分析

分析標的:Apartment Hotel 11 Ōsaka Nippombashi(Booking.com 訂單)
系統平台:AIRHOST PMS + OneStay Guest App
資料蒐集:2026-06-02,以 Firecrawl + Playwright 實際操作爬取


一、站點架構總覽

訂單總覽頁(入口)
電話直撥 +81 50-1722-1267
地址→ Google Maps
QR Code 顯示
✅ 預登記(Pre Check-in)
/v2/flow/preCheckin/guestInfo
Step 1 住客資料填寫
→ 護照上傳(OCR)或手動填寫
→ 姓名、地址、電話、Email、職業
→ 個資同意、行銷同意
→ 護照照片上傳
→ 外籍 / 本地居民兩種表單
Step 2 房屋規定(House Rules) /v2/flow/preCheckin/houseRules
Step 3 線上付款(Payment)— Stripe /v2/flow/preCheckin/payment
完成頁 /v2/flow/preCheckin/complete
📖 HOW TO CHECK-IN 橫幅
→ hotel11faqs.figma.site(外部)
💬 聊天(Chat)
/v2/chat?checkinCode=…&pinCode=…
View Reservation Site Chat → Booking.com(外部)
文字輸入框 + 附件上傳
🛒 租借毛巾(Rental Towels)
/v2/pos/services/…?house_id=…
毛巾組 ¥500 / 浴墊 ¥200
配送時間 16:00–18:00
❓ FAQ
→ hotel11faqs.figma.site(外部)
飯店列表 × 49 間(12 區域)
各飯店個別 FAQ 子頁面
🍎 加到 Apple Wallet
api2.airhost.co/api/one/one_stay/checkin/checkin_pass?platform=apple
🤖 新增至 Google Wallet
api2.airhost.co/api/one/one_stay/checkin/checkin_pass?platform=google

二、各頁面互動元素詳細拆解

/v2/checkin/booking?checkinCode=&pinCode=

住客進入系統的主頁,包含全站所有功能的入口。

導覽列

訂單資訊卡

主要操作區

HOW TO CHECK-IN 橫幅(輪播)

服務快捷區(Service Cards)

數位票夾

Modal overlay,URL 不變

飯店資訊區

入住前資訊(Before Checkin)

訂單資訊

原始訂房人資料(Original Booker)

子頁連結

/v2/flow/preCheckin/guestInfo → houseRules → payment → complete

Step 1:住客資料填寫(進度條第 1 步)

F1 住客資料表單(每位住客各填一次)

Step 2:房屋規定(House Rules)

Step 3:線上付款(Payment)

完成頁(Pre Check-in Complete)

/v2/chat?checkinCode=…&pinCode=…

互動元素

⚙️ 技術架構:雙頻道訊息系統

頻道技術說明
① App 內建聊天
(輸入框直接傳訊)
AIRHOST 自建
Ruby on Rails Action Cable
wss://api2.airhost.co/cable
即時 WebSocket 連線,完全 AIRHOST 自行開發,無第三方 Chat SDK。住客在 App 內傳的訊息,飯店方在 AIRHOST 後台接收回覆。
② OTA 原平台訊息
(查看預訂網站訊息按鈕)
Booking.com Messaging
(外部連結,離開 App)
點擊後跳轉至 Booking.com 自己的訊息系統。兩個頻道完全獨立,訊息不互通。飯店方需同時監控兩個地方。

⚠️ 訊息分散在兩個頻道(AIRHOST + Booking.com)是此架構的主要痛點,住客和旅宿方都容易漏訊息。

/v2/pos/services/{service_id}?house_id={house_id}
hotel11faqs.figma.site(跳轉至外部網站)

四、涉及工具與技術棧

AIRHOST
PMS(旅宿管理後台)
全流程 API、資料庫、設定後台
OneStay App
住客前台介面
Check-in 網頁入口、所有住客頁面
Booking.com
OTA 訂房平台
訂單來源、OTA 聊天跳轉
Stripe
線上支付閘道
Pre Check-in Step 3 付款
OCR / AI 辨識
護照自動填寫
住客資料表單護照上傳
Apple Wallet
數位票夾
主頁 + 完成頁票卡加入
Google Wallet
數位票夾
主頁 + 完成頁票卡加入
Figma Sites
外部 FAQ 網站
HOW TO CHECK-IN + FAQ 跳轉目的地
Next.js
前端框架
整個 OneStay App 前端(SSR)

五、頁面 URL 路由完整對照

頁面URL 路徑備註
訂單總覽/zh/v2/checkin/booking?checkinCode=…&pinCode=…主入口,個人化連結
訂單詳情 Modal同上(Modal overlay)URL 不變
聊天/v2/chat?checkinCode=…&pinCode=…
POS 服務/v2/pos/services/{id}?house_id={id}每個服務一條路徑
Step 1 住客資料/v2/flow/preCheckin/guestInfo→ currentStep=guestInfo
Step 2 房屋規定/v2/flow/preCheckin/houseRules→ currentStep=houseRules
Step 3 付款/v2/flow/preCheckin/payment→ currentStep=payment(Stripe)
完成頁/v2/flow/preCheckin/complete
FAQ(外部)hotel11faqs.figma.siteFigma 架設,非品牌域名
Apple Walletapi2.airhost.co/api/one/one_stay/checkin/checkin_pass?platform=apple&checkin_token=…JWT token
Google Walletapi2.airhost.co/api/one/one_stay/checkin/checkin_pass?platform=google&checkin_token=…JWT token

五、附錄:日本橋 FAQ 完整內容

來源:hotel11faqs.figma.site/faq/nipponbashi 共 31 題,分 5 大類。

チェックイン・チェックアウト(Q1–Q10)

問題回答
Q1. チェックイン時間は?16:00 以降。16:00 前は入室不可。
Q2. チェックアウト時間は?10:00 まで
Q3. アーリーチェックインは?対応不可。
Q4. レイトチェックアウトは?有料で対応可。前日までに要連絡。11時まで ¥2,000 / 12時まで ¥3,000 / 12時以降は1泊分。
※Google/予約サイトに星5口コミ投稿で11時まで無料延長キャンペーンあり。
Q5. 荷物を預けられる?1階の荷物置き場を利用可。スタッフ不在のため貴重品は自己管理。
Q6. 荷物の事前郵送は?セルフチェックイン施設のため宅配受け取り不可。
Q7. スタッフは常駐?常駐なし。防犯カメラは設置済み。
Q8. チェックイン方法は?宿泊日3日前にメールで案内送付。当日16時以降に同リンクを開くと客室番号・パスワードが表示。
Q9. 入住指南が届かない場合は?チェックイン3日前・当日の2回メール送信。迷惑メールフォルダも確認。未着の場合は予約サイトのメッセージ機能またはお電話で。
Q10. 喫煙は?全館禁煙。喫煙が確認された場合は清掃費用を請求。

施設・サービス(Q11–Q20)

問題回答
Q11. 宿泊税は?日本の法令に基づき、宿泊税あり。チェックイン時に案内。
Q12. 客室備品は?電気ケトル・ドライヤー・カトラリー・ティッシュ・スリッパ・トイレタリー・タオル・歯ブラシ・清掃用品・トイレットペーパー。追加タオルは有料。
Q13. Wi-Fi は?各室専用Wi-Fi。SSID: hotel11_[部屋番号] / PW: 88888888
Q14. YouTube/Netflix 視聴可?可。自身のアカウントでログイン、退室前に必ずログアウト。TV型番により利用不可の場合あり。
Q15. 清掃は毎日?毎日清掃なし。追加清掃は ¥4,500/回。7泊超の滞在は1回無料(前日までに要連絡)。
Q16. ゴミの捨て方は?分別不要。すべてまとめて一袋に。ゴミ置き場は写真を参照。
Q17. アメニティ交換・追加は?1階のアメニティコーナーで歯ブラシ・ゴミ袋など自由に補充可。
Q18. 枕・毛布の追加は?枕 ¥200/個、掛け布団 ¥1,300/組。在庫確認後に案内(在庫限りあり)。
Q19. ハンガー追加は?室内にあり。追加は在庫確認後対応(数に限りあり)。
Q20. 設備に不具合は?チャットよりご連絡ください。

ポリシー・ルール(Q21–Q23)

問題回答
Q21. 駐車場は?専用駐車場なし。近隣コインパーキング利用。
Q22. キャンセル・返金は?予約サイトのキャンセルポリシーに準ずる。
Q23. 備品破損・紛失時は?実費請求あり。

設備操作ガイド(Q24–Q28)

設備操作方法
Q24. 浴室換気乾燥機モード(乾燥・涼風・暖気・換気)を選択 → タイマー設定。
Q25. エアコンモード選択 → 温度調整 → 風量・風向設定。⚠️ エアコン上に衣類等を掛けると故障原因になるため厳禁。損傷時は弁償あり。
Q26. 洗濯機電源ON → START/PAUSE。ロック解除はコースボタン5秒長押し。
Q27. 給湯器パネルA(シンプル型)またはパネルB(高機能型)。パネルBはお湯を沸かす際「高」+「連続」設定必須。
Q28. テレビリモコン電源・入力切替・地上デジタル・衛星放送・NETFLIX/YouTubeボタン。退室前ログアウト必須。

サポート・案内(Q29–Q31)

問題回答
Q29. タオルの注文方法は?初日のみ無料。追加はチェックインリンクのタオルレンタル画面から注文・支払い → 対応時間内に配達。
Q30. チェックアウト方法は?鍵をキーボックスまたは1階の返却ボックスへ。電子パスワード入室の場合はドアを閉めて退出するだけ。
Q31. 空港送迎はある?あり。アプリからのみ予約可(大阪・神戸エリア限定)。App Store / Google Play でアプリをダウンロード。

資料蒐集:2026-06-02 / 工具:Firecrawl MCP + Playwright MCP
Step 2(House Rules)、Step 3(Payment)、完成頁因住客資料未完成而無法進入,內容依 JS 路由與 URL 推斷。
Transactions、Guest Info 子頁面因需有交易/資料才顯示完整內容。
FAQ 來源:hotel11faqs.figma.site/faq/nipponbashi(全 31 題,以 JS 動態展開方式抓取)