Claude Opus 5.5でレスポンシブ画像を確認：商品画像のぼけを直す

Claude Opus 5.5には、大きな商品写真を書き出す前に、表示領域・候補ファイル・ブラウザの実際のリクエストを比較させます。ぼけの原因はリソース選択にあり、モバイルの重いダウンロードは表示領域の過大な宣言にあるかもしれません。スクリーンショットだけでなく測定値を渡しましょう。

証拠から修正方法を選ぶ

MDNのレスポンシブ画像ガイドは、解像度の切り替えと構図の切り替えを区別しています。`sizes`は表示領域の説明であり、CSSの幅を設定しません。異なるトリミングが必要な場合に`picture`を使います。切れたカップの取っ手をJPEGの品質設定で直そうとしてはいけません。

リソース幅の計算例

仮に、カップの商品ページのビューポートが390 CSSピクセル、左右の余白が各24ピクセルとします。画像の表示領域は390 − 48 = 342 CSSピクセルです。DPR 2なら、目安となるリソース幅は342 × 2 = 684ピクセル。候補が480・800・1200ピクセルなら800は妥当な候補ですが、ブラウザの選択を保証するものではありません。これは計算済みの仮定例であり、Opusの実測結果ではありません。

コードが`sizes="100vw"`なら、342ではなく390ピクセルを宣言しており、実際の領域より約14%大きくなります。必ず選択ファイルが変わるわけではありませんが、候補の境界では影響し得ます。デスクトップの半幅カードに、モバイルの全幅ヒーローと同じ宣言をそのまま使わないでください。

ビューポート、ズーム、`devicePixelRatio`、要素の矩形、`currentSrc`、応答画像の寸法、転送バイト数を記録します。ネットワークパネルで実際のリクエストを確認し、キャッシュ条件も残します。リサイズ後も大きな画像がキャッシュから使われる場合があるため、一度のリサイズだけでは誤りを証明できません。web.devのガイドは、適切なリソースをブラウザに選ばせる考え方を説明しています。

そのまま使える確認プロンプト

この商品画像のリソース選択を確認してください。入力はHTMLまたはコンポーネントコード、関連CSS、候補ファイル名と実際の画素寸法、ビューポートとDPR、画像の表示矩形、currentSrc、ネットワーク転送量です。欠けた測定値は不明として扱ってください。

解像度選択、構図のトリミング、圧縮による劣化を分けて判断してください。指定条件で表示幅 × DPRを計算し、要求ファイルと比較します。幅記述子と実際のファイル寸法が一致するか確認し、各ブレークポイントでsizesがCSSレイアウトと一致するか説明してください。コードだけから特定のブラウザ選択を保証しないでください。

証拠表、不確実性を含む最も有力な原因、最小のコード修正、狭い画面と広い画面のDPR 1・2での検証表を返してください。商品構図、代替テキスト、既存コンポーネントAPIを維持します。証拠が不足する場合は画像システム全体を書き直さず、次に測定する項目を示してください。

このプロンプトは、文脈と出力条件を明確にするOpus公式ガイドの考え方を用いています。利用手順の例であり、モデルを実行したとは主張していません。

顧客に届く画像を検証する

記録した幅で同じ商品を確認し、通常の閲覧サイズで細い輪郭を見ます。見た目とともに要求ファイルと転送量も確認してください。幅・高さの指定や確実なアスペクト比の予約を維持し、読み込み時のレイアウト移動を防ぎます。構図が正しく、適切な候補があり、全画面に最大原本を強制していなければ修正を受け入れられます。

よくある質問

**すべて表示幅の2倍で書き出すべきですか？** DPR 2は一つの試験条件で、万能な書き出し規則ではありません。レイアウト、候補間隔、ブラウザの判断も関係します。

**圧縮を強めれば誤った`sizes`も直りますか？** バイト数だけ減って選択の誤りが残る可能性があります。先に表示領域を確認します。

**スクリーンショットで読み込んだファイルを証明できますか？** できません。`currentSrc`とネットワーク応答を組み合わせます。異なるサイズでも小さな画面では似て見えます。

確認済み素材を広告制作へ渡す

承認した商品画像とトリミングをまとめてから、Panelly Studioで広告バリエーションを作ります。物体自体が不自然なら商品写真の反射と遠近感の確認を参照してください。ここでのPanellyは制作の受け渡し先であり、Opusとの統合を意味しません。

情報源と参考文献

• 一次資料 · developer.mozilla.org
• 一次資料 · web.dev
• 一次資料 · platform.claude.com