HAKOBI — スマホアプリデモ
店舗を選んで注文し、決済を通して、地図の上を動く配達員を追うところまで、 ひと通り触れます。インストールも会員登録も要りません。 はじめて開いた人でも空の画面にならないよう、注文履歴が入った状態から始まります。
ホーム画面に追加すると、アドレスバーの無い状態で起動します。アイコンからの起動・全画面表示・起動時のスプラッシュまで、ストアのアプリと同じ体験になります。
審査を待たずに公開でき、更新も即座に反映されます。まずこの形で出して、反応を見てからストア版に進む進め方も取れます。
使用技術:PWA(Web App Manifest / Service Worker)
OpenStreetMap の本物の渋谷を表示し、店舗から配達先までの経路を配達員のアイコンが進みます。絵で描いた架空の地図ではありません。
配達・訪問・送迎など「今どこにいるか」を見せる画面は、これと同じ作りで実装できます。
使用技術:Leaflet + OpenStreetMap(APIキー・利用料なし)
配達員の位置と進行段階は、注文した時刻からの経過時間だけで決めています。途中経過を保存していないので、再読み込みしてもタブを閉じても、正しい位置から再開します。
通信が切れても状態がずれません。同じ考え方は、予約の残り時間や作業の進捗表示にも使えます。
使用技術:経過時間からの決定的な算出
店舗選び・オプション選択・カート・クーポン適用・最低注文金額の判定・支払い方法の選択・注文確定までが、途中で止まらずに通ります。
画面の見本ではなく、実際に触れる状態で仕様を確認できます。作る前に「この操作でいいか」を判断できます。
使用技術:React(状態管理・入力検証)
押せるものはすべて44px以上、下から出るシート、押した瞬間に縮む反応、下タブでの画面切り替え。スマホ用に作った画面と、パソコン用の画面を縮めたものは別物です。
「スマホでも見られる」ではなく「スマホで使う」ための設計です。片手で完結する導線になっています。
使用技術:セーフエリア対応・ネイティブ準拠のUI
作れないのではなく、公開しているデモなので意図的に止めています。 とくに端末の許可を求めるもの(通知・位置情報・カメラ)は、ダイアログを1つも出さない方針で作っています。 触りに来た人の最初の操作が「許可するかどうかの判断」になるのを避けるためです。
スマホアプリにするか、Webのままにするか、から相談できます。
通知を送りたいだけならPWAで足りることも多く、ストア公開が必要かどうかは 作りたい機能によって変わります。要件をお聞きして、 必要のない開発をしない形をご提案します。