ショッピングカートUIシステム は何をしますか？
目的
ショッピングカートUIシステムは、DTC（Direct-to-Consumer）およびマルチチャネルEコマースのショッピングカート向けに、アクセシブルでコンバージョン率の高いビジュアルおよび構造的フレームワークを提供します。製品発見（PDP）とチェックアウト完了の間の重要なトランザクションブリッジとして機能するショッピングカートは、注文の更新、プロモーションナッジ、クロスセル、リアルタイム配送進捗表示をエレガントに処理する必要があります。
体系的なデザインアプローチは、標準的なカートの摩擦点（例：アイテム更新時の予期しないレイアウトシフト（CLS）、判読不能なアイテムサマリー、モバイルでの隠れたインタラクティブコントロール、アクセスしにくい数量セレクター、チェックアウトへの明確な心理的パスの欠如）を解決します。このシステムは、一貫したスタイリング、スムーズなマイクロインタラクション、レイアウトの堅牢性、およびWCAG AAアクセシビリティルールへの厳格な準拠を保証します。
ユースケース
- EコマースおよびDTC（Direct-to-Consumer）ポータル: 永続的なミニカートと専用チェックアウトレビューを利用するハイベロシティリテールプラットフォーム。
- B2Bおよび卸売カタログ注文: 表形式リスト、マルチSKUセレクター、クイック追加ツールを備えた一括注文デスク。
- サービスおよび体験予約エンジン: 複数日チケット、予約、レンタルアドオン、またはイベントパスの整理。
- ソフトウェア、SaaS、デジタルグッズバンドラー: 最終支払いチェックアウト前にライセンス、サービスアドオン、サブスクリプションティアを集約。
使用すべきでない場合
- 単一アイテムまたはワンクリックチェックアウト: カートをバイパスして直接チェックアウトに進むプラットフォーム（例：PDPでのApple Pay）の場合は、
checkout-flow-optimizationおよびproduct-detail-layout-systemを使用してください。 - 主要な製品閲覧: アイテムカードやリスト結果を表示する場合は、
card-ui-systemおよびfilter-and-sort-systemを使用してください。 - 製品比較（横並び）: 異なるプランや製品機能を比較する場合は、
comparison-matrix-systemまたはpricing-table-ui-systemを使用してください。 - 一括製品CSV注文: 特殊化された表形式管理入力パネルの場合は、
data-table-ui-systemを使用してください。
入力
- Eコマースデザイントークン: グローバルタイポグラフィスケール、ブランドカラーパレット（プライマリCTA、警告赤、成功緑）、流動的スペーシングスケール、サーフェスシャドウの高低。
- 製品SKUメタデータ: 画像アスペクト比ルール、タイトル制約、バリエーション文字列（例：「カラー: オニキス / サイズ: L」）、単価、セール/割引状態。
- フルフィルメントおよびロジック設定: 送料無料しきい値、クーポンコードルール、配送見積もり、数量制限。
- クロスセルカタログデータ: 現在のカートアイテムに基づいてマッピングされたレコメンデーションで、衝動買いモジュールを設定。
- モバイルビューポート境界: デバイス寸法、タッチターゲットガイドライン、環境セーフエリア制約。
出力
- スライド式ミニカートドロワー（スライドアウトサイドパネル）: クイックカート概要とモバイルファースト高速パスチェックアウトのためのコンポーネントレベルグリッド設計図。
- 専用カートページ（フルページグリッド）: 詳細なレビューのための2カラムレイアウト（メインカートリスト + 注文サマリーサイドバー）の空間設計。
- カート明細行アーキテクチャ: 単一明細行内のスペーシング、レイアウト、インタラクティブ数量コントロール、削除要素の詳細仕様。
- 送料無料およびプロモーションプログレスバー: リアルタイムフィードバックと動的メッセージしきい値を表示する空間レイアウト。
- A11yルーティングとスクリーンリーダー仕様: フォーカストラップ、キーボードタブ順序、ロービングタブインデックス、
aria-liveアナウンス、タッチターゲットルールの詳細ガイドライン。
ワークフロー
1. 空間メカニクスの定義: ミニカートドロワー vs. 専用カートページ
最適化されたデザインは、画面サイズとコンテキストに応じて、両方の影響力のあるビジュアルフォーマットをサポートする必要があります。
- ミニカートドロワー（デスクトップ＆モバイル）: 右端からスライドインし、デスクトップでは画面の右400px〜460px、モバイルでは画面の100%を覆います。半透明の背景（
background: rgba(0,0,0,0.5)）の背後にメインビューポートをオーバーレイします。ドロワーを3つの固定領域に分割する弾力性レイアウトを使用します。- ヘッダー（固定高さ）: カートタイトル（カウント付き）、閉じるボタン（✕）、送料無料進捗トラッカー。
- スクロール可能な明細行（Flex grow/自動スクロール）: 追加されたアイテムのリスト（
overflow-y: auto;）。 - フッター（固定高さ、ドッキング）: 小計、税金/配送通知、プロモメッセージ、目立つチェックアウトCTA。
- 専用カートページ（デスクトップ >1024px）: 非対称の2カラムレイアウトグリッドを使用します。
- 左カラム（60〜65%を占める）: カート明細行のクリーンで左揃えの表形式ビュー。一括削除アクションと空の状態を含みます。
- 右カラム（35〜40%を占める）: スティッキーな注文サマリーカード（
position: sticky; top: var(--header-height);）を配置。小計計算、推定配送料、クーポンコード入力、動的支払いバッジ、プライマリチェックアウトボタンを含みます。
2. カート明細行アーキテクチャの設計
カート内の各行は、ミニチュア階層を表します。CSS FlexboxまたはGridを使用して、100% 幅のコンテナ内のレイアウトフローを標準化します。
+-------------------------------------------------------------+
| [サムネイル] [アイテムタイトル] [削除 X] |
| (64x64px) サイズ: M / カラー: ブルー |
| |
| [-] [ 1 ] [+] [価格] |
| (数量入力) $120.00 |
+-------------------------------------------------------------+
- 製品サムネイル: コンパクトな固定アスペクト比コンテナ（
64x64pxから最大96x96px）にborder-radius: var(--radius-s)とobject-fit: cover;を設定してアンカーします。altテキストは存在するが説明的であることを確認します（例：alt="ネイビーブルーのウールジャケット"）。 - メタデータスタック: 以下を含む標準垂直レイアウト:
- タイトル: 太字、ニュートラルダーク、PDPにリンク。
- バリアント属性: ミュートグレー、小さいフォントサイズ（例：
12px/0.75rem）。 - 単価: 単一アイテムの場合は控えめ、数量が1より大きい場合は強調。
- アクセシブルな数量セレクター: ボタンは通常のテキストより大きくします。値入力をフラットなビジュアル境界線で囲みます。
- デクリメントボタン（
-）、数量入力ボックス（テキストまたは数値）、インクリメントボタン（+）。 - 数量が
1の場合、デクリメントボタンは目に見えるゴミ箱削除アイコンに変わり、クリックするとカートからアイテムが削除されることを示します。
- デクリメントボタン（
- ライン価格: 行の右下に揃えます。アイテムが割引されている場合は、元の取り消し線価格を薄いグレーでアクティブなセール価格（ハイコントラストの赤またはブランド太字で表示）のすぐ隣に表示します。
- 削除ボタン: 行の右上に配置します。
aria-label="[アイテム名]をカートから削除"のような明示的なラベルを使用して、スクリーンリーダーが「ボタン」や「X」とだけアナウンスするのを防ぎます。
3. 送料無料およびプロモーションプログレスエンジンの構築
フルフィルメント目標に関する即時フィードバックをユーザーに提供することで、平均注文額（AOV）を引き上げます。
- ビジュアルプログレスバー: 丸みを帯びた端を持つ水平コンテナ（
height: 8px）を使用し、薄いグレーでスタイル設定し、ユーザーの小計が目標に近づくにつれて、明るいアクセントカラー（例：緑、青）で左から右に塗りつぶします。 - 動的マイクロコピー: バーの上または下に、明確でアクション駆動型のメッセージを記述します。
- しきい値未満:「あと $15.00 で 送料無料 です！[もっと追加する]」
- しきい値以上:「🎉 おめでとうございます！ 送料無料 を獲得しました！」
- レイアウト位置: ミニカートドロワーとメインカートページの両方の最上部にプログレスエンジンを配置し、フォールドの上に表示されるようにします。
4. チェックアウトCTAと注文サマリーフッターの最適化
チェックアウトアンカーは、ショッピングカート体験の焦点です。確実で信頼できるブロックとして表示されるようにします。
- 計算リスト: 小計、適用された割引（プロモコードバッジ付きの緑色テキスト、例：
SUMMER20 [x]）、推定配送料（または「チェックアウト時に計算」）、最終推定合計を、明確なドットリーダーまたは整列グリッドを使用したキー・バリューリストレイアウトで表示します。 - プライマリチェックアウトボタン: ハイコントラスト、全幅（100%）、太字タイポグラフィ。クリック時に明確なローディングインジケーターを表示する必要があります（例：ラベルテキスト「安全なチェックアウト」をスピナーに変換）これにより、ダブルクリックを防ぎます。
- サポートされる支払いバッジ: チェックアウトボタンのすぐ下に、ミュートされたグレースケールまたは標準カラーの支払いアイコンバッジ（Visa、Mastercard、Amex、PayPal、Apple Pay、Klarna）を配置して信頼を確立します。
5. レスポンシブ流動レイアウト適応の作成
ショッピングカートはモバイルで頻繁に使用されます。ブレークポイントを非常に正確に設計します。
- ミニカートモバイルオーバーレイ: ビューポート幅が
<768pxの場合、ミニカートが100vwに広がるように強制します。閉じるトリガーを、大きなタップしやすい左上または右上のターゲットに明示的に配置します。 - カートページ明細行スタッキング: モバイルビューポートでは、水平行が折りたたまれます。
- 製品サムネイルとタイトルが横に並びます。
- 数量セレクターと価格はタイトルの下に折りたたまれ、数量は左揃え、価格は同じ水平軸上で右揃えになります。
- 固定モバイルチェックアウトドロワー: モバイルカートページでは、小計とチェックアウトCTAをブラウザUI要素の上に安全に固定する固定下部フッターを実装し、
padding-bottom: env(safe-area-inset-bottom);を利用します。
6. キーボードフォーカスルーティングとARIAライブトリガーの確立
アクセスしにくいカートは、スクリーンリーダーおよびキーボードのみのユーザーが購入を完了するのを妨げます。
- ミニカートフォーカストラップ: ミニカートドロワーが開かれたとき:
- 最初のインタラクティブ要素（通常は閉じるボタンまたは一番上のアイテムタイトル）に即座にフォーカスをトリガーします。
- フォーカストラップを実装し、ユーザーが背景の背後に隠れた要素にタブ移動するのを防ぎます。
- Escapeキー（
Esc）をトラップしてドロワーを閉じます。元々カートを開いたトリガーボタン（例：ヘッダーカートアイコン）にフォーカスをきれいに戻します。
- 動的アナウンス（
aria-live）: 数量の切り替え、アイテムの削除、またはクーポンの適用は、非表示のaria-live="polite"要素を介して即座に更新を伝達する必要があります。スクリーンリーダーは次のようにアナウンスする必要があります：「オニキスジャケットの数量が2に更新されました。小計が240ドルに更新されました。」 - フォーカスリング: 標準のブラウザアウトラインは避け、カスタムのハイコントラストでクリップされていないフォーカスインジケーターリングをカート内のすべてのインタラクティブコントロールの周りに実装します。
決定ルール
専用カートページ vs. ミニカートドロワートリガー
| トリガーイベント | 最適なUX応答パターン | デザインの根拠 |
|---|---|---|
| ユーザーがPDPからアイテムを追加 | ミニカートドロワーをスライド開く | カートへの追加が成功したことを確認し、小計を瞬時に更新し、即時フィードバックを提供しますが、ユーザーをPDPに留めてショッピングを続けさせます。 |
| ユーザーがグローバルカートヘッダーアイコンをクリック | ミニカートドロワーを切り替え（アイテム数 > 0の場合）/ カートページに移動（オプション） | 新しいページを読み込まずにアイテムリストをすばやく編集できます。カタログが非常に複雑な場合（例：数百のB2B部品）は、専用カートページに直接移動します。 |
| カートが空（0アイテム） | CTA付きのインライン空の状態を表示 | 空白ページを表示したりドロワーを閉じたりする代わりに、明確なメッセージ（例：「カートは現在空です」）と3〜4つのターゲットを絞ったカテゴリベースのプライマリショッピングリンクを表示します。 |
数量入力スタイルの選択
| インターフェーススタイル | 使用事例アプリケーション | デザインの根拠 |
|---|---|---|
ボタンステッパー [-] [ 1 ] [+] | DTC、リテール、アパレル、標準Eコマース | モバイルでの最も簡単なシングルタップ操作、タイプミスを防止し、シンプルなインクリメント。 |
| ネイティブテキスト入力フィールド | 大量B2Bカタログ注文シート、卸売数量 | ユーザーが150回クリックする代わりに、大きな任意の数値（例：150）を直接入力できます。 |
標準セレクトドロップダウン (数量: 1) v | 高額アイテム、電子機器、単一数量制限サブスクリプション | 購入を事前に設定された数量スケール（例：最大10）に制限し、未処理の高カウント在庫リクエストを防ぎます。 |
制約
- アクセシビリティ（WCAG AA最小）:
- SC 2.4.7 フォーカスの可視性: カートドロワーは、閉じるボタン、タイトルアンカー、ステッパー、入力に非常に可視性の高いフォーカスアウトラインを維持する必要があります。
- SC 2.5.8 ターゲットサイズ: 数量インクリメント（
+）およびデクリメント（-）ボタン、削除ゴミ箱、プロモ削除リンクのタップターゲットは、デスクトップで少なくとも 24x24px、モバイルビューポートで 44x44px である必要があります。 - SC 1.1.1 非テキストコンテンツ: すべての画像に明確な代替テキストが必要です。空の状態内の装飾的背景は無視する必要があります（
role="presentation"またはalt=""）。
- Cumulative Layout Shift（CLS）の防止:
- 明細行の高さを標準化するか、ローディング状態中に最小スケルトン状態の高さを予約します。
- 動的なプロモ計算により、チェックアウトCTAボタンが画面外に押し出されたり、突然折りたたまれたりしないようにします。
- 動的オーバーレイスクロールロック:
- ミニカートドロワーオーバーレイを開くと、プライマリbody要素の背景スクロールをロックする必要があります（
<body>にoverflow: hidden;を適用）。これにより、二重スクロールとナビゲーションアーティファクトのジャンプを防ぎます。
- ミニカートドロワーオーバーレイを開くと、プライマリbody要素の背景スクロールをロックする必要があります（
一般的な障害パターン
- ゴーストカートクローズ: ドロワーを閉じるか、その外側をクリックするとフォーカスインデックスが完全にリセットされ、キーボードユーザーは基礎となるページの最上部に戻され、すべてのタブをやり直すことを余儀なくされます。
- 謎の削除ターゲット: ゴミ箱アイコンまたは「X」削除トリガーをラベルのないテキスト記号として設計し、スクリーンリーダーに「ボタン」または「ラベルなしボタン」と出力させ、ユーザーがカートを整理できないようにします。
- 遅延更新ドリフト:
+をクリックしてからローディングスピナーを表示せずに価格を更新するまでに遅延を許容すること。ユーザーが+を3回素早くクリックすると、価格がアクションの背後にドリフトし、不正確な合計につながります。 - ブロックされたモバイルキーボード: 専用カートページのクーポン入力を、モバイルデバイスのソフトウェアキーボードが表示されたときに完全にブロックされるか可視画面外に押し出されるレイアウトスタックの中央に配置すること。