Shopifyの商品画像が見切れるとき：リサイズ前に確認すること

どこで切れているかを特定する

アップロードした画像そのもの、商品詳細、コレクションのカードをそれぞれ開きます。元画像でキャップや袖が切れているなら、テーマ設定では戻せないため、広く写った元データか再撮影が必要です。一覧だけなら表示枠を調べます。

パソコンとスマホも分けて確認しましょう。横に広い一覧では問題がなくても、狭いカードでは切れることがあります。変更前に同じ商品のスクリーンショットを残すと比較できます。

リサイズとトリミングを分ける

1200 × 1500と1000 × 1250は、どちらも4:5です。小さくしても正方形にはなりません。計算例として1200 × 1500を中央で正方形に切ると、縦が合計300ピクセル、上下それぞれ150ピクセルずつ減ります。端にあるキャップが切れる理由はここにあります。

Shopifyのメディアエディタにはトリミングとサイズ変更があります。サイズ変更では縦横比を保ち、形を変える必要がある時は意図して切り出します。枠に合わせて商品を引き伸ばさないでください。

参照: Shopify Help Center: Media editor ↗

元画像を壊さない方法から試す

公開中のストアを直接変える前に、テーマを複製するかプレビューを使います。商品カードの画像比率やフィット方法を探してください。項目名はテーマで異なります。全体表示で余白が出ても、商品の一部が欠けるより適切な場合があります。

Shopifyの焦点設定も、すべての商品カードで同じように使われるわけではありません。テーマが対応している場所で試し、表示を確認します。他店用のCSSを対象箇所が不明なまま貼り付けないことが大切です。

参照: Shopify Help Center: Theme images and focal points ↗

1. 代表商品1点でテーマのプレビューを開く。
2. 全体が収まる表示と現在の切り出しを比較する。
3. 正方形ファイルが必要なら、商品周囲に余白を残したコピーを作る。
4. 商品詳細・一覧・スマホを確認してから変更を公開する。

商品一覧のための共通ルールを決める

掲載場所ごとに基準の縦横比を決め、重要な細部を端に寄せすぎないようにします。商品自体の形をそろえる必要はありません。縦長・横長・セット商品で試してから全体に適用すると、例外に気づけます。

既存の編集機能とテーマ設定で解決できれば、追加の有料アプリは不要です。ただしShopifyストア自体が無料という意味ではありません。SokuPhotoのサイズガイドは書き出し計画に使えますが、テーマを自動設定する機能ではありません。