Components: Carousel Layout

連続したコンテンツ表示のためのカルーセル（スライダー）レイアウトデザインをガイドします。カルーセルは一度に1つまたは少数のアイテムを表示し、ユーザーはスワイプまたはクリックで次へ進みます。スペースが限られており、複数のアイテムのローテーションが必要な場合（テスティモニアル、引用句、ロゴ、ギャラリーハイライト）に最適です。

呼び出すときの注意: 初回使用時は、必要に応じてこのスキルが何をカバーしており、なぜそれが重要なのかについて1～2文で開始し、その後メイン出力を提供してください。以降の使用時またはユーザーがスキップを求めた場合は、メイン出力に直接進んでください。

カルーセルを使用する場合

カルーセルを使用	グリッド/リストを使用
スペースが限られている	フルカタログが表示されている
一度に1つのフォーカス; ローテーション必要	多くのアイテムを閲覧・比較
テスティモニアル、引用句、ロゴ、フィーチャーギャラリー	商品、テンプレート、ブログインデックス
ファーストビュー; ヒーロー領域またはセクションハイライト	全体リスト; 発見

等級が同じ表示は grid を参照してください。テキストが多い場合は list を参照してください。様々な高さのギャラリーは masonry を参照してください。

カルーセル vs グリッド vs リスト vs メイソンリー

レイアウト	構造	最適用途
Grid	均等な行と列; すべて表示	商品、テンプレート、機能
List	単一列; 積み重ね	ブログインデックス、ドキュメント、検索結果
Masonry	列; 様々な高さ	Pinterest 風ギャラリー
Carousel	スライド; 1つまたは少数表示; スワイプ/クリック	テスティモニアル、ロゴ、フィーチャーアイテム

ベストプラクティス

アクセシビリティ

• キーボードナビゲーション: 矢印キーで移動; Enter/Space でアクティベート; フォーカスが見える
• ユーザーコントロール: 自動進行が速すぎない; 一時停止可能; prefers-reduced-motion が設定されている場合は自動進行を避ける
• アナウンスメント: スクリーンリーダーユーザーは現在のスライドと合計を知る必要がある（例：「Slide 2 of 5」）
• タッチターゲット: モバイルでは前/次ボタン≥44×44px

パフォーマンス

• 遅延ロード: オフスクリーンスライドをオンデマンドで読み込み; すべての画像を事前に読み込まない
• スペース予約: レイアウトシフト（CLS）を回避するためスライド用スペースを予約

SEO

• DOM内のコンテンツ: すべてのカルーセルコンテンツはページ読み込み時の初期 HTML に含まれている必要があります。Google はクリックをシミュレートしません; スライド変更時に AJAX 経由で読み込まれたコンテンツは検出不可能です。tab-accordion と同じです。
• 推奨事項: すべてのスライドを HTML でサーバーレンダリング; CSS/JS のみを使用して表示/非表示にします。rendering-strategies を参照してください。

ユースケース

ユースケース	形式	ページスキル
テスティモニアル	引用句カルーセル; 複数テスティモニアル	testimonials-generator
ショーケース / ギャラリー	フィーチャーアイテム; ローテーション	showcase-page-generator
プレスロゴ	「As Seen In」ロゴストリップまたは引用句カルーセル	press-coverage-page-generator
コミュニティ	ヒーロー下部のバナーカルーセル	community-forum

関連スキル

• grid: フルカタログ用グリッド; カルーセルが制限的すぎる場合
• list: テキストが多い場合のリスト
• masonry: 様々な高さのギャラリー用メイソンリー
• card: カルーセルスライド内のカード構造
• testimonials-generator: テスティモニアルカルーセル; コンテンツとしてのテスティモニアル
• showcase-page-generator: ギャラリー形式オプション（グリッド、メイソンリー、カルーセル）
• tab-accordion: 同様の SEO 要件—読み込み時に DOM 内のコンテンツ
• rendering-strategies: SSR、SSG; クローラー用初期 HTML のコンテンツ