＼紙の料金表とはおさらば！／ChatGPTで制作物の費用が計算できるアプリを作ったら、費用計算が数秒でできるようになった！！

Q.ChatGPTを用いて簡単のアプリが作れるって本当？

A.本当です！

▼実際に作成したアプリがこちら

See the Pen Untitled by kensan7 (@kensan7) on CodePen.

作りたいアプリの仕様をChatGPTに説明すれば、対応したHTMLのコードをものの数秒で作成してくれるのです。

今回は1週間でトライした、ChatGPTを用いたアプリ開発について書いていきます。

今回なぜ販促費計算アプリを作成したのか？

私はとある小売業で、Eコマースの販促やプロモーションを担当し、プロモーションプランの立案と実行をメインの業務と取り組んでいます。
その時に切っても切れないものというのが、販促費となります。
どの仕事でもそうですが、使えるお金は有限なので、いかに効率的な施策を生み出していけるのかが重要となります。

そしてプロモーションプランを検討していく上で、課題となっているのが販促費の算出です。

景品進呈にかかる費用は、お取引さまの見積もりや過去に実施した施策からの予測として計算ができます。
しかし外部の委託先へ依頼をしている、バナー(サイト上に貼られる見出し画像）やメルマガ・LP(サイト訪問者へ一番最初に表示されるページ)の作成や設定で発生する費用は、数十個にわたる細かいメニュー表があり、その中から毎回目を凝らして探すアナログな作業が続いています。
また商談に用いるため、本社・支社の商品担当者からバナーの作成費用の確認が販促担当者へ来たりすることもあったため、本社・支社メンバーが共通して使用できる簡易的な「販促費計算アプリ」の作成をすることで、
「よりスピーディーに正しく販促費を把握できるデジタルツール」を目指し、開発していきました。

使用したツールはこちら

なんとChatGPTとCodePenの2つのツールで作成できました！

・ChatGPT
・CodePen

ChatGPTについて

今回は現在世間を賑わせている「ChatGPT」を用いて、アプリのHTMLコードを作成してもらいます。
このおかげで今回もノーコードでアプリを作成することができます。
本来コードがかけない私が一から作成するのであれば、「本や専門サイトをみて構文を理解→実際に書いて・・・」というタームを経て、実際にコードが書けるようになるまで数十時間はかかるものを、作成のプロンプト(指示構文)を書いたら、簡単なものであれば数秒でコードを提示してくれるのです。
またこのChatGPTのすごいところは、修正や追加したいことがあった時は、プロンプトで追加で指示を出せば、新たにコードを書き直してくれるというところです。

CodePenについて

CodePenを今回使用していきます。
用途としては、ChatGPTに書き出してもらったコードを入力して、どのような動作になっているのかを確認する際に利用します。
CodePenでのアプリの挙動を見て、ChatGPTへの修正や追加指示の判断をしていきます。

作成手順

①ChatGPTへ作成したいアプリの作成指示を行う

ChatGPTへのプロンプト(指示構文)を作成しました。この指示内容がいかに明確であるかというのが、今回の取り組みの中で最も重要な点となります。
今回は明確なプロンプトを作成することを目的に、「深津式プロンプト・システム」のフレームワークを用いて、文章を作成しました。

参考：深津式プロンプト・システム
https://bocek.co.jp/media/exercise/chatgpt/3713/

【作成したプロンプト】
「#命令書」の項目ではChatGPTに自身の役割を明確にさせ、「#制約書」の項目では、各販促ツールの制作・設定価格を入力し、チェックを入れた販促施策の金額を足し上げた合計額を算出するような指示を行いました。

【ChatGPTからの返信】

ChatGPT作成のコード

販促費計算アプリ

販促費計算アプリ

<form id="promoCalculator">
    <label>選択してください：</label>
    <br>
    <input type="checkbox" id="bannerSmall" name="promotionOption" value="bannerSmall">
    <label for="bannerSmall">バナー小 3,000円</label>
    <br>
    <input type="checkbox" id="bannerMedium" name="promotionOption" value="bannerMedium">
    <label for="bannerMedium">バナー中 5,000円</label>
    <br>
    <input type="checkbox" id="bannerLarge" name="promotionOption" value="bannerLarge">
    <label for="bannerLarge">バナー大 7,000円</label>
    <br>
    <input type="checkbox" id="bannerComposite" name="promotionOption" value="bannerComposite">
    <label for="bannerComposite">バナー複合 10,000円</label>
    <br>
    <input type="checkbox" id="lpCreation" name="promotionOption" value="lpCreation">
    <label for="lpCreation">LP作成 50,000円</label>
    <br>
    <input type="checkbox" id="lpInstallation" name="promotionOption" value="lpInstallation">
    <label for="lpInstallation">LP設置 15,000円</label>
    <br>
    <input type="checkbox" id="newsletterTextDelivery" name="promotionOption" value="newsletterTextDelivery">
    <label for="newsletterTextDelivery">メルマガテキスト配信 18,000円</label>
    <br>
    <input type="checkbox" id="newsletterHTMLDelivery" name="promotionOption" value="newsletterHTMLDelivery">
    <label for="newsletterHTMLDelivery">メルマガHTML配信 22,000円</label>
    <br>

    <input type="button" value="計算" onclick="calculateCost()">
</form>

<p id="result">合計金額：</p>

<script>
    function calculateCost() {
        const checkboxes = document.querySelectorAll('input[name="promotionOption"]:checked');
        let totalCost = 0;

        checkboxes.forEach((checkbox) => {
            const value = checkbox.value;
            switch (value) {
                case "bannerSmall":
                    totalCost += 3000;
                    break;
                case "bannerMedium":
                    totalCost += 5000;
                    break;
                case "bannerLarge":
                    totalCost += 7000;
                    break;
                case "bannerComposite":
                    totalCost += 10000;
                    break;
                case "lpCreation":
                    totalCost += 50000;
                    break;
                case "lpInstallation":
                    totalCost += 15000;
                    break;
                case "newsletterTextDelivery":
                    totalCost += 18000;
                    break;
                case "newsletterHTMLDelivery":
                    totalCost += 22000;
                    break;
            }
        });

        document.getElementById("result").textContent = "合計金額：" + totalCost + "円";
    }
</script>

【作成されたアプリ】
ChatGPTによって販促施策の計算ツールができました。すごい。

まだまだ足りない要素があるので、よりグレードアップさせていきます。必要な販促施策にチェックをつけたら、「計算」ボタンを押下せずとも合計金額が表示されるようにしていきます。

【修正指示のプロンプト①】

【ChatGPTからの返信】

ChatGPT作成のコード

販促費計算アプリ

販促費計算アプリ

<form id="promoCalculator">
    <label>選択してください：</label>
    <br>
    <input type="checkbox" id="bannerSmall" name="promotionOption" value="3000">
    <label for="bannerSmall">バナー小 3,000円</label>
    <br>

    <input type="checkbox" id="bannerMedium" name="promotionOption" value="5000">
    <label for="bannerMedium">バナー中 5,000円</label>
    <br>

    <input type="checkbox" id="bannerLarge" name="promotionOption" value="7000">
    <label for="bannerLarge">バナー大 7,000円</label>
    <br>

    <input type="checkbox" id="bannerComposite" name="promotionOption" value="10000">
    <label for="bannerComposite">バナー複合 10,000円</label>
    <br>

    <input type="checkbox" id="lpCreation" name="promotionOption" value="50000">
    <label for="lpCreation">LP作成 50,000円</label>
    <br>

    <input type="checkbox" id="lpInstallation" name="promotionOption" value="15000">
    <label for="lpInstallation">LP設置 15,000円</label>
    <br>

    <input type="checkbox" id="newsletterTextDelivery" name="promotionOption" value="18000">
    <label for="newsletterTextDelivery">メルマガテキスト配信 18,000円</label>
    <br>

    <input type="checkbox" id="newsletterHTMLDelivery" name="promotionOption" value="22000">
    <label for="newsletterHTMLDelivery">メルマガHTML配信 22,000円</label>
    <br>
</form>

<p id="result">合計金額：</p>

<script>
    const checkboxes = document.querySelectorAll('input[name="promotionOption"]');
    const resultElement = document.getElementById("result");

    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener("change", () => {
            let totalCost = 0;

            checkboxes.forEach((cb) => {
                if (cb.checked) {
                    totalCost += parseInt(cb.value);
                }
            });

            resultElement.textContent = "合計金額：" + totalCost + "円";
        });
    });
</script>

【作成されたアプリ】

合計金額が自動計算になり、「計算」ボタンをその都度押す必要が無くなりました。

そして、２つ目の機能追加として「特急対応」という項目を追加しました。
文字通り、通常より優先的に対応してもらう時の対応となります。
その場合は、「特急対応」のチェックボックスを押下すると、全体の金額が1.5倍となる設定にしました。
これでアプリへ搭載する機能は以上となります。

【修正指示のプロンプト②】

【ChatGPTからの返信】

ChatGPT作成のコード

販促費計算アプリ

販促費計算アプリ

<form id="priceCalculatorForm">
    <label>
        <input type="checkbox" name="banner" value="3000"> バナー小 3,000円
    </label><br>
    <label>
        <input type="checkbox" name="banner" value="5000"> バナー中 5,000円
    </label><br>
    <label>
        <input type="checkbox" name="banner" value="7000"> バナー大 7,000円
    </label><br>
    <label>
        <input type="checkbox" name="banner" value="10000"> バナー複合 10,000円
    </label><br>
    <label>
        <input type="checkbox" name="lpCreation" value="50000"> LP作成 50,000円
    </label><br>
    <label>
        <input type="checkbox" name="lpInstallation" value="15000"> LP設置 15,000円
    </label><br>
    <label>
        <input type="checkbox" name="emailText" value="18000"> メルマガテキスト配信 18,000円
    </label><br>
    <label>
        <input type="checkbox" name="emailHTML" value="22000"> メルマガHTML配信 22,000円
    </label><br>
    <label>
        <input type="checkbox" id="urgentDelivery" value="1.5"> 特急対応 (1.5倍)
    </label><br>

    <p>選択した項目の合計金額: <span id="totalPrice">0円</span></p>
</form>

<script>
    const form = document.getElementById("priceCalculatorForm");
    const totalPriceSpan = document.getElementById("totalPrice");

    form.addEventListener("change", function () {
        let totalPrice = 0;
        const checkboxes = form.querySelectorAll('input[type="checkbox"]:checked');
        
        checkboxes.forEach(function (checkbox) {
            totalPrice += parseFloat(checkbox.value);
        });
        
        // 特急対応チェックボックスが選択されている場合、合計金額を1.5倍にします。
        if (form.querySelector('#urgentDelivery:checked')) {
            totalPrice *= 1.5;
        }
        
        // 合計金額を小数点第1位を繰り上げて整数に変換して表示します。
        totalPrice = Math.ceil(totalPrice);
        totalPriceSpan.textContent = totalPrice + "円";
    });
</script>

【完成したアプリ】

機能としては簡易的な計算アプリとしては十分ですが、下一桁に2円や3円の端数が表れてしまい、ChatGPTへ修正を依頼するプロンプトを送っても変わらず、という結果になりました。
この点は今後検証していきたいと思います。

最後に少し味気ないデザインであるため、ChatGPTにこのようなプロンプトを送ってみました。

【修正指示のプロンプト③】

【ChatGPTからの返信】

【最終完成したアプリ】

ビジネスで使用するものなので、「ユーザーの使いやすさ」に焦点を当て、POPで奇抜なデザインよりも、万人が使いやすいアプリのデザインを依頼したところ、青・白・黒の3色を利用したシンプルで見やすいデザインに仕上げてもらい、完成となりました。

作成手順の説明は以上となります。

まとめ

実際にChatGPTを用いてアプリを作成してみて、「こんな簡単にできるのか！」という驚きが大きく、早速実際にプライベートでも使用できそうなアプリの作成に取り掛かっています。

一方、現段階でもChatGPTの弱みも体感しました。
それは、追加の指示を送る際に、機能の追加や変更は容易にできるが、コード自体のエラーについては、ChatGPTは直したという応答が返ってくるも、結局は改善せずということが今回の作成でも数回あったため、結局はユーザー側の知識が無ければ解決できないことも存在するということがわかりました。

また最後に、ChatGPTを作成して制作時間を大幅に削ることができたため、実際にチームメンバーに使用してもらい感想をいただきました！

コメントをいただいたメンバー

Cさん(女性の先輩社員/SNS担当)
→チーム内で在籍年数が一番長いベテランで、アイデアマン。視点が私と異なりかつ論理的に意見を伝えていただける方。

Eさん(女性の先輩社員/プロモーション・分析担当）
→影で自己研鑽を実施している方。分析手法に詳しく、なおかつ最新のデジタルトレンドに詳しい印象がある方。

Gさん(男性の先輩社員/CS(カスタマーサービス)担当)
→性格が明るくチーム内のムードメーカー。分析思考で明るくポジティブ。コミュニケーション力の高い方。

「販促費の計算アプリとして、企画立案時の経費計算に使えそう。」→Eさん(女性の先輩社員/プロモーション・分析担当）
「支社の担当自身で確認ができるから、問い合わせが減りそう。」
→Cさん(女性の先輩社員/SNS担当)
といった前向きなものから、

「計算は100％合っていないといけないから、現段階の完成度では支社への展開は厳しい。」
→Eさん(女性の先輩社員/プロモーション・分析担当）
「載せる販促メニューをもっと精査したほうが良い。」
→Gさん(男性の先輩社員/CS(カスタマーサービス)担当)
というご指摘もいただきました。

今回いただいた意見も活かし、さらにブラッシュアップしていきます。