Blog

ECサイト向け デザイン様々な買い物カゴ・カートに入れるボタン

2015.07.08 | ECサイト運営 | 2016views


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

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

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

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

スクリーンショット 2015-07-08 9.51.20

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

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

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

スクリーンショット 2015-07-08 9.43.59

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

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

スクリーンショット 2015-07-08 9.44.16

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

スクリーンショット 2015-07-08 9.52.07

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

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

cart01

ブランド力がカートボタンを超える、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式を採用してみたほうがいいのではないかな、と思います。最近ではオレンジ・ゴールド系のボタンを使っているところが増えたのでユーザビリティ的にもメリットがあります。なるべくフラットなデザインというのも心がけたいところですね。

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

著書にDjango1.10 QUICKSTART-BOOK with Python3: 作りながら学ぶDjangoアプリケーション開発

LLC JIRIKI