ネットショップはスマホ最適化！画像の幅は最低750px最大1000pxで作れ！

いつの間にか時代はスマホ！スマホ！スマホ！スマホ！スマホ！スマホ！
スマートフォンなのに短く読むとスマホ！

ネットショップの売り上げも数年前はPCからがダントツだったものの、ここ数年でそれを上回る勢いで50％を超えています。
シェアが超えてるって事は、もうそっちに合わせるしか無い訳であります。

スマホで綺麗に見える画像の幅は？

そこで画像幅は何ピクセルで作るべきか、先に言うと2018年現時点で750pxが正解です。

スマホ画面の幅はだいたい375px前後です。じゃあ375pxで作ればいいじゃないか
ちがーう！ちがうのであります！
実際375pxで作れば分かりますが、375PXの画像をスマホ画面一杯に表示すると画像はボケボケ、粗々な画像になるのです。

実はスマホは綺麗な画像に見えるように液晶画面の密度がPC画面の2倍になっているのです。
なのでPCで綺麗に見える画像でも、スマホで画面一杯に表示すれば2倍に荒く見える訳です。
（画面一杯表示にしない場合は半分サイズで綺麗に表示されます）

なので、スマホサイト用の画像は750px幅でデザインするのが常識となります。

画像に載せる文字サイズも、小さい文字で30px前後の文字の大きさで作らないとスマホだと小さくて見づらくなります。

とくに楽天のスマホサイトはピンチアウト（2指で拡大）が出来ません。
なので、確実に目視で見える文字サイズで画像に載せる必要があります。

スマホ用PC用で画像用意って面倒

楽天ショップだと、PC用説明文とPC用説明文の入力フォームは分かれています。
なので、PC版の幅の画像とスマホ版の画像を用意して入力すればどちらも綺麗に見えますが

同じ画像2枚もサイズ違いで用意するのメンドクサイ！！

ですよねぇ～。
私も面倒です。

もう統一してしまえ！って事で、多少PC版で見ると文字サイズデカイと思っても気にせず、スマホサイズで画像を作るのが効率的と思います。
一番オススメは、画像には極力文字を載せない事、テキストはテキストで文字表示させるのが一番読みやすいです。

スマホ最適化で750pxで作った画像ですが、PC版で表示されるとテンプレートの幅を突き抜けてしまったりします。
これを幅指定（例えば640ｐｘ幅）で縮小させるタグは以下です

<img src="sample.jpg" alt="サンプル" width="640" height="200">

なんですが！

なんかタグで縮小させるとせっかくの画像が粗く見えるのです。。。
なので、PC版テンプレートも画像説明部分の幅を750px画像が綺麗に収まるデザインにするのが一番おすすめです。

楽天市場の方は↓こちらの小技もお勧めです。

【楽天市場の場合画像サイズの小技】画像サイズを縮小しても綺麗に見える！便利な画像サイズ設定の仕方

アマゾンの画像を考える

アマゾンショップも同時に出店されている方も多いかと思いますが、

アマゾンの規約的にはメイン画像は縦横1000pxが望ましい事になっています。

なので、アマゾンも同時出店されているショップさんにオススメの画像サイズは

って思う結論な訳です。
ただ、1000px幅の商品イメージ画像を作るって結構大変だったりもしますし、読み込み速度も画像が大きいとそれなりにかかります。

JPGで保存する時は、文字が汚く見えないギリギリの圧縮で保存する事も意識しないとですね！