カートボタンはあるのに、次の操作が分からない——ECの商品ページをスマホで確かめた

アクセス解析を開くと商品は見られている。それなのにカート追加は思うように伸びていない。写真を撮り直すか説明を足すか、価格を見直すか。直す候補はいくつも浮かびます。

自社で運営しているネイルチップのEC「ネイルチップマーケット」でも同じ状況がありました。そこで数字と商品ページのスマホ表示を突き合わせました。見つかったのは写真や価格の問題ではありませんでした。次に何をすればよいかを画面が案内できていない箇所でした。

写真と価格は、共通の原因に見えなかった

GA4で商品ごとの閲覧とカート追加を並べました。閲覧の数に比べてカート追加は伸びていませんでした。閲覧の多い上位5商品で見ても同じです。

上位5商品の価格は1,200円から8,000円まで散らばっていて、どの価格帯でも同じでした。写真も5商品とも一様に質が低いわけではありません。価格や写真だけを共通の原因とは見ずに、スマホで商品ページを開いて買い手と同じ順番で触ってみました。

「選択してください」と出るのに、選ぶ場所へ進めない

ネイルチップは指の大きさに合わせて選ぶ商品です。ネイルチップマーケットには購入前にサイズや形を選ぶ商品があります。サイズのセットと形を選ぶ商品もあれば、10本分のサイズを1本ずつ入力する商品もあります。

スマホで開くと商品の写真と名前と価格が順に並びます。画面の下には「選択してください」と書かれたボタンが固定で出ています。サイズや形を選ぶ欄は最初に見える範囲より下にあります。このボタンは押しても何も起きず、選ぶ欄へ案内することもありませんでした。

閲覧上位5商品のうち4商品がこの表示です。上位5商品の閲覧の9割近くをこの4商品が占めていました。

購入前にサイズを選んでもらうこと自体はネイルチップでは欠かせません。問題は、何を選べばよいかとその場所を画面が伝えていなかったことです。

一方で上位5商品には選択の要らない商品も1つあります。最初から「カートに入れる」と出ている商品でも閲覧に比べてカート追加は伸びていませんでした。このボタンだけで説明がつくわけではありません。閲覧の母数も商品ごとの良し悪しを決められるほど多くありませんでした。

押せないボタンを、選択欄への案内に変えた

未選択のときのボタンを押せる案内に変えました。

購入の条件はそのまま残しています。サイズを選ばずに買えるようにしたのではありません。条件を満たすための操作へボタンからつなぐようにしました。

直す途中でもう一つずれが見つかりました。ページの中のボタンは「サイズを選択してください」、画面下の固定ボタンは「選択してください」でした。同じ状態を別の言葉で説明していたのです。作る側はどちらも同じ意味だと知っているので並べて見るまで気づきにくいところです。

ボタンの色や大きさを変えてもこの問題は解けません。まだ選んでいない人と選び終えた人では、ボタンに求められる役割が違うからです。

選び始めたのか、選び終えたのかも分けて見る

画面を直したあとに確かめたいのは、買い手がどこで止まっているかです。ところがそれまでの計測では「商品を見た」と「カートに入れた」の間が見えていませんでした。次の3つを区別できなかったのです。

• 選択を始めていない
• 選択の途中で止まっている
• 選択を終えてもカートに入れていない

そこでサイズの選択を始めたときと、必要な選択が揃ったときを記録するようにしました。どこで止まっているかが分かれば次に直す場所も変わります。選ぶ欄の分かりにくさなのか選んだあとの迷いなのかで、打つ手は別のものになるからです。

まだ選んでいない人にも、次の操作が伝わるか

作る側は選択欄がどこにあるかも、何を選べば買えるかも知っています。その知識があると、買えるかどうかの確認は選び終えた状態から始まりがちです。

カートに商品が入ることは、購入機能の確認です。その手前で必要な選択にたどり着けるか。これも商品ページの確認に含めたいところです。まだ何も選んでいない人に画面は次の操作を伝えているでしょうか。