会社HP・店舗サイト＋OpsBoard株式会社ALLY

02 Features

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

1. Point 01

   スマホを基準に組んだ12ページ

   CSSはスマホの幅（375px）を基準に組み立てています。リンクやボタンは指で押しやすい大きさ（48px以上）にそろえています。

2. Point 02

   会社と店舗で、見せ方を分ける

   会社HPは濃紺、店舗の8ページは黒を基調に。実店舗の写真を使い、イメージ素材を使った箇所には「※写真はイメージです」を必ず添えています。

3. Point 03

   料金は、条件と一緒に正しく

   料金は税込の総額で表示し、条件は料金のすぐ近くに書いています。掲載する値は店頭の掲示と突き合わせて確認しました。

4. Point 04

   メニューの品名を、出典どおりに

   ドリンクの品名一覧（87品・14カテゴリ）を、店舗の現行サイトのメニューから抜き出して掲載。綴りも原文のままにしています。

5. Point 05

   検索と共有の土台

   各ページの title・description・OGP と構造化データ（JSON-LD）を整え、検索結果やSNSで共有されたときの見え方まで用意しています。

6. Point 06

   店舗の運営は OpsBoard で

   シフト・勤怠・バック・棚卸し・スタッフ管理を1つのWebシステムに。管理者・社員・アルバイトの3段階の権限で、それぞれに必要な画面だけを表示します。

作ったもの

• 会社HP（4ページ）トップ・会社概要・店舗一覧・お問い合わせ
• Cafe & BAR BUCKS（4ページ）トップ・メニュー・店内・アクセス
• BAR Road（4ページ）トップ・メニュー・店内・アクセス
• 店舗スタッフ管理システム OpsBoardシフト・勤怠・バック・棚卸し・スタッフ管理（本番運用中）

04 System — OpsBoard

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

シフト・バック・棚卸しを1画面に。飲食店2店舗のスタッフ業務を一元管理する、本番運用中のWebシステムです。管理者・社員・アルバイトの3段階の権限で、それぞれに必要な画面だけを表示します。

1. Point 01

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

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

2. Point 02

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

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

3. Point 03

   バックの承認フロー

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

4. Point 04

   複数店舗に対応した作り

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

実装した機能

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

— More Works

• Webアプリ・SaaSめしとも（飲食店送客SaaS）→
• Webページ制作 × 広告運用福屋 無料回収LP＋Google広告→
• Webアプリ・SaaS店舗スタッフ管理システム OpsBoard→
• 生成AI・業務自動化RPO業務自動化ツール→
• 生成AI・業務自動化納期日程表ツール→
• 本業小売業 基幹システムの運用保守→
• 本業オーダースーツ販売向け 顧客管理Webアプリ→