Amazon商品画像のカスタマイズ(実践編)


技術資料 > Amazon商品画像のカスタマイズ(実践編)

Amazon.co.jpの商品画像は画像のURIを一部変更することで、サイズや影・回転など様々なカスタマイズが可能です。Amazonが標準で提供しているリンクでは満足できず自分でカスタマイズしたい方や、Amazon Webサービスを用いて画像を加工する場合に役立ちます。

「実践編」ではサイズの決定・サイズの調整を中心に、実際に利用するにあたって覚えておくと便利な知識を紹介・解説していきます。

Amazon商品画像のサイズ

実際にカスタマイズを始める前にAmazon商品画像のサイズについて。Amazonでは1商品に対して、「サムネイル」・「小」・「中」・「大」4種類の画像サイズを用意しています(4種類用意されていない場合もあります)。

そしてAmazonの商品画像にはサイズごとにルールがあります。それはサイズごとの最大幅です。横幅または縦幅がサイズごとの最大幅になります。具体的には下記のようになります。

サムネイル: 75px

画像(小): 110px

画像(中): 160px

画像(大): 500px

例えば、画像(小)で縦幅が110pxの場合、横幅は110px以下になります。この情報を元に自分のサイトで最適な商品画像のサイズを考えることができます。

そして、このサイズは「理論編」の「基本サイズ指定」オプションで変更することができます。

参考:画像(小)
URI: http://images-jp.amazon.com/images/P/4774134325.09._SCTZZZZZZZ_.jpg

 

画像サイズの調整

ただ、サイズだけでは正確なレイアウトができない場合があります。縦幅・横幅の上限が分かっていてもどちらの幅が大きい為、結局のところ縦幅・横幅がどれくらいの大きさかURIを生成するまで分からないという問題が発生します。これを解決するのが「サイズ調整」オプションです。

「サイズ調整」オプションの一番簡単で便利な使い方は、"AA"オプション(正方形)です。つまり、「縦幅・横幅があいまいなら正方形に加工したらいいじゃないか」という考え方です。サイズを決めてその上限を"AA"オプションで指定すれば、画像は強制的に正方形になり(余っている部分は余白になる)、サイトのレイアウトがものすごく楽になります。商品を複数並べる場合に特に楽になります。

参考:画像(小)・(正方形110px)
URI: http://images-jp.amazon.com/images/P/4774134325.09._SCTZZZZZZZ_AA110_.jpg

この"AA"オプションは常に最後に付けるように心がけてください。それは、オプションがURIの左から右に処理される為、最終的なサイズが"AA"オプションで指定したサイズになるからです。他のオプション「回転」、「影」等を指定した場合も同様です。

 

商品画像がない場合

では、商品画像が存在せず表示されない場合はどうすればいいでしょう?自分で「No Image」という画像を用意してもいいですが、Amazonにも「No Image」の画像が用意されています。色々な種類がありますが、ここでは一番使い勝手の良い画像を紹介します。

イメージはありません
URI: http://images-jp.amazon.com/images/G/09/nav2/dp/no-image-no-ciu.gif

他の画像を知りたい場合は「Amazonで使用されているNo imageの画像を集めてみました」参照

大きいと思われたかもしれませんが、実はその方が都合がいいのです。なぜなら、この画像にもカスタマイズが効くからです。小さい画像の場合、"AA"オプションで引き伸ばしても余白が大きくなるだけで、画像自体は大きくなりません。従って、この画像が一番使いやすいです。では、サイズ調整してみましょう。

イメージはありません(正方形110px)
URI: http://images-jp.amazon.com/images/G/09/nav2/dp/no-image-no-ciu._AA110_.gif

先ほどの画像と並べてみても違和感はないと思います。

 

関連リンク

Amazon商品画像のカスタマイズ(理論編)

技術資料

最終更新:2008年5月31日

トラックバック(0)

トラックバックURL:

※トラックバックのリンク確認後に掲載させて頂きます。
(当エントリー又は当サイトへのリンクがない場合は掲載しない可能性があります)

コメント

感想・要望等ありましたら気軽にコメントしてください。
(※Captchaはスパムコメント対策用の画像認証です)


画像の中に見える文字を入力してください。