カルーセル
Web サイト上で、複数の画像やコンテンツを横方向にスライドさせて切り替える UI(UI / UX)(ユーザーインターフェース)のことです。「スライダー」「カルーセルスライダー」とも呼ばれ、トップページのメインビジュアル(メインバナー)や、商品一覧、お客様の声などで多用されます。
大前提：2 枚目以降はほぼ「見られない」
カルーセルは、1 枚目以外のクリック率や注目度が急落する傾向があり、これを海外では「カルーセル症候群(Carousel Syndrome)」と呼びます。社内の「あれもこれも載せたい」という意見の妥協案として安易に採用されがちですが、効果が薄いという批判も多い UI です。
実務での設計ルール(もし使うなら)
カルーセルを採用する場合は、ユーザーにストレスを与えないよう以下のルールを徹底します。
- 枚数は 3〜4 枚以内に絞る：5 枚以上の詰め込みは絶対に避ける。最重要メッセージは必ず 1 枚目に置く。
- 操作のヒントを置く：左右の「矢印ボタン」や、今何枚目かを示す「ドット(インジケーター)」を必ずデザインに含める。
- スマホ対応(スワイプ)：スマートフォンで見るときに、指で横にスワイプして直感的に切り替えられるように実装する。
- 自動スクロールの速度：テキストが読み切れる速度(5 秒〜7 秒程度)に設定し、ユーザーがバナーにホバー(タップ)している間は自動ループを一時停止させる。
よくある落とし穴(注意点)
- 6〜8 枚ものバナーを詰め込んで、誰も見ない情報を量産してしまう。
- 自動スライドの速度が速すぎて、文字を読む前に次の画像に切り替わってしまう。
- 「複数のキャンペーンを平等に扱いたい」という社内政治の道具としてカルーセルを使い、結果的にどのキャンペーンの成果も出なくなる(本当に重要な情報なら、カルーセルにせず「縦に並べる」か「静的な 1 枚バナー」に切り替える英断が必要です)。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
- マーケター
会話上での使用例
トップに主要訴求を並べたいというプロデューサーの案を検討する場面
-
プロデューサー
トップのスライドで、主要な訴求を 6 つくらい順番に見せたいんだよね。
-
Web 担当者
気持ちはわかるんですが、カルーセルは 2 枚目以降がほとんど見られない傾向があるんです。3 枚以内に絞るか、いっそ静的なメインビジュアルにした方が成果は上がるかもしれません。
カルーセルと静的MVをどちらにするかマーケターと比較する場面
-
マーケター
スライドにするか、1 枚絵で固定するか、どっちが効くんでしょうね。
-
Web 担当者
それはカルーセルと静的なメインビジュアルで A/B テストして決めましょう。Lesson 8-4 の手順に沿えば、数字で比べられますよ。