GYOZA MANIA
品川別館|制作メモ
プログラミング初心者向け・図解まとめ
発注管理システム 制作フロー図解

バイト先の居酒屋「餃子マニア」の発注・在庫管理をスマホ化するシステムを作っています。「何のために」「どんな順番で」「いま何ができていて、次に何をするか」を、専門用語を最小限にして図でまとめました。

1そもそも何を解決する?

「箱が空いたらホワイトボードに書く」運用を、スマホでラクにするのがゴール。

いまの困りごと(ビフォー)
  • 切れた物をホワイトボードに手書き → 面倒で続かない
  • 在庫が見えず、同じ仕込みを二重にしてロス
  • 歩留まり(切り落とし)を無視した原価でズレる
作るもの(アフター)
  • スタッフはスマホで「切れた」を2タップ報告
  • 店長は発注対象を一覧で確認 → 発注先・数つき
  • データを貯めて仕入れ予測・原価計算へ発展

2どんな順番で作った?(制作フロー)

上から順に進めてきた流れ。緑=完了 / 赤=いまココ / 灰=これから。

1
2026/06/03

店長にヒアリング

困りごと・現状運用・理想を聞き取り。「手軽さが命」「2店舗(別館・本店)連携したい」という方針を確認。

完了
2

実データを分析(材料集め)

過去3ヶ月の発注データ(CSV)を入手 → 220品目・取引先11社を自動でグラフ化。「酒類が全体の33%」など現状が見える化。

完了|order_analysis.html
3

品目マスター(商品リスト)を作る

220品目を担当(粉場・キッチン・ドリンク・資材)に自動仕分け。単価・読みがな付き。これが全画面の共通データ。

完了|master_data.js
4

各画面のモック(試作)を作る

スタッフの報告画面・店長の品目管理・報告ボックス・棚卸し・業者休業日…と画面を1枚ずつ作成。まず見た目と動きを試す。

完了|mock_◯◯.html 各種
5

画面どうしをつなぐ

スタッフが「切れた」と報告 → 店長の報告ボックスに届く、という流れを実際に接続。「書く→見る→発注」が一周回るように。

完了|localStorage で連携
6
2026/06/04|いまココ

店長に見せてフィードバック

ngrok で一時的にネット公開し、店長が実機で確認 → FBシートで要望を回収して改良中。現場で回るか検証する段階。

進行中|mock_feedback.html
7

クラウド接続(多端末で本当に共有)

いまは同じ端末の中だけ。みんなのスマホで共有するには共通の保管庫(クラウドDB)が必要。次の大きな山。

これから
8

原価計算 & 2店舗連携(Phase2)

単価×歩留まりで本当の原価を把握、売上から仕入れ予測。別館↔本店で共通品目をまとめ仕込み→ロス削減。

これから

3システムの全体図(誰が・何を・どう流れる)

データは「スタッフ → 保管場所 → 店長」と流れる。真ん中の保管場所が心臓部。

スタッフ全員 使う人
出勤中に在庫が切れたら、自分の担当の品目で「切れた」をタップするだけ。
在庫切れ報告(mock_zaiko_report.html)
「切れた」報告を送る
データの保管場所 心臓部
報告・品目リスト・スタッフ名簿・在庫数などを保存。いまは各端末の中(localStorage)。将来はクラウドDBに置き換えて全員で共有。
品目マスター スタッフ名簿 報告データ 在庫数・定数
店長が受け取って発注
店長・副店長 管理者
届いた発注対象を見て、発注先・発注数つきで発注。品目やスタッフの設定もここで管理。
発注対象(報告ボックス) 品目管理 棚卸し スタッフ管理 一括入力 業者の休業日 操作履歴 発注分析

4発注のしかたは2通り

品目ごとに「どう発注サインを出すか」を設定する。当初3方式だったが1つは廃止。

2ビン報告

箱を2つ用意し、片方が空になったらスタッフが「切れた」を報告。発注数は「1箱ぶん」。手書きホワイトボードの置き換え。

在庫数(定数)

棚卸しで現在数を入力。「定数(あるべきMAX)− 現在数 = あと何個発注」を自動計算して発注対象に出す。

×業者おまかせ

定期便で自動補充される品。自分で発注しないので対象外 → シンプル化のため廃止した。

はじめての人向け・用語ミニ辞典

モック(mock)
「試作品」のこと。本番ではなく、見た目と動きを試すためのお試し画面。ファイル名の mock_◯◯.html がそれ。
localStorage(ローカルストレージ)
ブラウザの中にある小さなメモ帳。データを保存できるが その端末の中だけ。だから今は他のスマホに報告が届かない。
クラウドDB(データベース)
ネット上にある全員共通の保管庫。ここにつなぐと、別のスマホで報告しても店長の画面に届くようになる(次のステップ)。
ngrok(エングロック)
自分のPCの中で動かしている画面を、一時的にネット上のURLで見られるようにする道具。店長に実機で見てもらう用。
Phase1 / Phase2(フェーズ)
開発の段階のこと。Phase1=まず手軽な報告&発注(いまココ)。Phase2=原価計算や売上予測など発展機能。
餃子マニア 品川別館|発注管理システム 制作フローまとめ
現状:Phase1(報告→発注)ほぼ完成・店長フィードバック中 / 次:クラウド接続