カルーセル
Carousel複数のスライドを横方向に切り替えながら順送りに表示するUI。
○ 使う場面
- 複数の訴求やおすすめ商品などを、限られた面積で順に見せたいとき
- ユーザー自身が前後にスワイプ・クリックして閲覧をコントロールできるようにしたいとき
× 避ける場面
- 値の調整に使う入力部品が必要なとき（→スライダー、名称の衝突に注意）
- 自動再生が読了やタスク達成の妨げになる可能性が高いとき（本図鑑のデモも自動再生は既定オフ）
別名
カルーセル、スライダー、スライドショー
近縁種との比較
「カルーセル」「スライダー」「スライドショー」は同じUIを指す語として並立するが、「スライダー」は値をつまみで調整する入力部品と語が衝突するため、本図鑑では研究ノートの指摘どおり「カルーセル」を見出し名に採用する。なお「カルーセル」という語自体は、元は馬上槍試合のような騎士の馬術ショーを指すイタリア語・フランス語に由来し、のちに回転木馬（メリーゴーラウンド）を指す語としても定着したとされ、コンテンツが回転するように順送りされる見た目とも重なる。
| 近縁種 | 違い・使い分け |
|---|---|
| タブ | どちらも並列コンテンツを同じ領域で切り替える点が似ているが、タブはクリックで能動的に選び切り替える離散的なナビゲーションであるのに対し、カルーセルはドラッグや自動再生による連続的な順送りを基本とする。 |
| ライトボックス | 画像を切り替えて見せる点が似ているが、ライトボックスはサムネイルのクリックをきっかけに暗転オーバーレイとして開く一時的な表示であるのに対し、カルーセルはページ内にインラインで常時表示される。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション