ChatGPTと戯れた1週間チャレンジ！
こんにちは。小売業で販売課長をしている石ゴリです🦍
小売は8月盆商戦！忙しさはMaxを極めます！
その中でChatGPTを学ぶ機会があり、
この忙しさの中でだからこそ見える身近な業務課題！
この課題をChatGPTを活用し解決に近づける1週間チャレンジを行いました
やったこと
①大量に入荷する冷凍食品を効率よく店出しするための『必殺仕分人』アプリの作成
②新入社員研修の上司コメントを書いてもらうための仮想上司の作成
使用ツール
・OpenAI ChatGPT
・CodePen
『必殺仕分人』アプリの作成～132面の扉と毎日格闘！～
早速ですが問題です！じゃじゃんっ♪
画像右下の画像の餃子はどこにあるでしょうか？
いきなりの激ムズ問題失礼しました。正解は左から15番目くらいの上から3番目にあります。
･･････そんなのわかるわけないだろ！って思ったかと思いますが、
そうなんです！実は働く私たちも似たようなもんなんです。笑。
入荷した冷凍食品を店出しするのが激ムズで時間がかかるんです！
写真に入りきっていないのですが、
扉がついている部分を一面だとすると片側の通路だけで冷凍食品が36面もあるんです！
驚くのはまだ早い･･･
反対側の通路の冷凍食品+中央冷凍平台を含めると全部で冷凍食品で132面あるんです！
冷凍の売場の全体画像はこんな感じです（※この写真でも反対側通路の36面は入りきってません･･･）
4月の店舗の改装で注力した冷凍食品売場は以前の4倍以上に広くなり、
品揃えが大幅に急増しました。このため、どの商品がどこにあるのかわからなく、
冷凍食品の店出し作業に時間がかかり売場の完成時間が遅れるという問題が
4ヶ月経った今でも発生しています！
お盆期間には毎日このような冷凍台車が10台以上入荷します。ひぇ～っ！！！
その入荷した冷凍商品をカット台車に積み替えて店出しします！
『必殺仕分人』アプリの作成～ポイントは入荷商品の仕分け～
では、冷凍商品の店出し作業に時間がかかる問題の原因は何なのでしょうか？
作業を観察していると、『商品の仕分け』に原因があることがわかりました。
現在は何も考えずに、入荷した台車の上から商品をカット台車に乗っけてひたすら店出しするという
作業オペレーションになっていました。この商品の仕分け作業ができていないことが原因で、
移動距離が長い、店出し効率が悪い冷凍食品の店出し作業になっていたようです。
パートのSさんになぜ商品の仕分けができないのか？を聞いてみたところ･･･
「商品の仕分けを行い、移動距離を短くするのは大事なのは理屈ではわかるんだけど
入荷した商品を仕分ける際にも、何処に何の商品があるのか覚えきれてません！
なので結局、入荷台車の上の方から商品を降ろして店だししているんです！」
･･･本音で話しをしてくれたSさんありがとうございます！
この声を元に、入荷した商品を仕分ける際にある程度レイアウトのかたまりで
商品を仕分けし台車に乗せることが出来るアプリ「必殺仕分人」を作成することに決めました。
『必殺仕分人』アプリの作成～ChatGPTと戯れる～
私はアプリは作りたいが、コードを書けない典型的なノーコーダー代表です。
簡単に作れると言われたGlideを使ったアプリ作成にも、
自慢じゃないですが相当悪戦苦闘しました・・・。
そこで有識者にChatGPTを使い、こんなアプリが作りたい！と
質問したところヒントになるありがたい回答をいただきました！
なるほどなるほど！主に2点を理解しました。
①ChatGPTにやらせるよりコードを書いた方が早い！
⇒でもコードを書いた方がいいなんて簡単に言われても･･･そうか！ノーコーダーだからこそ
ChatGPTにやってもらってコードを書いてもらえばいい！
②曖昧な指示は×明確な指示が〇
⇒できるだけ答えがシンプルな方が誤作動しないことを理解したので、
当初は選んだ商品を並び替えるという動作を望みましたが、
該当商品を事前に決めた台車番号へ仕分けしてもらうように変更しました。
上記を加味しChatGPTに作ってもらったコードプランがこちら↓↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品選択アプリ</title>
</head>
<body>
<h1>商品選択アプリ</h1>
<label for="product">商品を選んでください:</label>
<select id="product" multiple>
<option value="からだシフト">からだシフト</option>
<option value="ワントレー">ワントレー</option>
<option value="カレー">カレー</option>
<option value="韓国">韓国</option>
<option value="外食">外食</option>
<option value="丼の具">丼の具</option>
<option value="おかず">おかず</option>
<option value="業務用">業務用</option>
<option value="米飯">米飯</option>
<option value="麺">麺</option>
<option value="パスタ">パスタ</option>
<option value="ベーカリー">ベーカリー</option>
<option value="スナック">スナック</option>
<option value="デザート">デザート</option>
</select>
<button onclick="handleProductSelection()">振り分ける</button>
<h2>振り分け結果</h2>
<p id="result"></p>
<script>
function handleProductSelection() {
const selectedProducts = Array.from(document.getElementById("product").selectedOptions).map(option => option.value);
const results = [];
selectedProducts.forEach(product => {
let cartNumber;
if (["からだシフト", "ワントレー", "カレー", "韓国"].includes(product)) {
cartNumber = "①番台車";
} else if (["外食", "丼の具", "おかず", "業務用"].includes(product)) {
cartNumber = "②番台車";
} else if (["米飯", "麺", "パスタ"].includes(product)) {
cartNumber = "③番台車";
} else if (["ベーカリー", "スナック", "デザート"].includes(product)) {
cartNumber = "④番台車";
} else {
cartNumber = "対応する台車がありません";
}
results.push(`${product}商品は${cartNumber}`);
});
document.getElementById("result").textContent = results.join("<br>");
}
</script>
</body>
</html>
出来たアプリがこちら！
『必殺仕分人』アプリの作成～ChatGPTさんと一緒に作り上げた作成の流れ（指示文書）～
①「〇〇」は何番台車「〇〇」は何番台車に仕分けてください。そしてこの情報を覚えてください。
②上記の商品を選択出来るようにしてください・商品選択されたら台車の番号を振り分けてくれるWebアプリのHTMLコード例を教えてください。
そして作成してくれたコードをCodePenに貼り付けると稼働してくれましたが･･･
複数の商品選択ができなかったため、以下の追加情報を加えて修正してもらいました。
③上記の商品の複数選択も可能にしてください
商品選択されたら台車の番号を振り分けてくれるWebアプリのHTMLコード例を教えてください
※複数選択ができるようになりましたが、
どの商品が何番台車に振り分ければ良いのかわかりずらかったので以下の情報を追記し修正しました。
④結果の表示を「〇〇」商品は「〇〇」番台車です。といった表示にしてください。
よしっ完成！
『必殺仕分人』アプリの作成～いざ実践っ！と今後の改良ポイント～
・早速現場で使ってみた現場の声。
A主任「お～すごい便利かも。・・・でも商品の括りがわかりずらいな～。
例えば『麺』はラーメン？そば？うどん？」
確かに今回は商品部発信のゾーニング名に統一しましたが使う人によっては
大変わかりずらい括りとなっているため表示をもっと細分化させる必要があると思いました。
これは改善しよう！！
上司コメントのヒントをもらう～新入社員に学習実践の機会をいただく～
そのチャンス（？！）は突然現れました。盆の忙しい時ほど色んなトラブルは訪れます･･･。
新入社員Iさん「課長すいません。後日行われる新入社員研修に事前課題があったそうです。
本社からも催促が来ており本日中に提出したいのですが、
課題フォーマットには上司から期待するといったコメントが必要です。
主任が休みなので課長、申し訳ないのですがすぐに記入してくれますか？」
私「･･･おう。任せておけ！
」盆商戦真っ只中！
銘店の店出しを必死にする私に学習の機会を与えてくれた新入社員Iさんに感謝ｗ
上司コメントのヒントをもらう～ChatGPTを仮想上司に見立てる（指示文書）～
記入するフォーマットと受講する研修内容をベースに以下の指示文書を入力しました。
●あなたは新入社員の上司です。
●あなたの部下にあたる新入社員は仕事を円滑に進めるため、
報告・連絡・相談を学ぶ研修を受講します。
●あなたは上司として部下にあたる新入社員にどんなことを期待しますか？
以下回答の一部です。
新入社員に対して、報告・連絡・相談のスキルを学ぶ研修を提供することは非常に重要です。
これによって、チーム全体のコミュニケーションと協力が向上し、仕事の効率性が高まります。
以下に、新入社員に対して期待するポイントをいくつか挙げてみましょう。
適切な情報共有と報告:
新入社員には、進捗状況や問題点などの重要な情報を的確かつ適切なタイミングで報告するスキルを身につけてもらいたいです。プロジェクトの進行状況や課題について、適切な形式で的確に報告することが、チーム全体の透明性と認識の共有につながります。
適切なタイミングでの連絡:
重要な情報や緊急の事態が発生した際には、適切なタイミングで適切な人々に連絡を取る能力が求められます。適切なコミュニケーションツールや方法を選択し、効果的なコミュニケーションを実現することが重要です。
めっちゃいい事言うし参考になる!ただちょっと抽象的だな～。
ここに自分の新入社員に対する想いや事例は入れる必要があると感じました。
※決してコピペなんてしていないです。。参考です。。。参考です。。。
学んだこと
・指示さえ明確にすればノーコーダーでもコードを簡単に書いてもらうことが出来る！めっちゃ時短！
・パターン化できればアプリも簡単に作成することができる。今回、自分で必死こいて同じものを作れ！と言われていてもノーコーダーの私には無理でした。それを可能にできるというのがChatGPTの凄さ！！
・機能として積み上げで学習してくれるので後の追加指示が簡単でも理解してくれる。この修正時間の短さもかなり魅力的です！
・ネット記事を色々確認しました。箇条書きが伝わりやすいとのことだったので箇条書きで指示文書を作りました。箇条書きだと自分の考えも簡潔にまとめることがでできるのでとても参考になりました。
・新入社員の上司コメントの例ですが、使わないより使った方がおさらいにもなりますし参考例として活用できるのがとても良い事だと思いました。しかし表現が抽象的になってしまうため、自分の想いを付け加えるなどのカスタマイズは必要と感じました。
参考記事（大変お世話になりました！）