楽天ショップで「買い物かごに入れる」ボタンをカスタマイズする方法

公開日:  最終更新日:2017/07/31

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

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

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

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

たいぷむーん様めぐみるく様他のご指摘により、記事内容を修正しています。2014.08.25

結構重要。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 Pゴシック", "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さんのプリザーブドフラワーを使用させてもらいました。

BunBun!Bee
http://www.rakuten.ne.jp/gold/bunbunbee/

ステップ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">
  

※店舗IDとファイル名は必要に応じて書き換えて下さい。

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

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

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

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

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

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

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

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

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

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

それではまた。

上手くいかない時は?

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

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

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

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

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

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

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

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

コメント

  1. たいぷむーん より:

    いつも参考にさせていただいております。

    質問というか困っているのですが、さっそく活用させていただいたところ
    「個数」の隣の数字入力の窓まで大きくなったり色が付いたりしてしまいます。

    御教授いただけたら幸いです。

    • ハカセ より:

      たいぷむーん様
      一応ある程度のショップの買い物かごで動作確認したのですが、買い物かごの設定によってはカゴ周りのパーツのIDなどが変わるのかも知れません。
      記事中のCSSを指定する部分を下記のように変更すると上手くいくかも知れませんので、試してみてください。
      #rakutenLimitedId_aroundCart input[type="submit"] {}
      これは「IDが#rakutenLimitedId_aroundCart」の要素の中にある「input」要素のうち「type=”submit”」の値を持つものだけを指定するという意味です。
      よろしくお願い致します。

  2. たいぷむーん より:

    ハカセ様

    うまくいきました!
    ありがとうございます><

  3. めぐみるく より:

    初めまして★
    買い物かごのボタンを赤く大きくする事は出来ましたが
    下にある【商品についての問合わせ】ボタンまで同じくなってしまいました…。
    アドバイスお願いします!

    • ハカセ より:

      めぐみるく様
      コメントありがとうございます。

      う~ん。確かにそうですね。お問い合わせボタンなども「type=”submit”」になってる様ですので、このままだと同じ設定になってしまいます。

      ちょっと力技ですが、CSSのセレクタを

      #rakutenLimitedId_aroundCart table input[value="買い物かごに入れる"] {
      }
      

      こんな感じにすると解決するはずです「買い物かごに入れる」の部分は、店舗で買い物かごボタンに設定している言葉を入れて下さい。

      または、買い物かごに入れるボタン以外の各種ボタンは、「font」タグで囲まれている様なので、そっちを個別に指定する方法もあります。

      #rakutenLimitedId_aroundCart table font input{
      }
      

      こんな感じです。
      よろしくお願い致します。

  4. めぐみるく より:

    遅くなってすいません!
    お返事ありがとうございます☆

    上記の方法で何度か試しましたがダメでした…。
    知識不足で申し訳ないです(;_;)

  5. きんぎょ より:

    はじめまして。

    とても参考になる記事でありがとうございます。
    ただ、試したみたところ、
    「参考記事:楽天ショップで外部スタイルシートを利用する方法」
    の方法だと、CSSを一切読み込みません。(3店舗で試しましたがすべてNGでした)

    それで、共通説明文(大)にタグで直接記入したところ、IE以外では適用されたのですが、IEのみ反映されないので困っております。
    商品ページに直接というのも試しましたが、結果は同じくIEのみ適用されません。

    対処法をご教授いただけたら幸いです。

    • ハカセ より:

      きんぎょ様

      コメントありがとうございます。
      見逃していて、返信がすっかり遅くなりました・・・

      デザイン設定のヘッダー・フッター・レフトナビのテンプレートで使用するテンプレートを選び編集リンクをクリックして「ヘッダーコンテンツ」の一番上に

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

      って感じで、CSSを読み込めば、URLに間違いが無い限りはCSS自体はブラウザが何であれ読み込まれるはずです。

      注意点としては、そのCSSを適用したい商品ページorカテゴリページでCSSを読み込ませた「ヘッダー・フッター・レフトナビ」のテンプレートが選択されている必要があります。
      説明が下手でスミマセン・・・

      今まで結構な数の店舗さんでやらせて頂いているので、どこかに間違い(誤解)が無ければこの方法で行けるはずです。

      また、
      共通説明文(大)の件ですが、IEの8まではそもそもこの属性セレクタってのに対応していない様です・・・。

      記事中に別の書き方を追記しておきましたので、ご参考になれば。

  6. ルイナス より:

    お世話になっております。
    いつも有益な情報を、有難うございます。

    昔、コメントしたことがあるのですが、その時の名前を忘れましたので、
    新しい名前です^^;

    遅ればせながら、買い物かごボタンのカスタマイズをやってみたところ、
    最初は、反映されませんでした。

    何でかなーと思いながら、いろいろやってみたところ、
    僕の場合は
    1行目に@charset “utf-8”; を追加して、
    エンコードをutf-8nで保存し直したらうまくいきました。

    ちなみに色は緑系にしています。

    転換率がどうなるか、様子をみてみます。
    上がればいいなぁ

    • ハカセ より:

      ルイナス様
      コメントありがとうございます。

      色々試してみるのは、ネットショップ運営の醍醐味ですね。
      苦しくても面白い部分だと思います。
      転換率上がったらまたコメント下さい(笑)

  7. 質問者 より:

    ハカセ様

    改めて記事を拝見させていただきました。
    下記、の通りで再度作成し、フッターコンテンツから

    で読み込みましたが、繁栄されないようです。

    最終的には「買い物かご」ボタンを用意したgifファイルに差し替えることができればと考えております。

    よろしくお願い申し上げます。

    #rakutenLimitedId_aroundCart input[value=”買い物かごに入れる”] {
    font-size:16px;
    font-family:Arial;
    font-weight:bold;
    -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 6%, #ce0100 99% );
    background:-ms-linear-gradient( top, #fe1a00 6%, #ce0100 99% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fe1a00′, endColorstr=’#ce0100′);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(6%, #fe1a00), color-stop(99%, #ce0100) );
    background-color:#fe1a00;
    color:#ffffff;
    display:inline-block;
    text-shadow:1px 4px 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 6%, #fe1a00 99% );
    background:-ms-linear-gradient( top, #ce0100 6%, #fe1a00 99% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ce0100′, endColorstr=’#fe1a00′);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(6%, #ce0100), color-stop(99%, #fe1a00) );
    background-color:#ce0100;
    }#rakutenLimitedId_aroundCart input[value=”買い物かごに入れる”]:active {

    position:relative;
    top:1px;
    }
    /* This css button was generated by css-button-generator.com */

    • ハカセ より:

      質問者様
      コメントありがとうございます。

      問題は1つずつ解決していきましょう。


      1 gif画像のURLは正しいですか?

      CSSのBackgroundの部分で指定したurlをブラウザのURL欄に入れて見て
      表示されるかチェック!

      表示されなければURLが間違っています。


      2 CSSのファイルは読み込まれていますか?

      CSSのファイルの一番下に

      body {
      	background-color: #000 !important;
      }
      

      と追記してアップしてみてページの背景色が黒くならなければ、
      CSSのファイルが読み込まれていません。

      下記記事を参考にCSSファイルを読み込みましょう。(上で追加した分のCSSは削除するのを忘れずに)

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


      3 CSSの記述は間違っていませんか?

      上記2点が解決したら、後はCSSの記述の問題です。

      背景をgif画像にしたいだけなら、

      input[value=&quot;買い物かごに入れる&quot;] {
      	background: url(gif画像のURL) 0 0 no-repeat #fff;
      	width: 220px;/*画像の横幅*/
      	height: 40px;/*画像の高さ*/
      	color: #000;
      	border: none;
      	margin: 0;
      }
      

      このままだと文字はテキストで残りますので

      input[value=&quot;買い物かごに入れる&quot;] {
      	background: url(gif画像のURL) 0 0 no-repeat #fff;
      	width: 220px;/*画像の横幅*/
      	height: 40px;/*画像の高さ*/
      	color: #000;
      	border: none;
      	margin: 0;
      	text-indent:-9999px;/*テキストを表示区域外に飛ばす*/
      }
      

      と、1行追加してテキストを表示されないようにすればOKかと思われます。


      4 HTML/CSSがそもそも分からない

      基本的な知識が無いと、上記の話もなかなか理解出来ないかも知れません。
      その場合、ここではスペースの都合上1からご説明するのは難しいですので、
      下記記事等をご参考に基礎的な知識を学んだ上で再トライすれば問題なくご理解頂けると思います。

      0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-

      以上、お役に立てれば幸いです。

      よろしくお願い致します。

  8. axis より:

    上手く設置できました!ありがとうございます。

    始め、IEだけ無反応でしてなんでかなーと思っていましたら
    コメントにありました通り、
    @charset “Shift_JIS”; から @charset “utf-8”; に変更したら
    反応してくれましたm(__)m

    他店舗さんのも参考に四苦八苦してしまいました;;

    • ハカセ より:

      axis様
      コメントありがとうございます。
      お役に立てて何よりです。
      そしてブログからのリンクもありがとうございます。
      園芸シブいっす。
      これからもよろしくお願い致します。

匿名 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る