作品一覧へ

Case StudyWebアプリ・SaaS

店舗スタッフ管理システムOpsBoard

シフト・バック・棚卸しを1画面に。飲食店2店舗のスタッフ業務を一元管理する、本番運用中のWebシステムです。スマホからも使えるレスポンシブ設計です。

分野
Webアプリ・SaaS
形態
クライアント納品
期間
2026年〜 本番運用中
OpsBoard ダッシュボード(シフトカレンダー)
OpsBoard 棚卸し管理

01 Overview

店舗運営の毎日の業務を、
1つの画面に。

Who誰の

福岡・大名で飲食店2店舗を運営する株式会社ALLY の、管理者・社員・アルバイトが使うシステムです。

Issueどんな課題を

シフトの希望提出から確定、出退勤の記録、売上バックの申請・承認、月末の棚卸しまで——2店舗の毎日の運営業務を、1つの仕組みで回したい。

Solutionどう解いたか

7つの機能を1つのWebシステムにまとめ、管理者・社員・アルバイトの3段階の権限で、それぞれに必要な画面だけを表示するようにしました。

02 Features

主な機能と、
工夫したところ

  1. Point 01

    3段階の権限制御(サーバー側でも二重チェック)

    管理者・社員・アルバイトの権限を NextAuth.js のセッションで管理し、ページを開くときはサーバー側でも権限を検証。画面で隠すだけでなく、APIのレベルでも保護しています。

  2. Point 02

    楽観的ロックで同時編集の競合を防ぐ

    複数の管理者が同時にシフトを確定しても上書きが起きないよう、楽観的ロックを実装。競合したときは画面で警告を出します。

  3. Point 03

    バックの承認フロー

    アルバイトが入力したバックの記録は「申請中」として扱い、管理者が承認した時点で初めて月次集計に反映。不正な記録を防ぎつつ、記録の手間を下げました。

  4. Point 04

    複数店舗に対応した作り

    シフト・バック・棚卸しはすべて店舗IDに紐づけて管理。新しい店舗は管理画面から追加するだけで、各機能が独立して動くように設計しています。

実装した機能

  • シフト管理希望提出・確定・カレンダー表示
  • バック管理記録入力・承認フロー・月次集計
  • スタッフ管理氏名・時給・役職・権限
  • 棚卸し管理在庫品目・数量入力・履歴
  • 勤怠管理出退勤・休憩・実働
  • 店舗管理複数店舗対応・営業情報
  • ダッシュボード自分のシフト・バック集計
  • 3段階の権限制御管理者/社員/アルバイト

03 Screens

実際の画面

OpsBoard ダッシュボード(シフトカレンダー)
ダッシュボード稼働店舗・在籍人数・バックの状況と、全体のシフトカレンダー。
OpsBoard 勤怠管理
勤怠管理出退勤・休憩・実働を月ごとに入力・確認します。
OpsBoard バック管理(記録入力)
バック管理記録の入力・月次集計・商品マスタ・POS照合。
OpsBoard 棚卸し管理
棚卸し管理ドリンク・フード・備品をカテゴリ別にカウントします。

04 Tech & Scope

使った技術と、
担当した範囲

使った技術

  • Next.js 15
  • TypeScript
  • Tailwind CSS
  • Supabase (PostgreSQL)
  • NextAuth.js
  • Vercel

担当範囲・期間

担当範囲
要件定義・設計・実装・デプロイ・運用サポート
体制
個人
期間
2026年〜 本番運用中