楽天市場の店舗運営で、画像を変更してR-Cabinetや楽天GOLDに上書き保存したとき、反映が遅かったり、いつまで経っても切り替わらない経験はありませんか？

ここで紹介する技を使うと、誰でも簡単に画像の変更を、即座に反映させる事ができます。

また、最後まで読んで頂くことで、画像だけでなく、楽天GOLDで変更、上書きしたHTML・CSS・javascriptも即時反映させることができるようになり、ページ確認がスムーズになります。

楽天市場の店舗で、画像がすぐに切り替え反映ができない2つの理由

楽天店舗で画像を上書き更新した場合、R-Cabinet問題とブラウザキャッシュの影響で画像の反映が確認できないことがあります。

R-Cabinet問題とは、R-Cabinetで画像を上書きすると反映までに最大24時間かかるというものです。これは、10年以上も変わらない仕様で、この反映までのタイムラグに、ブラウザキャッシュも加わることで、反映の確認がさらに難しくなります。

ブラウザキャッシュとは、Microsoft EdgeやGoogle Chromeなどのブラウザが、表示したウェブページの画像やCSSなどを一時的に保存し、次に同じページにアクセスした際、より速く表示することができる機能です。表示速度を上げてくれる素晴らしい機能ですが、このキャッシュ機能のせいで、実際には上書き更新されているはずの画像が、反映されないという事象がおきます。

商品ページ内の画像を変更、上書きして即時反映させる

商品ページ内の画像を即時に切り替えるテクニックです。

また、商品ページだけでなく、カテゴリ説明文や共通説明文、共通バナーについても、即座に反映させる技を紹介します。

商品画像（サムネイル）の場合

商品画像、特に1枚目の画像はスーパーセールやお買い物マラソンなどの価格やポイント変更時、楽天サーチ画面で他店舗商品より目立たせる場合など、変更、上書きすることが多々あります。

ここでは、変更、上書きした商品画像（サムネイル）を即時に反映する方法を解説します。

ファイル名を変更して対応

通常、商品画像はR-Cabinetに保存したものを利用すると思います。しかし、R-Cabinetに保存した画像を上書きすると、楽天市場の仕様で反映までに最大で24時間かかってしまいます。

そこで、ファイル名を変更して保存したものを使用することで即座に反映することができます。

上記のように、もとのファイル名の後ろに、番号や日付などを追加して対応する方法になります。

しかし、反映は即座にされますが、商品情報の画像URLを変更する手間が発生してしまいます。

変更頻度の多い商品画像1枚目を楽天GOLDに置く

楽天GOLDはR-Cabinetと違い即時反映となります。

そこで、変更頻度の多い商品画像1枚目を楽天GOLDに置き、商品情報の画像URLも楽天GOLDに設定しておく方法になります。

商品点数が少ない店舗様は、すべての商品画像1枚目を楽天GOLDに置き、商品点数の多い店舗様は、以下のケースに当てはまる商品を対象にしてみてはいかがでしょうか。

※楽天GOLDの容量は最大1GBとなります。

対象商品が1000商品位までであれば、楽天GOLDの空き容量も十分に確保でき、頻繁な書き換えも即時反映で大変便利です。

商品説明文や販売説明文、カテゴリ説明文、PC・スマホ共通説明文の場合（PC・スマホ共通バナーもOK）

商品説明文や販売説明文、カテゴリ説明文、PC・スマホ共通説明文に使用する画像も、楽天GOLDに置くことで即時に反映させることができます。

ただし、販売説明文や商品説明文のLP（ランディングページ）に使用する画像など、すべての画像を楽天GOLDに設置することは画像容量が大きくなり難しいでしょう。

こちらも、変更が多い画像だけを楽天GOLDに設置するようにしましょう。

HTMLメルマガで使う画像を変更、上書きして即時反映させる

HTMLメルマガで使う画像も楽天GOLDを使用することで即時反映することができます。そして、送信予約後、配信時間まで数時間といったメルマガに対しても、即座に画像を書き換えることができます。

日時、価格などのミスが見つかった場合でも、予約を取り消して、もう一度、設定からやり直すなんてことがなくなる、大変便利なテクニックです。

ここで、「ん！？楽天GOLDの画像をメルマガで使えないぞ！」と思った方、以下を御覧ください。

通常、楽天GOLDの画像URLは

のようになると思います。

このままでは、HTMLメルマガで使用した際にエラーが出て保存することができません。そこで、サムネイル機能が使えるURLを使用します。

サムネイル機能が使えるURLは2つありますので、どちらを使用しても構いません。

どちらも、画像拡張子（この場合は.jpg）の後に「?」をつけパラメーターを追加することで縮小画像を表示させることができますが、パラメーターがない場合は原寸サイズで表示されます。
※サムネイル機能が無い「https://shop.r10s.jp/gold/店舗URL/●●●.jpg」も使用可能です。

このURLを使用することで、HTMLメルマガ内の画像の変更を即座に反映でき、送信予約後であっても、画像を変更できます。

便利なテクニックとなっていますので、是非試してみてください。

※R-Cabinetの画像URLを使用した場合でも、送信予約が24時間以上先であれば、上書きで予約後の変更も可能です。

楽天GOLDの画像、iframe（HTML）、js、cssを変更、上書きして即時反映させる技

楽天GOLDの画像、iframe（HTML）、js、cssを上書きして、反映されない理由の多くはブラウザキャッシュによるものです。

ここでは、楽天GOLDにファイルをアップロードした際の、ブラウザキャッシュ対策について解説します。

拡張子の後ろにパラメータをつけてブラウザにキャッシュさせない

URL、相対パスどちらでも構いませんので、「.jpg」や「.html」、「.css」など拡張子の後ろに「？」を付けて、数字や文字列などのパラメータを追加することで、ブラウザにキャッシュさせません。パラメータは数字でも文字列でも構いません。

以下はパラメータの例になります。

楽天GOLDにHTML、js、cssを上書きでアップロードする度に、パラメータ部分（「?」以降）を書き換えれば、「ブラウザキャッシュで反映されない問題」は解決です。

ファイルを頻繁に書き換える場合は、パラメータ部分を、日付（20220330）や日時（202203301012）にして運用すれば間違いが起こりません。

Javascriptを使ってブラウザにキャッシュさせない

画像やiframe（HTML）、css、Javascriptを書き換えるたびに、パラメータ部分（「?」以降）を書き換えるという作業は、変更数が増えると結構な手間になります。

そこで、Javascriptを使い、パラメータ部分（「?」以降）の書き換えを自動で行います。

これについては、以下の記事で詳しく説明していますので、是非ご覧ください。

画像の即時反映で注意しなければならない２つのポイント

画像の即時反映で注意する点は、R-Cabinetに保存した画像は基本的に上書きしない、ブラウザキャシュ対策を多用しないです。

R-Cabinetに保存した画像は基本的に上書きしない

これは混乱を避けるための対策になります。特に画像の変更枚数が少ない場合は、ファイル名を変更してR-Cabinetに保存しましょう。

上記「楽天市場の店舗で、画像がすぐに切り替え反映ができない2つの理由」でも触れたように、R-Cabinetで上書きをした場合、最大で24時間掛かります。

更に、FTPで画像ファイルを上書きした場合、R-Cabinetに読み込まれるまでに最大24時間、反映までに最大24時間掛かり、最大で48時間もの時間が掛かってしまいます。
（実際にはそこまでの時間は掛かった事がありません。）

人の目に加え複数人で変更されたかどうかを確認する場合など、かなりの確率で混乱を招きます。

また、楽天市場は時間が勝負となるイベントが多いため、R-Cabinetの画像の上書きは基本的にやらない方向で日頃から取り組んでおくことが大切です。

ブラウザキャシュ対策を多用しない

ブラウザキャッシュは、ページの表示速度を上げるためのものです。ブラウザキャシュを多用すると店舗の各ページの表示速度が遅くなり、ユーザーの離脱につながる恐れがあります。

以前、Google、Amazonなどがページの表示速度についての調査を行い、ページ表示速度の遅れはユーザーの離脱、売り上げの低下につながるという結果を公開していましたので、ブラウザキャシュ対策の多用は避けたほうが良いでしょう。

楽天スーパーセールなどのイベントで、時間とともに頻繁更新する特設ページは、ブラウザキャシュ対策を行い、通常のページはブラウザキャシュ対策を一部のみ、もしくは使わないように心掛けましょう。

まとめ

楽天市場のシステム問題も絡みむため対策が少し難しくなってしまいましたが、「楽天で画像、HTML、js、cssをすぐに切り替え、即時反映させる技」はがいかがでしたか。

今後は、状況に応じて、画像、HTML、js、cssを即時に反映させることができるようになったと思います。

弊社では、楽天、Yahoo!ショップ、自社店舗など、運営に悩んでいる店舗様の相談にも乗っております。わからないことやお悩みがございましたら、お気軽にお問い合わせください。