チュートリアル
Claude Opus 5.5：スマートフォンの商品比較表を改善する
Claude Opus 5.5には、表を小さく収めるだけでなく、比較という読者の作業を保つよう依頼します。購入者は各値を商品と機能に結び付ける必要があります。モデル名を隠したり、不明な値をすべて「なし」にしたりするコンパクト表示は、比較の意味を変えてしまいます。
Claude Opus 5.5には、表を小さく収めるだけでなく、比較という読者の作業を保つよう依頼します。購入者は各値を商品と機能に結び付ける必要があります。モデル名を隠したり、不明な値をすべて「なし」にしたりするコンパクト表示は、比較の意味を変えてしまいます。
これは架空の商品を使うデザインレビューの提案です。実データ、現在のHTML/CSS、対象画面幅、購入者の疑問を渡します。仕様抽出とは別の工程です。まず事実を承認し、その後で小さな画面での比較方法を決めます。
読者の作業に合わせて表示を選ぶ
モバイル表の議論には、横スクロール、列の削減、個別カードのトレードオフが示されています。これらは設計の選択肢であり、売上向上の証拠ではありません。購入者が比べたい2商品と、購入判断を左右する項目を確認します。
| 読者の作業 | 表示の候補 | 承認前の確認 |
|---|---|---|
| 商品間で同じ機能を比べる | スクロールできる意味構造付きの表 | 行と商品の識別が明確 |
| 選んだ2商品を比べる | 2商品の選択コントロール | 選択変更後も行の意味を保持 |
| 1商品ずつ理解する | ラベル付き機能カード | 全値に項目ラベルが付く |
| 特定の違いを探す | 任意の差分フィルター | 不明値を同一と扱わない |
作業を支える最も単純な方法から始めます。セレクターには状態管理とキーボード操作が必要で、カードは商品間比較を遅くすることがあります。デスクトップとモバイルで別々の事実データを管理すると、いずれ食い違うため避けます。
小さな検証用データで誤りを見つける
架空の照明Aは410 g、Bは560 gとします。AはUSB-C充電対応、Bの資料には充電情報がありません。明るさ設定は両方3段階です。重量差を示し、Bの充電情報は「記載なし」とします。BがUSB-C非対応とは断定できません。
差分のみのフィルターでは、同じ明るさ設定の行を隠しても、不明な充電の行は残します。長い翻訳商品名と脚注を持つ3番目の商品も追加してください。短い英語名2つでは見つからない、はみ出しや対応関係の誤りを確認できます。これは求める動作の例であり、Opusの実測結果ではありません。
単純な行列の表について、W3Cのガイドでは見出しセルと`scope`で関係を示し、captionで表を識別します。見た目を変えるときも関係を維持します。きれいな画像だけでは、スクリーンリーダーの読み上げ内容は分かりません。
具体的な合格条件を含むプロンプト
Opusの公式ガイドを参考に、修正差分と確認事項を指定します。データの出典を渡し、事実の変更はレイアウト作業に混ぜないでください。
この商品比較表を390 CSSピクセル幅で改善してください。
購入者の作業は、選択した2つの照明の重量と充電方法を比較することです。
デスクトップとモバイルで承認済みの単一データ源を使い、不明値を作らないでください。
検証用データ：Aは410 gでUSB-C対応、Bは560 gで充電情報は記載なし。両方とも明るさは3段階です。
最も単純で適切な表示を提案し、最小限のHTML/CSS修正を返してください。
全値と商品名・行ラベルの対応を保ち、captionと意味的な見出し関係を維持してください。
横スクロールを使うなら表の領域内に限定し、見える手がかりと使いやすいキーボード操作を用意してください。
セレクターを使うならラベルを付け、選択変更時のフォーカスを保ってください。
長い翻訳名、文字拡大、キーボード操作、差分フィルター内の不明値をテストしてください。
実行済みと実行できなかった確認を分けて報告してください。画像だけでアクセシビリティを断定しないでください。最初の表示範囲だけで判断しない
対象幅で全列または全選択肢をたどります。固定ラベルがデータを覆わず、長い単位や脚注が正しい項目に結び付いているか確認します。文字を拡大し、ページ全体に意図しない横方向のはみ出しがないか調べます。表の領域だけのスクロールは意図的でも、ページ全体が横へ動く状態は通常そうではありません。
キーボードと対象スクリーンリーダーで、見出しと操作部を理解できるか確認します。セレクター依存ならJavaScriptなしの表示も調べます。実行した確認を記録し、小さな表の目的に対して保守負担が大きすぎる操作は省きます。
比較画像の条件をそろえる
Panelly Studioで撮影角度と縮尺をそろえた商品画像を用意します。比較する事実は画像だけに埋め込まず、ページ上の文字として残します。Panellyが表の実装を生成・認証するという主張ではありません。入力の検証にはPDF仕様確認の手順、全体構成にはランディングページ修正を参照してください。
同じ値の行はすべて削除してよい？
必要なら、読者が明示的に選べて元に戻せる機能にします。同じ機能も購入判断に重要な場合があります。不明であることは同一である証拠ではありません。全項目へ戻す方法を示してください。
