カルーセル

Carousel

web development beginner

複数の画像やコンテンツを、左右にスライドさせて順番に切り替え表示するUIパーツ。

概要（サマリー）

カルーセル（Carousel）は、複数の画像やコンテンツを、限られた表示領域の中でスライドさせて順番に切り替え表示するUI（ユーザーインターフェース）パーツである。

語源である「メリーゴーランド（回転木馬）」のように、最後のスライドの後に最初のスライドへ戻るループ構造を持つことが多い。主にウェブサイトのトップページのメインビジュアル（ヒーローセクション）や、ECサイトの商品リストなどでよく使用される。

詳細解説

カルーセルとは何か

カルーセルは、画面の限られたスペースを有効活用し、複数の情報（バナー画像、おすすめ商品、ニュースなど）をコンパクトにまとめて見せるための代表的なUIデザインである。ユーザーが左右の矢印ボタンを押したり、スマホ画面を左右にスワイプしたりすることで、表示される画像がスムーズに切り替わる。

カルーセルがよく使われる場所とメリット

カルーセルは以下のような場面で好んで導入される。

コーポレートサイトのトップページ：新着情報、キャンペーン、企業メッセージなどを複数並べてアピールする。
ECサイトの商品一覧：おすすめ商品や関連商品を横並びにし、スライドさせて見せる。
メリット：ファーストビュー（ページを開いて最初に目に入る領域）の限られたスペースに、複数のメッセージを詰め込むことができる。

カルーセルを構成する3つの基本要素

一般的なカルーセルは、以下のパーツから構成される。

スライドコンテナ（ステージ）：実際に表示される複数の画像やコンテンツが横一列に並ぶ領域。
矢印ナビゲーション（Prev / Nextボタン）：左右に1枚ずつスライドを送り・戻しするためのボタン。
インジケーター（ページネーションドット）：現在全体で何枚中の何枚目を表示しているかを示す、下部に並んだ小さな点のリスト。クリックして任意の枚数へジャンプできる。

カルーセルの簡易コード例

以下は、CSSの scroll-snap 機能を利用した、JavaScriptを使わずに動作するシンプルなカルーセルのHTMLとCSSのコード例である。

HTML

<div class="carousel-container">
  <div class="carousel-stage">
    <div class="carousel-slide slide-1">スライド 1</div>
    <div class="carousel-slide slide-2">スライド 2</div>
    <div class="carousel-slide slide-3">スライド 3</div>
  </div>
</div>

CSS

.carousel-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
}

.carousel-stage {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  scroll-snap-align: start;
}

.slide-1 { background-color: #3498db; }
.slide-2 { background-color: #e74c3c; }
.slide-3 { background-color: #2ecc71; }

このコード例では、JavaScriptを使わずに、ブラウザ標準のスクロール機能と scroll-snap-align: start を利用して、スライドがピタッと吸い付くように切り替わるカルーセルを実現している。スマホのスワイプ操作にも標準で対応している。

アクセシビリティとユーザビリティの注意点

カルーセルは便利な反面、デザインや実装方法によってはユーザーに嫌われる原因になるため、以下の配慮が必要である。

自動スクロールの制御：勝手にスライドが動くと、文字を読んでいる途中のユーザーを混乱させる。マウスホバー時や、ユーザーが一度手動で操作した後は、自動スライドを一時停止または停止させる設計が望ましい。
キーボード・スクリーンリーダー対応：キーボードの矢印キーで操作可能にすることや、画像に適切な alt 属性を設定することがアクセシビリティの観点で重要である。

AIコーディングとの関係

カルーセルは、フロントエンド開発の中でAIが非常に得意とするコンポーネントの1つである。

「スワイプ操作ができるカルーセルを書いて」「フェードアウトで切り替わるスライダーを作成して」といった抽象的な指示だけで、HTML/CSS/JavaScriptを組み合わせた動くコードを即座に生成してくれる。

また、外部ライブラリ（Swiper など）を利用する場合は、使用するバージョンと公式ドキュメントを指定すると、古い初期化方法が混ざるリスクを下げられる。

プロンプト例：
「CDNでSwiper.jsを読み込み、3秒ごとに自動再生（ループあり）され、ナビゲーション矢印とページネーションドットが付いたレスポンシブなカルーセルのコードをHTML/CSS/JSで作成してください。」

注意点として、AIが古いライブラリの書き方を出力したり、CSSの競合によって表示が崩れたりすることがある。AIに生成させた後は、特にスマートフォン実機での表示確認や、スワイプ操作時の挙動が崩れていないかの入念な動作テストが重要である。

よくある勘違い

カルーセルとスライダーは、仕組みや役割が全く異なる別のUI？

実質的にはほぼ同じ意味で使われることが多い。「スライダー」はコンテンツが左右に流れて切り替わるUI全般を指し、「カルーセル」はその中でも「最後のスライドまで行くと、最初のスライドにシームレスにループして戻る（回転する）」挙動を持つものを指す傾向があるが、現場では同義語として扱って問題ない。

カルーセルを設置すれば、すべてのバナー画像をユーザーに見てもらえる？

2枚目以降は、利用者が操作しなければ見られないことがある。そのため、必ず伝える必要がある情報を後半のスライドだけに置かず、通常のページ内容や別のナビゲーションでも確認できるようにする。

カルーセルは自力でJavaScriptを一から書かないと実装できない？

そんなことはない。上記で紹介したように、現代のCSS（scroll-snap）を使えば、JavaScriptを使わずにHTMLとCSSだけで実用的なスライド切り替えが実装可能である。また、デザインや多機能さを求める場合も、一から自作するより「Swiper」などの検証されたライブラリを組み込む方がバグが少なく開発効率も良い。

まとめ

カルーセルは、限られたスペースに複数の画像やカードをスライドさせて表示するUIパーツである。
メインビジュアルや、ECサイトの商品横スクロールリストなどで定番。
ユーザービリティのために、自動スライドの停止制御や操作ボタンの明示が推奨される。
AIコーディングでは、標準的な自作コードのほか、Swiperなどの有名ライブラリを組み込んだ実装の生成も容易である。
重要な情報を後半のスライドだけに置かず、カルーセル以外からも到達できるようにする。

情報ソース

より詳しくAIに聞いてみよう

CSSの「scroll-snap」機能を使って、左右の送りボタンもJavaScriptで制御するカルーセルを作るコードを書いてください。
ウェブアクセシビリティ（W3C APG）に準拠した、スクリーンリーダーやキーボード操作に優しいカルーセルの実装方法を教えてください。
人気のカルーセルライブラリ「Swiper」をNext.js（React）環境に導入し、レスポンシブ対応させる具体的なコードを教えてください。
カルーセルがユーザー体験（UX）に与える悪影響（バナーブラインドネスなど）と、それを防ぐ代替UIデザイン案を提示してください。
カルーセルの「自動スライド」が、マウスホバー時やフォーカス時に適切に停止するように制御するJavaScriptのコード例を教えてください。