Claude Opus 5.5でアップロード後の商品写真の回転を直す

Claude Opus 5.5には、画像のピクセルと向きのメタデータが食い違う工程を調べてもらいます。回転を指示する前に、原本、加工後のファイル、ブラウザー表示を比較してください。スクリーンショットだけでは、まだ回転が必要なのか、二重に回転したのかを判定できません。

同じ写真の三つの証拠をそろえる

カメラ原本は変更せず保管します。原本とページが実際に配信する派生画像のメタデータを取得し、ブラウザーの表示も記録します。幅と高さ、EXIF Orientation、処理順序、ライブラリーのバージョンが必要です。観察と対象ファイルを対応させましょう。キャッシュされたサムネイルは最新のアップロードと異なる場合があります。

2024年11月の開発者の報告では、当初ブラウザーを疑い、その後古い画像処理ライブラリーに二重回転の原因を絞りました。一件の自己報告であり、自分の環境の原因を証明するものではありません。変換と残存タグの両方を調べることが要点です。

向きをそろえてから切り抜く

仮に4032 × 3024の写真にOrientation 6が付いているとします。指示された四分の一回転後の寸法は3024 × 4032です。中央の正方形なら一辺3024で、上下を各504ピクセル除きます。これは寸法の計算であり、商品に適した切り抜きの証明ではありません。背の高いボトルには別の構図が必要かもしれません。

Sharpの操作リファレンスでは、autoOrientは必要な鏡像処理を含めEXIFの向きを適用し、そのタグを除去します。ただしEXIFへの対応だけでは、他の場所にある矛盾した方向情報まで解決できません。導入版の仕様と出力を確認し、正規化の後に無条件の90度回転を追加しないでください。

静止JPEGで検討できる処理例です。

const output = await sharp(input)
  .autoOrient()
  .resize({ width: 1600, withoutEnlargement: true })
  .webp()
  .toBuffer();

あえて切り抜きを含めていません。原本を残し、別の派生ファイルを保存して向きと寸法を調べます。CSSでプレビューだけ回転しても、ダウンロードのピクセルは直りません。MDNのimage-orientation解説で表示とファイル処理を区別できます。

そのまま使える診断プロンプト

添付した商品写真の向きの問題を診断してください。入力は未加工の原本、実際に配信される派生画像、両方のメタデータ、ブラウザー画像、処理コード、導入ライブラリーのバージョンです。修正案の前に不足情報を列挙してください。
ファイル、ピクセル寸法、EXIF Orientation、適用済み変換、観察された表示を表にしてください。観察と仮説を分け、ピクセルに回転や鏡像が反映済みなのに旧タグが残っていないか確認してください。
拡大縮小や切り抜きの前に一度だけ向きを正規化する最小修正を提案してください。原本とラベルの同一性を保ち、無条件の回転を追加しないでください。画面画像でメタデータが証明できるとは主張せず、切り抜き座標系を説明してください。
パッチ、戻し方、通常・回転・鏡像入力のテストを提出してください。表示とダウンロードを比較し、実行できない処理はコマンドと未実行の表示を付けてください。出力ファイルを確認せず成功と報告しないでください。

これはOpusの提案ワークフローであり、モデルの実測ではありません。テスト画像には非対称ラベルや隅の印を使い、対称的なボトルで鏡像を見落とさないようにします。対応する各方向について、直立、ラベルの向き、意図した構図を確認します。方向タグなしの画像と、正規化済みの画像も加えます。

よくある疑問と受け渡し

**先にEXIFを消してよいですか。** 向きを適用する前に情報を消すと、横倒しのピクセルだけが残り得ます。原本の情報から変換を決めてから除去します。

**一枚のカードだけ違うのはなぜですか。** 配信URLとキャッシュ版を確認します。一組の原本と派生画像で再現する前に、全画像を作り直す必要はありません。

**切り抜きも直りますか。** 向きは座標系を決めるだけです。レスポンシブ画像の選択と構図は別に確認します。

正しい向きの参照画像を承認したら、Panelly Studioで完成形の商品広告画像を制作できます。修正ファイルを参照にし、生成結果のラベルも確認してください。PanellyへのOpus統合や上記処理の内蔵を意味しません。

情報源と参考文献

• 一次資料 · stackoverflow.com
• 一次資料 · sharp.pixelplumbing.com
• 一次資料 · developer.mozilla.org