この記事は2015年11月30日のものです。各ECサイト設定の仕様が変更されている場合もございます。

トップページ用に1枚。
サイドナビ用に1枚。

そんな感じでサムネイル画像を用意していませんか？
もちろんそれも正解です。

ですが、大手ECサイトにはそれぞれ独自に登録画像をリサイズして表示してくれる便利な機能が備わっています。
ただ、各ECサイト毎に『管理上必要だから付いている』だけであって、出店者用に作られた物じゃない気もするので、痒いところに手が届かない！と思う所も多々あります(笑)。

でも上手く使えば、ページの表示速度も改善出来るし、無駄に画像容量を消費して圧迫祭りする事も無いので、ぜひ参考にしてみて下さい！

1. 楽天市場
2. Yahooショッピング
3. ポンパレモール
4. ショップサーブ

楽天市場のサムネイル

Cabinetに登録した場合のURLはこんな感じ。
「account」はご自分のショップアカウントに置き換えて下さいね。

登録画像

http://www.rakuten.ne.jp/gold/account/hoge.png

サムネイル

http://thumbnail.image.rakuten.co.jp/@0_mall/account/cabinet/hoge.png?_ex=200×200

FTPサーバー『GOLD』に登録した場合はこうです。

登録画像

http://www.rakuten.ne.jp/gold/account/hoge.png

サムネイル

http://thumbnail.image.rakuten.co.jp/@0_gold/account/hoge.png?_ex=200×200

サイズの変更方法

サムネイルのサイズ変更は、一番後ろの赤文字で書いてある『200×200』の部分を変更します。
内訳は『横ピクセル x 縦ピクセル』です。

以下各サイズ指定にしたい場合の例です。

• 横幅 = 640px
• 縦幅 = 480px
• ファイル名 = fuga.jpg

横幅200px

http://thumbnail.image.rakuten.co.jp/@0_gold/account/fuga.jpg?_ex=200×150

横幅480px

http://thumbnail.image.rakuten.co.jp/@0_gold/account/fuga.jpg?_ex=480×360

縦幅200px

http://thumbnail.image.rakuten.co.jp/@0_gold/account/fuga.jpg?_ex=267×200

長い辺のサイズが優先されます。

画像サイズ指定時は長い辺のサイズを元に計算されます。
例えば『横長の画像で横幅を指定したい』サムネイルを表示させたい場合であれば、極論縦ピクセルは適当なサイズで構いません。

上記の横幅480pxの場合でも、縦に360pxと律儀に指定していますが、『300』でも『200』でも、表示される画像サイズは一緒です。

表示出来るピクセル範囲に注意！

便利なサムネイル機能ですが、若干制限があります。
まぁサムネイルとして仕様する上では特に気になりませんが。

サムネイルとして設定出来るピクセル数は試してみたところ、『2～700ピクセル』までの様です。
それ以外の数値を指定すると何も無い画像に置き換わって表示されてしまいます。

Yahooショッピングのサムネイル

Yahooショッピングの場合は全ての画像で使用できるのではなく、商品登録時に設定した『メイン画像』と詳細画像に関してのみ使用出来ます。
またサイズも全て指定されており、楽天の様に汎用性のある設定は出来ない様です。

URLはこんな感じ。
「account」はご自分のショップアカウントに置き換えて下さいね。

メイン画像

http://item.shopping.c.yimg.jp/i/i/account_item-000

詳細画像

http://item.shopping.c.yimg.jp/i/i/account_item-000_1

『item-000』は商品IDで、詳細画像の最後にある数字が詳細画像の何枚目の画像かを表しています。
そしてアカウントの直前にある『i』のアルファベットを変更する事で、各文字に対応したサイズのサムネイルが表示されます。他にもあるかもしれませんが、アルファベット毎のサイズは下記をご覧下さい。

a

縦 = 40px : 横 = 40px

b

縦 = 56px : 横 = 56px

c

縦 = 76px : 横 = 76px

d

縦 = 106px : 横 = 106px

e

縦 = 132px : 横 = 132px

f

実寸サイズ

g

縦 = 146px : 横 = 146px

h

縦 = 120px : 横 = 30px (左右に空白が挿入されます)

i

縦 = 200px : 横 = 200px

j

縦 = 300px : 横 = 300px

k

縦 = 400px : 横 = 400px

l

縦 = 600px : 横 = 600px

m

縦 = 600px : 横 = 300px (左右に空白が挿入されます)

n

縦 = 900px : 横 = 900px

o～

実寸サイズ

表示画像は正方形に修正されます。

表示させたい画像が正方形出ない場合、見た目は変わらないのですが、実際の画像サイズは正方形に修正されて表示されます。
例えば、縦長の画像でサムネイルURLで表示した場合、左右に正方形になるように白い空白が入ります。

ポンパレモールのサムネイル

ポンパレモールはシステム自体が楽天市場に酷似している為、機能もほぼほぼ近いモノがあります。
が！楽天以上にかゆいところに手が届かない仕様となっております。

URLはこんな感じ

「accountID_1」と「accountID_2」はご自分のショップアカウントに置き換えて下さいね。

登録画像

http://img.ponparemall.net/imgmgr/accountID_1/accountID_2/hoge.png

サムネイル

http://img.ponparemall.net/imgmgr/accountID_1/accountID_2/hoge.png?size=pict200_200

見てお分かりの通り、楽天と違い、ドメイン自体はどちらも一緒ですので、その点では分かりやすいかもしれませんね。

サイズの変更方法

サムネイルのサイズ変更は、一番後ろの赤文字で書いてある『200_200』の部分を変更します。
内訳は『横ピクセル_縦ピクセル』です。

こう見ると結構楽天の様に汎用性が高そうに見えますが、実はサイズ指定の制限が非常に狭いです。
詳細は不明ですが、調べた感じだと以下のような仕様があります。

1. 縦と横の数値が一緒じゃないとダメ。
2. 指定出来る数値は決まっている。
3. 表示時はサイズが正方形に修正される為、見た目の比率は変わらないが左右に空白が入る(Yahooと一緒)。

とりあえず調べてみました

とりあえず『横980px : 縦654px』の画像を使用して、10px～500pxまで調べてみました。
実際表示された結果は下記の通りです。

• 40_40
• 80_80
• 90_90
• 100_100
• 120_120 (なぜか正方形ではなく実寸の縮小サイズで表示されました。)
• 130_130
• 140_140
• 150_150
• 160_160
• 200_200
• 240_240
• 280_280
• 300_300
• 320_320
• 480_480
• 500_500

多分ホントに管理側がデータベースで使う用でしょうね(笑)
僕は200pxあたりなんか結構重宝してました。

ショップサーブのサムネイル

ショップサーブはとてもわかりやすく、大中小で選べるのみとなります。
そして、Yahooの様に管理画面から登録した商品画像のみが適用対象となります。

URLはこんな感じ

「domainname」はご自分のショップに合わせて置き換えて下さいね。

登録画像

http://example.co.jp/domainname/pic-labo/hoge.png

サムネイル

http://example.co.jp/domainname/pic-labo/simg/hoge.png

『simg』の部分を指定の文字列にする事で指定されたサイズで表示させる事が可能です。
ショップサーブお場合は縦幅は関係なく、横幅を基本のサイズにリサイズし、縦幅は単純に相対的にリサイズされるみたいです。

timg

横幅50pxにリサイズ。

simg

横幅120pxにリサイズ。

mimg

横幅180pxにリサイズ。

limg

横幅250pxにリサイズ。

llimg

横幅640pxにリサイズ。

いかがですか？
画像ファイルを適切なサイズで出せば、もちろんページの表示速度等、色々な恩恵が受けられる半面、必要サイズのサムネイルを用意しないとダメになるので、手間も多くなります。ましてやそれを修正になると、必要サムネイル分上書きが必要になります。

しかしこういった機能をうまく使う事で、実際用意する画像は一枚で済むし、編集が出ても1枚編集するだけで終わります。
管理もラクに出来て恩恵も受けられるので、是非サイト内で使える場面があれば使ってみて下さい！