カルーセル（UIコンポーネント）
Carousel (UI Component)
カルーセルは、複数の画像やカードを1つのビューに表示し、ユーザーがスワイプやクリックで閲覧するUIコンポーネントです。
カルーセルとは?
カルーセルは、複数の画像やカードを1つの領域に順番に表示し、ユーザーが矢印やスワイプで次々と閲覧できるUIコンポーネントです。 遊園地の回転木馬（カルーセル）のように、コンテンツが回転するイメージから名付けられました。eコマースの商品ギャラリー、ニュースサイトのヘッダー画像、モバイルアプリのオンボーディングなど、様々な場面で使われます。限られた画面スペースに複数のコンテンツを表示できる利点がある反面、ユーザーの多くは最初のスライド以降をほとんど見ないという課題もあります。
ひとことで言うと： カルーセルは、雑誌の表紙を1冊ずつめくっていくようなもの。1度に1つの情報に集中できますが、奥の方のページは見逃しやすいです。
ポイントまとめ：
- 何をするものか： 複数のアイテムを1つのスペースに順番に表示し、ナビゲーション機能で閲覧させる
- なぜ必要か： 限られた画面スペースで複数の情報を提示しながら、1つに集中させるため
- 誰が使うか： eコマース企業、ニュースサイト、モバイルアプリ開発者
なぜ重要か
Webページの画面スペースは限られています。多数の商品やニュース記事を並べるより、カルーセルで「1つずつ見せる」ほうが、ユーザーの注意が散らばりません。また、アニメーション効果により視線を引き付けられます。ただし、ユーザビリティ研究では「大多数のユーザーが最初のスライド以降を見ない」という課題が報告されており、設計時の注意が必要です。
仕組みをわかりやすく解説
カルーセルは、複数の要素（スライド）をコンテナに格納し、表示領域を制限して、一度に1つだけ見えるようにします。矢印ボタンやドット状のページネーションをクリック、またはモバイルではスワイプで、次のスライドが表示されます。オプションで自動回転させることもできますが、ユーザーが操作できるほうがアクセシビリティ上は推奨されます。キーボード操作やスクリーンリーダー対応も重要です。
実際の活用シーン
商品ギャラリー eコマースサイトで商品を複数の角度から見せます。
ニュースキャレンセル ホームページの最上部に回転するヘッダー画像を表示します。
オンボーディング アプリが新規ユーザーに機能を説明するとき、複数ステップをカルーセル形式で示します。
推奨商品コーナー スマートフォン画面の限られたスペースに、複数の推奨商品を順番に表示します。
メリットと注意点
メリットは、限られたスペースで多くの情報を提示でき、視覚的に引き付けられることです。モバイル対応にも適しています。
注意点として、ユーザビリティ研究は「ほとんどのユーザーが最初のスライドだけ見て、2番目以降は見ない」ことを示しています。重要な情報を後ろのスライドに隠すと、機会を逃します。また、自動回転カルーセルはバナーブラインドネス（広告と同じく無視される）の問題もあります。
デザインのベストプラクティス
スライド数は3～5個が目安です。それ以上あると、ユーザーが「他にもある」ことに気づきません。すべての重要情報を最初のスライドに含めることが大切です。矢印やドットは明確で、タッチデバイスではそれなりのサイズが必要です。自動回転より、ユーザーが操作できるほうが推奨されます。アクセシビリティ（キーボード操作、スクリーンリーダー対応）も重視しましょう。
代替手段
グリッド表示（複数アイテムを同時表示）はスペースは取りますが、発見性が高いです。タブ形式は複数ページを一度に概観でき、素早く切り替えられます。無限スクロール（下へスクロールで次々と出現）はモバイルに適しています。状況に応じて、カルーセル以外の選択肢も検討すべきです。
よくある質問
Q: カルーセルでユーザーエクスペリエンスが悪くなることはありますか？ A: はい。最初のスライド以降を見ないユーザーが84%という研究結果もあります。重要な情報はカルーセルに隠さず、複数アイテムを同時表示するほうが良い場合も多いです。
Q: 自動回転させるべきですか？ A: モバイルでは避けるべきです。デスクトップでも、ユーザーが操作できるほうが好まれます。自動回転する場合は、一時停止ボタンを必ず付けてください。
Q: アクセシビリティはどう確保しますか？ A: キーボードで矢印キーやTabキーで操作できるようにします。スクリーンリーダー対応として、ARIAラベルを付けます。画像に説明文（altテキスト）も必須です。
