カルーセル（carousel）とは、同じ場所に、複数の内容を1つずつ切り替えて見せる部品である。トップページの大きな画像が、矢印や点を押すと、次の画像に変わるものが代表的である。
たとえば、家電メーカーのトップページに、大きな画像が4枚あるとする。1枚目は新商品、2枚目はセール、3枚目は採用情報、4枚目は修理の受付である。画面に出ているのは、いつも1枚だけである。利用者が、そのまま下へスクロールすると、2枚目以降は、目に入らない。
ここで扱うのは、トップページの上のほうにある、注目の内容を見せるカルーセルである。画像と少しの文章が、1つずつ切り替わる。ページを開いたときに見える範囲（ファーストビュー）の、大きな場所を使うことが多い。
何のために使うのか
ニールセン・ノーマン・グループ（NN/g）の記事によると、利点は2つある。
- 複数の内容が、ページの一番目立つ場所を分け合える。どの内容を載せるかをめぐる社内の争いが、おさまりやすい。
- 上のほうに載る情報が増えるので、見てもらえる機会が増えるかもしれない。
起きやすい問題
- 見落とされやすい。画面の大きさにかかわらず、利用者は、大きな画像ごと飛ばして、スクロールすることが多い。1枚目以外は、特に見られにくい。
- 見た1枚が、全体だと思われる。作る側は、画像の組全体で伝えるつもりでも、利用者は、目にした1枚だけで判断する。
- 自動で切り替わると、さらに見落とされる。NN/g の別の記事「Auto-Forwarding Carousels, Accordions Annoy Users & Reduce Visibility」には、5秒ごとに切り替わる枠の例がある。割引の案内は、その枠の中で、20%の時間しか表示されていなかった。調査に参加した1人は、案内を見つけられず、割引はないと考えて、あきらめた。
自動で切り替わる枠には、ほかにも問題がある。動くものは、広告だと思われやすく、読み飛ばされる。広告に見える部分を、利用者が見なくなる現象を、バナーブラインドネスという。文章を読むのに時間がかかる人や、母語ではない言語で読む人は、読み終わる前に、内容が消える。動く部品は、手の動きに困難がある人にとって、押しにくい。
つくるときの目安
- 1つのカルーセルに入れるのは、5枚までにする。5枚を超えると、見たものがどれだったか、分かりにくくなる。
- 文字と画像は、はっきり見えるものにする。小さい画面で、読めなくなる文字は避ける。
- 全部で何枚あるか、いまどれを見ているかを示す。
- 矢印や点などのボタンは、カルーセルの中に置く。押せる大きさにする。点だけの操作は、スマートフォンでは、気づかれにくい。
- 自動では切り替えない。利用者が操作したときだけ、切り替える。自動にするなら、多くの人が読み終えられる時間を取る。
- 大事な情報は、カルーセルの外にも置く。
カルーセルを使わない選択肢
カルーセルをやめて、静止した画像を1枚だけ置くほうがよい場合もある。選べるのが1枚だけなら、作る側は、伝えたいことを絞りやすいからである。
出典
- Nielsen Norman Group「Carousel Usability: Effective UI for Content Overload」
- Nielsen Norman Group「Auto-Forwarding Carousels, Accordions Annoy Users & Reduce Visibility」
