【Studio初心者ガイド】LoopBoxで無限ループを設定する｜ロゴマーキーやスクロールテキストを作成

Studioの機能「LoopBox」を使えば、ロゴや画像、テキストを自動で流し続ける表現を作れます。

これまで実装に手間がかかっていたマーキー（動いて流れる表示）のような表現を、Studioエディタ上で直感的に取り入れられる点が特徴です。

流れる方向は上下左右から選択できます。横方向だけでなく、縦方向にも流せるため、より自由でシームレスな動きのあるデザイン表現が可能です。

LoopBoxでできること

LoopBoxでは、主に以下のような表現を作成できます。

ロゴスライダーやロゴマーキーを作成できる

LoopBoxを使うと、複数のロゴ画像を横方向に流し続けるロゴスライダーやロゴマーキーを作成できます。

たとえば提携企業や導入企業のロゴを横並びに配置し、右側から新しいロゴが流れ込むような演出が可能です。

【構成例】

LoopBox（水平、右から左、速度50）
├── ロゴ画像1
├── ロゴ画像2
├── ロゴ画像3
└── ロゴ画像4

ニュースティッカーやスクロールテキストを作成できる

LoopBoxでは、お知らせやキャンペーン情報を横方向に流すニュースティッカーも作成できます。

たとえば、期間限定セールや重要なお知らせなどを、目にとまりやすいスクロールテキストとして表示できます。

【構成例】

LoopBox（水平、右から左、速度80）
└── テキスト「🎉 期間限定セール開催中！ 🎉」

バナー画像を縦方向に無限スクロールできる

LoopBoxは横方向だけでなく、縦方向のループ表現にも対応しています。

複数のバナー画像を下から上へ流すことで、縦方向に連続してバナーを見せる表現を作成できます。

【構成例】

LoopBox（垂直、下から上、速度40）
├── バナー画像1
├── バナー画像2
└── バナー画像3

LoopBoxの設定方法

LoopBoxは「置く → 中に入れる → 動きを設定する」の順で設定します。

1. LoopBoxを追加する

まず、エディタ上でLoopBoxを配置します。

手順は以下のとおりです。

・画面左のナビゲーションから「追加」アイコン（赤四角）をクリックする

・「基本」タブ（赤四角）を選択する

・「インタラクション」から「LoopBox」（赤四角）を選択する

・クリックまたはドラッグ＆ドロップで画面に配置する

これで、LoopBoxの土台が完成します。

2. LoopBox内に子要素を追加する

LoopBoxは、中に子要素を入れないと動きません。

ループさせたい内容を追加します。

入れられる要素は以下です。

・テキスト
・画像
・アイコン

など。

LoopBoxの初期値はテキストが羅列されたものになっています。

画像やアイコンなどを入れたい場合は、以下のようにサイズを少し大きくすることでLoopBox内に入るようになります。

入れ込む子要素は、ボックスを追加したり、コピー＆ペーストしたりして任意の数に増やすことができます。

3. スクロールの動きを設定する

次に、右パネルの「ループ」タブ（赤四角）で、速度や方向など、スクロールの動きを設定します。

速度を設定する

「速度」（赤四角）でスピードを決めます。

単位はpx/s（1秒で進む距離）で、初期値は60px/sになっています。

ポイント
・数値が大きい → 速くなる
・0にすると停止する
・スライダーでも調整できる

流れる方向を設定する

「方向」（赤四角）で、コンテンツが流れる方向を設定できます。

方向は、子要素の並び方によって変わります。

横並びの場合
・右から左
・左から右

縦並びの場合
・下から上
・上から下

ポイント
・並びはflexDirectionに依存する
・画面幅（ブレイクポイント）ごとに変更できる

ホバーで停止を設定する

「ホバーで停止」（赤四角）で、マウスを重ねたときにアニメーションを停止するかを設定できます。

ONにするとマウスを乗せたとき止まり、OFFだとずっと動き続けます。

プレビューで確認する

再生ボタン（赤四角）をクリックすると、設定内容に応じたアニメーションの動きを確認できます。

設定後は、動きが速すぎないか、流れる方向が合っているかを必ず確認しましょう。

LoopBoxの注意点

LoopBoxを使う前に、仕様や制限を確認しておきましょう。表示や動作に関わる重要なポイントがあります。

ボックスのはみ出し設定は自動的に非表示になる

通常のボックスでは、「表示」「非表示」「スクロール」のはみ出し設定を選択できます。これは、親ボックスからはみ出した子要素（オーバーフロー）をどのように見せるかを制御する機能です。

しかし、LoopBoxではループ表現を成立させるために、はみ出し設定に自動的に「非表示（overflow: hidden）」が適用されます。

LoopBoxは、子要素を自動的に複製し、途切れずに流れ続ける仕組みです。このとき、ボックスの外側にはみ出した要素が見えてしまうと、ループのつなぎ目が表示され、不自然な見た目になります。

そのため、LoopBoxでは領域外の要素を必ず隠す必要があり、はみ出し設定は変更できない仕様になっています。

通常のボックスで設定できる以下の項目は、LoopBoxでは使用できません。

・スクロール表示（overflow: scroll）
・はみ出し表示（overflow: visible）
・その他のはみ出し関連の設定

また、スクロール機能を使ってコンテンツを操作することもできません。LoopBoxはあくまで「自動で流れ続ける表示」を作るための機能です。

そのため、以下のような使い分けが必要です。

・手動でスクロールさせたい → 通常のボックスを使用する
・自動で流れる演出を作りたい → LoopBoxを使用する

「動きを減らす」設定が有効な場合は自動停止する

OSやブラウザで「動きを減らす」設定が有効になっている場合、LoopBoxのアニメーションは自動的に停止します。

画面の動きが苦手な方や、動きによって体調に影響が出やすい方でも安心して利用できるよう、特別な設定を行わなくても動きが抑えられる仕組みになっています。

スクリーンリーダーでは複製要素が読み上げられない

LoopBoxでは、ループのために同じ要素が自動でコピーされますが、画面の内容を音声で読み上げる機能（スクリーンリーダー）では、元の要素だけが読み上げられる仕組みになっています。

そのため、同じ内容が何度も繰り返し読み上げられることはありません。

LoopBoxのレスポンシブ設定

LoopBoxは、画面サイズが変わると自動的にレイアウトを再計算します。

画面サイズに応じて、適切な方向とクローン数でアニメーションを再生します。

また、LoopBoxではブレイクポイント単位で以下のスタイルを調整できます。

• 子要素の並び方向（flexDirection）

• 要素間の余白（gap）

• その他のデザイン関連スタイル

PC、タブレット、スマートフォンなど、表示サイズに合わせてLoopBoxの見え方を調整したい場合に便利です。

LoopBoxのトラブルシューティング

LoopBoxを設定しても、思ったように動かない場合があります。

よくある問題と対処方法を確認しておきましょう。

LoopBoxがスクロールしない場合

LoopBoxがスクロールしない場合は、まず子要素が入っているか確認してください。

LoopBoxは、最低1つ以上の子要素が必要です。子要素がない場合、アニメーションは動作しません。

次に、速度の値が0になっていないか確認しましょう。

速度を0にすると、アニメーションは停止します。

また、OSやブラウザの「動きを減らす」設定が有効になっている場合も、LoopBoxのアニメーションは自動停止します。

子要素の間に隙間ができる場合

LoopBoxの子要素の間に隙間ができる場合は、gapプロパティを確認します。

また、子要素にmarginが設定されていると、想定よりも余白が大きくなる場合があります。

隙間が気になる場合は、gapやmarginの値を調整しましょう。

スクロールがカクつく場合

LoopBoxのスクロールがカクつく場合は、アニメーションの負荷が高くなっている可能性があります。

まずは速度を少し遅くして、負荷を軽減します。

子要素の数が多い場合は、要素数を減らすことも検討しましょう。

画像を使っている場合は、ファイルサイズを圧縮するなど、画像の最適化も有効です。

まとめ

LoopBoxは、ロゴや画像、テキストを自動で流せる機能です。

これまで手間がかかっていたロゴスライダーやスクロール表示も、かんたんに作れるようになります。

速度や方向を設定するだけで、途切れずに流れる動きのあるデザインが作れます。

動きがつくだけで、サイトの印象や見やすさが大きく変わります。