ECサイトのカートボタン。結構悩みますよね。既にブランディングが完成しているストアと比較したり真似してもあまり意味がありません。あのストアはカートボタン目立ってないからうちもこれで大丈夫。と考えると大きな失敗のもと。大手は大手の、中小規模には中小規模のカートボタン。自社ならではのカートボタンを作る、カートボタンで購入率を上げるにはどうすればよいでしょうか。

カートボタンの重要性にいち早く気がつけば・・・

損をしているカートボタン

これはもう絶対ダメだろう、というカートボタンの一例を出してみましょう。

ちなみにこれは何のカートボタンかといいますと楽天のほぼデフォルトのカートボタンです。このまま使うのはちょっとどうかと・・・。ボタンを買えるだけでもカート獲得率が飛躍的に上がります。

大手Amazonが試行錯誤の上結局これだ、となったボタン

Amazonはゴールド・グレー・ブラックなど色々なカートボタンを調べた結果ゴールドボタンが良い、という結論を出していますね。現在のAmazonカートボタンを見てみましょう。

ゴールド・オレンジ　系の色合いになっています。実はオレンジ系のボタンをデフォルトに使っているECモールが有ります。

カートに入れるボタンあれこれ

どこのカートボタンかわかりましたか？Yahooショッピングのカートボタンが正解です。カートに入れるボタンの重要性、というかYahooショッピングというモールをブランディングしていこうという現れのような気もします。

赤いボタン。赤という色は注意喚起や、購買行動に結びつきやすいのでつい使いがちですが、サイト全体の配色を考えた時に「力強すぎる」傾向にあります。多くのストアでこういった赤いボタンが使われているのですが、ストア自体のブランドカラーが「赤」という場合以外にはオレンジ・ゴールドをオススメしたいところです。

ブランド力がボタンを超える

ブランド力がカートボタンを超える、MUJIのオンラインストアの一例です。商品の説明文の配置・カラーがそもそもブランドのイメージで作り上げられています。カートボタンのホバーカラーも色を合わせてありますね。

楽天のデフォルトカートボタンを変えよう！

楽天のカートボタンを画像化していない場合は今直ぐ変えましょう。以下がCSSソースです。

input[value="買い物かごに入れる"]{
	background:url("画像URL");
	width:265px;
	height:55px;
	text-indent:-9999px;
	border:none;
	cursor:pointer;
	margin-top:8px;
}

input[value="買い物かごに入れる"]:hover{
	opacity:0.8;
}

買い物カゴに入れるボタンは、様々なサイトを参考にしてもよいですがやはりAmazon式を採用してみたほうがいいのではないかな、と思います。最近ではオレンジ・ゴールド系のボタンを使っているところが増えたのでユーザビリティ的にもメリットがあります。なるべくフラットなデザインというのも心がけたいところですね。