Marquee
マーキー
動き続けるコンテンツの帯です。動きに敏感な人のために、止めるボタンや動かないバージョンを用意しなければなりません。
実際の例
フェスティバルのページでは、短いスポンサーリストがゆっくり動きます。マウスを乗せたり選んだりすると止まり、「動きを減らす」設定のときは、折り返しの止まったリストになります。
主な部分
- 01トリガー
- 02Property change
- 03Timing model
- 04Reduced-motion result
以下の場合に使用します
重要でない短く繰り返されるコンテンツにのみ使用します。動きは雰囲気を加える可能性がありますが、読書を妨げてはいけません。
以下の場合は使用しないでください
指示、長文、緊急メッセージ、または人々が追って読む必要がある言葉には絶対に使用しないでください。
コードで使用する名前
overflow clip + duplicated track + prefers-reduced-motion 出荷前に
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with マーキー (Marquee)。 User context：フェスティバルのページでは、短いスポンサーリストがゆっくり動きます。マウスを乗せたり選んだりすると止まり、「動きを減らす」設定のときは、折り返しの止まったリストになります。 Design concept to apply：マーキー (Marquee)。 Why it fits：重要でない短く繰り返されるコンテンツにのみ使用します。動きは雰囲気を加える可能性がありますが、読書を妨げてはいけません。 Do not use it when：指示、長文、緊急メッセージ、または人々が追って読む必要がある言葉には絶対に使用しないでください。 Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：これは規範的な標準ではありません。その名前、制限、および期待される挙動は、情報源によって変わる可能性があります。 Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
このリクエストを確認する
Review how マーキー (Marquee) is used now. Definition: 動き続けるコンテンツの帯です。動きに敏感な人のために、止めるボタンや動かないバージョンを用意しなければなりません。 Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.