coastdigitalgroup/coastai-skills

カルーセルとスライダーシステム

目的

カルーセルとスライダーシステムは、ユーザーが関連するコンテンツ（カード、画像、お客様の声など）のコレクションを、過度な垂直スペースを消費せずに閲覧できるようにする、水平スクロールコンテナを設計するための方法論を提供します。カルーセルはしばしば低いエンゲージメントで批判されますが、体系的なアプローチはアフォーダンス、知覚パフォーマンス、そしてユーザーコントロールに焦点を当て、水平ディスカバリーが直感的で、アクセシブルで、高いインパクトを持つことを保証します。

ユースケース

• 商品ディスカバリー: Eコマースでの「関連商品」や「新着商品」の閲覧。
• ソーシャルプルーフ: 顧客の声やケーススタディの連続表示。
• メディアギャラリー: 限られたビューポート内での高密度な写真や動画のコレクション。
• オンボーディング/機能ツアー: 価値提案の線形シーケンスを通じてユーザーをガイドする。
• ダッシュボードウィジェット: ページのリズムを保つために、複数のデータサマリーを水平行に配置して管理する。

使用すべきでない場合

• 重要な連続ステップ: ユーザーがタスクを完了するために全てのアイテムを見なければならない場合は、垂直スタックまたはグリッドを使用して、見落としがないようにします。
• 少量のコンテンツ: アイテムが2～3個しかない場合、標準的なグリッドの方が効率的で、必要なインタラクションも少なくなります。
• 異なるコンテンツタイプ: 単一のカルーセル内で異なるカードタイプ（例：記事と商品を隣り合わせるなど）を混在させないでください。スキャンしやすさには一貫性が重要です。
• 低価値のマーケティングスライダー: ユーザーが通常無視する無関係なプロモーションのために、大きな「ヒーローカルーセル」を使用しないでください（バナー盲点）。

入力

1. コンテンツアーキタイプ: 何がスクロールされるか？（例：card-ui-system カード、画像、テキストブロック）。
2. カタログサイズ: コレクション全体のアイテム数。
3. コンテナコンテキスト: 全幅セクションか、グリッド列内に含まれるか。
4. インタラクション要件: 自動再生、無限ループ、または手動のみのスクロールが必要か。
5. ブランドトークン: コントロールとインジケーターのためのスペーシング、タイポグラフィ、カラーシステム。

出力

1. カルーセル解剖図仕様: コンテナ、トラック、ナビゲーション（矢印）、ページネーション（バレット）の視覚的定義。
2. 表示戦略: 水平方向に隠されたコンテンツを知らせるための、「部分アイテム表示」ルールの定義。
3. レスポンシブマッピング: モバイル、タブレット、デスクトップでのビューごとのアイテム数のルール。
4. アクセシビリティ設計書: ARIAラベル、フォーカス管理、モーションコントロールの仕様。

ワークフロー

1. ディスカバリー意図の決定

ユーザーがアイテムとどのようにインタラクションすべきかを特定します。

• 線形: ユーザーはアイテムを一つずつ移動する（例：オンボーディング）。
• 探索的: ユーザーは自由にジャンプしたりざっと見たりできる（例：商品グリッド）。
• アンビエント: コンテンツが自動的に動く（例：ロゴのマーキー）。

2. 「表示パターン」の確立

右側にさらにコンテンツがあることをユーザーに知らせます。

• 部分表示: 「次の」アイテムが部分的に表示されるようにします（通常、コンテナの端から10～20%はみ出します）。これはスクロール可能性を示す最も強力な視覚的合図です。
• フェード効果: コンテナの端に微妙なグラデーションフェードを適用します。

3. ナビゲーションアフォーダンスの選択

移動のための明確なコントロールを提供します。

• 矢印（方向指示）: トラックの垂直中央に配置します（コンテナの内側または外側）。高密度ブラウジングに最適です。
• ページネーション（バレット/ドット）: トラックの下に配置します。進行状況を示すために短いシーケンス（3～7アイテム）に最適です。
• スクロールバー: 下部にある視覚的なプログレスバー。非常に大規模なコレクションに最適です。

4. レスポンシブ列ロジックの定義

一度にいくつのアイテムを表示するかをマッピングします。

• デスクトップ: ビューあたり3～5アイテム。
• タブレット: ビューあたり2～3アイテム。
• モバイル: ビューあたり1.2アイテム（1つの完全なアイテム＋部分表示）。

5. コントロールとアクセシビリティの実装

• キーボードサポート: ユーザーは ArrowLeft と ArrowRight を使用してアイテム間を移動できる必要があります。Tab は次のフォーカス可能なコントロールに移動する必要があり、すべてのスライド間を移動するものではありません。
• モーションコントロール: 自動再生を使用する場合は、可視の「一時停止」ボタンを提供し、prefers-reduced-motion: reduce が設定されている場合（ホバー/フォーカスだけに依存しない）、ホバー時、フォーカス時、および常にアニメーションを停止します。
• ARIAロール: ARIA APGカルーセルパターンに従います — コンテナには role="region" と aria-label、aria-roledescription="carousel" を設定し、スライドトラックには aria-live="polite"（または自動再生中は "off" に設定）を設定して、スクリーンリーダーが過負荷にならずに変更を通知できるようにします。
• フォーカスの可視性: 矢印、ドット、スライドコンテンツ上のフォーカスインジケーターが、隣接するスライドやスティッキーな表示端によって隠されないようにします（WCAG 2.2 SC 2.4.11）。

決定ルール

• 「部分表示」ルール: モバイルでは、矢印に頼らずに水平スクロールを示すために、常に次のアイテムの一部を表示します。
• 矢印 vs バレット: アイテムが5つを超える場合は矢印を使用します。総数が少なく（3～7）、進行状況の表示に価値がある場合にのみバレットを使用します。
• ルーピングロジック: アンビエントディスカバリー（ロゴなど）にのみ「無限ループ」を使用します。機能的なコンテンツ（商品など）には、右矢印が無効になる「トラック終端」状態を使用します。
• スナップスクロール: スワイプやクリックの後、アイテムがコンテナの端に完全に揃うように、常に scroll-snap-type: x mandatory を使用します。

制約

• アクセシビリティ: prefers-reduced-motion をサポートする必要があります。すべてのインタラクティブコントロール（矢印/ドット）は、WCAG 2.2 SC 2.5.8（最小ターゲットサイズ 24x24px、プライマリ矢印は 44x44px 推奨）を満たす必要があります。
• レスポンシブネス: アイテムはフルードである必要があります。カルーセルコンテナはページの水平オーバーフローを引き起こしてはならず、オーバーフローはコンポーネント内に収めなければなりません。アイテムの幅/ギャップには clamp() を使用して、固定ブレークポイントでジャンプするのではなく、ビューごとのアイテム数がスムーズにスケールするようにします。
• 知覚パフォーマンス: まだ読み込まれていない、または画面外にあるアイテムには skeleton-state-system を使用します。

よくある失敗パターン

• 「見えない」カルーセル: 部分表示も矢印もなく、コンポーネントが静的で壊れたグリッドのように見える。
• 「自動再生トラップ」: コンテンツをユーザーが読むには速すぎる速度で回転させる、または停止する方法を提供しない。
• 壊れたスナップ: アイテムがビューポートの中間で止まり、コンテンツが途切れる。
• インタラクション状態の欠如: 矢印にホバー/フォーカス状態がない、またはトラックの終端に達したときに無効に見えない。
• モバイルオーバーフロー: カルーセルがページ全体の幅を拡張し、ユーザーが水平スクロール時に「迷子」になる。

検証基準

• 「部分表示」または非表示コンテンツの明確な視覚的インジケーターが存在する。
• ナビゲーションコントロール（矢印/バレット）が WCAG 2.2 SC 2.5.8（最小タッチ領域 24x24px）を満たしている。
• キーボードナビゲーション（矢印キー）とフォーカス管理が実装されており、フォーカスインジケーターが決して隠されていない（WCAG 2.2 SC 2.4.11）。
• アイテムがグリッドに揃うように scroll-snap が使用されている。
• 自動再生（使用する場合）をユーザーが一時停止でき、prefers-reduced-motion 下で自動的に停止する。
• すべての主要ブレークポイントに対するレスポンシブアイテム数が定義されている。
• スクリーンリーダー用に ARIA ランドマークとラベルが正しく適用されている。