スピン前のオファーバーとスピン後の残り時間バーはどう使い分けるか

ルーレット本体のほかに、画面に細い帯を出せます。スピン前とスピン後で役割が違う2種類があります。

スピン前のオファー表示バー

ルーレットが開く前に、何がもらえるのかを予告する帯です。

ルーレット自体は閉じられることがあります。閉じた人にも、何を逃したのかが残るのがこの帯の役割です。もう一度開くきっかけになります。

スピン後の残り時間バー

当選したあと、そのクーポンの有効期限をカウントダウンする帯です。

タイマー（分）で長さを設定します。時間ではなく分単位です。ここが重要で、この帯は「今日中に」ではなく「この訪問のうちに」使ってもらうための仕組みです。

30分に設定すれば、30分のカウントダウンが表示されます。買い物中に見え続けるので、迷っている人の背中を押します。

タイマーの長さを決める

短すぎると急かしている印象になります。長すぎると緊張感がなくなります。

目安は、そのショップで購入を決めるまでにかかる時間です。商品数が少なく単価も低いショップなら15〜30分で足ります。比較検討が必要な商材なら、60分でも短いかもしれません。

自分のショップの平均滞在時間が分かるなら、その2倍程度から始めてください。

色を決める

背景色と文字色をそれぞれ設定できます。初期値は背景が #e7b520 の黄色です。

目立たせたい要素なので、ショップの基調色と同じにすると埋もれます。普段のデザインに使っていない色を選ぶと、帯として認識されやすくなります。

ただし赤は警告に見えます。緊急性を出したいときでも、オレンジや黄色のほうが圧迫感が少なくなります。

両方を有効にするか

必ずしも両方要りません。

• リストを集めたい → スピン前のオファーバーが効きます。参加してもらうことが目的なので
• その場で買ってほしい → スピン後の残り時間バーが効きます。当選から購入までの距離を縮めるので

注文完了ページ限定のキャンペーンでは、残り時間バーは意味が薄くなります。 配るのは次回用のクーポンなので、いま急かす理由がありません。

両方出すと帯が二重になります

スピン前とスピン後は表示される場面が違うので、同時に出ることはありません。ただし通知パネルなど他の帯を使っている場合は、画面の同じ位置に複数の要素が並ぶことがあります。

実際の店舗で開いて、帯が重なっていないかを確認してください。設定画面のプレビューは帯単体の表示で、他の要素との重なりまでは再現しません。

モバイルでの見え方

帯は画面の幅いっぱいに出ます。スマホでは、その分だけ商品や本文が押し下げられます。

文言が長いと2行になり、占有する高さがさらに増えます。帯のテキストは短くしてください。 「本日限定」「残り30分」程度で十分に伝わります。長い説明を入れたくなりますが、帯は詳細を語る場所ではありません。

まとめ

オファーバーは参加を、残り時間バーは当選後の利用を後押しします。目的に応じてどちらかを選べば十分です。

タイマーは分単位で、その訪問中に使ってもらうための仕組みです。ショップの滞在時間から逆算して決めてください。