訪問者を手ぶらで帰していた——初回離脱を減らすモーダル設計の経緯

来てくれた人に何を渡せているか

アクセス数はある。直帰率も極端には悪くない。なのにふと引っかかりました。初めて来た人の多くが何も受け取らないまま帰っている。

初回で買う人はもともと多くありません。気になるのはその先です。買わなかった人との接点がその一回きりで切れている。

弊社で運営しているShopifyストア、PASS COFFEEも初回向けのクーポンも用意していました。でも置き場所はフッターやページの隅です。そこに気づくのはすでに「何かないか」と探している人だけ。

初めて来た人はまだサイトの形を覚えていません。どこに何があるかを把握する前に多くは離れていく。クーポンの存在にすら気づかないままです。

知ってもらえれば使う人は確実にいます。その層を見えない場所に置いたことで取りこぼしていました。

そこで最初に一度だけ見えるモーダルを置きました。画面の中央で初回15%OFFのクーポンを案内します。メールアドレスを登録すると受け取れる仕組みです。

迷ったのは閉じ方でした。隅に小さな「×」はあります。でもそれだけだと押した瞬間に話が終わる。あとでやっぱり欲しくなっても、戻る場所がありません。だから目立つ閉じ方を「あとで考える」という言葉にしました。断る操作ではなく保留する操作にしたかったからです。

「あとで」を選んだ人には画面の下に小さなバナーを残します。閉じた後も画面下に残り続けるバナーです。気が変わったらそこから受け取れる。このバナーも邪魔だと感じたら自分で閉じられます。

押し付けないけれど、消えてもいない。その塩梅を探りました。

公開してから数字も出はじめました。新規のご注文のうち、およそ23%でこのクーポンが使われています。

効果はその場の売上だけではありません。クーポンの受け取りがメールでのつながりと一体になっているからです。

15%OFFは買い物を後押しします。同時にメールアドレスという連絡先が残る。次に新しい豆や商品、キャンペーンが出たときにこちらから届けられる相手になります。

一度の訪問を買うか買わないかで終わらせない。来てくれた人と関係を始めるための入口でもあります。

サイトに人を呼んでも関係が始まっていないことがあります。モーダルは押し付けにもなるし、見えなさすぎても届かない。そのあいだにちょうどいい場所がある。そこを探すものだと考えています。