Claude Opus 5.5で商品ページのフォントによる位置ずれを調べる

完成後の画像だけでなく、読み込み記録と実際のCSSをClaude Opus 5.5に渡してフォント切り替えを診断します。同じ見出しを、目的のフォントが届く前後で比較してください。文字を隠したり極端に小さくしたりせず、商品訴求と主ボタンを読み込み中も使える状態に保つことが目的です。

変化する瞬間を記録する

画面幅、ブラウザー、言語、フォント、ウェイトを記録し、キャッシュなしとありの読み込みを保存します。フォント要求の時刻と見出しの行数も必要です。一瞬だけ違う字体になるという開発者の相談は、キャッシュが問題を隠す可能性を示します。本人の報告であり、この手順の性能評価ではありません。

web.devの説明では、Webフォントと代替フォントの占有面積の差が内容を動かす場合があります。調べるべき仕組みを示すもので、ボタン移動の原因をすべてフォントと断定するものではありません。

画像を測定可能な問いに変える

仮に画面幅360ピクセル、左右余白各24なら内容幅は312です。同じ見出しが代替フォントでは行高40の二行、切り替え後は三行になるとします。高さは80から120となり40増えます。これは説明用の計算であり、Opusの実測でもCLSスコアでもありません。

CTAも40動いたか、他の要素も変わったかを調べます。比較では文言、ウェイト、幅、ブラウザーを固定します。見出し領域の高さを固定すると一例の動きを減らせても、長い翻訳を切る可能性があります。最長の承認済み文言を試し、英語の画面を全言語に一般化しないでください。

証拠に合う最小修正を選ぶ

似た代替字体は候補の一つです。MDNのsize-adjust説明は字形とメトリクスの拡縮を扱います。任意の割合を全言語へコピーせず、実際のウェイトで両字体を測り、折り返しとベースラインを確認します。

間違ったウェイト要求や重要字体の発見の遅さを直すだけで済む場合もあります。全ウェイトの早期読み込みは商品画像と資源を奪い合います。`font-display` の変更は取捨選択を変えるもので、即座のブランド表示と位置ずれゼロを常に保証しません。理由を残し、全面改装ではなく取り消せるCSSパッチを作ります。

証拠に基づくパッチのプロンプト

商品ページのフォント切り替えを点検してください。
入力：正確な見出しと言語、画面幅/余白、HTML/CSS、目的の字体とウェイト、
利用可能な代替字体、キャッシュなし/ありの記録、要求時刻、見出しとボタンの実測矩形。
観測事実と仮説を分け、一枚の画像から時間経過を推定しないでください。
字体切り替えが実測移動を説明できるか確認してからCSSを提案します。
文言、見出し階層、コントラスト、読める大きさ、CTA動作を保持します。
最小パッチ、その取捨選択、取り消し方法を返してください。
size-adjustの割合を作らず、全書記体系が同じ寸法だと扱わないでください。
初回、再訪、字体要求失敗、長い翻訳、狭い画面、文字拡大について前後試験表を作ります。
内容幅312、高さ80から120の例は仮定です。
ブラウザー測定値として報告せず、その値からCLSを計算しないでください。

Opus 5.5ガイドをモデルの参考資料とします。これは提案する確認工程で、他モデルより優れるという実測主張ではありません。

読み込み状態を承認する

パッチ後に同条件で記録します。初回、再訪、字体要求を止めた状態を確認し、カスタム字体が届かなくても読めるようにします。対応文字体系ごとに長いタイトルと文字拡大を試し、見た目だけでなくボタン位置を見ます。

実際の組版を理解してから Panelly Studioで広告画像を制作すれば、美しい画像で不安定なページを隠さずに済みます。Opus連携を意味するものではありません。ランディングページ修正は全体階層、ブランドスタイル点検は視覚統一を扱い、字体到着の試験を代替しません。

実務上の疑問

**一枚で修正を証明できますか？** 切り替えや終わらない要求は写らないため、経過と条件が必要です。

**CLS改善を約束できますか？** 適切な道具と比較可能な条件で測定した後だけです。ローカルの改善は実利用者の結果と同一ではありません。

情報源と参考文献

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