クーポン入力欄はどこに置くべき？離脱を防ぐ配置と案内の設計

クーポンを発行しているのに使われていない、あるいはクーポン入力欄が原因で離脱が起きているのではないか、という懸念はありませんか。
この記事を読めば、クーポン入力欄をどこに置き、どう案内すれば離脱を防げるかを判断できる状態になります。

クーポン入力欄は、置く場所より「誰に見せるか」で成果が変わります。持っていない人に空欄を見せると、クーポンを探しに行かれて戻ってきません。

なぜクーポン入力欄が離脱の原因になるのか？

クーポンを持っていない人に、持っていないことを気づかせてしまうからです。
空のクーポン入力欄が目立つ場所にあると、ユーザーは「クーポンを探さなくては損だ」という状態になります。得をする機会を逃したくないという心理が働くためです。

結果として、購入手続きを中断し、クーポンコードを探すためにサイト外へ移動します。 多くの場合、使えるクーポンは見つからず、そのまま戻ってきません。
この行動は、特に初めてサイトを訪れたユーザーや、購入意欲が固まりきっていないユーザーで起きやすくなります。

クーポンを持っている人も離脱することがある？

あります。入力の方法が分からない場合です。
支援の現場で挙がるのは「クーポンが使えるか分からない」「持っているがどうやって使うのかわからない」という2つの声です。前者はクーポンの存在や条件が伝わっていない状態、後者は入力の手順でつまずいている状態で、打ち手が変わります。

特に、入力欄を開くために1クリック必要な作りの場合、その操作に気づかれなければ、クーポンを持っていても使われません。

クーポン入力欄はどこに置くべき？

金額が表示される場所の近くです。
クーポンは金額を変えるための機能なので、金額を確認している場所にあるのが自然です。商品一覧や商品詳細ページに置いても、その時点ではまだ適用の判断ができません。

配置の候補は4つあります。カートページの合計金額の近く、購入者情報の入力画面、支払い方法の選択画面、注文内容の最終確認画面です。
このうち、カートページと最終確認画面が中心になります。カートページは金額を初めて確定させる場所、最終確認画面は支払う前の最後の確認ポイントだからです。

複数の画面に置いてもいい？

置けますが、どこで適用されたかが分かる作りにします。
カートページで適用したのに、最終確認画面にも空の入力欄があると、適用されていないのではないかと受け取られます。すでに適用済みの場合は、入力欄ではなく適用済みの表示に切り替えます。

スマートフォンでは折りたたむべき？

折りたたむ場合は、何が入っているか分かる文言にします。
スマートフォンは表示領域が狭いため、クーポン入力欄を初期状態で折りたたむ作りが多く見られます。画面をすっきり見せられる一方で、クーポンを持っている人にも気づかれにくくなります。

「クーポンをお持ちの方はこちら」のように、誰に向けた項目かが分かる文言にしておくと、持っている人だけが開きます。「その他」「オプション」といった文言では、中身が想像できないため開かれません。
あわせて、タップ領域が十分に確保されているかも確認します。

クーポン入力欄は、誰に見せるべき？

クーポンを持っている人、または持っていることを伝えたい人だけです。
全訪問者に同じ入力欄を見せる必要はありません。持っていない人にとっては、損をしていると感じさせるだけの要素になります。

対象者を絞って表示できる？

できます。顧客の条件に応じて表示を切り替えます。
購買履歴、サイト内での行動、訪問回数といったデータをもとに、特定の条件を満たした人にだけクーポン情報を表示できます。

EC Intelligenceでは、複数回訪問しているが会員登録していないユーザーに対してクーポンを表示する、特定カテゴリの購入経験がある会員にそのカテゴリの特売クーポンを表示する、といった施策を設定できます。
これにより、クーポンを持たない人に不要な情報を見せることなく、購入を後押ししたい層にだけ届けられます。

入力そのものをなくす方法はある？

あります。クリックするだけで適用されるURLを使う方法です。
メルマガやLINEでクーポンを送る際、コードを記載する代わりに、クリックすると決済画面で自動的に割引が適用されるURLを案内します。

クーポンコードの入力が不要になり、コピー＆ペーストのミスも防げます。
特にスマートフォンからの購入では、入力の手間が離脱に直結しやすいため、効果が出やすい方法です。
この方法であれば、そもそも入力欄を目立たせる必要がなくなります。

クーポンの使い方はどう案内する？

使えるタイミングと、どの画面で入力するかを先に伝えます。
クーポンを配布する時点で、「カートページで入力してください」「注文確認画面で適用されます」といった案内を添えます。配布と利用の間に時間が空くため、受け取った時点で手順が分かっていないと、使う段階で迷います。

1クリック必要な場合はどう書く？

その操作が必要であることを、注釈で明示します。
「クーポンを利用する」をタップしてから入力欄が開く作りの場合、その1手間に気づかれないと、入力欄そのものが見つかりません。

配布時の案内にも、「ご利用の際は『クーポンを利用する』をタップしてからクーポンコードを入力する」という手順を含めます。 サイト側の設計を変えずに、案内の文言だけで解決できる場合があります。

適用されたことはどう確認してもらう？

金額の内訳に、割引の行を表示します。クーポンコードを入力して適用ボタンを押した後、合計金額の欄に「クーポン割引」や「割引額」といった項目が追加され、マイナスの金額が表示される状態にします。

適用されたかどうかが分からないまま注文を確定されると、後から問い合わせにつながります。適用済みであることが画面上で確認できる作りにしてください。

クーポンコードの入力エラーはどう減らす？

コードの設計を見直すことで減らせます。
よくある誤入力のパターンは4つです。
1つめは、全角と半角の間違いです。「ABCDE」を全角で入力してしまうケースです。
2つめは、大文字と小文字の混同です。
3つめは、紛らわしい文字の見間違いです。数字の「0」とアルファベットの「O」、数字の「1」とアルファベットの「l」などが該当します。
4つめは、コードの前後に不要なスペースが混入することです。

コードはどう設計すればいい？

紛らわしい文字を最初から使わないことです。
「0」と「O」、「1」と「l」を含まない文字セットでコードを発行すれば、見間違いによるエラーは起きません。クーポン番号を数字だけで構成する方法も、見間違いを減らす手段の1つです。

あわせて、入力されたコードを自動で整形する仕組みも有効です。全角を半角に変換する、大文字小文字を区別しない、前後の空白を自動で削除する。 これらに対応していれば、ユーザー側の入力精度に依存しなくなります。

エラーが出たとき、何を伝える？

何が原因で使えないのかを具体的に伝えます。
「クーポンが適用できません」とだけ表示されると、ユーザーは原因を特定できません。有効期限が切れているのか、利用条件を満たしていないのか、コードが間違っているのかで、次にとる行動が変わります。

利用条件を満たしていない場合は、あと何が足りないのかまで示せると、そのまま購入につながる可能性があります。

クーポンが使われているかは、どこを見れば分かる？

確認する箇所は3つです。
ステップ1は、クーポン関連の操作をした後の離脱率を見ることです。
入力欄をタップした、コードを入力したといった操作の後に離脱が多いなら、入力の過程に問題があります。

ステップ2は、クーポン入力画面での離脱率を見ることです。
他の画面より高い場合、その画面の作りが離脱を生んでいる可能性があります。

ステップ3は、発行したクーポンの利用率を見ることです。
発行数に対して使われている割合が低いなら、存在が伝わっていないか、使い方が分かっていません。

この3つを分けて見ることで、「気づかれていない」のか「使えていない」のかを切り分けられます。

入力欄の表示はどう検証する？

A/Bテストで比較します。
クーポン入力欄をデフォルトで表示するパターンと、折りたたんでおくパターンのどちらがCVRが高いかは、サイトによって変わります。クーポンの配布量や顧客層によって、持っている人の割合が違うためです。

ただし、テストを実施するには、パターンの作成、実装、効果測定が必要になります。入力欄の表示位置を変えるような小さな改修でも、エンジニアへの依頼が発生すると、優先順位の都合で後回しになりがちです。
その結果、離脱の原因となっているUIが放置される状態が続きます。

EC Intelligenceではどう検証する？

サイト本体を改修せずに、表示パターンを作って比較できます。
DOM要素の変更に対応しているため、管理画面の操作だけで入力欄の表示や文言を調整できます。HTML、CSS、JavaScriptを直接記述することも可能です。

全接客コンテンツのA/Bテストと効果の自動計測に対応しているため、どちらのパターンが成果につながったかをそのまま確認できます。
タグを1つ入れるだけで導入でき、エンジニアの手を借りずに設定と検証を進められます。

クーポン入力欄についてよくある疑問は？

ここでは、クーポン入力欄の設計に関して事業者から寄せられることが多い質問とその回答をまとめました。

クーポン入力欄は目立たせないほうがいいですか？

全訪問者に見せるなら、目立たせないほうが無難です。
クーポンを持っていない大多数が「自分だけ損をしている」と感じ、購入を中断してクーポンを探し始めるリスクがあるためです。
ただし、対象者を絞って表示できるなら、持っている人にははっきり見せたほうが使われます。見せるかどうかより、誰に見せるかで判断してください。

クーポン入力欄は何画面に置くべきですか？

カートページと最終確認画面の2か所が基本です。
カートページは金額が初めて確定する場所、最終確認画面は支払う前の最後の確認ポイントです。
複数に置く場合は、すでに適用済みであることが分かる表示に切り替えてください。

クーポンの利用率が低い場合、何から見直しますか？

まず、存在が伝わっているかを確認します。
発行したことがメールやLINEで届いていても、使うタイミングで思い出されていない場合があります。
次に、入力の手順を確認します。1クリック必要な作りになっていないか、エラーが多発していないかを見てください。

クーポンを配らずに済む方法はありますか？

クーポン以外の判断材料を増やす方法があります。
送料や配送目安、レビュー、在庫状況など、価格以外の情報が購入の理由になる場合があります。
クーポンは利益を削る施策なので、他の材料で動くかを先に試す選択肢もあります。

この記事の要点は？

クーポン入力欄は、置く場所より「誰に見せるか」で成果が変わります。

持っていない人に空欄を見せると、クーポンを探しに行かれて戻ってきません。対象者を絞って表示できれば、持っている人にだけ届けられます。
置き場所は、カートページと最終確認画面の2か所が基本です。金額を確認している場所に置きます。

そして、入力エラーはコードの設計で減らせます。紛らわしい文字を使わない、入力を自動で整形する。この2つで、ユーザー側の入力精度に依存しなくなります。

自社サイトのクーポン運用は今どの状態？

クーポンが機能しているかどうかは、クーポン関連の操作後の離脱率と、発行したクーポンの利用率を見れば確認できます。ただし、自社だけで見ていると、どこから手を付けるべきかの判断が難しい場合もあります。

EC Intelligenceを提供する株式会社シナブルでは、ECサイトのCVRの伸びしろを無料で診断しています。クーポンの見せ方を含め、サイト全体のどこに伸びしろがあるかを確認できます。