カルーセル【carousel】

概要

カルーセルとは、Webページやアプリの画面上に設けられる表示領域の形式の一つで、複数の画像やコンテンツを横一列に並べ、左右のスライド操作で表示される項目を順に切り替えられるもの。項目は円環状につながっており、同じ方向にスライドし続けると最初の項目に戻ってくる。

複数の項目を横一列に並べて保持し、そのうちの一部だけを画面上に表示する。利用者がマウスのクリックやドラッグ、あるいはタッチスクリーン上のスワイプ操作によって表示内容を左右に移動させ、隣接する項目へと切り替える。下部に現在の表示位置を示すドットや数字が添えられることも多い。

名称は英語の “carousel”（回転木馬、メリーゴーランド）に由来する。項目が円環状につながっていて一方向に操作し続けると同じ項目に戻ってくる挙動が、回転木馬を横から見たときの動きに似ていることからこの名が用いられている。「スライダー」や「ローテーター」と呼ばれることもある。

利用者が操作しなくても一定の間隔で自動的に項目が切り替わる自動再生機能を備えたものも多い。ECサイトのトップページでのおすすめ商品やキャンペーン情報、ニュースサイトの主要記事一覧、アプリの機能紹介チュートリアルなど、限られた表示領域に複数のコンテンツを提示したい状況で採用される。ページを開いて最初に目に入るファーストビューに配置されることも多い。

アクセシビリティの観点からは課題も指摘されている。自動再生が速すぎるとテキストを読み切れない場合があり、動きのあるコンテンツはスクリーンリーダーとの相性や前庭障害を持つ利用者への影響も懸念される。WCAG（Webコンテンツアクセシビリティガイドライン）では、自動で内容が変化する場合に利用者が停止・制御できる手段を提供することが求められている。

また、利用者がスライド可能な領域であると気づかず最初の項目しか見ないケースや、自動で動く表示を広告と誤認して読み飛ばすケースも報告されている。このため、重要な情報をカルーセル内だけに配置しない設計や、操作方法を明示する設計が行われることもある。

(2026.6.17更新)