01. ダッシュボード
今週の献立がどこまで進んでいるかを4つの主要数値で一目で把握。アレルゲン警告や予算超え案件は「要対応タスク」一覧から、その画面で対応できる構成。
設計のポイント
「いま見るべきもの」を画面右側のタスク欄にまとめ、左側の数値は状況把握用に役割分担。
採用パターン
主要数値の帯 + 要対応タスク + 提供数の推移グラフの3ブロック構成。
数値表現
揃った幅の数字で右寄せ、単位は小さく。
CASE STUDY ── AFTER-SCHOOL CLUB / SNACK PLANNING AI
60施設のおやつ献立を、
安全性を最優先のAIで毎週確実に。
全60施設の児童クラブを運営する事業者向けに、おやつ献立の自動作成AIと業務管理画面を企画・設計・開発しました。一人ひとりのアレルギーと、施設ごとに異なる予算区分を満たしながら、過去の献立と重ならないよう毎週の配分を自動で組み立てます。ミスが事故に直結する業務だからこそ、確認のためのチェックを画面のいたるところに織り込みました。
- 領域
- AI業務システム / 児童クラブDX
- 担当範囲
- 要件整理・AI設計・UI設計・実装
- 対象施設
- 児童クラブ 60 施設
- 期間
- 設計〜納品 約 3 ヶ月
OVERVIEW
プロジェクト概要
児童クラブ60施設のおやつ配分管理を、献立作成の自動化AIで仕組みに置き換える案件。これまで担当者が紙とスプレッドシートで毎週繰り返していた アレルゲン除外の確認、予算区分ごとの単価チェック、施設間での献立重複の回避 を、すべて一つの業務システムに統合しました。
ミスが事故に直結する業務のため、AIに任せきりにはせず、人が見て確認できる構造を最優先。AIの計算と業務画面をひとつのアプリにまとめ、現場が「画面の警告に従うだけで運用できる」状態を目指しています。
CHALLENGE
課題
- 01 アレルギー違反は事故に直結する。担当者の手作業チェックに依存しており、見落としが事故につながるリスクを構造的に抱えていた。
- 02 児童ごとに 複数階層の予算区分が設定されており、施設×児童×品目で組み合わせが膨大に。人手で正しく追える限界を超えていた。
- 03 60施設×週次の献立を、過去の提供履歴と照らして重複を避ける必要がある。担当者の頭の中にしかないノウハウとしてしか存在していなかった。
- 04 結果として 献立作成業務が特定担当者に集中。引き継ぎが難しく、休めない・特定の人に依存した状態が続いていた。
APPROACH
アプローチ
ミスが事故に直結する業務だからこそ、AIに任せきりにせず「人が見て確実に確認できる」ことを設計の中心に置きました。曜日×アレルゲンの除外条件を表で可視化し、AIが献立を作る前後で必ず警告と差分が画面に並ぶように。承認ボタンを押すまでに、何が満たされて何が要確認かが目で分かる構造です。
AIには「献立を作る」だけでなく、予算区分・アレルゲン・過去履歴という条件をすべて満たす組み合わせを探す問題として設計。日本の業務用ソフトに合う表ベースで密度の高い画面で、現場担当が画面ごとに頭を切り替えずに作業できるテンポを揃えました。
SCREENS
主要画面
実際に操作できる画面サンプル。各画面で「今やるべきこと」が画面の上1/3で把握できる構成にしています。
02. おやつ商品の一覧
提供可能な商品（数千件規模）を扱う一覧画面。原価・アレルゲン・カテゴリで絞り込み、一覧編集まで一つの画面で完結する、長時間の作業でも疲れにくい設計。
設計のポイント
行クリック・小操作・一括操作の階層を視覚的に分離。
画面密度
行間隔を細かく調整し、長時間スクロールしても疲れにくく。
状態の表現
色だけでなくマーク付きラベルで、色の見え方が違う方にも配慮。
03. 児童クラブ拠点の一覧
60施設の情報を一括管理。施設をクリックすると右側に詳細パネルが開く2分割構成。曜日ごとのアレルゲン除外条件を表で可視化し、ルールのチェックがやりやすい設計。
設計のポイント
一覧→詳細を画面切替ではなく同時表示にして、頭を切り替えるコストを排除。
独自パーツ
曜日ごとのアレルゲン除外表を新規開発。
操作
編集・削除は詳細パネル内で完結。一覧からは選択するだけ。
04. 献立作成（AIで作る流れ）
対象施設・期間・予算区分・除外アレルゲンの4ステップ。「AIに任せる前に何を決める必要があるか」をステップ表示で常に見える化。
設計のポイント
ステップごとに条件のまとめを表示し、AIに何を伝えているかを見える化。
事前プレビュー
予算消化率・利用可能商品数を実行前にざっくり表示。
待ち時間の表現
生成中は専用の表示で枠線と進捗バーを並べる。
05. 献立詳細
5つの主要数値、日別の献立カード、栄養バランス、アレルゲンチェック結果を1画面に。確定前にアレルゲン違反や予算超えのチェックをすべてこの画面で完結。
設計のポイント
「予算超え」「アレルゲン違反」を視覚的に同列扱いし、確定前にすべての警告をまとめて表示。
日別カード
カード/表/納品書 の3つの表示モードに切替可能。
チェック結果
合致/要確認 を色つきマークで一目で把握。
06. 配分カレンダー
月単位で全体を見渡せる画面。複数施設のおやつ提供予定を日付ごとのマスに収めつつ、アレルゲン警告日や予算超え日を色で区別。印刷時もレイアウトが崩れない設計。
設計のポイント
マス内3件まで表示＋件数の小さなラベルで「いつ忙しいか」が一目で分かる。
操作の流れ
月切替ボタンを罫線で囲み、視線が月内にとどまる設計。
印刷対応
A4横向け用の専用レイアウトで、印刷時にもマスの高さを自動調整。
07. 発注集計
確定した献立から発注量を自動計算。在庫の不足分を赤色で警告、仕入先ごとの内訳を1つの表にまとめて表示。
設計のポイント
「いま在庫」と「発注後に残る数」の両方を1つのマスで比較可能。
操作
商品別/施設別/仕入先別 で集計を切り替えるボタン。
出力
CSV出力 / 発注書PDF / 確定して発注 をワンクリックで。
08. 月次レポート
月次の運用状況を、主要数値4枚＋アレルゲン対応比率＋施設別ランキング＋推移グラフで一覧表示。経営報告書としてPDF出力前提の整然としたレイアウト。
設計のポイント
グラフを統一の枠で囲み、印刷時にもページ分割が想定通り。
配色
青色1色とグレーに絞り、印刷時のインク消費にも配慮。
文字
数値は揃った幅、ラベルは可変幅で読みやすさを担保。
OUTCOME
変わったこと
納品から運用開始まで、ミスが許されない業務のあり方が3つの軸で変わりました。数字での評価は運用が安定してからご報告予定 ── 現時点は定性的なご報告です。
01
アレルゲン確認が
「人の集中力」から「仕組み」へ。
Beforeスプレッドシートで担当者が目視チェック。
After確定前に警告が画面に並び、見落としが構造的に発生しない。
ミスが許されない業務で「集中力に頼らない」状態を、画面設計とAIの仕組みの両輪で実現。
02
献立作成が
「考える仕事」から「確認する仕事」へ。
Before予算区分・履歴・アレルゲンを紙で管理して、毎週手作業で組み立てていた。
AfterAIが配分案を出し、担当者は警告と差分を確認するだけ。
「ゼロから組む」業務を「OK／要確認 を判断する」業務に置き換え。担当者の役割が変わった。
03
業務が
「特定の人の頭の中」から「誰でも触れる画面」へ。
Before担当者が休むと業務が止まりかける属人化状態。
After画面の警告に従えば運用できる、引き継ぎ可能な形へ。
「特定の人しかこの作業ができない」状態を、ルールを理解するAIが代替する設計に。
PROCESS
3ヶ月の進め方
オンラインで伴走しながら、設計→開発→納品を3ヶ月で進めます。各月の終わりに必ず触れる成果物を残し、ご意見を翌月の作業に直接反映していく進め方です。
1
MONTH 01 ／ 要件整理 + 制約抽出
「何を満たせばOKか」を画面で合意する週。
業務の流れをヒアリングし、アレルゲン・予算区分・履歴ルールを整理。情報の組み立てと画面切替の骨組みを3日で固める。
- 業務ヒアリング（2回）
- 条件・ルールの一覧化
- 情報の組み立て・画面マップ
- 主要3画面の下書き
2
MONTH 02 ／ AI設計 + 画面開発
AIの仕組みと画面を同時並行で作る週。
条件をすべて満たす組み合わせを探す仕組みの設計と、8画面の開発を同時並行で進める。週後半に動くサンプルで内部デモを実施。
- 条件を満たす計算の設計
- 主要8画面の開発
- アレルゲン除外表の新規開発
- 動くサンプルで内部デモ
3
MONTH 03 ／ 検証 + 納品
運用ルールを画面に落とし込む週。
実データで試した結果を画面の警告・差分表示に反映。発注集計・レポート・印刷対応まで仕上げて納品。
- 実データでの検証
- 警告・差分表示の調整
- 発注・レポート画面
- 納品 + 運用引き継ぎ