Claude Opus 5.5のSVG図：文字を全部縮めずラベルの欠けを直す

Opusが作ったSVGの文字が切れる場合、文字の境界、囲む形、SVGの表示領域を別々に確認します。全ラベルを縮めず、局所的な寸法修正を依頼してください。実際の表示サイズで読めて、編集後も意味が変わらない図を目指します。

MDNはSVGのtext要素を説明しています。文字位置と外側の矩形は別属性なので、文字が増えても枠は自動では広がりません。以下は独自の配置例で、実行したOpus出力ではありません。

どの境界が間違っているかを特定する

架空の設置手順「開梱」「台座を付ける」「角度を調整」を考えます。中央を「調整式の台座を取り付ける」に変えたとき、どの部分が文字を隠すかで直し方が違います。

表示領域を広げてもカードからはみ出す文字は直りません。カードを広げても古いクリップ寸法は直りません。関連する要素IDを示させ、変更を確認できるようにします。

改行前に有効幅を計算する

幅240単位、左右余白各20の仮のカードでは、文字に使える幅は200です。描画後の文字幅が224なら24超えています。同じ余白で264単位のカードにすれば収まりますが、隣接カードと線にも空間があることが条件です。

二行にし、必要なら高さを増やす方法もあります。文字数だけで幅を推定しないでください。字体、太さ、言語で変わります。数値は計算例であり、添付ファイルの実測ではありません。

修正ファイルと描画結果を求める

Opus 5.5で提供した設置手順SVGを修正してください。三手順、順序、文言、接続先は保持します。中央ラベルのtext要素、カード要素、関連するclipPathを特定してください。
ブラウザやレンダラーがある場合は実際の字体で文字を描画して測ります。なければ幅は未検証としてください。文字とカード内幅、図全体とviewBoxを比較します。
意味のある改行、カード拡張、クリップ境界修正から局所的な対処を選びます。全字体を縮めたり、問題を隠すため文言を変えたりしないでください。影響する矢印は意味を変えず引き直します。
編集したSVGと変更一覧を返してください。想定表示幅と狭いスマホ幅で描画し、文字欠け、字体欠落、矢印衝突を確認します。描画できなければ明示し、視覚検証済みと主張しないでください。

チャット表示だけでなく書き出しファイルを見る

保存したSVGを使用先のブラウザや設計ソフトで開きます。新版であること、三ラベルが揃うこと、線が正しい順序を示すことを確認します。チャットの美しいプレビューは別ファイルに同じコードが入った証拠ではありません。

スマホ用には三列を縦の流れへ変える場合があります。単なる縮小ではなく意図した別レイアウトです。手順順序を維持し、デスクトップ版と混同しないファイル名にします。

商品機能を説明する図なら、確認した形状関係と言葉を広告の参考に残します。Panelly Studioで関連画像を作り、商品機能ラベルのガイドで可視部分との対応を確認できます。Panellyが編集可能なSVGレイヤーを読み込む、またはOpusを統合するという意味ではありません。

よくある質問

全文字をアウトライン化すればよいのでは？

納品条件によっては字形を保てますが、文字編集が難しくなり、間隔の悪さは直りません。先に配置を解決し、受け手の工程に応じて形式を決めます。

モデルの「全確認済み」を信じてよいですか？

どのファイルと描画結果を確認したか聞きます。描画ツールが動いていなければ、検査の提案であって実施の証拠ではありません。

情報源と参考文献

• 一次資料 · developer.mozilla.org