作品一覧へ
Case StudyWebアプリ・SaaS
店舗スタッフ管理システムOpsBoard
シフト・バック・棚卸しを1画面に。飲食店2店舗のスタッフ業務を一元管理する、本番運用中のWebシステムです。スマホからも使えるレスポンシブ設計です。
- 分野
- Webアプリ・SaaS
- 形態
- クライアント納品
- 期間
- 2026年〜 本番運用中


01 Overview
店舗運営の毎日の業務を、
1つの画面に。
Who誰の
福岡・大名で飲食店2店舗を運営する株式会社ALLY の、管理者・社員・アルバイトが使うシステムです。
Issueどんな課題を
シフトの希望提出から確定、出退勤の記録、売上バックの申請・承認、月末の棚卸しまで——2店舗の毎日の運営業務を、1つの仕組みで回したい。
Solutionどう解いたか
7つの機能を1つのWebシステムにまとめ、管理者・社員・アルバイトの3段階の権限で、それぞれに必要な画面だけを表示するようにしました。
02 Features
主な機能と、
工夫したところ
Point 01
3段階の権限制御(サーバー側でも二重チェック)
管理者・社員・アルバイトの権限を NextAuth.js のセッションで管理し、ページを開くときはサーバー側でも権限を検証。画面で隠すだけでなく、APIのレベルでも保護しています。
Point 02
楽観的ロックで同時編集の競合を防ぐ
複数の管理者が同時にシフトを確定しても上書きが起きないよう、楽観的ロックを実装。競合したときは画面で警告を出します。
Point 03
バックの承認フロー
アルバイトが入力したバックの記録は「申請中」として扱い、管理者が承認した時点で初めて月次集計に反映。不正な記録を防ぎつつ、記録の手間を下げました。
Point 04
複数店舗に対応した作り
シフト・バック・棚卸しはすべて店舗IDに紐づけて管理。新しい店舗は管理画面から追加するだけで、各機能が独立して動くように設計しています。
実装した機能
- シフト管理希望提出・確定・カレンダー表示
- バック管理記録入力・承認フロー・月次集計
- スタッフ管理氏名・時給・役職・権限
- 棚卸し管理在庫品目・数量入力・履歴
- 勤怠管理出退勤・休憩・実働
- 店舗管理複数店舗対応・営業情報
- ダッシュボード自分のシフト・バック集計
- 3段階の権限制御管理者/社員/アルバイト
03 Screens
実際の画面




04 Tech & Scope
使った技術と、
担当した範囲
使った技術
- Next.js 15
- TypeScript
- Tailwind CSS
- Supabase (PostgreSQL)
- NextAuth.js
- Vercel
担当範囲・期間
- 担当範囲
- 要件定義・設計・実装・デプロイ・運用サポート
- 体制
- 個人
- 期間
- 2026年〜 本番運用中