インタラクティブな仕掛けは「作って終わり」になりやすい——計測まで一緒に設計する

インタラクティブなUI、置いたあとを見ていますか

スペシャルティコーヒーのECサイトに、豆を選ぶと1杯あたりの値段がリアルタイムで変わるシミュレーターを設置しました。HOOP COFFEEの商品ページにある「カップ単価シミュレーター」です。

こういうインタラクティブなUIは、今は珍しくありません。問題はその後です。多くの場合「作って公開して終わり」になります。どれだけ操作されたのか、どの豆が選ばれたのか、最後に次に進むボタン（CTA）が押されたのか。

仕掛けを置いた満足感はあるのに、効いているかはわからない。Shopifyの運用でよく起きることです。

「何を作ったか」より「なぜ作ったか」

HOOPのコーヒー豆は1kgまで販売しています。1kgで数千円。価格だけを見ると高く映ります。

でも1杯あたりに換算すると話が変わります。豆13gで1杯とすると、ほかのスペシャルティコーヒーの相場より安い。この「わかれば納得できる数字」を、ページに書くだけでなく自分で触って確かめられる形にしたかった。

インタラクションにしたのは演出のためではありません。読み手に、自分の飲み方の数字で考えてもらうためです。何杯飲むか、何人で飲むか。条件を変えると単価が動く。そこで初めて「思ったより高くない」が自分ごとになります。

UIより先に、計測を決めた

設計の順番をいつもと逆にしました。UIのコードを書く前にこのUIで何を知りたいかを先に決めています。

知りたいのは3段階です。見られたか。触られたか。押されたか。シミュレーターが画面に入った瞬間を検知し、どの豆が選ばれてスライダーがどう動かされたかを拾い、最後にどのCTAが押されたかを記録する。

これをShopifyとGA4のあいだに橋をかける形で先に引きました。操作のたびに記録すると連打で数字が荒れるので、操作が落ち着いてから記録するようにしています。計測の中継点を整えてから、ようやくUIのコードを書き始めました。

記録の中身も後から振り返れるように決めておきました。表示は、シミュレーターが画面に4割ほど入ったところで1回だけ数える。豆の選択はどの豆が選ばれたかを名前と価格ごと残す。スライダーは操作が止まってから何人で何杯という条件を記録する。CTAはどのボタンからどこへ進んだかを残す。どれも、どの操作が・どの条件で・どの順に起きたかを後から追える形にしてあります。

順番を逆にしたのには理由があります。後から計測を足そうとすると、何を測ればよかったかが思い出せなくなる。作りながら決めると、たいてい測りやすいものだけを測って終わります。

計測があると、何が変わるか

計測があると、仮説が立てられます。

表示は多いのにCTAがゼロなら、導線の問題かもしれない。特定の豆だけ選ばれないなら、価格か見せ方の問題かもしれない。よく触られる条件があるなら、そこを入り口にできる。

計測がなければこうした問いは立ちません。「なんとなく良さそう」で止まって次に何を直せばいいかがわからない。仕掛けは置いたのに改善の手がかりがない状態です。

見た人がどの豆を選んでどこでCTAまで辿り着いたか。それが見えるだけで、次の一手が具体的になります。

仕掛けと効果は、同じ設計の中にある

HOOPのシミュレーターは公開して日が浅くこれから数字がたまっていきます。どの豆が選ばれたあとにCTAへつながりやすいのかを見ながら見せ方を調整していく予定です。

インタラクティブなUIは、計測の設計と同時に作って初めて改善のサイクルに乗ります。「仕掛けを作る」と「効果を見る」は別々の工程ではありません。同じ設計の中にある。

作って終わりにしないために最初から両方を一緒に引く。そう考えて実装しています。