Claude Opus 5.5で商品ページの小さなタッチ領域を修正する

Claude Opus 5.5には、アイコンの見た目ではなく実際にタップを受ける領域を調べてもらいましょう。大きなアイコンでもボタンは小さい場合があります。透明な領域を広げると隣の操作に重なることもあります。必要なのは測定できる修正と実際の操作確認です。

タップを受ける要素を測る

表示ページ、CSS、ビューポート寸法、数量の増減、バリエーション、ギャラリー矢印、閉じるボタンの一覧を渡します。境界矩形をCSSピクセルで記録してください。画面画像は配置の説明には使えますが、イベントを受ける要素までは分かりません。

2012年のUXの議論は、大きな操作部と隣接する相反した操作を区別しています。過去のコミュニティ議論であり、現在の店舗の実測ではありません。W3Cの現行解説には24 × 24 CSSピクセルの最小寸法と例外があり、小さい対象の間隔による例外も説明されています。すべての行内リンクに一律の寸法を求める意味ではありません。

数量操作の幅を計算する

一辺20ピクセルの四角いボタン二つに2ピクセルの隙間があると、中心間距離は22ピクセルです。中心に直径24ピクセルの円を置くと重なるため、この配置は間隔の例外を満たしません。仮の配置の算数であり、本番のアクセシビリティ監査ではありません。

本例では余裕を持たせる設計判断として、44 × 44の四角いボタンと8ピクセルの隙間を選びます。ボタン二つと隙間一つで96ピクセル、数量表示は別です。中央の表示が40で、両側の隙間が各8なら、減算／数値／加算の行全体は144ピクセルです。最後にボタンを縮めずに済むよう、行全体を先に確保します。

.quantity-button {
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-grid;
  place-items: center;
}
.quantity-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

このCSSは出発点であり認証ではありません。枠線、形状、変換、覆う要素で実際の対象は変わります。見た目を保つためアイコンは小さくても構いません。疑似要素を重ねて透明な領域を広げ、隣接操作を曖昧にしないでください。

完全な修正プロンプト

商品ページのタッチ対象を390と1280 CSSピクセル幅で確認してください。入力は表示ページ、CSS、DOM、数量・バリエーション・ギャラリー操作です。ブラウザーが使えない場合、推定寸法と実測を分けてください。
各操作のアクセシブル名、実際の領域、隣との隙間、観察された重複を列挙してください。W3Cの24 × 24最小寸法と例外を、本例の44 × 44正方形という設計目標と区別してください。これだけでサイト全体の適合を宣言しないでください。
最小の配置修正を提案し、価格、選択済みバリエーション、数量の境界、フォーカス表示、レスポンシブ動作を維持してください。アイコンとボタンの寸法を分け、透明な対象を重ねないでください。
中央と端のタップ、隣との隙間、キーボードフォーカス、連続した数量変更、最小値での無効状態をテストしてください。実施と未実施を分け、寸法表、パッチ、変更前後の操作結果を提出してください。

これはOpusの利用案であり、公式ガイドを課題と合格条件の整理に利用できます。モデルの実測ではありません。矩形だけでは透明な要素によるイベント遮断を検知できないため、修正後は実際に操作します。

公開前の疑問

**44ピクセルのアイコンなら十分ですか。** 実際の操作部が大きく、タップを受ける必要があります。両方を調べます。

**間隔はすべて同じですか。** 8ピクセルは本例の選択であり普遍的な標準ではありません。適用条件と隣接操作を確認します。

**ダイアログの閉じるボタンは。** 対象寸法とフォーカス復元は別の問題なので両方を確認します。

承認済みの商品画像をPanelly Studioに入れて広告を制作し、実際のランディングページの操作部は別に評価します。画像内のCTAは自動的にクリック可能なボタンにはなりません。PanellyにOpusが統合されているという説明でもありません。

情報源と参考文献

• 一次資料 · ux.stackexchange.com
• 一次資料 · www.w3.org
• 一次資料 · platform.claude.com