最終更新日:2017/07/31みなさんこんばんは。ハカセ(イクメン)です。更新をサボっていてGoogle先生からも見放されている感じの当サイトですが、たまに更新してみます。楽天市場に出店していると、楽天RMSへの不満は色々出て来るものですが、その中でも「デザインがダサい」ってのは良く聞く話です。デザインは色々変えられるものの、専門の知識が必要とされる場合が多く、中々大変だったりします。今日はその中でも最終的な転換率(購入に至る率)に影響を与えるかも知れない「お買い物かごに入れる」ボタンのカスタマイズ方法を簡単に説明してみます。たいぷむーん様・めぐみるく様他のご指摘により、記事内容を修正しています。2014.08.25結構重要。Action)ボタンなどと呼ばれ、古くからネットの世界では需要だと言われています。それなのに楽天市場の「お買い物かごに入れるボタン」は味気なく古臭い感じのままです。CTAボタンの色や配置でCVR(コンバージョンレート=転換率)が数倍になったとか、色は緑が良いとか赤が良いとか、色々な説がありますが、長くなるのでここでは触れません。テストしてみて効果が上がるものが一番いいと思います。楽天のお買い物かごの周りは、ごちゃごちゃしがちなので、デフォルトのままのボタンだと目立たないのは間違いないと思います。目に止まりやすく工夫すると、割りと簡単に成果が出るかも知れません。「value=”買い物かごに入れる”」の「input」要素があります。これが「お買い物かごに入れるボタンです。※「買い物かごに入れる」の文言は、店舗ごとに違う場合があります。ボタンに表示されている言葉を当てはめて下さい。なんの事だか良くわからない人もいると思いますが、CSSでその要素を指定するにはこんな感じになります。}「input」のうちの「value=”買い物かごに入れる”」って値をもつやつの指定は、こうです。”って言う宣言みたいなものです。ここの要素を色々変えてみます。}ここでは文字を大きくしてスペースを調整し、フォントをMacならヒラギノ系に、Windowsならメイリオに変えています。Generatorを使ってこんな感じにも出来ます。*/アフター2ちなみに見本には楽天ランキング1位にあったBunBun!Beeさんのプリザーブドフラワーを使用させてもらいました。CSSファイルを楽天GOLDにアップロードステップ1で作ったCSSファイルをftpのクライアントソフトを使用して楽天GOLDにアップします。ディレクトリを指定しなければURLはこんな感じになります。CSSファイルを商品ページやカテゴリページで読み込むアップしたCSSのファイルを各ページで読み込むための設定をするのですが、楽天市場の商品ページやカテゴリページでは「link」タグが使えません。するのかって言うと、R-Storefront>デザイン設定>ヘッダー・フッター・レフトナビのテンプレートを使用します。参考記事:楽天ショップで外部スタイルシートを利用する方法CSSファイルを適用したいページで使っているテンプレートの「フッターコンテンツ」あたりに(ヘッダーコンテンツでもレフトナビゲーションでも変わりません)下記の一行を追加します。href="http://www.rakuten.ne.jp/gold/店舗ID/ファイル名.css">※店舗IDとファイル名は必要に応じて書き換えて下さい。該当ページを読み込み直すと、CSSが適応されて「お買い物かごに入れるボタン」の見た目が変わっているはずです。何で「お買い物かごへ」ボタンをカスタマイズするの?ネットショップの売上は、アクセス×転換率×客単価に分解出来ると言われています。そのうちのアクセスを向上させるのには広告を実施したり、メルマガを送ったり、検索対策を実施するなどお金や時間・労力が掛かります。客単価を向上させるには同梱をオススメしたり、セット販売を実施したり、「○○円以上で送料無料」など地道な取り組みしかありません。転換率なら写真撮影やページ作りの工夫などで、比較的簡単に向上させる事が可能です。転換率が2倍になれば、売上も2倍になります。大切な、良い商品と良いサービスがあってこその話ですが、楽天に限らずネットショップを運営するうえで、転換率が非常に重要な事は間違いありません。ボタンの色や形を変えたところで転換率はほんの0.001ポイント程度しか上がらないかも知れません。(下がる可能性も無い訳ではありません...)それでもサイト内全ての商品かごの転換率が0.001ポイント上がれば、莫大な売上増につながる可能性を秘めています。変更する前のデータと変更後のデータを見比べて、効果が無い・逆効果って場合にはすぐに元に戻して下さい。(あくまでも自己責任で...)それではまた。上手くいかない時は?何事にも失敗はつきものです。仕事でもスポーツでも最初から上手く行くことなんてありません。常に行ったり来たりです。失敗したら諦めるのではなく、上手く行くまでやり直しましょう。失敗しても被害を最小限にするために、最低限の準備をしておきましょう。下記の事に気をつけると失敗が怖くなくなります。変更前のデータはとっておく何を変えたのかメモに残す変えた結果どうなったのかメモに残す変更は一個ずつゴールはどこなのか?今どこにいるのか?ゴールへ向かう方法は正しいのか?その辺を考えずに闇雲に作業をしてもゴールへはたどり着けません。着いたとしたら偶然ですw。ネットショップの運営は、毎日の着実な積み重ねしかありません。積み重ねたつもりが無駄にならない様にほんの少しだけ心がける事が大切です。「自分に対して言っています!」www。11:28いつも参考にさせていただいております。質問というか困っているのですが、さっそく活用させていただいたところ「個数」の隣の数字入力の窓まで大きくなったり色が付いたりしてしまいます。御教授いただけたら幸いです。一応ある程度のショップの買い物かごで動作確認したのですが、買い物かごの設定によってはカゴ周りのパーツのIDなどが変わるのかも知れません。記事中のCSSを指定する部分を下記のように変更すると上手くいくかも知れませんので、試してみてください。{}これは「IDが#rakutenLimitedId_aroundCart」の要素の中にある「input」要素のうち「type=”submit”」の値を持つものだけを指定するという意味です。買い物かごのボタンを赤く大きくする事は出来ましたが下にある【商品についての問合わせ】ボタンまで同じくなってしまいました...。09:57めぐみるく様コメントありがとうございます。