皆さんこんにちは
私は昨年オープンしたばかりの新しい食品スーパーで副店長をしているとうすけと申します。
今回はChatGPTに知恵を借りて、簡単POP文作成アプリを
「Google Apps Script（以下GAS）× ChatGPT API 」で作ってみました。
📚 本記事の内容
- なぜPOP文作成アプリを作ったのか
- 使用した技術と構成
- スプレッドシートとGASの設定手順
- アプリの動作とその流れ
- 実際に使ってもらってみた
🎯 なぜ作ったのか？背景ときっかけ
売り込みたい商品には、よく「手書きPOP」をつけます。
でもこのPOP文、実は考えるのに地味に時間がかかる…。
- お客様の心に刺さらないと意味がない
- 法律・表現の制限もある
- 毎日作るのは大変！
そこで思ったんです。
「ChatGPTに手伝ってもらえば時短できるのでは？」
というわけで、GAS × ChatGPT APIでPOP文を自動生成するアプリを作ってみました！
✨ このアプリでできること
- 商品名・特徴・カテゴリを入力すると
- ChatGPTが「POP文」を3案自動生成
- 気に入った文はワンクリックでスプレッドシートに保存
🧩 使用した技術構成
| 技術 | 用途 |
|---|---|
| Google Apps Script | Webアプリのベース、UI操作 |
| OpenAI API（ChatGPT） | POP文の自動生成 |
| Google スプレッドシート | 保存・履歴の管理 |
🔧 作成手順
📌 ステップ①：スプレッドシートの準備
- スプレッドシートを作成し、シート名を
POP履歴に変更します - 以下のように、列は
日時｜商品名｜POP文｜カテゴリに設定 - 「拡張機能」→「Apps Script」でスクリプトエディタを開く
📌 ステップ②：Apps Script のコードを書く
Code.gsの設定
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のスクリプトエディタで新規ファイルとして作成します。
<!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がアプリのリンクになります
🎮 実際の動作の流れ
-
商品名・特徴・カテゴリを入力 - 「POP文を生成」をクリック
- ChatGPTによるPOP文が3案表示される
- 気に入ったPOP文の「このPOP文を保存」ボタンで保存完了！
- スプレッドシート「POP履歴」に自動で記録されます
✅ 補足ポイント
- スプレッドシートの共有設定は「自分のみ」でOK
- OpenAIのAPIキーは漏洩防止のため慎重に管理しましょう
- 保存できないときのチェックポイント：
- シート名が正しいか
- Googleアカウントが連携されているか
また、以下の部分を変更することでPOP文のアレンジもできます。
今回は
- おもしろおかしく
- 韻を踏む
- お客様が思わず手にとってしまうようなフレーズ
といった内容でChatGPTにお願いをしたらこうなりました。
ChatGPTによると他にも関西弁や俳句風もできるみたいです。
👥 POP作成のプロに試してもらいました！
現場での実用性を検証するために、POP作成が得意なお肉部門の主任にこのアプリを試してもらいました。
今回は「特徴」や「カテゴリ」を入力せず、商品名のみでPOP文を生成。
なかなか納得のいく文が出なかったようで、何度か生成を繰り返していたそうですが──
その結果、完成したPOPがこちらです。
アプリを使い始めてから約10分ほどで完成。
使ってもらった感想はこちら：
「なかなか気に入った文ができなかったけど、ボタンをクリックすればすぐに別の案が出るのがいいね」
今回は3案生成に設定していましたが、今後はもっと多くの案を出せるようにしても良いかもしれません。
実際に使ってもらうことで、改良のヒントが見つかりました。
✏️ まとめと今後の展望
Google Apps Script × ChatGPT × Googleスプレッドシート。
この3つを組み合わせることで、現場の課題を“楽しく・素早く”解決できるツールを自作できます。
今回のPOP文作成アプリの仕組みを応用して、別のツールも作成しています。
実は投稿の順番が前後しましたが、こちらの記事で紹介している資格学習アプリも、今回のPOP作成アプリの仕組みをベースにしています。
POP作成ではChatGPTがとてもスムーズに活躍してくれましたが、資格アプリではうまくいかなかった部分もありました。
興味のある方はぜひご覧ください。
今後も、「現場で本当に役立つ」ツールを作っていけるよう、日々チャレンジしていきます。
最後まで読んでいただき、ありがとうございました