ECサイトの商品画像を拡大できるようにしても、開いた先がぼやけていれば、素材や仕上げを確かめる助けになりません。一方、商品一覧まで大きな画像を読み込ませると、探す操作が重くなります。まず購入前に見たい細部と拡大時の表示範囲を決め、一覧用・商品ページ用・拡大用の画像を分けて確認すると、必要な解像度を決めやすくなります。
何を拡大して確かめたいのかを先に決める
たとえば器なら、全体の形だけでなく釉薬の表情や縁の仕上げを見たいかもしれません。衣類なら生地の織りや縫い目、家具なら接合部など、商品によって確認箇所は違います。担当者が実物を見て「この箇所を購入前に伝えたい」と決め、全体写真から十分に見えるのか、細部を別の接写で撮るべきかを選びます。元写真に写っていない質感は、画素数だけ増やしても伝わりません。
一覧では商品を見分ける全体写真、商品ページでは形・色・使用場面、拡大表示では判断したい部分を見せる、と画像の役割を分けます。全体写真を無理に拡大するより、縁や縫い目の接写を一枚加えるほうが役立つ場合もあります。
拡大で見せる範囲から元画像の画素を見積もる
拡大表示の横幅と、元画像のどの範囲をそこに表示するかを確認します。たとえば表示幅が800 CSSピクセル、対象画面の画素密度が2倍なら、表示される部分には横約1600画素が検討の出発点になります。元写真の横半分だけをその幅へ拡大する設計なら、元写真全体では横約3200画素が計算上の目安です。撮影の鮮明さや圧縮後の見え方、カート側の上限もあるため、この数値だけで決めず実機で確かめます。
Googleのレスポンシブ画像の解説は、画面や通信環境に合わせた複数の画像候補をブラウザへ渡す仕組みを説明しています。拡大用の大きな画像を一覧や通常表示に一律で配る必要はありません。利用するカートやテーマが、アップロード画像からどの大きさを生成し、拡大時にどの画像を呼ぶかを制作担当と確認します。
プラットフォームの推奨値は、自店の表示で確かめる
Shopifyの商品メディアの案内には正方形の商品画像の目安やアップロード上限が示されています。ただし、これはShopifyの条件です。別のカートやテーマにはそのまま当てはめず、商品一覧、詳細ページ、拡大画面の実際の表示寸法と画像変換の仕様を調べます。商品写真を一律の大きさで作り直す前に、数商品で試作します。
拡大操作と読み込みを同じ実機で試す
商品ページで画像をタップし、拡大時に見たい細部が読めるか、ピンチや閉じる操作が使いやすいかを確認します。モバイル回線でも最初の一覧が待たされないかを見ます。ぼやける場合は、撮影元の鮮明さ、カートが生成した画像、拡大画面の引き伸ばしを順に確認します。Bämの通販サイト制作案内へ相談する際は、実物で見せたい箇所、元写真、利用予定のカートやテーマ、スマートフォンでの拡大例を共有すると、必要な撮影と画像の使い分けを決められます。
参考資料
資料確認日：2026年9月27日。対象商品の元写真、確認箇所、利用カートとテーマの画像仕様は未提示です。図と画素数の説明は設計の例であり、一律の推奨値ではありません。
