coastdigitalgroup/coastai-skills

商品詳細レイアウトシステム

目的

Product Detail Layout System（商品詳細レイアウトシステム）は、eコマースの商品詳細ページ（PDP）を構造化するための、標準化された高性能なビジュアル・空間フレームワークを提供します。PDPは、あらゆるeコマースまたはD2C（Direct-to-Consumer）Webサイトにおいて最も重要なコンバージョンエンジンです。リッチメディア、多バリアントコンフィギュレーター、動的価格モデル、信頼シグナル、主要なコールトゥアクション（CTA）を、統一感があり、スキャンしやすく、完全にアクセシブルなインターフェース内でバランスさせる必要があります。

体系的なアプローチにより、アライメントの取れていない購入グリッド（「バイボックス」）、方向感覚を失わせるメディアスライダー、バリアント切り替え時のレイアウトシフト（CLS）、隠れたモバイル購入トリガー、カスタムセレクターの重大なアクセシビリティブロックなど、一般的なデザイン上の摩擦ポイントを解決します。このシステムは、マーケティングプレゼンテーションと技術実装のギャップを埋め、ページが安定して読み込まれ、最大のコンバージョンを促進し、かつWCAG AA基準に完全準拠することを保証します。

ユースケース

• B2CおよびD2C（Direct-to-Consumer）eコマース: 物理的な商品、アパレル、化粧品、電化製品向けの高度に洗練された商品ページの設計。
• デジタル商品およびサブスクリプション販売: ソフトウェア、メンバーシップ、サービスランディングページにおける機能ハイライト、ティアセレクター、決済チェックアウトの整理。
• 産業用およびB2Bカタログページ: 複雑でスペックの多いハードウェア部品ページを、ダウンロード可能な図面や見積もりビルダーとともに構造化。
• マーケットプレイス詳細ビュー: 多様なマルチベンダー出品（不動産、旅行予約、P2P販売）向けのレイアウトグリッドの標準化。

使用すべきでない場合

• SaaSプラン比較ランディングページ: 異なるサブスクリプションパッケージを横並びで比較する場合は、pricing-table-ui-systemまたはcomparison-matrix-systemを使用します。
• 主要な商品発見（PLP）: カタログの閲覧や検索結果リストの場合は、card-ui-systemおよびfilter-and-sort-systemを使用します。
• シンプルなリード獲得またはフォーム: 基本的な問い合わせフォーム、ニュースレター、単一ステップのサインアップの場合は、form-design-systemを使用します。
• エディトリアルおよびブログコンテンツ: ナラティブストーリーテリング、ニュースレター、テキストのみのコラムの場合は、article-layout-systemを使用します。

入力

1. コンテンツおよびアセットインベントリ: 高解像度の商品画像/動画（アスペクト比、ズーム要件）、仕様、レビュー、価格体系、信頼保証。
2. バリアントマトリックスの複雑さ: オプションの数（例：色、サイズ、素材）と依存関係の有無（例：「Lサイズはブラックのみ利用可能」）。
3. タイポグラフィおよびスペーシングスケール: 相対的なサイズスケールと流動的なスペーシングトークン（fluid-typography-systemおよびfluid-spacing-systemから）。
4. エレベーションおよびカラートークン: ブランドアクセントカラー、ステータスシェード（セール、警告、在庫切れ）、サーフェスエレベーション、アクティブ/フォーカス/ホバー状態（accessible-color-systemおよびelevation-and-depth-systemから）。
5. モバイルビューポート制約: ビューポート境界とデバイスのノッチ（特にiOSホームインジケーターとブラウザメニューバー）。

出力

1. デュアルペイン空間ブループリント: 画面を、インパクトのある左側メディアペインと、スキャンしやすい右側購入コンフィギュレーターペイン（バイボックス）に分割する構造グリッド。
2. レスポンシブなスタッキングおよびフロールール: レイアウトがモバイル最適化された垂直スタックにどのように折りたたまれるかを示す移行仕様。
3. モバイルスティッキーバイドロワー: モバイルビューポートでメインCTAが折り返し位置を過ぎた後も持続する、ビューポートにドッキングする購入バーの仕様。
4. インタラクティブスウォッチおよびセレクターの構造: サイズボタン、カラースウォッチ、数量カウンターのコンポーネントレベルデザイン。
5. Aria liveおよびキーボード仕様: 明確なキーボードタブルート、ロービングタブインデックス、フォーカス保持、スクリーンリーダー準拠のためのステータス通知トリガー。

---

ワークフロー

1. デュアルペイン空間レイアウトの確立（デスクトップ >1024px）

デスクトップビューを、CSS GridまたはFlexboxを使用した2カラムレイアウトで、比例的に分割して構造化します。

• 左カラム: メディアペイン（50–55%を占める）: 高精細なビジュアル商品アセットを表示します。ユーザーが長いスクロール中に購入コンテキストを失わないようにするため、親カラムに align-items: start; を設定し、メディアコンテナをスティッキーにします：position: sticky; top: calc(var(--global-header-height) + var(--space-m));。
• 右カラム: 購入コンフィギュレーター/バイボックス（45–50%を占める）: すべてのメタデータとトランザクションコントロールを格納します。上下に読む明確な階層を持つ単一の垂直カラムに保ちます。
• グリッドガター: メディアとコントロールを区別しつつ統一感を保つために、十分な視覚的ガターを維持します（例：gap: clamp(24px, 4vw, 48px)）。

2. 購入コンフィギュレーター（バイボックス）の視覚的階層の設計

バイボックスカラムに「Fパターン」の読み取りフローを適用します。要素を論理的に順序付けます。

1. パンくずリストおよびカテゴリ表示: 上部に小さく控えめなテキスト（例：「ショップ > アウトドア > ジャケット」）でコンテキストを提供。
2. 商品ヘッダー: h1を使用したプライマリタイトル。font-size: clamp(1.75rem, 3.5vw, 2.5rem)、太字でスタイル設定。
3. ソーシャルプルーフ概要: 平均評価と、レビューセクションに直接スクロールダウンするアクティブなテキストリンクを表示する星評価ブロック（例：「★ ★ ★ ★ ☆ （128件のレビュー）」）。
4. 価格エンジンブロック: 視認性の高い価格表示。太字のアクティブ価格、取り消し線の小さいメーカー希望小売価格（セール時）、明確な色のセールバッジ（例：「$20お得」）。分割支払いメッセージ（例：「またはKlarnaで4回払い $25」）をすぐ下に配置。
5. バリアントコンフィギュレーター: サイズ、カラースウォッチ、素材。一貫したラベルタイトルとスペーシングギャップを使用（例：margin-bottom: var(--space-m)）。
6. 在庫および配送の再保証: バリアントの近くに、控えめなリアルタイム在庫アラート（例：「●残り3点のみ - 明日発送可能」）を表示。
7. プライマリ購入CTA: バイボックス全体の幅に広がる、目立つ高コントラストの「カートに追加」または「今すぐ購入」ボタン。
8. トラストバッジおよび返品ポリシー: プライマリCTAの直下に、視認性の高いアイコン/テキストクラスター（例：「✓ 送料無料」、「✓ 30日間返品可能」）を配置し、購入の摩擦を最小限に抑えます。

3. 左側メディアギャラリーの構造化

ナビゲーションが高速で軽量であり、レイアウトの安定性を維持するように画像を整理します。

• メイン表示コンテナ: アクティブな画像を、固定アスペクト比（通常は 1:1 の正方形または 3:4 の縦長）のコンテナに、aspect-ratio: 1 / 1; object-fit: cover; を使用してアンカーします。これにより、わずかにサイズが異なる画像を読み込む際の累積レイアウトシフト（CLS）を防ぎます。
• サムネイルナビゲーション: メイン画像の下に水平方向（または左側に垂直方向）に補助サムネイルを積み重ねます。アクティブなサムネイルには、高コントラストの境界線と aria-current="true" があることを確認します。
• 拡大/ズームトリガー: アクティブな画像の右下隅に控えめなズームアイコンを含めます。トリガーすると、全画面のスワイプ可能なモーダルライトボックスが開きます（image-gallery-and-lightbox-system）。

4. モバイルスタッキングおよびモバイルスティッキーバイドロワーの作成（<768px）

モバイル画面では、標準のマルチカラムレイアウトは機能しません。以下の適応ルールを適用します。

• 線形垂直フロー: ページをシングルカラムスタックに折りたたみます。メディアギャラリーを最上部（全幅またはわずかに内側）に配置し、その直後に商品ヘッダー、価格、バリアントコンフィギュレーター、CTA、そして詳細仕様を続けます。
• モバイルスティッキーバイドロワー: モバイルではプライマリCTAがすぐに画面外にスクロールするため、スティッキーな下部チェックアウトドロワーを実装します。
  • インラインCTAが画面に表示されている間は、ドロワーを非表示にします。
  • ユーザーがインラインCTAをビューポート外にスクロールしたら（スクロールしきい値 > 600px）、コンパクトなスティッキー下部バーをスライドアップします。これには以下が含まれます：[商品サムネイル + タイトル]（小さいビューポートではオプション/折りたたみ）、[価格]、およびバーの右半分にわたる[プライマリ「カートに追加」CTA]。
  • padding-bottom: env(safe-area-inset-bottom); を利用して、モバイルデバイスのスワイプゾーンを尊重し、システムコントロールとの重なりを防ぎます。

5. カスタムスウォッチおよびバリアントセレクターインタラクションの標準化

カスタムセレクター（カラーサークルやボタンマトリックスなど）は、洗練され、クリーンにインタラクトする必要があります。

• ビジュアルスウォッチ: カラーサークルはデスクトップで最低 32x32px、モバイルで 40x40px とします。アクティブなスウォッチは、外側の同心円状の境界リングで示されます（カラーサークルと境界線の間に2pxの白いスペースを残します）。
• サイズボタン: サイズには丸みを帯びたピルアウトラインを使用します（例：「S」、「M」、「L」）。利用できないサイズは取り消し線と薄暗く表示します（例：不透明度 0.4、斜線）が、フォーカス可能に保ち、スクリーンリーダーが「サイズS - 在庫切れ」とアナウンスできるようにします。
• 動的フィードバック: スウォッチを切り替えると、ページ全体をリフレッシュすることなく、表示価格、在庫情報、メイン画像ギャラリーが即座に更新される必要があります。

6. キーボードナビゲーションとスクリーンリーダーのアクセシビリティのための設計

カスタムコンフィギュレーターは、アクセシビリティ障害が頻繁に発生する場所です。以下の厳格なガイドラインを適用します。

• セマンティックスウォッチ選択: スウォッチは、標準の <input type="radio"> を <label> タグでラップして実装し、ネイティブ入力を視覚的に非表示にしつつ、完全にアクセシブルな状態を保つようにスタイル設定します。これにより、ネイティブの矢印キーナビゲーション、自動ラジオグループ化、キーボードフォーカス状態が保証されます。
• Aria Liveアナウンスメント: ユーザーがスウォッチまたはバリアントを選択したときに、不可視の aria-live="polite" divを使用して、スクリーンリーダーに更新をアナウンスします（例：「選択された色: クリムゾンレッド。価格が99ドルに更新されました。在庫あり。」）。
• スキップリンクとコンテキストアンカー: 「評価星レビューリンク」に可視のフォーカスリングがあることを確認し、キーボードフォーカスをレビューセクション（#reviews）までスムーズにスクロールします。宛先には tabindex="-1" を使用します。

---

意思決定ルール

スウォッチスタイルの選択

オプション数	推奨UIセレクターパターン	デザインの根拠
2 - 5 オプション（例：赤、青、緑）	ビジュアルピルボタンまたはスウォッチ	即時視認性、低認知負荷、簡単なシングルタップターゲット。
6 - 15 オプション（例：10の靴サイズ）	アダプティブフレックスグリッドマトリックス	コンパクトなグループ化、バイボックスカラムに長いスクロールなしで収まる。
16+ オプション（例：50のデバイスモデル）	検索付きカスタムセレクトメニュー	視覚的な乱雑さと圧倒的な「選択のパラドックス」レイアウトブロックを防ぎます。

レイアウト分割（デスクトップ vs タブレットビューポート）

• デスクトップ（>1024px）: 2カラムグリッド（スティッキー左メディア、スクロール右コンフィギュレーター）。
• タブレット（768px - 1023px）: カラム幅を再評価します。50/50分割に移行するか、バリアントコンフィギュレーターに密集したマトリックス入力が含まれる場合は、レイアウトを早期に簡素化された左寄せコンテナを持つシングルカラムスタックに折りたたみます。
• モバイル（<768px）: 厳格な1カラムスタック。アクティブなモバイルスティッキーバイドロワーがスクロール時にトリガーされます。

価格表示戦略

• セール表示: アクティブなセール価格を、高コントラストの赤またはブランドの太字（最小24px/1.5rem）でレンダリングします。元の価格（メーカー希望小売価格）は、その隣に取り消し線で控えめなグレーでレンダリングし、節約額を示すコンパクトな塗りつぶしピルバッジ（例：「$30お得」または「-25%」）を含めて、知覚価値を最大化します。
• 標準表示: アクティブな価格を、太字のニュートラルダーク/ニュートラルライト（プライマリボディ見出し色に合わせる）でレンダリングします。

---

制約

• アクセシビリティ（WCAG AA最低限）:
  • SC 2.4.11 フォーカスが隠されない: フォーカス可能なバリアントピルや数量ボタンが、スティッキーヘッダーやモバイル下部バイドロワーによって決して隠されないようにします。グローバルな scroll-margin-top と scroll-margin-bottom を適切に使用します。
  • SC 2.5.8 ターゲットサイズ: すべてのバリアントセレクター、スウォッチバブル、数量増分トリガー（+ / -）は、最低 24x24px のタップターゲットを明確な分離とともに提供し、タッチスクリーンでは 44x44px とします。
  • コントラストAA: プライマリテキスト、価格、選択された境界状態は、最低 4.5:1 のコントラスト比を維持する必要があります。カラースウォッチサークルには、色のみに依存することを防ぐために、付随するテキストラベル（隣接、またはアクセシブルなツールチップ/スクリーンリーダーテキストとして）が必要です（SC 1.4.1 色の使用）。
• 累積レイアウトシフト（CLS）の維持:
  • 商品タイトル、画像コンテナ、動的通知ボックスのスペースを常に予約します。スケルトン状態（skeleton-state-system）または明示的な寸法により、動的なレビューや在庫カウンターが読み込まれたときにコンテンツがジャンプするのを防ぐ必要があります。
• 動的ビューポート高さ: モバイルスティッキーバイドロワーは、環境の安全ゾーン（env(safe-area-inset-bottom)）を尊重して、物理的なホームスワイプボタンがプライマリチェックアウトCTAと競合しないようにする必要があります。

---

よくある失敗パターン

• 「不安定なバイボックス」シフト: サイズやカラーバリアントボタンが商品によって異なる方法で折り返され、プライマリの「カートに追加」CTAが動的に上下に跳ねる。
• 色のみのブラインドスポット: ラベルのない色付きサークルをスウォッチとして使用する。色覚異常のユーザーは緑と茶色のスウォッチを区別できず、明示的なラベルテキストが関連付けられていない限り、スクリーンリーダーは「カラーボタン」としか読み上げない。
• モバイル仮想キーボードのブロック: モバイル画面のスティッキー下部バーを、モバイル仮想キーボードが展開したときにフォームフィールドをブロックまたはオーバーラップするように配置し、ユーザーを閉じ込める。
• 画像アスペクト比のジャンプ: メインギャラリー表示に明示的なアスペクト比を宣言せず、ユーザーが横向きと縦向きの商品画像を切り替えるたびに、レイアウトカラム全体が崩れたり拡大したりする。
• ダブルスクロールバーのロックアップ: スティッキー左カラムを高く設定しすぎたり、オーバーフローさせたりして、左カラムが小さなウィンドウ内で独立してスクロールし、互いに隣接して二重のスクロールバーが作成される。

---

検証基準

• デュアルペイン設定: デスクトップレイアウトは、スティッキーな左側メディアカラムとスクロールする右側バイボックスカラムを備え、1pxのきれいな境界線または明確な余白で分割されている。
• 線形モバイルカスケード: モバイルビューポートはグリッドをシングルカラムスタックに折りたたみ、商品画像、タイトル、価格、バリアント、CTAを正確にその順序で表示する。
• スティッキーバイドロワー: モバイルで表示され、CTAセクションを超えてスクロールしても持続し、env(safe-area-inset-bottom) を尊重する。
• アクセシブルスウォッチ: すべてのカスタムセレクターは、ラジオボタンまたはボタンとしてセマンティックにマークアップされ、キーボードでナビゲーション可能で、明確なフォーカスインジケーターを持つ。
• CLS安定性: 画像スペースは明示的なアスペクト比で予約されており、価格/在庫の更新はコンテンツを押し出さない。