アートディレクションのための<picture>（代替トリミングと構図の最適化）
1枚の画像でPCとSPの両方にベストな構図を届けるのは難しい。答えは<picture>×別トリミングです。単なる圧縮ではなく、伝わる要素を中心に据えるための配信を設計します。
要点（TL;DR）
- 構図を画面別に決める（PC=横、SP=縦など）。
- <picture> で別カットを配信、sizes で実幅に合わせる。
- CSSの
object-position/aspect-ratioで折り返しに強く。 - 編集ガイドラインを作り、誰が作っても同品質に。
1. コード例：PCとSPで別トリミング
<picture>
<source media="(max-width: 640px)" srcset="/img/hero-vertical.jpg" />
<img
src="/img/hero-horizontal.jpg"
alt="プロダクトの魅力が伝わるビジュアル"
width="1200" height="720"
sizes="(max-width: 640px) 92vw, 1200px"
decoding="async"
fetchpriority="high"
style={{ objectFit: "cover", objectPosition: "center" }}
/>
</picture>編集ガイドライン（例）
- 主役の顔/ロゴは安全領域（上下左右10%）に収める。
- SP用は被写体を縦に強調、PC用は横に広く。
- テキスト上に載せる場合、彩度/明度の衝突を避ける。
2. ワークフロー：作成→比較→圧縮
- 元画像からPC/SP向けに別トリミングを書き出し。
- /compare で構図と画質の見えを比較。
- /compressor で容量を詰める（写真=WebP 80–85）。
3. 公開前チェック（6項目）
- PC/SPで主役が切れない（安全領域OK）。
- sizesが実表示幅と整合、
width/heightでCLSゼロ。 - ヒーローは
fetchpriority=high。 - テキストとのコントラストが十分。
- Retina/非Retinaでもエッジが破綻しない。
- キャッシュ指紋（v2等）を付与。
4. まとめ：構図は“別物”で考える
画面が違えば最適な構図も違います。別カット前提で配信を設計し、伝わる絵を確実に届けましょう。