カルーセル（概要）

カルーセルは、複数のスライドを順番に見ることのできるコンポーネントです。ウェブサイトのアイキャッチとしても使われますが、使用に注意が必要なコンポーネントです。

ユースケース

ウェブサイト自体を象徴するグラフィックをファーストビューで展開したいとき

ファーストビューの最上部に配置されるカルーセルは、ユーザーの多くが表示するであろうコンテンツです。ウェブサイト自体を象徴するグラフィック、ウェブサイトの主題そのものなど、シンプルなメッセージをバナーで訴求できます。

見出しをともなうトピックのコンテナとして使用するとき

「新着情報」や「開催中のイベント」といった特定の主題に属する一連のコンテンツ群としてカルーセルを使用することができます。主題を満たす適切な見出しを置き、続けてカルーセルを展開することで2つ目以降のスライドも能動的に閲覧可能となります。ページの途中等でイメージスライダーとしてギャラリーコンテンツのように使用することもできます。

注意が必要なケース

きちんと読んで欲しい情報を格納しない

ブラウザ上に表示されることと、ユーザーが内容を読むことは等価ではありません。ユーザーはウェブサイトの内容や手続きが必要で訪問しているため、ファーストビューに長くとどまることはなく、カルーセルへ注意を払わず、カルーセルの中に隠されたコンテンツをきちんと読みません。アクセス解析における統計的な傾向として、カルーセルのコンテンツはすべてクリック率が低く、またクリックしたユーザーのほとんどが最初のスライドをクリックしており、特に2つ目以降のコンテンツはほとんど見られていないことが示唆されています。きちんと読んで欲しい情報はそもそもカードとして並べるなど、内容が隠れないようにしましょう。

スライドを自動再生させない

本デザインシステムのカルーセルは自動再生の仕組みを備えていません。ユーザーはウェブサイトの内容や手続きが必要で訪問しているため、ナビゲーションメニューやページ内のコンテンツに意識が集中しています。人間には変化盲（チェンジブラインドネス）という認知特性があり、集中の範囲外の変化に気づくことが困難です。ユーザー自身の自律的な選択によって表示スライドが切り替えられることで、スライドの内容が正しく読解されることが期待できるのです。

複数の異なるトピックを同居させない

ひとつのカルーセルに押し込められた複数の異なるトピックは、ユーザーにとって予測できないコンテンツとなってしまいます。ユーザーはウェブサイトの内容や手続きが必要で訪問しているため、予測が難しく個別に内容を確認しないといけないカルーセルには長くとどまらず、ナビゲーションメニューでの移動やページスクロールが優先されてしまいます。また、ユーザーの多くが表示するであろうファーストビューに、雑多なグラフィックが表出することで、ウェブサイト自体が本来伝えたいコミュニケーションのトーン＆マナーやブランドイメージ等が阻害される可能性があることにも注意してください。

ユースケース以外の目的で使用しない

注意が必要なケースの各項目に記したとおり、カルーセルにはアクセシビリティやユーザビリティ等の観点で複数の問題があります。カードを用いてコンテンツを並べたり、見出しやリスト要素によるシンプルなレイアウトを採用したり、カルーセル以外の表現方法でページ構造を設計することを検討してください。既存システムの制約等によりやむを得ずユースケース以外の目的で使用するときは、スライドの枚数を減らしてカルーセル自体をスキップしやすくしてください。

各種リソース