アクセスはあるけど転換率が上がらない時に役立つTIPS

 

みなさんこんにちは、久しぶりのブログ更新です。
頑張っていきたいと思います。

さて、早速始めていきましょう！

内容は表題の通りで、転換率が上がらない時の対策です。「アクセスはあるけど買い物かごに入れてもらえない、あるいはその確率が非常に低い商品がある」こういった悩みは意外と多いようです。対策は色々とあるのですが、その中でも短時間で対応可能な方法を一つご紹介します。

題して「楽天商品ページの買い物かごボタンを目立たせて転換率をあげちゃおう作戦」です。

 

まずは下の2つの画像を見比べてください。

一つ目

 

2つ目

 

 

どちらのボタンがより目立つか？と問われたら十中八九一つ目のボタンと答えるでしょう。一つ目のボタンはCSSでデザイン強化を計ったもの。2つ目の画像はデフォルトの状態です。Google Chromeでのキャプチャ画像なので環境によっては若干の差異があるかもしれませんが、デフォルトの方は大体こういった見え方になってますよね。長年インターネットに慣れ親しんだ方なら2つ目のボタンが「ボタン」だということは分かるかと思いますが、そうでない場合は、ちっさくて非常に見難いボタンである事は確かです。ネットショップの「使いやすさ」や「使い勝手」などを考える上でも、各部分のデザインは重要なポイントになってきます。ユーザビリティというやつですね。

さて、という訳でユーザビリティと転換率を考慮してデザインした一つ目のボタンですが、デザインと言ってもやりかたは非常に簡単で数行のスタイルシートを書くだけで実現できます。

 

以下一つ目の画像のソースです。

買い物かごボタンのみにスタイルを設定しているので、上のソースではデザイン崩れは一応ありません。

ざっくりとCSSの説明を加えます。

デザインを変更する買い物かごボタンを指定しています。「買い物かごボタン」ではなく「ご注文はこちら」等へ文言を変更している場合は、そちらに変更しましょう。

上から順番に、ボタンの横幅、高さ、背景画像、枠線の有無（none:無し）、上下の隙間（5px)、マウスカーソルの形（手の形）、文字の大きさ（14px)、文字の色（白色）、文字の強調（太字）、という内容になってます。

横幅と高さは使用する背景画像と同じサイズに設定して、マウスカーソルがあたった時にクリックが出来ると視覚的に分かるようにマウスカーソルが手の形に変わるようになってます。

スタイルを指定しなかった時のカーソルとくらべてみましょう。

実際に自分でマウス操作をしてみるとその違いの大きさに気づくと思います。

少ない作業ですが、大きな変化が現れる「楽天商品ページ 買い物かごボタン デザインカスタマイズ」ぜひお試しください。

 

問い合わせフォームから不明点を問い合わせる