梱包オプションのサムネイル ― PC／SPの見え方

写真が「何なのか分からない」原因は、写真ではなく表示枠のトリミングでした。 写真は4枚とも1024×1024の正方形ですが、カードの画像枠が横長（PC 166×72px／SP 154×72px）で object-fit:cover のため、縦の中央4割ほどしか表示されていません。

以下はすべて本番の商品ページ（bow necklace）そのものをPC実寸（1920×1080）とスマホ実寸（390×844）で開き、 案ごとのCSSをその場で当てて撮影・採寸したものです。数値は実測値です。

PCとSPで分ける必要は、ありませんでした

梱包セレクタが入る商品情報カラムの幅を実測したところ、PC（1920px幅）で384px、スマホ（390px幅）で360px。 ほぼ同じでした。テーマがこのカラムに最大幅を設けているためです。

つまり1:1にしても画像はPCで166px、スマホで154pxにしかならず、PCだけ巨大になることはありません。 比率はPC／SP共通で問題なく、分けるほどの差が出ません。

「切れて見えない」やり方は2つ

写真が正方形なので、1:1にすれば1pxも切れません。 4:3のまま切らずに見せたい場合は、枠に写真全体を収める（contain）方法があります。 カードの背景色（#fbfaf7）が写真の白い背景とほぼ同じなので、左右の余白はほとんど分かりません。

やり方写真の切れ写真の大きさ（PC）写真の大きさ（SP）全体の高さ PC全体の高さ SP
現状（72px固定）上下57%が切れる166×72px154×72px481px481px
A　1:1切れない166×166px154×154px669px（+188）645px（+164）
B　4:3＋contain切れない124×124px115×115px586px（+105）568px（+87）
C　4:3＋cover上下17%が切れる166×124px154×116px586px（+105）568px（+87）

B と C は枠のサイズが同じで、中の写真の入れ方だけが違います（Bは全体を収める／Cは枠いっぱいに切って詰める）。

スマホ実機（390×844）

現状高さ72px固定

現状のスマホ表示

全体481px／写真154×72px
ケースも袋も、何なのか判別できない。

A1:1（写真と同じ比率）

1:1のスマホ表示

全体645px（+164px）／写真154×154px
1pxも切れず、写真もいちばん大きい。ただしこの1ブロックでスマホ1画面をほぼ埋める。

B4:3＋全体を収める

4:3 containのスマホ表示

全体568px（+87px）／写真115×115px
切れずに、縦の増えかたはAより77px少ない。背景が同系色なので左右の余白はほぼ見えない。

C4:3＋枠いっぱい

4:3 coverのスマホ表示

全体568px（+87px）／写真154×116px
写真は大きいが、袋の底とリボンの先が切れる（＝切れて見えるのが気になる形）。

PC実機（1920×1080）

現状高さ72px固定

現状のPC表示

全体481px／写真166×72px

A1:1（写真と同じ比率）

1:1のPC表示

全体669px（+188px）／写真166×166px
PCでも画像は166px。大きくなりすぎない。

B4:3＋全体を収める

4:3 containのPC表示

全体586px（+105px）／写真124×124px

C4:3＋枠いっぱい

4:3 coverのPC表示

全体586px（+105px）／写真166×124px
上下が切れる。

どの案でも一緒に直すこと

・読み込み解像度。現状は image_url: width: 180 で、表示166px×Retina2倍＝332px必要なところに足りていません（→ 400へ）。
・「付けない」の空カード。枠が縦に伸びるぶん空白が目立つので、中のアイコンを大きくして整えます。
・カード内の余白と行間を少し詰めれば、全体の高さを30px前後は縮められます。

参考：横並びリスト（写真を左に84px、説明を右）も実測しましたが、1列＝4行になるため スマホ全体で596pxとBより長く、写真も84pxと小さくなるため、この用途では不利でした。