Amazonアソシエイト売上増やし方。3倍にアップした2つの改善方法を教えます

アマゾンアソシエイトの売上をアップさせるために実施して、成果があった改善方法をシェアします。

改善するためにやったことは、この2つだけ。

・CVボタンを大きく
・CVボタン前にマンガバナーを設置

その結果、

クリック数　→　6倍
CV数　→ 3倍
売上金額　→　3倍

となりました。

（改善実施前の前四半期と比較）

売上を伸ばしたい方、よければ参考してみてください！

MEMO

ボタンカスタマイズは、WPテーマ「SANGO ＋　POLIPU」とwordpress 商品管理プラグイン「Rinker」の使用を前提としています。

Rinker公式サイト

すぐ読める見出し

改善その1:スマホのCVボタンを大きくした
改善その2:CV前に漫画バナーを設置
まとめ

改善その1:スマホのCVボタンを大きくした

Rinkerで作られるレイアウトは標準のままでも、十分整ったデザインになっています。
個人的には改善できそうな箇所があったため、改善実装してみました。

改善前

改善前のスマホレイアウト画像がこちら。

標準レイアウトはボタンが横並びになっています。
コレをボタンを縦並びに変更。

しばらく使っていたんですが、

・商品画像が小さい
・商品名が見づらい
・ムダな余白がある
・ボタンの高さが狭い

この4点が気になっていました。

改善後

改善後のスマホレイアウト画像がこちら。

・商品画像を大きく表示
・商品名を見やすいように幅調整
・ムダな余白を詰め
・ボタンの高さを広げる

の4つを行いました。

並べて比較して見ると、このようになります。

改善のポイント

特に、ボタンの大きさを変えたことで、クリック率が上昇したのでは？と推測しています。

ボタンの大きさの根拠としては、applleのデザインガイドラインをもとにしています。
ガイドラインには、ボタン高さとして44px以上が推奨されているんですね。

ボタンが大きくなると押しやすい。
なので、ボタン高さは44pxに設定しました。

改善実装コード

改善のために実装したコードはこちらです。

HTML


/* rinker ボタン高さを44pxに */
div.yyi-rinker-contents ul.yyi-rinker-links li{
  height:44px;
  line-height:44px;
  font-size: 1em;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a{
  height:44px;
  line-height:44px;
  font-size: 1em;
}

/* rinker サムネイル幅を230pxに */
div.yyi-rinker-contents div.yyi-rinker-image {
width: 230px;
min-width: 140px;
padding: 0;
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
width: auto;
}

/* rinker 商品詳細幅を広げる */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
  width: calc(100% - 20px);
  padding-left: 0;
  margin-left:auto;
  margin-right:auto;
  display:block;
}


/* スマホサイズのみ適用 */
@media screen and (max-width:767px) {
  div.yyi-rinker-contents div.yyi-rinker-box{
    display:block;
  }
  /* 画像を中央そろえ */
  div.yyi-rinker-contents div.yyi-rinker-image{
    margin-left:auto;
    margin-right:auto
  }
  /* ボタンを縦づみに */
  div.yyi-rinker-contents ul.yyi-rinker-links li{
    text-align:center;
    width: 100%;
  }
}

追加CSSは、テーマカスタマイズから追記します。