カルーセル

概要

カルーセルコンポーネントは、画像、テキスト、アクションなどのアイテムのコレクションをインタラクティブな回転スライドショーで表示できるようにします。

固定された領域内でコンテンツを循環させることで画面スペースを最適化するよう設計されており、機能の強調、ビジュアルギャラリーの閲覧、またはページを散らかさずに一連の情報をユーザーに案内するのに適しています。

---

一般的な使用例

ユースケース	説明	例
製品ショーケース	横スクロールで特定の注目商品や新着アイテムを表示します。	ホームページの「新着」セクションに製品画像と価格を表示する例。
画像ギャラリー	ビジュアルポートフォリオやイベントの振り返り。	最近の現地訪問やマーケティングイベントの写真を表示する例。
推薦文（テスティモニアル）	縦方向のスペースを取らずにソーシャルプルーフを循環表示します。	引用文とクライアント名を表示する単一アイテムのスライダー。
オンボーディング／ステップ	ユーザーを線形プロセスに沿って案内します。	「使い方」カルーセルで、ステップ1、ステップ2、ステップ3の3枚のスライドがある例。

---

設定

データソースとマッピング

まず、カルーセルがデータをどのように受け取るかを決定します。アイテムを手動で追加するか、コンポーネントをコレクションにバインドできます。

• データソース：固定バナーのような静的コンテンツには「手動」を選択し、Salesforceレコード（「関連製品」など）を動的に読み込むには「変数/クエリ」を選択します。

• データマッピング：動的データを使用する場合は、データフィールドをカルーセルの表示属性にマップする必要があります：

カルーセル属性	説明	マッピングの例
タイトル	アイテムの主要なヘッダーテキスト。	{Product_Name__c}
説明	タイトルの下に表示されるサブテキストや詳細。	{Short_Description__c}
画像	アイテムの背景またはヒーロー画像。	{Image_URL__c}
アクション	アイテムに関連付けられたボタンやリンク。	移動先 {RecordId}

レイアウトとレスポンシブ対応

表示情報の密度を制御します。電話、タブレット、デスクトップでカルーセルが見栄えするように、デバイス幅ごとに「パネルあたりのアイテム数」を定義できます。

• パネルあたりのアイテム数：一度に表示されるカードの数（例："ヒーローバナー"の感覚にするなら1、"製品棚"の感覚にするなら4に設定）。

• ギャップ：アイテム間の間隔を調整します。

インタラクションとビジュアル

ユーザーがコンテンツをどう移動するかを微調整します。

• ナビゲーション：前へ／次へ矢印の表示を切り替えます。

• 指標表示：現在のスライド位置を示すドットや進行バーをカスタマイズします。

• 自動再生：（任意）一定時間後にカルーセルを自動的に進める設定。

• アイテムをクリック可能にする：カード全体をトリガーとして機能させる（例：画像のどこをクリックしても詳細ページへ移動する）ことを有効にします。

---

なぜカルーセルコンポーネントを使うのか？

• 複数のアイテムを見せる： 限られたスペースに複数のアイテムのコレクションを表示します。

• 視覚的魅力を高める： 魅力的でインタラクティブなユーザー体験を作ります。

• 注目コンテンツを強調する： 重要なアイテムやプロモーションに注目を集めます。

• ナビゲーションを改善する： 関連するアイテムやステップの一連をユーザーに案内します。