チュートリアル
Claude Opus 5.5で商品名の省略によるバリエーションの混同を直す
省略記号を付ける前に、商品を区別する情報をClaude Opus 5.5に保持させます。「250 ml」と「400 ml」が消えて別の商品が同じに見えるなら、整ったカードでも役立ちません。文章、幅の制約、完全な名前への導線を一緒に確認します。
省略記号を付ける前に、商品を区別する情報をClaude Opus 5.5に保持させます。「250 ml」と「400 ml」が消えて別の商品が同じに見えるなら、整ったカードでも役立ちません。文章、幅の制約、完全な名前への導線を一緒に確認します。
レスポンシブなタイトルの質問は、固定ピクセル幅が万能ではないことを示しています。過去のコミュニティ事例で、現在のブラウザー試験ではありません。本稿は確認手順の提案であり、Opusの性能評価ではありません。
CSSより先に表示方針を決める
| 内容 | 優先する扱い | 確認点 |
|---|---|---|
| バリエーションや個数 | 常に見える形にする | 類似商品を区別できる |
| 装飾的な宣伝文 | 承認した短い表示文にする | カタログの完全名を保持 |
| 長い連続した型番 | 意図的な折り返し | 完全なコードをコピーできる |
| 補足説明 | 全文への導線付きで省略を検討 | タッチとキーボードで開ける |
MDNのtext-overflow資料では、省略記号自体はオーバーフローを発生させないと説明しています。実際の幅制約を調べます。flexの子要素に縮小を許す必要がある場合もあり、親を見ずに文章だけ変えても直らないことがあります。
2つの商品で考える
架空の商品名 `Navo insulated travel cup — 250 ml` と `Navo insulated travel cup — 400 ml` が、狭いカードでは両方とも `Navo insulated travel…` になるとします。元の名称を保持し、承認した短い見出し「Navo トラベルカップ」と独立した容量表示を検討します。容量は商品を区別する情報なので、ホバー時だけの説明に隠しません。
幅が制約されたflexレイアウト内の1行の補助ラベルなら、次が出発点になります。万能なカード設計ではありません。
.card-copy { min-width: 0; }
.secondary-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}親には実際の使用可能幅が必要です。この例は複数行の省略や全文表示の操作を実装しません。操作可能なラベルのフォーカス枠を切らないよう、内側の文字要素をクリップし、外側のリンクも確認します。実際のフォントで長い単語、空白、句読点、RTLの名前を試します。
コピーできるOpusへの依頼
公式Opusガイドと併用します。
完全なカタログ名、バリエーション項目、マークアップ、計算済みスタイル、320・390・1440 CSSピクセルの画像から商品カードを確認してください。
隠れた単語のうち商品を区別するものを特定してください。元の文字列を保持してください。省略した意味が他の場所で直接見える場合だけ、承認候補の短い表示名を提案してください。容量、個数、互換性、型番末尾を既定で隠さないでください。
gridやflexの親をたどり幅制約を特定してください。1行の省略、複数行の制限、通常の折り返しを分けてください。最小の修正と長い単語・RTLの例を返してください。リンクのフォーカス表示を保持してください。
タッチとキーボードで完全名に到達できる導線を作り、title属性だけに頼らないでください。ズーム、フォント読込後、隣接する2つの商品を確認してください。観測した不具合、提案、未実行の試験を分け、根拠なしに画像を試験済みとしないでください。整列だけでなく商品を区別できるか確認する
各幅で詳細を開かずに隣の商品と比較します。買い手がバリエーションを区別できることを確認します。詳細を開いて完全名を原本と照合します。全文操作がある場合はタッチとキーボードで試し、ホバーだけで済ませません。
文字サイズやブラウザーのズームを上げて繰り返します。高さを揃えるために必須情報を消すより、必要ならカードを伸ばします。最長の試験名称と正確なバリエーション項目を保存し、次のデータ取込でも使います。
残る判断
**全タイトルを1行にしますか。** 商品の識別情報と空間で決めます。
**文字数制限で収まりを予測できますか。** フォント、文字、言語、幅で変わるためできません。
**カタログ名を変更しますか。** 別途承認された編集でなければ保持します。
商品を正しく伝えられたら、同じ確定名称と参考画像を Panelly Studio に渡して広告画像を作ります。アラビア語とラテン文字が混在する場合は、RTL商品コードの確認も参照できます。
