【ChatGPT×CODEPEN】予算は達成できる？荒利高計算ソフトを作ってみた

# <font color="Orange">***【ChatGPT×CODEPEN】で作成！荒利高進捗管理ソフトの誕生***

こんにちは！

北の大地でスーパーの店員さんをやっています。
##### 今回は «荒利<font color="Red">高</font>進捗管理ソフト» を作成しました。

よろしくお願いします。


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGygePv" data-pen-title="Untitled" data-user="imwdrqsq-the-sans" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/imwdrqsq-the-sans/pen/bGygePv">
  Untitled</a> by 大野綾子 (<a href="https://codepen.io/imwdrqsq-the-sans">@imwdrqsq-the-sans</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

**全体像**

![スクリーンショット 2024-06-02 201635.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/410f1218-3673-897e-0fb2-2857dd1c49b8.png)



# 導入
今回このソフトを作成するに至った意図からご説明していきます。
(読み飛ばしてOK！)

#### 作成した意図

わたしの業務の一環に受け持ち部門の営業数値のマネジメントがあります。

**そこで一番求められるものは荒利高の確保、つまり商品を売っていくらもうけたか？**

**<font color="red">これが一番大事です。</font>**

この荒利高がお店、引いては会社の営業利益に関わってくるのはご承知の通り。



担当者が絶対に確認すべき営業数値が記載されている書類(詳しくは社外秘なので割愛)
があります。

でもそこには一番大事なはずの月間の荒利高予算が載ってない！
荒利率は載っているのに・・・。

荒利率予算は達成していても売上が少なければ荒利高は未達成なんてことも・・・。
そのため、荒利高の把握は非常に大事です。

![スクリーンショット 2024-05-30 121730.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/a26f1d96-3d23-f083-dd11-75a250c2777a.png)


---


先日、若年時のチーフと副店長の会話が聞こえてきました。


>「荒利の計算はちゃんとしているのか？荒利によってうんぬんかんぬん…」
「荒利高予算どこにも載ってないじゃないですか。それに計算苦手で…」
>電卓で計算すると、あれとこれをかけて…
これからこれを引いて…
あーもうわかんない

と、なる、と。


わたしも最初はそうでした。
実際のところ書類に荒利高の記載はなくても計算すればすべて分かるんですがその計算が分からない、とはよくある話。


しかし、どんな仕事も荒利高を残すのが使命なわけでこれは良くないです。




![スクリーンショット 2024-05-30 102239.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/28cf9b32-3ce1-8793-ba46-789b0950f118.png)


----


#### 作成した思い

わたしはコードは書けませんが荒利を求める計算は多少できます。
そこで今回はChatGPTにコードの作成を、私はChatGPTくんの作成したソフトが正常に動いているか最終確認をし、１機と１人で協力して **«荒利高進捗管理»** ソフトを作りました。

このソフトを使うことにより荒利高に対する意識をもっと持ってほしい。

計算でつまづくから荒利高予算達成までもう一歩なのでは？

荒利高がいくらか知れれば売り場でのチーフの行動、製造計画、発注計画など変わっていくのではないか？

荒利高が予算よりいくら足りないか分かれば値引きの仕方も変わるんではないか？
そうすれば最終的にお店の利益も増えるよね！と思い作成しました。



# 使用したツール

****CODEPEN****
    ●CodePenはウェブサイトやウェブページを作るための練習ができるオンラインのツールです。
****ChatGPT****
    ●ChatGPTはOpenAIが開発した、質問に答えたり、文章を生成したりする対話型AIです。



# 作業工程 

#### プロンプトの打ち込み

 ChatGPTにプロンプトを打ち込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/4e9ad245-79c2-a65e-962d-5ed04a4bab2f.png)

このプロンプトだけでできたのがこちらです。(見た目だけ)

![スクリーンショット 2024-05-30 122030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/c7ea68f5-7828-9dea-98a1-6c0494b26a2b.png)

何となくそれっぽいです。

ChatGPTを使用するとデジタルの勉強を始めたばかりのわたしでも短時間でそれらしいソフトが作れます。

短時間でソフトが作れる分もっとソフトの完成度をあげていきましょう！


#### try and errorを繰り返す

ここからはひたすらtry and errorを繰り返し理想に近づけていく作業が続きます。
ChatGPTは万能ではないことは周知のとおり、明確に指示してあげないと求めたものが返ってきません。

なんだかパートさんに指示するのと似ているなぁと思いながら分かりやすく、誤解が生まれないように指示をしていきます。
今回この作業が一番大変でした。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/d0ffed38-5e7c-bf80-06dc-8ffb59d971ee.png)

![スクリーンショット 2024-05-30 100148.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/22d2e5e4-000e-10dc-686e-4169a73f6905.png)



↓ ChatGPTから若干のあおり　初心者は正解だけども！
![スクリーンショット 2024-05-30 022721.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/ce33983e-1412-e096-b8c4-68315a7805b7.png)


# 完成

毎日使ってくれることを願い今月の売上予算及び今月の荒利率予算は一度画面を閉じても残る機能も付けました。
最初完成したときは今月の売上予算と荒利率予算も毎回入力するようになっていましたが、この二つの予算は不変なため何度も同じ数字を入力するのは面倒だと感じ、少しでもストレス無く使ってもらえるように保存機能を組み込みました。

ついでに «計算ボタン» も無くしちゃいました。
数字を入力するだけで自動的に結果が出できます。

そして完成したのが冒頭のソフトです。
https://codepen.io/imwdrqsq-the-sans/full/GRarNNe
↑ ここから直接使えます。
## 使用方法

“今月の売上予算”　　　　　→保存機能あり
“今月の粗利益率予算”　　　→保存機能あり
“今日までの売上予算”　　　→保存機能あり
“売上実績”
“荒利率実績”
**を入力すると**
〈今月の荒利高予算〉
〈累計荒利額実績〉　　　　→現在の荒利高実績
〈荒利益の予算差〉　　　　→現在、荒利高といくら乖離があるか。
**が自動で計算されます。**

入力する箇所が多いと思うかもしれませんが、
“今月の売上予算”
“今月の粗利益率予算”
“今日までの売上予算”
に関しては一度入力してもらえれば保存してくれますのでそこまで手間ではないと思います。





# あとがき

今回は当社のシステムに合わせた仕様となりましたので、このツールが使える方は限定されてしまうかも…。

今後はどの数値を入力しても営業数値を導き出してくれるものを作れたらいいなと思います。




残念ながら若年時チーフたちにはまだ使ってもらっていませんが、近いうちに使用感などの感想を聞いてみます。


**最後にChatGPTへお礼も忘れずに…**


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777269/0897b795-ff65-7474-0cbd-7f71b040b9c2.png)



 **記事をご覧いただきありがとうございました！**


---
### 追記( 6月3日 )

文中に出ていた若年時のチーフにソフトを使ってもらいました！

「これすごく良いですよ！いくら荒利足りないかすぐわかるからいい感じです！」
と言ってもらえました。
「あとは一昨日と昨日でどれくらい差がなくなったか分かるように荒利高の履歴とか見れるとうれしい」とアイデアまでもらえました！
確かに頑張った結果、荒利がどれくらい増えたか見れたら達成感も出ますね。

自分が作ったもので若いチーフが育っていってくれるならうれしいです。