カルーセルとマーキーの比較
短い答え
カルーセルは別々のスライドを操作ボタンと一緒に見せるよ。マーキーはコンテンツの列をずっと動かし続けるよ。
各項目に時間と操作が必要な場合はカルーセルを使用してください。重要でない装飾で、一時停止や停止が可能な場合のみ、マーキーを使用してください。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Carousel
↗ カルーセル
カルーセルは、一度に1つかいくつかのパネルを見せるよ。人は矢印やドット、またはスワイプで動かせるんだ。
フォトギャラリーには、「戻る」と「次へ」ボタンがあって、スライド番号が表示されるよ。スワイプにも対応していて、自動再生を止めることもできるよ。
- 以下の場合に使用します
- アイテムに順序があるが、すべてを表示する十分なスペースがない場合に使用してください。
- 以下の場合は使用しないでください
- 重要な選択肢をカルーセル内に隠したり、自動で速く動かしてはいけません。
- コードで使用する名前
aria-roledescription="carousel"
Marquee
↗ マーキー
動き続けるコンテンツの帯です。動きに敏感な人のために、止めるボタンや動かないバージョンを用意しなければなりません。
名前を付ける · 検証 · それを作る · 出荷
フェスティバルのページでは、短いスポンサーリストがゆっくり動きます。マウスを乗せたり選んだりすると止まり、「動きを減らす」設定のときは、折り返しの止まったリストになります。
- 以下の場合に使用します
- 重要でない短く繰り返されるコンテンツにのみ使用します。動きは雰囲気を加える可能性がありますが、読書を妨げてはいけません。
- 以下の場合は使用しないでください
- 指示、長文、緊急メッセージ、または人々が追って読む必要がある言葉には絶対に使用しないでください。
- コードで使用する名前
overflow clip + duplicated track + prefers-reduced-motion
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| カルーセルCarousel | アイテムに順序があるが、すべてを表示する十分なスペースがない場合に使用してください。 | 重要な選択肢をカルーセル内に隠したり、自動で速く動かしてはいけません。 | aria-roledescription="carousel" |
| マーキーMarquee | 重要でない短く繰り返されるコンテンツにのみ使用します。動きは雰囲気を加える可能性がありますが、読書を妨げてはいけません。 | 指示、長文、緊急メッセージ、または人々が追って読む必要がある言葉には絶対に使用しないでください。 | overflow clip + duplicated track + prefers-reduced-motion |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをカルーセル (Carousel)、マーキー (Marquee)から選んでください。このルールを使用してください: カルーセルは別々のスライドを操作ボタンと一緒に見せるよ。マーキーはコンテンツの列をずっと動かし続けるよ。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。