1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

🧩 AIと一緒に作る「自動シフト作成ツール」 〜ChatGPT+CodePenで最短開発〜

Posted at

:point_up_tone1:背景と目的

毎月行われるシフト作成作業に、多くの時間がかかっていました。
従業員の希望休や連勤制限など、考慮すべき条件が多く、
人力ではミスも発生しやすいし、調整する時もあって、大変な課題でした。

そこで、「ChatGPTを使って自動的にシフトを生成するWebツールを作れないか?」と考え、
CodePen上で動作する軽量なWebアプリの開発に挑戦しました。

:eye:実際に使用してみたら...

See the Pen Untitled by sukiki (@sukiki_bymyside) on CodePen.

:writing_hand_tone1:要件整理

まず、AIに正しく伝えるために以下のように条件を整理しました。

👥 登録スタッフ

小鹿 / 中島 / 岩田 / 井上 / 佐藤 / 伊藤 / 下西 / 山本 / 大重

📅 期間

30日間(1日1シフト・4時間勤務)

⏰ 勤務時間帯

井上・伊藤:14:00〜18:00
その他:18:00〜21:00

⚙️ 制約条件

佐藤 → 土曜日は出勤不可
全員 → 連続勤務3日以内
出勤日数は均等
井上 → 総勤務時間80時間以内
小鹿・中島・岩田 → 毎日2名以上勤務

月曜・火曜 → 人数多め
木曜・土曜 → 少なめ

:writing_hand_tone1:AIツールの選択

使用したツールはとてもシンプル、以下の2つになります。

ChatGPT
CodePen

:white_check_mark:AIとの共同開発プロセス

ChatGPT(GPT-5)を使って、次のようにステップを踏みました。

仕様を自然言語で提示

 「30日間・9人・複数条件下でのシフト表を作ってほしい」と指示。

AIが自動でロジックを設計

 条件を満たすように、ランダム+制約付き生成アルゴリズムを提案。

表形式で出力

 日ごとに担当者をリスト化。条件が厳しい場合はAIが自動調整。

ユーザー入力欄追加

 希望休や制約を入力できるUIを追加。

Excel出力機能を実装

 AIが xlsx ライブラリを組み込み、ワンクリックで .xlsx ファイルを生成。

:white_check_mark: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がダウンロードされる。

:white_check_mark:完成したシステムの機能

機能 内容
自動シフト生成 条件を考慮した勤務割り当て
希望休入力 各スタッフの希望休を考慮
連続勤務制限 3日連勤を防止
主力配置最適化 小鹿・中島・岩田を毎日2名以上配置
出勤バランス調整 出勤日数の均衡化
Excel出力 勤務表+勤務時間集計の2シート出力

:speech_balloon:AI活用で短縮できた時間と、その余剰時間の使い方

項目 従来 ChatGPT利用後
希望休記入 約30分 約3分
コーディング 約5時間 約30分
調整 約2時間 約20分
合計 約7.5時間 約1時間

🕒 約8時間以上の工数削減に成功!

⏳ 浮いた時間で取り組んだこと

・発注作業
・従業員とのコミュニケーション
・他部署向けの応用検討(レジ、夜間オペなど別職位版)

🏁 最後に

今回の開発を通して感じたのは、
AIをうまく使えば、非エンジニアでも実用的な業務アプリが作れるということ。

特にChatGPTは、
要件定義の段階で仕様を整理してくれる
実装中のエラーにも即座に対応してくれる
という共同開発者のような存在でした。

手作業で数時間かかっていたシフト表が、
今ではボタンひとつ・数秒で完成します。

これからの時代、プログラミングよりも“設計力と発想力”が重要になっていくと感じました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?