ShopifyのストアにJevを組み込む——商品説明を材料に、一杯を選ぶ診断をつくった

自社で運営しているこのShopifyストア PASS COFFEEでは、コーヒーに詳しくなくても、自分に合う一杯を気軽に選んでほしい。そういう想いからコーヒー診断を用意していましたが、今回その機能にJevを組み込みました。お客さんがチェックした気分や好みと豆の商品説明をJevに渡し、候補の中から一杯を選んでもらう仕組みです。

商品ページの説明欄には香りや酸味、フレーバーなどコーヒーの特徴が並んでいます。書いてあることは正しくてもお客さんが知りたいのは「自分のこの場面に合うか」のほうです。説明に「やわらかな酸味」とあっても、お客さんの頭にあるのは「午後にひと息つきたい」のような場面だからです。この説明と場面のあいだを、Jevでつなげないかと考えました。

Jevは、決めた選択肢の中から答えを返す

Jevは文章と質問を渡すと答えを返すAIのサービスです。今回使ったのはJevの中でも、決めておいた選択肢から一つを選ばせる「Choice」という形式でした。

渡すものは判断に使う情報と質問、それに候補ごとの説明です。返ってくるのは選ばれた候補と候補ごとの確率、それに確信度です。答えは必ず候補のどれかになるので、その後の画面やカートの動きはストアの側で安心して決めておけます。

ここが、文章を書いて返す生成AIとの大きな違いです。生成AIの多くは、答えを少しずつ組み立てながら返します。Jevは文章を作らず、決めた形の答えをまとめて一度に返すように作られています。提供元のTypeSafeは、応答時間を70msから500msと説明しています。PASS COFFEEの公開前の確認でも、手元からJevを直接呼んだ126回の中央値は176msでした。チェックを終えたお客さんを、結果まで長く待たせずに済む速さです。

Shopifyの商品説明が、そのままJevの材料になる

コーヒー診断では、お客さんがチェックした項目を判断の材料にしています。候補はエチオピアやコロンビアなど豆の産地で、それぞれの説明にはShopifyの商品説明と味の目安から作った文を入れています。

項目を一つずつ渡して試すと、商品説明に書いてある相性や場面は、ほとんど迷わずに選ばれました。たとえば「朝ごはん・トーストと一緒に」の選択では、グアテマラが返ってきました。グアテマラの説明には「シンプルな朝ごはんのお供に」と書いてあります。商品ページのために書いてきた一文が、そのまま選ぶ根拠になっていたわけです。説明を書いてきた手間が思いがけないところで生きました。

反対に説明のどこにも書いていない項目では答えが定まりませんでした。「雨の日」や「和菓子」がそうで、確信度は0.2から0.4にとどまりました。どちらも気分としては分かる項目ですが、豆の説明には根拠がありません。チェックリストからは外し、説明に根拠のある項目だけを残しています。

最初は、お客さんが自由に書いた文をJevに読ませる形も試しました。ただ「甘すぎないのがいい」を「甘みをいちばん控えめに」と読む例も出ています。お客さんが想定していないニュアンスを採用する可能性が出たのでこの形は見送りました。

ストアとJevのあいだに、小さなサーバーを一つ置いた

お客さんから見えるのはチェックの画面と結果だけです。その裏でShopifyのテーマから直接Jevを呼ぶことはしていません。テーマのコードはお客さんのブラウザに届くので、そこにJevの鍵を書くと誰でも見られてしまいます。Jevの規約でも鍵は他人と共有しない決まりです。そこで鍵を持つ小さなサーバーを一つ用意し、テーマからはそこを呼ぶ形にしました。

在庫のことをいちばんよく知っているのはストアの側です。ストアは、在庫のある豆の産地だけを候補にしてサーバーへ送ります。サーバーはその中からJevに選ばせて結果の産地を返します。ストアはそれを在庫のある商品とその選択肢に戻して画面に出します。在庫のない豆ははじめから候補に入りません。

Jevに渡す説明はサーバーの側に写しとして置いています。管理画面で商品説明を書き換えたら写しも合わせて更新します。説明が選ぶ材料になる以上、この実装は外せません。

ストアとサーバーは別々に更新されるので、開いたままの古い画面と新しいサーバーが出会うこともあります。そのときは版の違いを見て、Jevの答えを使わないようにしました。

Jevが答えられなくても、ストアの診断は止まらない

せっかく診断を始めたお客さんを、結果の出ない画面で待たせたくありません。そのためにJevに任せない部分を決めておきました。

「酸味は苦手」にチェックがあれば、Jevに聞く前に酸味の強い豆を候補から外します。候補が一つしか残らなければ、Jevには聞かずにその豆をおすすめします。Jevの応答がない、遅れた、中身がおかしい。そのどれでも、あらかじめ決めた順番で候補から選びます。

この順番の規則は、ストアとサーバーで同じものを使っています。サーバーに届かないときも、ストアの側で同じように選べます。売り切れなどで候補が一つも残らないときは、提案できる商品が無いことをそのまま表示します。

確信度はその人の好みに合う確率ではありません。候補ごとの確率が、どれだけ一つに集まっているかを表す値です。確信度が低く候補の確率に大きな差がないときは、お店がいま薦めたい豆に寄せています。

結果が出たらお客さんは容量と挽き方を選んで、そのままストアのカートに進める導線設計になっています。

計測も、Shopifyの仕組みに乗せた

診断を開いた、結果が出た、カートに入った。この三つをShopifyのカスタマーイベントとして送りGA4で見ています。チェックした項目は、まとまりごとに分けて送りました。GA4は一つの値に100文字までしか入らず、全部つなげると収まらない場合があるからです。どの気分からどの豆が選ばれ、カートまで進んだか。これから少しずつ見ていきます。

説明を読んで選んでいる商品は、どこにあるか

ShopifyにJevを組み込んでみて、この診断でJevが頼りにしていたのは商品説明でした。お店が商品ページのために書いてきた言葉が、そのまま選ぶ材料になりました。説明に根拠のない項目では確信度が低く、診断の項目には残していません。どの項目をJevに任せるかは、その判断の材料が説明に書いてあるかどうかで決めました。

自社のストアで、お客さんが説明を読み比べて迷っている商品はどれでしょうか。その商品の説明には、選ぶための手がかりが書いてあるでしょうか。

診断の画面や、結果からカートまでの流れは、事例ページ「気分と好みで選ぶコーヒー診断」にまとめています。