カラーミーショップの画像が粗いと感じたときは、まず画像サイズの設定を見直すべき

カラーミーショップの商品画像や一覧画像で出力されるサイズが何pxか知っていますか? と質問すると、ベテランオーナー様ほど間違った回答をします。

正解は「自由に設定できる」です。以前は商品画像550px、一覧画像250pxだったのですが、いつからだったか自由設定できるようになっています。

現代のスマートフォンで250pxの画像だと粗い表示に感じることも

現代のスマートフォンの大半(ほぼ全機種)が、画像をより綺麗に表示するための高解像度ディスプレイを採用しています。

要点を雑にいうと、実際に表示される2〜3倍程度のサイズをもつ画像でなければ、ぼやけて表示されます

iPhoneでは2〜3倍、Andoridでは1.5 ~ 3倍とひらきがありますが、制作現場では2倍サイズの画像を用意することが多いです。(画像の鮮明さが重要な業種では3倍画像を用意することもあります)

商品画像が重要な価値をもつ商材を取り扱っておられるショップ様のケースでは、商品画像をより鮮明に出すことで売上があがった という事例もあります。

ただし、画像サイズが大きくなればなるほどデータ量は増加することになりますので、闇雲に大きな画像を用意することでページの表示速度が遅くなってしまうこともあります。(Core Web Vitalの悪化)

ここはトレードオフの関係ですので、サイトのデザインにあわせた無理のない範囲で指定なさることをおすすめします。

画像表示サイズの変更方法(画像サイズ設定)

では、実際に画像サイズを変更する方法について解説します。

管理画面の「ショップ作成」 > 「デザイン」 > 「画像サイズ」から設定できます。

カラーミーショップ管理画面のスクリーンショット。ショップページで出力される画像サイズを設定する画面が表示されています。
管理画面のスクリーンショット

一覧用画像、商品画像(メイン&オプション画像)、特商法ページで表示される決済画像、配送画像の出力サイズを変更できます。(フューチャーフォン向けは無視で良いです。)

過去にアップロードした画像はサイズ変更されない

注意点として、過去にアップロードした商品画像のサイズは変更されません

画像サイズ変更後に追加した商品に関してのみ、新サイズが適用されます。

過去に登録した画像のサイズを変更したいときは、再度画像を登録しなおす必要がありますので要注意です。

画像の拡大はできない

設定した出力サイズは最大値の設定です。

たとえば商品画像のサイズを800 x 800pxに設定したとします。

そこに1,000px四方の画像をアップロードすると800px四方にリサイズされて表示されますが、600px四方の画像をアップロードしても600pxで出力されます。

600pxの画像が800pxに拡大されるわけではありませんのでご注意ください。

上部へスクロール