Shopify商品画像のサイズ｜2048pxが正解

Shopifyの商品画像が失敗する方向は二つです。ひとつは小さすぎる場合——お客様が縫い目や石の留め方を確かめようとズームした瞬間に、画面がぼやけて何も分からなくなります。もうひとつはカメラから出したままの巨大なファイルで、こちらはスマートフォンでページが重くなります。アクセスの多くが集まるのは、そのスマートフォンです。管理画面はどちらも警告なしで受け付けてしまいます。

Shopifyは、多くのストアオーナーが思っている以上のことを自動でやってくれます。1枚の画像からストア内の用途ごとに複数のサイズを生成し、CDNはブラウザが対応していればWebPやAVIFといった新しい形式を選びます。一方で、ばらついたアスペクト比を直したり、どの写真がどのバリエーションのものかを推測したり、雑な切り抜きを救ったりはしてくれません。ここから先が、こちらでコントロールできる部分です。

2048 x 2048で作り、そこで止める

Shopify自身のガイドラインはこうです。正方形の商品画像は2048 x 2048 pxがもっともきれいに表示されます。上限はもっと高い位置にあります——商品画像やコレクション画像は20 MB未満、寸法は5000 x 5000 px、画素数にして2,500万まで許容されます。

ただし上限は目標ではありません。Dawnでは、商品ページ内のギャラリーがCDNに要求する幅は最大でも1946 pxで、ズーム用のライトボックスですら4096 pxを超えるサイズは指定しません。5000 pxのマスターを用意しても、手に入るのは遅いアップロードと、その間の重い編集作業くらいです。メインのギャラリーは2048 pxの正方形で固定しましょう。アップロードできる形式にはPNG・JPEG・WebPが含まれます。6 MBのTIFFではなく、圧縮済みのファイルをShopifyに渡してください。

正方形か縦長か、比率はひとつに決めて貫く

コレクションのグリッドは、アスペクト比のばらつきがいちばん目立つ場所です。だからこそShopifyは、主要画像の比率を全体でそろえることを推奨しています。Dawnのようなテーマでは、枠を画像ごとに合わせるか、すべてを固定比率に収めるかを選べますが、どちらもばらつきには容赦がありません。画像に合わせればグリッドの端がガタガタになり、固定すればボトルの上部が切れたり、指輪のまわりに間延びした余白が残ったりします。

ですから、最初に一度だけ決めてしまいます。正方形（1:1）はもっとも安全な既定値で、幅の狭い画面でもきれいに収まります。4:5や2:3といった縦長の比率はアパレルや背の高いボトルに向いていて、モバイルでは縦方向をより広く占有できます。できないのは、ひとつのコレクションの中で両方を走らせることです。

決めた比率を守るには、商品を切り抜いて枠を自分で組み直すのが確実です。remover.bgに写真をアップロードして背景を削除し、ほかの商品ページとまったく同じ純白かブランドカラーに差し替えます。あとは使い慣れた書き出しツールで決めた枠のサイズにそろえれば、手に持ったマグカップも全身のコートも同じ寸法に収まります。同じ切り抜きは、より厳しいマーケットプレイスの要件——Amazon商品画像の白背景ルール——にもそのまま使えますし、透過のまま保管して後から合成することもできます。どんなときに透過PNGが正解なのかもあわせてどうぞ。

ShopifyのCDNはリサイズしてくれるが、元画像までは直せない

テーマはLiquidのimage_urlフィルターとimage_tagフィルターを通じて画像を要求し、srcsetを組み立てます。これによりCDNは、デバイスごとに適切なサイズと適切な形式のファイルを配信できます。よくできたテーマが390 pxのスマートフォンに2048 pxのファイルをそのまま送らないのは、このためです。

ただし、これでカバーされないことが二つあります。ひとつはアップロード時の形式選びです。WebPで書き出しておけばCDNに届く前の段階でファイルサイズを抑えられますし、ShopifyはWebPを変換なしで受け付けます——remover.bgがアップロードから書き出しまでWebPに対応しているのと同じです。もうひとつは件数です。数百SKUともなるとフォルダーをドラッグして済ませる近道はなく、その仕事は背景削除APIを叩くスクリプトに任せることになります。CSVインポートと並べて走らせましょう。

ズームは、そこにピクセルがあるときだけ効く

Shopifyは、ズームを正しく機能させるには画像が800 x 800 pxより大きい必要があるとしています。Dawnの商品テンプレートでは、ズームの挙動としてクリックとホバー、ライトボックスを開く、ズームなしの三つから選べます。

質感が売りになる商品——ニット、革のシボ、彫刻、宝石のカット、木目——ではズームを有効にします。平面的なグラフィックや小さなアイコンでは切っておきましょう。そこでズームが宣伝してくれるのは圧縮ノイズだけです。ズームはエッジにも容赦がありません。ファーの縁取り、ほつれた髪、細いストラップは失敗を残らず暴きます。きれいな切り抜きが元を取るのは、まさにここです。

バリエーション画像とメディアの並び順

各バリエーションに割り当てられる画像はちょうど1枚——動画や3Dモデルではなく画像のみ——で、お客様がそのオプションを選んだときのプレビューになります。

バリエーションごとに1枚では足りないことがほとんどですから、その周りをギャラリーで補います。撮影したカットはすべて商品メディアに追加し、関連するカットが隣り合うように並べ替え、いちばん強い1枚を先頭に置きます。先頭のメディアが商品カードと初期表示を決めるからです。

代替テキストは512文字まで、実際は125文字で十分

Shopifyは代替テキストを512文字までに制限し、125文字以下を推奨しています。これは読みやすさのための目安であって、スクリーンリーダーの制限ではありません。長い代替テキストは聞くのが苦痛です。耳で聞く人は流し読みができないからです。写っているものを、バリエーションまで含めて説明しましょう。「シャツ」より「ネイビーのリネンシャツ、正面、ボタンを留めた状態」です。「〜の画像」という書き出しと、キーワードの羅列は省きます。代替テキストは商品を1件ずつ開かなくても、CSVアップロードで一括編集できます。

アップロード前の短いチェックリスト

まとめてShopifyに入れる前に。縦長を選んだのでなければ2048 pxの正方形で書き出す、20 MBの上限には余裕をもって収める、背景の処理はコレクション全体で統一する、バリエーションごとに1枚を割り当ててギャラリーをその周りに並べる、代替テキストは125文字以内に収める。どれも華やかな作業ではありませんが、ひとつでも外せばコレクションページにそのまま表れます。