背景と目的
毎月行われるシフト作成作業に、多くの時間がかかっていました。
従業員の希望休や連勤制限など、考慮すべき条件が多く、
人力ではミスも発生しやすいし、調整する時もあって、大変な課題でした。
そこで、「ChatGPTを使って自動的にシフトを生成するWebツールを作れないか?」と考え、
CodePen上で動作する軽量なWebアプリの開発に挑戦しました。
実際に使用してみたら...

See the Pen Untitled by sukiki (@sukiki_bymyside) on CodePen.
要件整理
まず、AIに正しく伝えるために以下のように条件を整理しました。
👥 登録スタッフ
小鹿 / 中島 / 岩田 / 井上 / 佐藤 / 伊藤 / 下西 / 山本 / 大重
📅 期間
30日間(1日1シフト・4時間勤務)
⏰ 勤務時間帯
井上・伊藤:14:00〜18:00
その他:18:00〜21:00
⚙️ 制約条件
佐藤 → 土曜日は出勤不可
全員 → 連続勤務3日以内
出勤日数は均等
井上 → 総勤務時間80時間以内
小鹿・中島・岩田 → 毎日2名以上勤務
月曜・火曜 → 人数多め
木曜・土曜 → 少なめ
AIツールの選択
使用したツールはとてもシンプル、以下の2つになります。
ChatGPT
CodePen
AIとの共同開発プロセス
ChatGPT(GPT-5)を使って、次のようにステップを踏みました。
仕様を自然言語で提示
「30日間・9人・複数条件下でのシフト表を作ってほしい」と指示。
AIが自動でロジックを設計
条件を満たすように、ランダム+制約付き生成アルゴリズムを提案。
表形式で出力
日ごとに担当者をリスト化。条件が厳しい場合はAIが自動調整。
ユーザー入力欄追加
希望休や制約を入力できるUIを追加。
Excel出力機能を実装
AIが xlsx ライブラリを組み込み、ワンクリックで .xlsx ファイルを生成。
CodePenでの実装手順
1️⃣ CodePenで新しいPenを作成
HTML / CSS / JavaScriptの3タブを使用。

2️⃣ Excel出力用ライブラリを読み込む


HTMLの先頭に以下を追記:
https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js
3️⃣ JavaScriptでシフト生成処理を記述
AIが出力したコードを貼り付け。
「📁 Excelに出力」ボタンを押すと自動的にシフト表.xlsxがダウンロードされる。
完成したシステムの機能
機能 | 内容 |
---|---|
自動シフト生成 | 条件を考慮した勤務割り当て |
希望休入力 | 各スタッフの希望休を考慮 |
連続勤務制限 | 3日連勤を防止 |
主力配置最適化 | 小鹿・中島・岩田を毎日2名以上配置 |
出勤バランス調整 | 出勤日数の均衡化 |
Excel出力 | 勤務表+勤務時間集計の2シート出力 |
AI活用で短縮できた時間と、その余剰時間の使い方
項目 | 従来 | ChatGPT利用後 |
---|---|---|
希望休記入 | 約30分 | 約3分 |
コーディング | 約5時間 | 約30分 |
調整 | 約2時間 | 約20分 |
合計 | 約7.5時間 | 約1時間 |
🕒 約8時間以上の工数削減に成功!
⏳ 浮いた時間で取り組んだこと
・発注作業
・従業員とのコミュニケーション
・他部署向けの応用検討(レジ、夜間オペなど別職位版)
🏁 最後に
今回の開発を通して感じたのは、
AIをうまく使えば、非エンジニアでも実用的な業務アプリが作れるということ。
特にChatGPTは、
要件定義の段階で仕様を整理してくれる
実装中のエラーにも即座に対応してくれる
という共同開発者のような存在でした。
手作業で数時間かかっていたシフト表が、
今ではボタンひとつ・数秒で完成します。
これからの時代、プログラミングよりも“設計力と発想力”が重要になっていくと感じました。