Welcartのカートページのカゴ落ち対策まとめ

スポンサーリンク

Welcartに限ったことではありませんが、ECサイトでの課題の一つが「カゴ落ち」対策です。

ショッピングカート

カゴ落ち対策には、カートページを「とことんシンプルにして解かり易く」する必要があります。

以下は私がWelcartのECサイトで行った、カートページのカゴ落ち対策7項目です。5~7番の項目は、別ページで詳しいカスタマイズ方法を解説しています。

コンバージョンを上げるための改善ポイントについて、特に参考になったサイトはこちらの二つ。

ヒントがかなりあるので、目を通しておいて損はないと思います。

もくじ

  1. 手続き関係以外のリンクを外す
  2. ナビゲーションをわかりやすく
  3. 「次へ」や「注文する」のボタンを目立たせ、「戻る」のボタンは地味に
  4. 入力項目を減らす
  5. 住所は郵便番号から自動入力で
  6. リアルタイムで入力チェック
  7. 離脱しようとするとアラートを表示
  8. まとめ

1. 手続き関係以外のリンクを外す

難易度:★★★☆☆3

カートページから決済手続きに進むまで、余計なものが目に入ると、カートページから離脱してしまう可能性が少ないにしてもゼロではありません。

Welcartカゴ落ち対策1-1

サイドバーだけでなく、パンくずリストやグローバルナビゲーション、フッターリンクなどは外し、最低限の情報のみに絞りました。

Welcartカゴ落ち対策1-2

カートページだけを1カラムに設定すればOK。当サイトでも以前使用していたSEOテンプレートの賢威では、任意のページ毎にカラム数の変更が簡単に出来ます。

2. ナビゲーションをわかりやすく

難易度:★★☆☆☆2

ナビゲーションは、お客様が「購入完了までのステップは後どの程度か」を視覚的に理解出来るための重要なものです。

Welcartのデフォルトのままでも、ナビゲーションはわかりにくくはありませんが、まだまだ改善の余地はあります。

Welcartのカートナビゲーション

CSSの調節だけでもっとわかりやすくすることは出来ますので、色々デザインを変えてみるとよいと思います。

Welcartのカートナビゲーション・カスタマイズ

CSSだけで出来るカートページのナビゲーションデザイン - 関連エントリー

3. 「次へ」や「注文する」のボタンを目立たせ、「戻る」のボタンは地味に

難易度:★★☆☆☆2

デフォルトでは単なる普通のボタンです。

Welcartの買い物ボタン

これもCSSの調節だけで簡単に装飾出来ます。

Welcartの買い物ボタン・カスタマイズ後

ボタンの装飾はCSS Button Generatorが便利です。ボタンを押すと凹むようなCSSも、簡単に作れます。

ちなみに、「ランディングページのコンバージョン率を5倍にする21の簡単な方法」によれば、ボタンの色は赤か緑がいいそうです。

4.入力項目を減らす

難易度:★★★☆☆3

必須項目ではない「ふりがな」「FAX番号」などは、お客様とのご連絡には殆ど使いません。

読みづらいお名前の方も中にはいらっしゃるかもしれませんが、ECサイトの日常業務では、直接お電話を差し上げることは緊急時を除いてまずありません。

Welcartのお客様情報入力画面

それよりは、全てのお客様の入力時のストレスを減らしたほうがずっとよいと判断しました。

カスタマイズ方法としては、いくつか方法があります。

Welcartのお客様情報入力画面・カスタマイズ後

嗚呼、すっきり。

もともと「ふりがな」「FAX番号」は必須項目ではありませんが、それらが画面に出ないだけでも、心理的負担が減らせるのではないかと思います。

5. 住所は郵便番号から自動入力で

難易度:★☆☆☆☆1

お客様の入力項目を極力減らすという意味で、郵便番号からの住所自動入力は必須です。

郵便番号から住所を自動表示

プラグインzipaddr-jpを使えば簡単に出来ます。

郵便番号から住所を自動表示 zipaddr-jp - 関連エントリー

6. リアルタイムで入力チェック

難易度:★★★★★5

せっかく面倒臭さを乗り越えて住所や電話番号を入力したのに、「入力値が不正です」なんて言われたら、購入する気も薄れます。

Welcartのエラー表示・デフォルト

入力したその場でチェックしてくれるjQueryを使って、お客様のストレスを軽減。

Welcartでもエラー表示をリアルタイムで

ただ、変更箇所が多岐に渡り、ステップが多く少し難易度の高いカスタマイズになります。以下のエントリーで詳しく解説しています。

入力項目をその場でチェック jQuery-Validation-Engine - 関連エントリー

7. 離脱しようとするとアラートを表示

難易度:★★★☆☆3

購入ページから離脱しようとしたり、ウィンドウを閉じようとすると出てくる、「まだご注文は完了していません。このページから移動してもよろしいですか?」というアラート。

離脱時のアラート表示

これもjQueryを利用しています。カスタマイズの方法は以下のエントリーで解説。

カートページからの離脱を防止するアラート - 関連エントリー

まとめ

難しいカスタマイズもありますが、簡単に出来るものもありますので、少しずつやっていくのが吉。もちろんローカルでの動作チェックや本番環境での確認もお忘れなく。

最初に挙げた参考リンクなどを見れば、これ以上にもまだまだ出来そうですので、引き続きWelcartでも出来るカゴ落ち対策を検証したいと思います。

ただ、カゴ落ち対策の最大のポイントは、もちろん商品ページの作り方が一番であることは言うまでもありません。カートページの利便性向上は、それをサポートするものであります。

同じWelcartのECサイト運営者の皆様、頑張りましょう。

2 Responses to “Welcartのカートページのカゴ落ち対策まとめ”

  1. portra より:

    素晴らしい解説ありがとうございます。
    メールアドレスの再入力項目を削除することは可能でしょうか?
    ※項目自体は削除できましたが”メールアドレスが正しくありません”のアラートが出てしまいます。

    • まめ子(管理人) より:

      アラート部分は、別のフックで対応する必要があると思います。こちらの記事で、カートの各ページでアラートを追加するカスタマイズを行っていますが、同様のフックを使えば何か出来そうな感じもしますね。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.