LoopBoxは、子要素を自動的に複製してマーキー（marquee）のように無限ループする特殊なボックスです。バナーやロゴマーキー、スクロールテキストなどを画面端で途切れずに流れ続ける表現を実現します。
LoopBoxを設定する
LoopBoxは、以下の手順で設置します。
1. LoopBoxを追加する
画面左のナビゲーションから[追加]アイコン
をクリックします。[基本]タブを選択します。
タブ内を下スクロールし、[インタラクション]から[LoopBox]を選択し、スクリーンに配置します。
2. LoopBox内に子要素を追加する
LoopBoxは、子要素を追加してはじめてアニメーションが動作します。
3. スクロールの詳細を設定する
右パネルの[ループ]タブで、スクロール条件の設定をします。
※ パネルが閉じている場合は、右パネルを開いてください。
速度（px/s）
コンテンツが、1秒間あたりに何ピクセル進むかを指定します。デフォルト値は60px/sで、値が大きいほど、要素の流れる速度が速くなります。
[速度] の数値またはスライダーを操作して、速度を設定します。
Tips: 速度を「0」に設定すると、アニメーションが停止します。
方向
子要素の並び方（
flexDirection）に応じて、選択できる方向が変わります。水平方向（
row/row-reverse）の場合右から左
左から右
垂直方向（
column/column-reverse）の場合下から上
上から下
Tips: スクロール方向は、ブレイクポイント単位で切り替えが可能です。
ホバーで停止
[ホバーで停止] のチェックボックスをONにすると、ホバー時にスクロールしているコンテンツが停止します。OFFの場合、マウスカーソルの位置に関係なく、常にアニメーションが再生され続けます。
4. LoopBoxをプレビューする
[ループ]タブ上の[プレビュー] で、設定内容に応じたループアニメーションのサンプルを確認できます。
LoopBoxの注意点
ボックスのはみ出し設定
ボックスのはみ出し設定は、自動的に非表示（overflow: hidden）が適用されます。
領域外の要素を隠すための必須設定のため、スクロール（overflow: scroll ）や、 表示（overflow: visible）など、他の設定は無効になります。
アクセシビリティへの対応
動きを減らす設定への対応
OSやブラウザで「動きを減らす」（prefers-reduced-motion）が有効な場合、LoopBoxのアニメーションは自動的に停止します。
動きに敏感なユーザーに対し、追加の設定不要で配慮された表示になります。
スクリーンリーダー対応
LoopBox内部で生成される複製要素には、aria-hidden="true"が自動的に付与されます。
オリジナルの要素のみスクリーンリーダーで読み上げられるため、同じ内容が繰り返し読み上げられることはありません。
LoopBoxとレスポンシブ設定
画面サイズが変わると、LoopBoxは自動的にレイアウトを再計算し、適切な方向とクローン数でアニメーションを再生します。
LoopBoxは、各ブレイクポイント単位で以下のスタイルを調整できます。
要素の並び方（flexDirectionなど）
要素間の余白（gapなど）
その他、デザイン関連のスタイル
トラブルシューティング
LoopBoxでよく発生する問題と対処方法をまとめます。
LoopBoxがスクロールしない
LoopBox内に子要素が追加されているか確認します。LoopBoxには、最低1つ以上の子要素が必要です。
速度の値が0になっていないか確認します。
OSやブラウザの「動きを減らす」設定が有効になっていないか確認します。
子要素の間に隙間ができる
LoopBoxのgapプロパティを調整します。
子要素に設定しているmarginの値を確認します。
スクロールがカクつく
速度を少し遅くして、負荷を軽減します。
子要素の数が多い場合は数を減らします。
画像の場合は、ファイルサイズを圧縮するなど最適化を行います。
Tips: LoopBoxの代表的な構成例
企業ロゴマーキー
LoopBox（水平、右から左、速度50）
├── ロゴ画像1
├── ロゴ画像2
├── ロゴ画像3
└── ロゴ画像4
提携企業などのロゴを横並びに配置し、常に新しいロゴが右側から流れ込む演出を行えます。
スクロールテキスト
LoopBox（水平、右から左、速度80）
└── テキスト「🎉 期間限定セール開催中！ 🎉」
お知らせやキャンペーンメッセージを、目にとまりやすいスクロールテキストとして表示できます。
バナー画像ループ
LoopBox（垂直、下から上、速度40）
├── バナー画像1
├── バナー画像2
└── バナー画像3
縦方向にバナーを無限スクロールさせ、複数のバナーを連続して見せる表現を作成できます。
ループ ループボックス