スマホサイトを構築

スマートフォンが当たり前のように世の中に浸透し、WEBショッピングもスマートフォンで楽しむお客様が増えてきました。ECサイトもスマートフォンサイトを用意するかしないかで大きく売上に影響するようになり、スマートフォン用ページの構築は必須になってきましたね。

楽天市場でスマートフォン用ページを作る際には、スマートフォン片手にプレビューをしている方も多いと思いますが、PCで簡単にプレビューが出来る方法がありますのでご紹介致します。

（宣伝になってしまいますが、出品王子はスマートフォンページも自動で生成されますのでこんな手間も要りません）

スマートフォンページプレビュー方法

商品ページを表示させて、URLの最後に以下の文字列を追加してリターンを押して下さい

 
?force-site=ipn
 

（例）オンライン書店　BOOKFANさんの商品

http://item.rakuten.co.jp/bookfan/bk-4907072147/?force-site=ipn

するとこのようにスマホ用のページとしてプレビューが可能になります

サファリでの閲覧がおすすめ

iphoneに搭載されているブラウザはsafariですので、windowsを使用している方はsafariを使ってプレビューするとよりiphoneに近いデザインでプレビューすることが可能です。

windows用safari

http://support.apple.com/kb/dl1531?viewlocale=ja_JP

ついで買い購入カゴとは

「ついで買い購入カゴ」とはお客様に購入ボタンを押してもらう前に、ついでに買ってもらえるように設置する買い物カゴのこと。

コンビニやスーパーで並んでいる時に、レジ前にあるガムやアメなどを買うつもりはなかったのに ついでに買ってしまうことがありますよね。

それのWEB版だと思ってもらえれば分かりやすいかと思います。「画面遷移をせずに買い物カゴに入れられる」というのがついで買い購入カゴのミソになります。

ついで買い購入カゴの作り方

まずは練習として項目別選択在庫などの付いていない単在庫の商品で説明します。

楽天ランキング常連のアンファーさんのスカルプDを例についで買い購入カゴを作ってみましょう。

ついで買い購入カゴを作るには「店舗ID」と「商品ID」を調べる必要があります

この２つは楽天市場から自動で割り振られる数字で店舗側で決めることの出来る値ではありません

「店舗ID」と「商品ID」は「レビューを見る」で確認が可能です

ついで買い購入カゴを作りたい商品のレビューを見るをクリック

遷移先のURLの中央にある数字の羅列がそれぞれ「店舗ID」と「商品ID」になります

※レビューが一件もない場合はこんなURLになっていると思います（端の数字は不要）

この「店舗ID」と「商品ID」を以下のソースに入れればついで買い購入カゴの完成です。

商品画像や説明を入れたりして見栄えを良くして下さい。

アドバイスとしまして、なるべく低単価の商品のほうがついでに買ってもらえる確率も高くなると思います。

<form method="post" data-timesale-id="[商品ID]" target="_blank" action="https://basket.step.rakuten.co.jp/rms/mall/bs/cartadd/set">
<input value="1" type="text" size="4" name="units" id="units">
<input value="買い物かごに入れる" type="submit" id="" data-timesale-id="">
<input value="ES01_003_001" type="hidden" name="__event">
<input value="[店舗ID]" type="hidden" name="shop_bid">
<input value="[商品ID]" type="hidden" name="item_id">
<input value="1" type="hidden" name="inventory_flag">
</form>

注意

実際に使用する場合には、商品ページに該当ソースを直接記述は出来ないのでHTMLとして保存し、楽天GOLDに転送した後iframeなどで呼び出す必要があります。

当然ですが、静的なHTMLですので在庫がなくなった場合に売り切れ表示に変わったりはしません。

本裏技は一部有名店舗などで長らく使われてきた技ですが。楽天市場がCSRF対策などをすると突然使えなくなったりすると思いますので予めそのリスクも分かった上で使って下さいませ。

縮小画像(サムネイル)を画像編集ソフトで作っていませんか？

ECの現場では、販促ページなどを作る際に縮小画像(サムネイル)を作る場面が多々あります。

画像編集ソフトのバッチ機能などを使って作業効率を上げているところもあるのではないでしょうか

あなたが、もし楽天市場に出店している場合は

画像編集ソフトで大きさの異なる画像をたくさん作る必要はありません。

直接指定すれば容量に限界のあるRキャビネットを圧迫させる必要もありません。

※生成した画像は楽天市場のみで使用してください。楽天のリソースで生成した縮小画像を他のモールで使用することはマナー違反です。

楽天で縮小画像(サムネイル)を生成する方法

公式にはアナウンスされていませんが、画像編集用のURLが用意されています。

以下の手順でテストをしてみてください。

1.画像を用意して下さい

600px×600px程度の大きめの画像を用意して、名前は「abcd.jpg」とします。

2.「R-Cabinet」の「基本フォルダ」に登録をします

先ほど制作した画像を「R-Cabinet」の「基本フォルダ」に登録して下さい。

3.ブラウザに以下のURLを直接入力してみてください

「[yourshop]」は自身の店舗IDに変換して下さい。

http://thumbnail.image.rakuten.co.jp/@0_mall/[yourshop]/cabinet/abcd.jpg?_ex=200×200

いいかがですか？キレイに縮小された画像が出てきたと思います。

次に「?_ex=200×200」の200を300などに変えてみてください。

大きさが変化します。

直接指定も可能です

以下のように直接指定も可能です。HTML上で大きさを自由に変えられるのです！

 
200pxにしたい場合
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/[yourshop]/cabinet/abcd.jpg?_ex=200x200">
 
300pxにしたい場合
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/[yourshop]/cabinet/abcd.jpg?_ex=300x300">
 
400pxにしたい場合
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/[yourshop]/cabinet/abcd.jpg?_ex=400x400">
 

デフォルトでは、縦横比の高さ（縦）か幅（横）のどちらか小さい方に、指定したサイズを自動で縮小されます。「 RMSメインメニュ -> 1.PCデザイン設定 -> 商品画像サイズの設定 」の「サイズを設定する方向」の設定が適用されているようです。

画像編集用URL

「R-Cabinet」と「楽天GOLD」に登録されている場合によってURLは変わります

詳細は以下のとおり

【「R-Cabinet」に置かれている場合のURL】

 
直下(基本フォルダ)の場合は
http://image.rakuten.co.jp/[yourshop]/cabinet/abcd.jpg
こうなります
http://thumbnail.image.rakuten.co.jp/@0_mall/[yourshop]/cabinet/abcd.jpg?_ex=200x200
 
フォルダに格納されている場合は
http://image.rakuten.co.jp/[yourshop]/cabinet/[efgh]/abcd.jpg
こうなります
http://thumbnail.image.rakuten.co.jp/@0_mall/[yourshop]/cabinet/[efgh]/abcd.jpg?_ex=200x200
 

【「楽天GOLD」に置かれている場合のURL】

 
直下(FTPルート)の場合は
http://www.rakuten.ne.jp/gold/[yourshop]/abcd.jpg
こうなります
http://thumbnail.image.rakuten.co.jp/@0_gold/[yourshop]/abcd.jpg?_ex=200x200
 
フォルダに格納されている場合は
http://www.rakuten.ne.jp/gold/[yourshop]/[efgh]/abcd.jpg
こうなります
http://thumbnail.image.rakuten.co.jp/@0_gold/[yourshop]/[efgh]/abcd.jpg?_ex=200x200
 

画像編集機能をうまく使って売上をアップさせましょう！

更新したのに画像がなかなか切り替わらない

キャビネットやGOLDの画像を更新したのに全然切り替わらない！

これは沢山のアクセスの負荷を軽減するため、「キャッシュ」というものが働いているのです。

キャッシュはアクセス負荷を軽減するために必要なものですが

○時ちょうどに切り替えたい、更新を頻繁に行いたい、などの場合には、

逆に不便になってしまう場合があります。

ここでは楽天市場の画像キャッシュとうまく付き合う裏ワザを伝授します。

一番手っ取り早い方法

画像の後ろに「?123」と入力して下さい、これを「クエリ文字列」といいます。

後の数字はなんでも構いません。

 
http://image.rakuten.co.jp/yourshop/cabinet/abcd.jpg?123
 
<img src="http://image.rakuten.co.jp/yourshop/cabinet/abcd.jpg?123">
 

切り替わりましたか？

再度更新したい場合は、「123」を別の数字にします。

スタッフが沢山いる店舗さんは、日付などで運用するとよいでしょう「?20131128」。

Javascriptを使って完全にキャッシュが働かないようにする

頻繁に更新するページの場合は、更新するたびに「クエリ文字列」をつけていては大変です。

そういったページは、Javascriptを使って自動制御してしまいましょう。

※キャッシュはアクセス負荷を軽減するために必要なものです、頻繁に更新するページにのみ使用し、やたらに多用するのはやめましょう。

「ヘッダ終了タグ(</head>)」の直前に以下のソースをコピペしてください。

（外部リンクが気になる方はJqueryをGOLDに格納して呼び出して下さい。）

 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//出品王子 EC商売繁盛講座
$(function(){
     var rand = parseInt(Math.random()*10000);
     $.fn.ctrlCache = function(baseURL){
       return this.each(function(){
             var html = this.innerHTML;
             this.innerHTML = html.replace(/(.jpg|.gif)/gi, "$1?"+rand);
       });
     }
     $("body").ctrlCache();
});
</script>
 
</head><!-- ヘッダ終了タグ -->
 

どうでしかたか？更新次第すぐに切り替わるようになったと思います

上記は単純にページ内の「画像の拡張子」を見つけて自動でクエリが付くような働きをしています。

タグの中だけ変えたい、などさらに正確にしたい場合は勝手に改造してもらって構いません。

（出品王子 EC商売繁盛講座は消さないでもらえると嬉しいです）

商品画像を切り替えたい

商品画像って変更しても長い間切り替わりませんよね。

商品ページは、GOLDと違いRMSで操作をするため、上記のような技が使えません。

しかし、「HTMLソース」を見てもらえるとわかりますがこちらにもクエリが使われているのです

 
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/yourshop/cabinet/abcd.jpg?_ex=200x200&s=0&r=1">
 

勘の良い方はもう分かったかもしれませんが、これを操作して別の数字に変更すれば良いのです。

「 RMSメインメニュ -> 1.PCデザイン設定 -> 商品画像サイズの設定 」

ここの設定を200から201に変えてやります

※店舗全体の表示画像サイズが変わりますので、スタッフの方はマネージャに許可をもらってから操作をしてください。