どんな悩みにも答えて見せる！LINEBot×ChatGPTで楽々接客！

みなさんこんにちは～！
小売業で化粧品の仕入れを担当している、夏 生（なつき）です。

今回は、

[ChatGPT](https:/9/chatgpt.com/c/3ab28054-62eb-4628-b7c5-3c5861b425b4)
[MAKE](https://eu2.make.com/656562/scenarios/1832034/edit)
[LINE Official Account Manager](https://manager.line.biz/account/@359oyjrw/setting/messaging-api)
[Google Spread Sheets（以下スプレッドシート）](https://docs.google.com/spreadsheets/d/1mWb_-ZSzfpXcyl4nMq4fe5O7Fe1HsZM1-pSI-QI1kIE/edit?gid=0#gid=0)


を使って<strong>お客さまへのお悩みに対する商品提案を楽にする方法</strong>をご紹介します。
自分用に使うのもアリです:sparkling_heart:

# 完成系
Xに掲載した動画▼

https://x.com/kitsunadawaka/status/1830125671609483430

MAKEのシナリオ▼

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/d421b4a5-73aa-9d3a-e4aa-bfaeec8b7d2e.png)

# 作成の経緯

化粧品の商品特性上、品数や種類が多く取扱商品を覚えるだけで一苦労です。
その中でお客さま一人一人に合った化粧品を紹介しなければなりません。
現場では日々、品出しやレジ打ち等の作業に忙殺されてお客さまへの接客にあまり時間を割けない時もあります。
自分から提案する分には流れを紹介しやすい方向にもっていくという技もありますが、
お客様からの質問が来た時には内容が様々なので調べるのに手間がかかってしまったり、新入社員などでは知識が足りないこともあります。


なので今回は

- <strong>時間をかけずにお客さまのお悩みを解決する商品提案ができる。</strong>
- <strong>誰でも活用できる。</strong>

という点を念頭にプロダクトを作りました。

お客さまにとっては詳しい商品説明や悩みに即した提案を受けられるし、
従業員もお客さまに満足いただける上に業務の効率も上がるという点で活用できると思います。

# スプレッドシートの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/030703f7-5a2d-ba5e-57b5-524e3c3588a8.png)
まずはスプレッドシートの作成です。
こちらはサンプルシートです。品揃えを反映させましょう。
お悩みに対してそれに合う商品だけではなく、陳列情報や類似商品、相乗効果のある商品も書いておくと第2、第3の案が出せてすぐに商品の元までたどり着く手助けになるでしょう。

# MAKEの設定

過去にLINE Botの返答設定について細かく解説しているのでこちらも参考にしていただけたらと思います！

https://qiita.com/OomammaloO/items/8dc5f54c94725dcea59a

では、MAKEの設定を説明していきます。

### ①スプレッドシートのモジュールの設定

<html>
<body>
    <!-- 画像の幅を450pxに設定 -->
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/0f0337da-b9c5-9d9f-cb8a-400ab8f1cad8.png
" width="450" alt="説明文">

</body>
</html>

今回使うスプレッドシートをモジュールに読み込み、フィルターを設定します。
`Text operators Equal to`を選択してください。
ユーザーが送ってきたテキストがA列「お悩み」と同じだった場合という意味です。

### ②分岐の設定
基本的にスプレッドシートの中から返答をしたいですが、スプレッドシートのA列「お悩み」に当てはまらないテキストの場合もあります。
その場合の分岐を作ります。

<strong>②-1 フィルターの設定①</strong>

まずは、スプレッドシートのA列「お悩み」とテキストが同じだった場合というフィルターを設定します。
フィルターの場所▼
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/fe9f6879-cd05-1797-056a-caad6a763403.png)

フィルターの中身▼
<html>
<body>
    <!-- 画像の幅を450pxに設定 -->
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/35124579-12aa-65b4-92af-a3a8093043a2.png
" width="450" alt="説明文">

</body>
</html>

こちらもまた`Text operators Equal to`を選択してください。
ユーザーから送られてきたテキストがA列「お悩み」と同じだった場合というフィルターです。

<strong>②-2 LINEの応答設定①</strong>

<strong>ユーザーから送られてきたテキストがA列「お悩み」と同じだった場合</strong>にスプレッドシートの中から返答を返します。
LINEのモジュールの位置▼
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/df0e13a0-0501-1451-f34c-3a4eb04000f6.png)

LINEの応答設定の中身▼
<html>
<body>
    <!-- 画像の幅を450pxに設定 -->
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/06ab09e9-156f-da45-849b-42d7222564e3.png
" width="450" alt="説明文">

</body>
</html>

スプレッドシートの中から返したい内容を選択します。

今回は
{1.`お悩み（A）`}におすすめの商品は{1.`商品名（C）`}です。{1.`陳列情報（E）`}にあります。相乗効果のある商品は{1.`相乗効果商品（F）`}で、類似商品は{1.`類似商品（G）`}です。
というようにスプレッドシートの列をすべて返答するようにしました。

<strong>②-3 フィルターの設定②</strong>

ここからは<strong>ユーザーから送られてきたテキストがスプレッドシートの内容と一致しない場合</strong>です。
フィルターの場所▼
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/124f7dd2-e359-9220-1703-992bb5ec66f3.png)


フィルターの中身▼
<html>
<body>
    <!-- 画像の幅を450pxに設定 -->
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/ae92beb7-cc2f-effe-5d95-13e14d53d994.png
" width="450" alt="説明文">

</body>
</html>

`Basic operators:Exists`を選択してください。
テキストとスプレッドシートが一致しなかった場合という意味になります。

<strong>②-4 ChatGPTのモジュール設定</strong>

では一致しなかった場合にフィルタリングされたらどうするかを設定します。
ここからChatGPTの出番です。

モジュールの位置▼

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/e5e2d0d8-2747-bb7d-5dbc-1767cb57b25c.png)

モジュールの中身▼


<html>
<body>
    <!-- 画像の幅を450pxに設定 -->
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/ac8c5a19-d26a-997e-e6b8-54fdef2bb025.png
" width="450" alt="説明文">

</body>
</html>

:::note warn
Message Contentの内容で返答が大きく変わります。
入力する内容は簡潔にわかりやすくしましょう。
:::

ユーザーが送ってきたメッセージに対しての具体的な商品を提案させます。

ユーザーは「{`3.events[].message.text`}
」について悩んでいます。この問題に対処するためにおすすめの具体的なスキンケア商品を提案してください。商品名、商品コード、特徴も教えてください。

今回は`Max Tokens`が100なのでスキンケアに絞りました。


<strong>②-5 LINEの応答設定②</strong>
最後にChatGPTが考えた内容をLINEで返答する設定をします。

LINEのモジュールの位置▼
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/38eb2134-16ea-ae17-ecc1-5eea9bef2c56.png)

LINEの応答設定の中身▼
<html>
<body>
    <!-- 画像の幅を450pxに設定 -->
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/f57667ab-257e-62c6-82bf-030ce417e2be.png
" width="450" alt="説明文">

</body>
</html>

解説は以上となります！
実際に使ってみると以下のように返答が来ます。
スプレッドシートとは違う内容を打ってしまっても
ChatGPTから返答が来ますね！

<html>
<body>
    <!-- 画像の幅を350pxに設定 -->
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/30e20b1b-55d9-61b2-2862-b3d80fe59835.png" width="350" alt="説明文">

</body>
</html>


# あとがき

今回ChatGPTを使ってプロダクトを作ったのは2回目になります。

初めて作ったときにいろいろ構想をしていて
本当は自由度が高いものを作りたかったのでこちらのチャットボット形式を思いついたのですが、複雑に考えすぎていてスプレッドシートの設定やChatGPTの設定がうまくいかず1回目はWebアプリを作ったという経緯がありました。

1個目のプロダクト▼

https://qiita.com/OomammaloO/items/30efd61fa3788fef44ba


再度時間ができたので再チャレンジしてみたのですが
あれこれ詰め込みすぎずシンプルにすることとを意識したのと、別のプロダクトを作ったおかげでChatGPTに慣れてきてMAKEの組み方自体をChatGPTに質問して解説してもらいながら作れるということに気づいたので（なぜ気づかなかった）スムーズに作ることができました。

今回一番躓いたChatGPTのモジュール設定について...▼

<html>
<body>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/2ffedf1e-d86d-a1bd-be42-8f83e261cb2f.png" width="350" alt="説明文">

</body>
</html>

プロンプトの設定の仕方がわからなかったのですが
すぐ教えてくれました！


そしてChatGPTのすごさを垣間見ました:clap:
下の画像はいろいろ試していた時の途中のLINE画面です。


<html>
<body>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/2658c57f-bcd6-8285-5636-46d72d8ae1dd.png" width="350" alt="説明文">

</body>
</html>

<strong>乾燥肌</strong>と打ちたかったのに誤字をして<strong>かんそ</strong>と打ってしまったところ
ChatGPTは乾燥としっかり認識して返答してくれました。
すごい！！！賢い。

今回はChatGPTのトークンに制限があったので途中で文章が切れたりしてしまいましたが
課金して無制限に使用できれば、トークンの制限なく質問できますし、
事前に品揃えを覚えさせておけばスプレッドシートでお悩み列を作らなくても
商品に対しての効能をもとに自動で判断して引っ張ってきてくれるのではないか！？と思いました。

これに関しても実際に品揃えを別シートに入力して実際に存在する商品で試すために
社内システムで品揃えを引っ張ろうとしたんですが、

<html>
<body>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826220/29f24e98-37f3-2900-55ff-b3530451d4cf.png" width="300" alt="説明文">

</body>
</html>

まさかの運用時間外、第1日曜はメンテナンスでした。サイアクです。

悔しいので、今回やりきれなかったことも含めChatGPTの可能性をもっと引き出せるようなプロダクトづくりに挑戦し続けたいと思います。