ECサイトに備わっているサムネイル機能を有効に使おう！
各ECサイト設定の仕様が変更されている場合もございます。
トップページ用に1枚。サイドナビ用に1枚。
そんな感じでサムネイル画像を用意していませんか？もちろんそれも正解です。
ですが、大手ECサイトにはそれぞれ独自に登録画像をリサイズして表示してくれる便利な機能が備わっています。
ただ、各ECサイト毎に『管理上必要だから付いている』だけであって、出店者用に作られた物じゃない気もするので、痒いところに手が届かない！と思う所も多々あります（笑）。
でも上手く使えば、ページの表示速度も改善出来るし、無駄に画像容量を消費して圧迫祭りする事も無いので、ぜひ参考にしてみて下さい！
楽天市場のサムネイル
Cabinetに登録した場合のURLはこんな感じ。「account」はご自分のショップアカウントに置き換えて下さいね。
# 登録画像
https://www.rakuten.ne.jp/gold/account/hoge.png
# サムネイル
https://www.rakuten.ne.jp/gold/account/hoge.pngFTPサーバー『GOLD』に登録した場合
# 登録画像
https://thumbnail.image.rakuten.co.jp/@0_gold/account/hoge.png?_ex=200×200
# サムネイル
https://thumbnail.image.rakuten.co.jp/@0_gold/account/hoge.png?_ex=200×200サイズの変更方法
サムネイルのサイズ変更は、一番後ろの赤文字で書いてある『200x200』の部分を変更します。内訳は『横ピクセル x 縦ピクセル』です。
以下各サイズ指定にしたい場合の例です。
横幅 = 640px
縦幅 = 480px
ファイル名 = fuga.jpg
横幅200px
# 横幅200px
https://thumbnail.image.rakuten.co.jp/@0_gold/account/fuga.jpg?_ex=200×150
# 横幅480px
https://thumbnail.image.rakuten.co.jp/@0_gold/account/fuga.jpg?_ex=480×360
# 縦幅200px
https://thumbnail.image.rakuten.co.jp/@0_gold/account/fuga.jpg?_ex=267×200長い辺のサイズが優先されます。
画像サイズ指定時は長い辺のサイズを元に計算されます。例えば『横長の画像で横幅を指定したい』サムネイルを表示させたい場合であれば、極論縦ピクセルは適当なサイズで構いません。
上記の横幅480pxの場合でも、縦に360pxと律儀に指定していますが、『300』でも『200』でも、表示される画像サイズは一緒です。
表示出来るピクセル範囲に注意！
便利なサムネイル機能ですが、若干制限があります。まぁサムネイルとして仕様する上では特に気になりませんが。
サムネイルとして設定出来るピクセル数は試してみたところ、『2～700ピクセル』までの様です。それ以外の数値を指定すると何も無い画像に置き換わって表示されてしまいます。
Yahooショッピングのサムネイル
Yahooショッピングの場合は全ての画像で使用できるのではなく、商品登録時に設定した『メイン画像』と詳細画像に関してのみ使用出来ます。またサイズも全て指定されており、楽天の様に汎用性のある設定は出来ない様です。
URLはこんな感じ。「account」はご自分のショップアカウントに置き換えて下さいね。
# メイン画像
https://item.shopping.c.yimg.jp/i/i/account_item-000
# 詳細画像
https://item.shopping.c.yimg.jp/i/i/account_item-000_1『item-000』は商品IDで、詳細画像の最後にある数字が詳細画像の何枚目の画像かを表しています。そしてアカウントの直前にある『i』のアルファベットを変更する事で、各文字に対応したサイズのサムネイルが表示されます。他にもあるかもしれませんが、アルファベット毎のサイズは下記をご覧下さい。d
| アルファベット | 横/縦サイズ | 補足 |
|---|---|---|
| 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で表示した場合、左右に正方形になるように白い空白が入ります。
ショップサーブのサムネイル
ショップサーブはとてもわかりやすく、大中小で選べるのみとなります。そして、Yahooの様に管理画面から登録した商品画像のみが適用対象となります。
URLはこんな感じ
「domainname」はご自分のショップに合わせて置き換えて下さいね。
# 登録画像
https://example.co.jp/domainname/pic-labo/hoge.png
# サムネイル
https://example.co.jp/domainname/pic-labo/simg/hoge.png『simg』の部分を指定の文字列にする事で指定されたサイズで表示させる事が可能です。ショップサーブお場合は縦幅は関係なく、横幅を基本のサイズにリサイズし、縦幅は単純に相対的にリサイズされるみたいです。
| キーワード | 横サイズ |
|---|---|
| timg | 50px |
| simg | 120px |
| mimg | 180px |
| limg | 250px |
| limg | 640px |
まとめ
いかがですか？
画像ファイルを適切なサイズで出せば、もちろんページの表示速度等、色々な恩恵が受けられる半面、必要サイズのサムネイルを用意しないとダメになるので、手間も多くなります。ましてやそれを修正になると、必要サムネイル分上書きが必要になります。
しかしこういった機能をうまく使う事で、実際用意する画像は一枚で済むし、編集が出ても1枚編集するだけで終わります。
管理もラクに出来て恩恵も受けられるので、是非サイト内で使える場面があれば使ってみて下さい！
