カルーセルとは？広告とUIの違い・設計例・アクセシビリティ

2026年7月8日

著者: 与謝秀作

カルーセルとは、一つの領域で複数の内容を順に切り替えて見せる表示パターンです。Webサイトの商品カードや画像、広告の複数カードなどに使われます。スライダー、スライドショーという呼び方と意味が重なるため、「必ずループする」「必ず自動で切り替わる」と名前だけで仕様を決めることはできません。まず用途と操作を分けて理解しましょう。

カルーセルとは：スライダー等との重なる意味

W3Cのカルーセル解説も、カルーセル、スライドショー、スライダーという重なる呼び方を示しています。同じ名称でも、一枚ずつ表示するもの、複数枚を並べるもの、手動だけのものなどがあります。用語の違いより、実際の挙動を確認することが大切です。

確認する軸	仕様書に書く内容	名前だけでは決まらないこと
呼び方	カルーセル、スライダー等	名称が異なっても似た構造になり得る
切替	自動・手動・両方	カルーセルなら自動とは限らない
末尾	先頭へ戻るか、止まるか	ループは必須ではない
表示枚数	一枚か複数枚か	一枚表示だけが定義ではない
用途	自社UIか媒体の広告か	変更できる項目と制約が違う

検索で意味を調べている読者には、この定義を最初に伝えます。そのうえで広告制作や実装、測定など必要な工程へ進むと、用語の説明と運用の話が混ざりません。

Web UIと広告カルーセルの違い

自社サイトのカルーセルは、開発側が停止・再開、前後ボタン、代替情報、読み上げ、フォーカスなどを設計できます。広告では媒体が表示や操作を管理するため、入稿できる項目と配信先の挙動を区別します。

項目	自社Web UI	広告フォーマット
カード内容	自社の実装と編集方針で設計	媒体の入稿規則に従う
操作・停止	自社で操作と検証を設計	媒体が提供する範囲を確認
代替情報	画像と文脈に合わせて設計	入力欄や編集可能範囲を確認
測定	仕様に沿ったカスタム計測が可能	提供される指標と内訳を確認
表示順	実装した順序と変更条件を管理	最適化や配信面の仕様を確認

媒体側の操作を自社UIと同じように変更できると説明しないことが重要です。クリックできる箇所、順序、指標は利用する形式と配信面の公式仕様を確認してください。

商品一覧・説明・ストーリーでの向き不向き

関連する選択肢を少ない領域へ並べたり、説明の順序を示したりするときに検討できます。ただし後続カードは見られない可能性があります。最も重要な条件や行動を最後の一枚へ隠して、必ず順番に読まれる前提にしないようにします。

商品比較なら価格や条件を同時に見たい場合もあり、一覧や表のほうが適することがあります。重要なお知らせなら常時表示のほうが発見しやすい場合があります。カードの枚数を増やす前に、読者が選ぶのか、順に学ぶのか、次の行動を探すのかを決めてください。

3枚のカードで目的とリンク先を整理する例

次は架空の予約サービスの教材例です。NeX-Rayの機能や顧客実績ではありません。どのカードから見ても対象と次の行動を理解できるよう、必要な説明を各カードへ持たせます。

カード	目的とコピー例	リンク先	必要な情報
1	誰の課題か：「予約の空き枠を探す方へ」	空き枠一覧	サービス名、地域、有料・無料の条件
2	比較する：「日時・料金・キャンセル条件を比べる」	条件説明	確認済みの料金・条件。実績を作らない
3	行動する：「条件を確認して予約へ進む」	予約手順	条件への導線。CTAを3枚目だけにしない

「詳しくはこちら」だけではリンク先が分からないため、行動と対象を明確にします。カード2へ直接来た人も何の予約か判断できるかを確認します。条件変更時はカードだけでなく、リンク先と画像内の文字も合わせて更新します。

自動切替・停止・キーボード・読み上げの設計

W3Cのカルーセルパターンでは、自動切替は内部へキーボードフォーカスが入ったときに停止し、ユーザーの明示操作なしに再開しない設計を示しています。読んでいる途中に内容が入れ替わる問題を、切替速度の調整だけで済ませないようにします。

TabとShift+Tabで停止・前後操作へ到達できるか。
停止・再開、前へ、次へという操作名が分かるか。
フォーカス時に切替が止まり、勝手に再開しないか。
非表示スライドが意図せずフォーカスや読み上げの対象にならないか。
現在位置や内容の変化を理解できるか。
スワイプだけに依存せず、キーボードでも操作できるか。

画像内文字だけに情報を載せず、内容や操作の役割に合う代替情報を用意します。実際にキーボードと読み上げで確認し、見た目のチェックだけで完了にしません。

画像比率・カード数・順序は媒体別に確認する

Google広告のDemand Genカルーセル資料のように、利用する媒体・形式の公式仕様を確認します。画像比率、枚数、文字、リンク、対応配信面、順序の扱いを一つずつ確認し、別媒体の規則を流用しないようにします。

全媒体共通のカード数や画像・動画混在ルールは作れません。自社サイトでも、狭い画面での文字、画像切り抜き、余白、ボタンの到達を確認します。画像容量と読み込みの影響を見ながら、必要な内容が遅れて隠れない構成にします。

自社UIの露出とクリックを測る設計例

次は自社UI向けの架空のカスタム計測仕様です。carousel_view、slide_visible、card_clickは教材用の独自名で、設置すればGA4が自動取得する標準イベントではありません。carousel_id、slide_id、positionを用い、個人情報を含めない設計にします。

イベント例	発生条件の仮定	重複・集計
carousel_view	領域が所定条件で表示	セッション×カルーセルで整理
slide_visible	カードの50%以上が画面内で1秒	セッション×カードで一回として数える例
card_click	対象カードのリンクを操作	同じ単位でクリック有無を数える例

50%・1秒はこの教材の仮定であり、Googleや全媒体の公式露出定義ではありません。同じセッション×カードの露出300に対しクリックあり60なら、カードCTRは60÷300＝20%です。ページ全体のPVを分母にせず、同じ単位の露出とクリックを対応させます。媒体広告ではこの内訳が取得できるかを先に確認します。