みなさんこんばんは。ハカセ（イクメン）です。 すっかり更新をサボっていてGoogle先生からも見放されている感じの当サイトですが、たまに更新してみます。

楽天市場に出店していると、楽天RMSへの不満は色々出て来るものですが、その中でも「デザインがダサい」ってのは良く聞く話です。

デザインは色々変えられるものの、専門の知識が必要とされる場合が多く、中々大変だったりします。

今日はその中でも最終的な転換率（購入に至る率）に影響を与えるかも知れない「お買い物かごに入れる」ボタンのカスタマイズ方法を簡単に説明してみます。

結構重要。CTAボタンの色・形・テキスト

「お買い物かごに入れるボタン」は専門用語で言うとCTA（Call To Action）ボタンなどと呼ばれ、古くからネットの世界では需要だと言われています。それなのに楽天市場の「お買い物かごに入れるボタン」は味気なく古臭い感じのままです。

CTAボタンの色や配置でCVR（コンバージョンレート＝転換率）が数倍になったとか、色は緑が良いとか赤が良いとか、色々な説がありますが、長くなるのでここでは触れません。色々テストしてみて効果が上がるものが一番いいと思います。

ただ、楽天のお買い物かごの周りは、ごちゃごちゃしがちなので、デフォルトのままのボタンだと目立たないのは間違いないと思います。少しでも目に止まりやすく工夫すると、割りと簡単に成果が出るかも知れません。

「お買い物かごに入れるボタン」カスタマイズの流れ

1. 「お買い物かごに入れるボタン」用のCSSファイルを用意する
2. CSSファイルを楽天GOLDにアップロードする
3. CSSファイルを商品ページやカテゴリページで読み込む

ステップ1　CSSファイルを用意

楽天市場のお買い物周りのソースを見てみると、詳しい説明は省きますが、 「value=”買い物かごに入れる”」の「input」要素があります。これが「お買い物かごに入れるボタンです。
※「買い物かごに入れる」の文言は、店舗ごとに違う場合があります。ボタンに表示されている言葉を当てはめて下さい。

なんの事だか良くわからない人もいると思いますが、CSSでその要素を指定するにはこんな感じになります。

        input[value="買い物かごに入れる"] {
        /*ここにCSSのプロパティが入ります*/
        }
        

「input」のうちの「value=”買い物かごに入れる”」って値をもつやつの指定は、こうです。”って言う宣言みたいなものです。

ここの要素を色々変えてみます。

        input[value="買い物かごに入れる"] {
        font-size:18px; 
        font-weight:bold;
        margin:10px 0 10px 0;
        padding:10px 40px;
        font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
        }
        

ここでは文字を大きくしてスペースを調整し、フォントをMacならヒラギノ系に、Windowsならメイリオに変えています。

ビフォー

アフター

さらに手を加えたいならCSS Button Generatorを使ってこんな感じにも出来ます。

CSS Button Generator
http://css-button-generator.com/

        #rakutenLimitedId_aroundCart input[value="買い物かごに入れる"] {
        font-size:16px;
        font-family:Arial;
        font-weight:normal;
        -moz-border-radius:8px;
        -webkit-border-radius:8px;
        border-radius:8px;
        border:1px solid #d83526;
        padding:9px 18px;
        text-decoration:none;
        background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
        background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
        background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );
        background-color:#fe1a00;
        color:#ffffff;
        display:inline-block;
        text-shadow:1px 1px 0px #b23e35;
        -webkit-box-shadow:inset 1px 1px 0px 0px #f29c93;
        -moz-box-shadow:inset 1px 1px 0px 0px #f29c93;
        box-shadow:inset 1px 1px 0px 0px #f29c93;
        }
        #rakutenLimitedId_aroundCart input[value="買い物かごに入れる"]:hover {
        background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
        background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
        background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) );
        background-color:#ce0100;
        }
        #rakutenLimitedId_aroundCart input[value="買い物かごに入れる"]:active {
        position:relative;
        top:1px;
        }
        /* This css button was generated by css-button-generator.com */
        

アフター2

ちなみに見本には楽天ランキング1位にあったBunBun!Beeさんのプリザーブドフラワーを使用させてもらいました。

ステップ2　CSSファイルを楽天GOLDにアップロード

ステップ1で作ったCSSファイルをftpのクライアントソフトを使用して楽天GOLDにアップします。

特にディレクトリを指定しなければURLはこんな感じになります。

http://www.rakuten.ne.jp/gold/店舗ID/ファイル名.css

ステップ3　CSSファイルを商品ページやカテゴリページで読み込む

アップしたCSSのファイルを各ページで読み込むための設定をするのですが、楽天市場の商品ページやカテゴリページでは「link」タグが使えません。

じゃあどうするのかって言うと、R-Storefront＞デザイン設定＞ヘッダー・フッター・レフトナビのテンプレートを使用します。

参考記事：楽天ショップで外部スタイルシートを利用する方法

CSSファイルを適用したいページで使っているテンプレートの「フッターコンテンツ」あたりに（ヘッダーコンテンツでもレフトナビゲーションでも変わりません）下記の一行を追加します。

  <link rel="stylesheet" type="text/css" href="http://www.rakuten.ne.jp/gold/店舗ID/ファイル名.css">
  

該当ページを読み込み直すと、CSSが適応されて「お買い物かごに入れるボタン」の見た目が変わっているはずです。

何で「お買い物かごへ」ボタンをカスタマイズするの？

ネットショップの売上は、アクセス×転換率×客単価に分解出来ると言われています。

そのうちのアクセスを向上させるのには広告を実施したり、メルマガを送ったり、検索対策を実施するなどお金や時間・労力が掛かります。

客単価を向上させるには同梱をオススメしたり、セット販売を実施したり、「○○円以上で送料無料」など地道な取り組みしかありません。

しかし転換率なら写真撮影やページ作りの工夫などで、比較的簡単に向上させる事が可能です。

転換率が2倍になれば、売上も2倍になります。

もちろん一番大切な、良い商品と良いサービスがあってこその話ですが、楽天に限らずネットショップを運営するうえで、転換率が非常に重要な事は間違いありません。

ボタンの色や形を変えたところで転換率はほんの0.001ポイント程度しか上がらないかも知れません。（下がる可能性も無い訳ではありません…）それでもサイト内全ての商品かごの転換率が0.001ポイント上がれば、莫大な売上増につながる可能性を秘めています。

もちろん変更する前のデータと変更後のデータを見比べて、効果が無い・逆効果って場合にはすぐに元に戻して下さい。（あくまでも自己責任で…）

それではまた。

上手くいかない時は？

何事にも失敗はつきものです。仕事でもスポーツでも最初から上手く行くことなんてありません。常に行ったり来たりです。

失敗したら諦めるのではなく、上手く行くまでやり直しましょう。ただ、失敗しても被害を最小限にするために、最低限の準備をしておきましょう。

下記の事に気をつけると失敗が怖くなくなります。

• 変更前のデータはとっておく
• 何を変えたのかメモに残す
• 変えた結果どうなったのかメモに残す
• 変更は一個ずつ

ゴールはどこなのか？今どこにいるのか？ゴールへ向かう方法は正しいのか？

その辺を考えずに闇雲に作業をしてもゴールへはたどり着けません。着いたとしたら偶然ですｗ。

ネットショップの運営は、毎日の着実な積み重ねしかありません。積み重ねたつもりが無駄にならない様にほんの少しだけ心がける事が大切です。

偉そうな事を言っていますが、
「自分に対して言っています！」
ｗｗｗ。