Akbar
A live restaurant ordering system built to give Akbar more control over its customer experience.
Akbarが顧客体験をより直接コントロールできるように構築した、実運用中のレストラン注文システム。
Akbar needed more than a static website. Together with my team at Setsuna Films, I helped build a full ordering system directly into the restaurant’s site. Customers can browse the menu, customize items, place orders, and pay online or by cash on delivery. Store staff manage incoming orders through a protected admin dashboard with real-time status updates. My role focused on product flow, full-stack development, and connecting the customer experience with store operations.
Akbarには、単なる静的なWebサイト以上のものが必要でした。Setsuna Filmsのチームとともに、レストランのサイト内に直接組み込まれた注文システムの構築に携わりました。顧客はメニューを閲覧し、商品をカスタマイズし、注文を行い、オンライン決済または代金引換を選択できます。店舗スタッフは、保護された管理ダッシュボードから注文を受け取り、リアルタイムでステータスを管理できます。私は主に、プロダクトフロー、フルスタック開発、そして顧客体験と店舗運営をつなぐ部分を担当しました。
Live at akbar.co.jp.
akbar.co.jp にて公開中。
Overview
概要
Stack
技術構成
Visuals
ビジュアル
Features
主な機能
Real-time Order Tracking
リアルタイム注文トラッキング
Live status updates delivered via Socket.IO WebSocket. Customers watch their order move from Placed to Cooking to Ready without ever refreshing the page. The kitchen dashboard updates simultaneously.
Socket.IO WebSocketを使って、注文ステータスをリアルタイムで更新します。顧客はページを更新しなくても、注文が「受付済み」から「調理中」、指示通り「準備完了」へと変わる様子を確認できます。キッチン側のダッシュボードも同時に更新されます。
Phone OTP Signup
電話番号OTP認証
SMS-verified account creation via Twilio. Customers register with a phone number and password; a one-time code confirms they are real. Once verified they are signed in and ready to order.
Twilioを使ったSMS認証により、電話番号とパスワードでアカウントを作成できます。ワンタイムコードで本人確認を行い、認証後すぐに注文できる状態になります。
Stripe Payments
Stripe決済
Full Stripe integration for secure card processing, with cash-on-delivery as a fallback. Handles payment intent creation, confirmation, and graceful error recovery.
Stripeを統合し、安全なカード決済に対応しました。代金引換も選択できるため、オンライン決済が難しい場合にも対応できます。Payment Intentの作成、決済確認、エラー時の処理まで含めて設計しています。
6-Step Order Customisation
6ステップ注文カスタマイズ
A multi-step modal guides customers through quantity, spice level, required add-ons, optional add-ons, and special instructions before adding an item to the cart.
数量、辛さ、必須オプション、追加オプション、特別なリクエストなどを順番に選べるモーダルを設計しました。顧客はカートに追加する前に、注文内容をわかりやすく調整できます。
Admin Dashboard
管理ダッシュボード
A complete back-office panel for managing live orders, menu items, categories, store hours, delivery zones, and customer data — all updated in real time.
ライブ注文、メニュー、カテゴリ、営業時間、配達エリア、顧客データを管理できるバックオフィス用ダッシュボードです。各情報はリアルタイムで更新されます。
Mobile-First Responsive
モバイルファースト対応
Designed for phones first. Fully responsive from 260 px to 1400 px+ with distinct layouts: bottom navigation on mobile, horizontal header on desktop.
スマートフォンでの利用を前提に設計しました。260pxから1400px以上まで対応し、モバイルでは下部ナビゲーション、デスクトップでは横型ヘッダーを使用しています。
Key Takeaways
学び
Akbar’s website became more than an information page. It became a working ordering system that connects customers, payments, and kitchen operations in one place. Customers can place and track orders directly on the restaurant’s site, while staff can manage incoming orders through a live dashboard. For the restaurant, the system creates a more direct relationship with customers and reduces dependence on third-party delivery platforms.
AkbarのWebサイトは、単なる情報ページから、顧客、決済、キッチン運営を一つにつなぐ注文システムへと変わりました。顧客はレストランのサイト上で直接注文し、進捗を確認できます。一方で、スタッフはライブダッシュボードから注文を管理できます。店舗にとっては、顧客とのより直接的な接点を作り、外部のデリバリープラットフォームへの依存を減らす仕組みになりました。