Welcartのカートページのカゴ落ち対策まとめ
スポンサーリンク
Welcartに限ったことではありませんが、ECサイトでの課題の一つが「カゴ落ち」対策です。
カゴ落ち対策には、カートページを「とことんシンプルにして解かり易く」する必要があります。
以下は私がWelcartのECサイトで行った、カートページのカゴ落ち対策７項目です。５～７番の項目は、別ページで詳しいカスタマイズ方法を解説しています。
コンバージョンを上げるための改善ポイントについて、特に参考になったサイトはこちらの二つ。
- 【保存版】問合せを劇的に増やすエントリーフォーム最適化（EFO）15の方法（LPO Lab)
- ECサイト運営者のためのショッピングカート最適化（海外SEO情報ブログ）
ヒントがかなりあるので、目を通しておいて損はないと思います。
もくじ
- 手続き関係以外のリンクを外す
- ナビゲーションをわかりやすく
- 「次へ」や「注文する」のボタンを目立たせ、「戻る」のボタンは地味に
- 入力項目を減らす
- 住所は郵便番号から自動入力で
- リアルタイムで入力チェック
- 離脱しようとするとアラートを表示
- まとめ
1. 手続き関係以外のリンクを外す
難易度：★★★☆☆３
カートページから決済手続きに進むまで、余計なものが目に入ると、カートページから離脱してしまう可能性が少ないにしてもゼロではありません。
サイドバーだけでなく、パンくずリストやグローバルナビゲーション、フッターリンクなどは外し、最低限の情報のみに絞りました。
カートページだけを１カラムに設定すればOK。当サイトでも以前使用していたSEOテンプレートの賢威では、任意のページ毎にカラム数の変更が簡単に出来ます。
2. ナビゲーションをわかりやすく
難易度：★★☆☆☆２
ナビゲーションは、お客様が「購入完了までのステップは後どの程度か」を視覚的に理解出来るための重要なものです。
Welcartのデフォルトのままでも、ナビゲーションはわかりにくくはありませんが、まだまだ改善の余地はあります。
CSSの調節だけでもっとわかりやすくすることは出来ますので、色々デザインを変えてみるとよいと思います。
CSSだけで出来るカートページのナビゲーションデザイン － 関連エントリー
3. 「次へ」や「注文する」のボタンを目立たせ、「戻る」のボタンは地味に
難易度：★★☆☆☆２
デフォルトでは単なる普通のボタンです。
これもCSSの調節だけで簡単に装飾出来ます。
ボタンの装飾はCSS Button Generatorが便利です。ボタンを押すと凹むようなCSSも、簡単に作れます。
ちなみに、「ランディングページのコンバージョン率を5倍にする21の簡単な方法」によれば、ボタンの色は赤か緑がいいそうです。
4．入力項目を減らす
難易度：★★★☆☆３
必須項目ではない「ふりがな」「FAX番号」などは、お客様とのご連絡には殆ど使いません。
読みづらいお名前の方も中にはいらっしゃるかもしれませんが、ECサイトの日常業務では、直接お電話を差し上げることは緊急時を除いてまずありません。
それよりは、全てのお客様の入力時のストレスを減らしたほうがずっとよいと判断しました。
カスタマイズ方法としては、いくつか方法があります。
- Welcart公式ガイド本の「国の項目を非表示にする」コードをコピー。それをfunctions.phpにペーストし、「ふりがな」「FAX番号」の項目を削除。
- 「お客様情報のふりがな入力フィールドを簡単に非表示にする方法」ー 関連エントリー
- 「お客様情報のFAX入力フィールドを非表示にする方法」ー 関連エントリー
嗚呼、すっきり。
もともと「ふりがな」「FAX番号」は必須項目ではありませんが、それらが画面に出ないだけでも、心理的負担が減らせるのではないかと思います。
5. 住所は郵便番号から自動入力で
難易度：★☆☆☆☆１
お客様の入力項目を極力減らすという意味で、郵便番号からの住所自動入力は必須です。
プラグインzipaddr-jpを使えば簡単に出来ます。
郵便番号から住所を自動表示 zipaddr-jp － 関連エントリー
6. リアルタイムで入力チェック
難易度：★★★★★５
せっかく面倒臭さを乗り越えて住所や電話番号を入力したのに、「入力値が不正です」なんて言われたら、購入する気も薄れます。
入力したその場でチェックしてくれるjQueryを使って、お客様のストレスを軽減。
ただ、変更箇所が多岐に渡り、ステップが多く少し難易度の高いカスタマイズになります。以下のエントリーで詳しく解説しています。
入力項目をその場でチェック jQuery-Validation-Engine － 関連エントリー
7. 離脱しようとするとアラートを表示
難易度：★★★☆☆３
購入ページから離脱しようとしたり、ウィンドウを閉じようとすると出てくる、「まだご注文は完了していません。このページから移動してもよろしいですか？」というアラート。
これもjQueryを利用しています。カスタマイズの方法は以下のエントリーで解説。
カートページからの離脱を防止するアラート － 関連エントリー
まとめ
難しいカスタマイズもありますが、簡単に出来るものもありますので、少しずつやっていくのが吉。もちろんローカルでの動作チェックや本番環境での確認もお忘れなく。
最初に挙げた参考リンクなどを見れば、これ以上にもまだまだ出来そうですので、引き続きWelcartでも出来るカゴ落ち対策を検証したいと思います。
ただ、カゴ落ち対策の最大のポイントは、もちろん商品ページの作り方が一番であることは言うまでもありません。カートページの利便性向上は、それをサポートするものであります。
同じWelcartのECサイト運営者の皆様、頑張りましょう。
素晴らしい解説ありがとうございます。
メールアドレスの再入力項目を削除することは可能でしょうか？
※項目自体は削除できましたが”メールアドレスが正しくありません”のアラートが出てしまいます。
アラート部分は、別のフックで対応する必要があると思います。こちらの記事で、カートの各ページでアラートを追加するカスタマイズを行っていますが、同様のフックを使えば何か出来そうな感じもしますね。