カルーセル（使い方）
コンポーネント要素
本コンポーネントは配置されるコンテナ幅により標準サイズから幅狭サイズまでレスポンシブに切り替わります。
標準サイズ
メインエリア（必須）
ネクストエリア（必須）
ネクストボタン（必須）
すべてのスライド（必須）
ステップナビゲーション（必須）
標準サイズ（すべてのスライド展開）
- メインエリア（必須）
- ステップナビゲーション（必須）
- すべてのスライド（必須）
- 展開されたスライド（必須）
幅狭サイズ
- メインエリア（必須）
- ページナビゲーション（必須）
- すべてのスライド（必須）
幅狭サイズ（すべてのスライド展開）
- メインエリア（必須）
- すべてのスライド（必須）
- 展開されたスライド（必須）
基本的な仕様
標準サイズ
メインエリア
- スライドが表示されます。スライドはリンク付き画像であり、これを押すことでリンク先に遷移します。
ネクストエリア
- エリア内には、次に表示するスライドの縮小表示とともに「次のスライド」と記載されたボタンがあります。これを押すとメインエリアが次のスライドに切り替わります。
- スライドは順送りのみです。最初と最後のスライドは繋がっており、ループします。
- 次に表示するスライドに拡大・ソフトライト・ブラーの効果を掛けたものが背景として設定されています。
すべてのスライド
- ボタンを押すことで、以下の形に変化します。もう一度ボタンを押すと元に戻ります。
- 後続のスライドが下部に一覧されます。また、ネクストエリアとステップナビゲーションは非表示になります。
- 水平タイプのステップナビゲーションとして表示されていたスライド番号が、スライド左側に垂直タイプのステップナビゲーションとして表示されます。
ステップナビゲーション
- メインエリアに表示中のスライドの番号を現在位置として表示します。
- 番号が書かれたボタンを押すと、その番号のスライドをメインエリアに表示します。
- キーボードの左右矢印キーでも、メインエリアに表示されるスライドを切り替えることができます。最初と最後のスライドは繋がっており、ループします。
幅狭サイズ
メインエリア
- 標準サイズと同じ仕様です。
ネクストエリア
- 幅狭サイズにはありません。
すべてのスライド
- 標準サイズとほぼ同じ仕様です。ただし、幅狭サイズでは展開されたスライドのスライド番号が表示されません。
ページナビゲーション
- 「メインエリア表示中のスライド番号 / 全体のスライド数」を表示します。
- 左矢印のボタンを押すとメインエリアのスライドが逆送りに、右矢印のボタンを押すと順送りに切り替わります。最初と最後のスライドは繋がっており、ループします。
スライドの数
- スライドの数は2～6までの範囲で設定できます。
確保しているアクセシビリティ
アクセシビリティを確保する観点で、本コンポーネントには以下の特徴があります。コンポーネントを使用する際は下記の仕様を踏襲して使用してください。スタイルガイドとして再定義する場合にも、下記の特徴を改変しないでください。動作についてはコードスニペットを参照してください。
- 再生・停止の仕組みを持ちません。
- スライドに枠線を持ち、周囲とのコントラストを確保しています。
- aria-labelやvisually-hiddenのラベルを各所に設定することにより、このコンポーネントが複数のスライドを切り替えながら表示するUIであることを伝えています。
- スライドの切り替え時に、メインエリアのスライドの代替テキストをaria-liveで通知しています。
- ステップナビゲーション上ではキーボードの左右矢印キーで切り替えを可能にしています。
- ステップナビゲーションにtablistロールとtabロールを指定することで、スクリーンリーダーにインタラクティブなウィジェットであることを伝えています。
幅および画像に関する挙動
ページ内でのカルーセル配置方法
- カルーセルの幅は、原則としてページの「コンテンツエリアのデフォルト幅」を埋めるようにします。
- 「コンテンツエリアのデフォルト幅」とは、サイドナビゲーションなどを除いた、コンテンツ自体が表示される領域の幅のことです。
- 例えば、「コンテンツエリアのデフォルト幅」が1024pxのときは、カルーセルの幅も1024pxとなります。
- ただし、カルーセルの幅を「コンテンツエリアのデフォルト幅」よりも狭くすることも許容されます。
- 例えば、「コンテンツエリアのデフォルト幅」が1200pxであるときに、カルーセルの幅を1024pxにすることも可能です。
標準サイズ
- カルーセルには左右に48pxずつの余白があります。
- これは「すべてのスライド」でスライド番号を表示するための領域を確保するためです。
- メインエリアとネクストエリアは3:1で分割されます。
- メインエリアの幅を満たす形で画像を作成します。
- メインエリアの背景、ネクストエリアの背景、ネクストボタンの縮小画像は、実装によって自動適用されます。別途画像を作成する必要はありません。
- 標準サイズのカルーセルの幅は、1024px〜1600pxまでをサポートします。
- カルーセルの幅に対してメインエリアの画像幅が足りなくなる場合がありますが、背景画像に設定されてるメインエリア画像をブラーしたもので余白が埋まります。
例：コンテンツエリアのデフォルト幅が1024pxである場合
- 左右余白：48px + 48px
- メインエリア：696px（このサイズで画像を作成する）
- ネクストエリア：232px
例：コンテンツエリアのデフォルト幅が1440pxである場合
- 左右余白：48px + 48px
- メインエリア：1008px（このサイズで画像を作成する）
- ネクストエリア：336px
幅狭サイズ
- カルーセルの幅よりもコンテンツエリア幅が狭くなった場合は、幅狭サイズに切り替わります。
- 例えば、カルーセルの幅が1024pxである場合、コンテンツエリア幅が1024px未満になると、幅狭サイズに切り替わります。
- 幅狭サイズではネクストエリアがないため、カルーセルの幅に対してメインエリアの画像幅が足りなくなる場合がありますが、背景画像に設定されてるメインエリア画像をブラーしたもので余白が埋まります。
- メインエリアの画像幅よりもコンテンツエリア幅が狭くなった場合は、比率を維持したまま画像が縮小されます。
- 幅狭サイズのカルーセル全体の幅は最低320pxまでをサポートします。
スライド画像の作り方
- 画像内にスライドのタイトルや概要テキストを入れます。
- 320pxまで縮小されることを想定し、大きく読みやすい文字として記載します。
- 代替テキストには、画像内に書かれた文字をそのまま使用します。
- 画像の内側2pxには枠線が重なるため、情報として読み取るべき要素はその部分を避けて配置します。
- 画像内での、文字色の背景色とのコントラスト比を少なくとも4.5:1以上にします。
- 写真の上に文字を載せる場合など、背景色が一定でない場合は、もっともコントラスト比が低くなる箇所で測定します。
- 写真や図版の上に文字を乗せる場合は、テキストに帯の背景を敷くことでコントラストを確保します。ほかにも、文字に縁取りする方法もあります。
- 画像内での、図形やアイコン等の色と背景色とのコントラスト比を少なくとも3:1以上にします。
- 図形やアイコン等の色を調整しにくい場合は、帯の背景を敷いたり、図形に枠線をつけたりすることでコントラストを確保します。