商品一覧サムネイルと詳細画像の推奨サイズは？

一覧サムネは長辺600–800pxの正方形が扱いやすく、Retina向けに2倍解像度で書き出します。詳細のメイン画像は長辺1200–1600pxを目安にし、ズーム用途がある場合は2000px以上も検討します。アスペクト比は1:1または4:5を統一し、レイアウト崩れを防ぎます。

JPEG・PNG・WebP・AVIFの使い分けは？

写真はWebP/AVIFを優先し、画質と容量のバランスを最適化します。透過やロゴ・UI的要素はPNG、単純色やアイコンはSVGを使用。レガシーブラウザ向けにでAVIF→WebP→JPEG/PNGのフォールバックを用意すると安全です。

圧縮の目安やファイル容量の基準はありますか？

一覧サムネは30–80KB、詳細メインは100–200KBを起点に調整します。WebP/AVIFの品質値は60–80程度から開始し、視認差が出ない範囲で圧縮。テキストや細線がある画像はリング状ノイズに注意し、視覚チェックを必ず行います。

背景は白が最適でしょうか？

白背景は汎用性と比較性が高く基準として有効です。一方で角が飛びやすい商品は薄いグレーやブランドカラーで輪郭を出すと訴求が安定します。外部モール要件がある場合は純白(#FFFFFF)で統一し、自社サイトはABテストで最適解を決めます。

代替テキストはどう書けば検索に効きますか？

「製品名＋主要属性＋色/サイズ＋用途」を自然文で80–125文字程度にまとめます。例: “撥水レザーの薄型二つ折り財布、ブラック、RFID搭載”。キーワードの詰め込みや「画像／写真」という語は不要です。

モデル着用やライフスタイル画像は必要ですか？

サイズ感や使用シーンが伝わりにくい商材（アパレル・家具・雑貨など）では効果が高いです。切り抜き画像で仕様を明確化しつつ、1–2枚のライフスタイル画像で文脈を補完します。総重量が増えすぎないよう遅延読み込みを併用します。

ABテストでは何を指標にすべきですか？

一覧はCTR、詳細はカート追加率とスクロール深度、サイト全体では収益指標を基準にします。テスト要素は角度、クロップ、背景色、小物の有無、サムネとメインの順序。期間はトラフィックに応じて統計的有意差が出るまで実施します。

CDNやキャッシュ設定のベストプラクティスは？

ハッシュ付きファイル名で長期キャッシュ（Cache-Control: public, max-age=31536000, immutable）を設定し、更新はファイル名変更で制御。とsizesでレスポンシブ配信、折りたたみ以下はloading="lazy"、LCP候補は事前読み込みで初速を確保します。