POP作成にもう悩まない！GAS × ChatGPT  で現場に役立つPOP文生成アプリを作ってみた

皆さんこんにちは

私は昨年オープンしたばかりの新しい食品スーパーで副店長をしているとうすけと申します。
今回はChatGPTに知恵を借りて、簡単POP文作成アプリを
「Google Apps Script（以下GAS）× ChatGPT API 」で作ってみました。

---
## 📚 本記事の内容
- なぜPOP文作成アプリを作ったのか
- 使用した技術と構成
- スプレッドシートとGASの設定手順
- アプリの動作とその流れ
- 実際に使ってもらってみた


---

## 🎯 なぜ作ったのか？背景ときっかけ

売り込みたい商品には、よく「手書きPOP」をつけます。  
でもこのPOP文、実は考えるのに地味に時間がかかる…。

- お客様の心に刺さらないと意味がない  
- 法律・表現の制限もある  
- 毎日作るのは大変！

そこで思ったんです。  
**「ChatGPTに手伝ってもらえば時短できるのでは？」**

というわけで、**GAS × ChatGPT API**でPOP文を自動生成するアプリを作ってみました！

---

## ✨ このアプリでできること

![スクリーンショット 2025-05-02 175037.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/5a351c6f-d666-4171-9bff-b8d095374534.png)


- 商品名・特徴・カテゴリを入力すると  
- ChatGPTが「POP文」を**3案自動生成**  
- 気に入った文は**ワンクリックでスプレッドシートに保存**

---

## 🧩 使用した技術構成

| 技術            | 用途                     |
|-----------------|--------------------------|
| Google Apps Script | Webアプリのベース、UI操作 |
| OpenAI API（ChatGPT） | POP文の自動生成           |
| Google スプレッドシート | 保存・履歴の管理          |

---

## 🔧 作成手順

### 📌 ステップ①：スプレッドシートの準備

1. スプレッドシートを作成し、シート名を `POP履歴` に変更します  
2. 以下のように、列は `日時｜商品名｜POP文｜カテゴリ` に設定
3. 「拡張機能」→「Apps Script」でスクリプトエディタを開く

![シート構成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/a07691f1-64b0-443e-be32-ef47b9bef19b.png)

---

### 📌 ステップ②：Apps Script のコードを書く

#### `Code.gs`の設定

```javascript
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function generatePOPVariants(product, feature, category) {
  const prompt = `以下の商品情報をもとに、POP文を3パターン作ってください。
- 商品名: ${product}
- 特徴: ${feature}
- カテゴリ: ${category}

【条件】
・1文でテンポよく韻を踏んでください
・少しユーモアを含んでください
・擬人化や言葉遊びもOK
・口に出して読みやすく
【出力形式】
1. ○○○○○○  
2. ○○○○○○  
3. ○○○○○○`;

  const apiKey = 'YOUR_OPENAI_API_KEY';
  const url = 'https://api.openai.com/v1/chat/completions';

  const options = {
    method: 'post',
    headers: {
      Authorization: `Bearer ${apiKey}`,
      'Content-Type': 'application/json',
    },
    payload: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: prompt }],
      temperature: 0.85,
    }),
  };

  const response = UrlFetchApp.fetch(url, options);
  const text = JSON.parse(response.getContentText()).choices[0].message.content;
  return text.split(/\n/).filter(line => line.trim() !== '');
}

function savePOP(product, category, selectedPOP) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('POP履歴');
  sheet.appendRow([new Date(), product, selectedPOP, category]);
  return '保存しました！';
}
```

### 📌 ステップ③index.html の作成とデプロイ

以下が `index.html` の全体構成です。これをGASのスクリプトエディタで新規ファイルとして作成します。

```html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: sans-serif; padding: 20px; }
      label { display: block; margin-top: 10px; }
      button { margin-top: 15px; padding: 8px 16px; font-weight: bold; }
      .pop-block { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; }
    </style>
  </head>
  <body>
    <h2>POP文自動作成（複数パターン＆保存機能）</h2>

    <label>商品名: <input id="product" type="text" placeholder="例：きはだまぐろ"></label>
    <label>特徴: <input id="feature" type="text" placeholder="例：宮城県産、本日店で解体"></label>
    <label>カテゴリ: <input id="category" type="text" placeholder="例：鮮魚"></label>

    <button onclick="generate()">POP文を生成</button>

    <div id="result"></div>

    <script>
      function generate() {
        const product = document.getElementById('product').value;
        const feature = document.getElementById('feature').value;
        const category = document.getElementById('category').value;
        document.getElementById('result').innerHTML = '生成中...';
        google.script.run.withSuccessHandler(displayResults)
          .generatePOPVariants(product, feature, category);
      }

      function displayResults(results) {
        let html = '<h3>生成されたPOP文</h3>';
        results.forEach((pop, index) => {
          html += `
            <div class="pop-block">
              <strong>案 ${index + 1}:</strong> ${pop}<br>
              <button onclick="savePOP('${pop.replace(/'/g, "\\'")}')">このPOP文を保存</button>
            </div>`;
        });
        document.getElementById('result').innerHTML = html;
      }

      function savePOP(popText) {
        const product = document.getElementById('product').value;
        const category = document.getElementById('category').value;
        google.script.run.withSuccessHandler(msg => alert(msg))
          .savePOP(product, category, popText);
      }
    </script>
  </body>
</html>
```

🚀 デプロイ方法
Apps Script エディタで「デプロイ」＞「新しいデプロイ」をクリック

種類を「ウェブアプリ」に設定

アクセス権限を「全員（匿名ユーザーを含む）」に変更

発行されたURLがアプリのリンクになります



---

## 🎮 実際の動作の流れ

https://x.com/ryo_i79094/status/1920029152079708420


1. `商品名・特徴・カテゴリ` を入力  
2. 「POP文を生成」をクリック  
3. ChatGPTによるPOP文が3案表示される  
4. 気に入ったPOP文の「このPOP文を保存」ボタンで保存完了！  
5. スプレッドシート「POP履歴」に自動で記録されます

---

## ✅ 補足ポイント

- スプレッドシートの**共有設定は「自分のみ」でOK**
- OpenAIのAPIキーは**漏洩防止のため慎重に管理**しましょう
- 保存できないときのチェックポイント：
  - シート名が正しいか  
  - Googleアカウントが連携されているか

また、以下の部分を変更することでPOP文のアレンジもできます。

![ここを変えるだけで.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/a8da9c63-1dc0-4f32-a08d-8afcc2837cbb.png)

今回は
- おもしろおかしく
- 韻を踏む
- お客様が思わず手にとってしまうようなフレーズ
といった内容でChatGPTにお願いをしたらこうなりました。

ChatGPTによると他にも関西弁や俳句風もできるみたいです。


## 👥 POP作成のプロに試してもらいました！

現場での実用性を検証するために、POP作成が得意な**お肉部門の主任**にこのアプリを試してもらいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/e271bdf7-5ce4-4546-a42c-4f17b614d953.png)

今回は「特徴」や「カテゴリ」を入力せず、**商品名のみ**でPOP文を生成。  
なかなか納得のいく文が出なかったようで、何度か生成を繰り返していたそうですが──

その結果、完成したPOPがこちらです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/5d926c72-facd-4f91-97b5-fb1dee081d41.png)

アプリを使い始めてから**約10分ほどで完成**。  

使ってもらった感想はこちら：

> 「なかなか気に入った文ができなかったけど、ボタンをクリックすればすぐに別の案が出るのがいいね」

今回は**3案生成**に設定していましたが、今後はもっと多くの案を出せるようにしても良いかもしれません。  
実際に使ってもらうことで、改良のヒントが見つかりました。

---

## ✏️ まとめと今後の展望

**Google Apps Script × ChatGPT × Googleスプレッドシート**。  
この3つを組み合わせることで、現場の課題を“楽しく・素早く”解決できるツールを自作できます。

今回のPOP文作成アプリの仕組みを応用して、別のツールも作成しています。

https://qiita.com/Ryo-I/items/b637dc9d876613e1b367

実は投稿の順番が前後しましたが、こちらの記事で紹介している**資格学習アプリ**も、今回のPOP作成アプリの仕組みをベースにしています。

POP作成ではChatGPTがとてもスムーズに活躍してくれましたが、資格アプリではうまくいかなかった部分もありました。  
興味のある方はぜひご覧ください。

---

今後も、**「現場で本当に役立つ」ツール**を作っていけるよう、日々チャレンジしていきます。  
最後まで読んでいただき、ありがとうございました:pray: