流れ続ける帯・めぐるカルーセル・浮き沈み・脈打つ輪・回る輪・移り変わる背景など、くり返し動き続ける動きを6種類の型に分け、AIへの指示文・試せる見本・コードを載せています。見本の下で速さや時間を変えると、指示文とコードも同じものに変わります。
ループの動きはどの型を選ぶか
ループの動きは、読み手が何もしなくても動き続けます。そのぶん、止める手段と止まる条件を先に決めておくことが大切です。横へ流れ続ける2つの型は、内容そのものを動かすので止めるボタンが要ります。その場で動き続ける4つの型は飾りや合図なので、付ける場所と数を絞ります。
| こんなとき | 向いている動き | 形の型（UIパターン集） |
|---|---|---|
| 取引先や掲載メディアのロゴを、数の多さが伝わるように並べたい | ロゴが帯になって流れ続ける（ループスライダー） | 告知バー（流れる文字型） |
| お客さまの声や事例のカードを、1枚ずつ止めて読んでもらいたい | カードが1枚ずつ送られてめぐる（無限カルーセル） | ギャラリー（カルーセル型）・ファーストビュー（スライダー型） |
| ファーストビューのイラストやバッジに、やわらかい動きを足したい | ふわふわと浮き沈みする（ふわふわアニメーション） | — |
| いちばん押してほしいボタンを1つだけ目立たせたい | ボタンのまわりに輪が広がる（パルスアニメーション） | CTA |
| 読み込みを待っていることを伝えたい | 読み込み中の輪が回る（ローディングスピナー）。ほかの待たせ方は読み込み中の動き | — |
| 1つのセクションの背景だけ、雰囲気を変えたい | 背景の色がゆっくり移り変わる（グラデーションアニメーション） | — |
| 背景に、色ではなく形や粒で動きを出したい | ブロブ・ウェーブ（SVG・図形の動き）・パーティクル背景（画像の動き） | — |
告知バーの流れる文字型は、文のお知らせを流すものです。ここのループスライダーは、ロゴやカードを帯にして流すもので、読ませるより数の多さを見せます。並び方のわかる一覧の読み込みには、部品の動きの読み込み中の仮の形が光る（スケルトンローディング）も向いています。
どの型でも守ること
- 5秒を超えて流れ続けるものには、止めるボタンを付ける。マーキーと無限カルーセルは、ほかの内容と並んで動き続けるので、
buttonの「止める」を置き、押したら「再開する」に替えます。マウスを重ねている間も止めます。 - 画面の外では止める。
IntersectionObserverで見張り、見えていない間はanimation-play-state: pausedにします。root: documentを付けると、iframe の中や埋め込みでも同じように見張れます。 - 動きを控える設定では、止まった絵にする。マーキーはロゴを折り返して全部並べ、カルーセルは自動で送らず、そのほかは動きを外します（見本の「動きを控える設定で見る」で確かめられます）。
- 動かすのは transform と opacity だけ。背景のグラデーションも、
background-positionではなく大きく作った面をtransformで動かします。 - 付ける場所と数を絞る。脈打つボタンは1画面に1つ、浮かせる飾りは3つくらいまで、動く背景は1ページに1か所までにします。何でも動いていると、どこを見ればよいのかがわからなくなります。
よくある質問 (FAQ)
自動で始まり、5秒を超えて動き続けるなら必要です。ウェブのアクセシビリティの指針（WCAG 2.2 の「一時停止、停止、非表示」）では、ほかの内容と並んで自動で動き続けるものに、止める・隠す手段を求めています。動くものがあると本文に集中できない人や、流れるロゴの名前を読みたい人のためです。ここのコードでは、止めるボタンに加えて、マウスを重ねている間と画面の外にある間も止めています。
読ませるかどうかで分けます。マーキーは止まらずに流れ続けるので、1つずつ読ませるものには向かず、取引先のロゴのように「たくさんある」ことを見せる帯に使います。無限カルーセルは1枚ずつ送って止まるので、お客さまの声のように1枚ずつ読んでほしいカードに使います。どちらも、最後の次に先頭が切れ目なく続きます。
transform と opacity だけを動かし、画面の外で止めれば、ほとんど重くなりません。この2つはブラウザが描き直さずに動かせます。重くなりやすいのは、background-position や box-shadow を動かす作りと、見えていない場所でも動かし続ける作りです。ここのコードは、グラデーションも大きく作った面を transform で動かし、6型とも画面の外では止めています。
止め方と、速さの数字です。「ロゴを流して」「ふわふわさせて」だけだと、止める手段がない作りや、画面の外でも動き続ける作り、継ぎ目で途切れる作りになりがちです。ここの指示文は、止めるボタン・マウスを重ねたとき・画面の外・動きを控える設定のそれぞれでどうするかと、秒速や1往復の時間を数字で書き、Marquee のような英語の一般名も添えています。