【作り方】Studioのループアニメーションの実装方法｜カルーセル不要の無限ループ

この記事の要点

• ループアニメーション（Loop Box）は、カルーセルを使わずに要素を等速で無限に流せるStudioの機能で、実装が簡単で挙動も安定します。
• 基本は「Loop Boxを設置 → 中に流したい要素を入れる → 速度・方向を設定」の3ステップで、画像・テキスト・動画を混在させることもできます。
• 中の子要素にホバーを設定すれば、流れながらカードが拡大するといった表現も作れます。

「ロゴや実績を横に流したいけれど、カルーセルの設定が複雑で挙動も不安定」「等速でなめらかに流れるスライダーを作りたいのに、うまくループしない」——Studioでスライダーを実装したことのある方なら、一度はこうした悩みに突き当たったのではないでしょうか。従来はカルーセルを応用して等速スライダーを作っていましたが、設定が煩雑で、枚数やタイミングによって動きが乱れることもありました。この記事では、Studioに追加された新機能「ループアニメーション（Loop Box）」を使って、無限に流れる表現をシンプルに実装する手順と、つまずきやすいポイントを解説します。なお本記事の内容は、150名以上が参加するノーコードコミュニティ「ノーコードサロン」に集まる制作現場の知見をもとに、実際に手を動かす際に迷いやすい箇所を優先して整理しています。

結論：等速の無限ループはLoop Boxで作るのが最も簡単

横に流れ続けるスライダーを作りたいなら、カルーセルではなく「Loop Box（ループボックス）」を使うのが現時点で最もシンプルで安定した方法です。Loop Boxは、中に入れた要素を指定した方向へ等速で無限に流し続ける機能で、カルーセルのように再生間隔やスライド数を細かく調整する必要がありません。ロゴの一覧やお客様の声のように「途切れず流したい」コンテンツに向いています。

Loop Boxの中に入れる要素は、リストである必要はありません。そのため画像・テキスト・動画を混在させることもでき、少し工夫すれば配置を上下にずらして動かすこともできます。表現の自由度が高いのが、従来のカルーセル応用にはなかった利点です。スライダー全般の考え方はStudioのカルーセルを自動再生する方法とあわせて読むと、どちらを使うべきか判断しやすくなります。

ループアニメーションを実装する手順

Loop Boxの設置から動きの設定までは、次の流れで進めます。細かなメニュー名はバージョンで変わることがあるため、「どの設定の近くにあるか」を意識して読み進めてください。

手順1：Loop Boxを設置する

左側のサイドパネルの基本タブから、インタラクションの「Loop Box」を選び、流したい場所に配置します。これがループアニメーションの土台になります。まずは空のLoop Boxを1つ置くところから始めましょう。

手順2：流したい要素を中に入れる

設置したLoop Boxの中に、流したい画像やロゴ、テキストを並べます。要素はリスト化されていないため、画像とテキストと動画を混在させても問題なく流せます。1周分の要素を並べたら、あとはStudio側が自動でつなげて無限ループにしてくれます。

手順3：速度・方向を設定する

Loop Boxを選択した状態で、流れる方向（左右・上下）とスピードを設定します。ロゴのように文字が少ないものはテンポよく、実績カードのように情報量が多いものはゆっくりめにすると見やすくなります。内容のボリュームに応じて速度を調整するのが、見やすいループの基本です。

ホバーで拡大するカードを作るコツ

Loop Boxは、流しながら個々の要素にホバー効果を付けることもできます。カードが流れてくる中で、マウスを乗せたものだけ拡大するといった表現です。手順は次のとおりです。

• Loop Boxを設置する
• Loop Boxの中の子ボックスすべてにホバーを設定する
• 変形（拡大・縮小）に任意の数値を設定する（例：拡大縦横300%）

子ボックス「すべて」にホバーを設定するのがポイントです。1つだけに設定すると、その要素が流れて画面外に出たときに効果が途切れてしまいます。全要素に同じ設定を入れることで、どのカードにマウスを乗せても同じ挙動になります。

よくあるつまずきと対処

ループアニメーションでよくあるのは「途中でカクつく」「スマホで見切れる」「重い」の3つです。カクつく場合は、1周分の要素の幅がLoop Boxの表示幅に対して中途半端で、つなぎ目が目立っていることが多いので、要素を十分な数だけ並べて隙間なくつなげましょう。スマホで見切れる場合は各要素の幅をモバイルで調整し、重い場合は流している画像を圧縮してから配置すると改善します。

• 途中でカクつく：1周分の要素が足りず、つなぎ目が目立っている
• スマホで見切れる：各要素の幅をモバイルで調整していない
• 動きが重い：流している画像を圧縮していない

実務での活用シーンと使い分け

ループアニメーションは、単に「動くから使う」のではなく、目的に合った場面で使うことで効果を発揮します。導入ロゴやパートナー企業の一覧、資格・受賞歴のアイコンなど「途切れず流し見してほしい情報」に向いており、逆に一つひとつをじっくり読ませたい情報には不向きです。流れて消えてしまうと、肝心の内容が読まれないまま通り過ぎてしまうためです。

ロゴ・実績の流し見に使う

取引先ロゴやメディア掲載実績のように、数が多く、それぞれを詳しく読ませる必要のないコンテンツは、ループアニメーションで横に流すと省スペースにまとまります。静止して並べるより動きで視線を引けるうえ、数が増えても表示領域が広がらないため、レイアウトが安定します。

主役のメッセージには使わない

ファーストビューのキャッチコピーや、最も伝えたいサービスの価値は、流れて消えるループではなく固定の要素として見せるのが鉄則です。ループはあくまで補助的な演出と位置づけ、核となるメッセージは確実に目に入る場所に置きましょう。ノーコードサロンでも、動きの多用でかえって伝わりにくくなった事例が共有されており、「動かす情報」と「固定する情報」を切り分ける設計が重視されています。

よくある質問

よくある質問1. ループアニメーションはFreeプランでも使えますか？

Loop Boxは基本機能として提供されているため、プランに関わらず利用できるケースが多いです。ただし提供状況はアップデートで変わることがあるため、実装前にご自身のプランで機能が表示されるかを確認してください。表示されない場合は、エディタのバージョンが最新かどうかもあわせて確認するとよいでしょう。

よくある質問2. カルーセルとループアニメーションはどちらを使うべきですか？

途切れず等速で流し続けたいならループアニメーション、1枚ずつ切り替えて見せたい・矢印やドットで操作させたいならカルーセルが向いています。ロゴや実績の流し見にはループ、じっくり読ませたいスライドにはカルーセル、という使い分けが目安です。詳しくはカルーセルの記事もあわせてご確認ください。

よくある質問3. 流れるスピードは後から変えられますか？

変えられます。Loop Boxを選択して速度の数値を変更するだけで、いつでも調整できます。公開後に「少し速すぎる」と感じたら微調整しましょう。速度は見やすさに直結するため、実機のスマホでも確認しながら決めるのがおすすめです。

まとめ

ループアニメーション（Loop Box）は、要素を入れて方向と速度を設定するだけで、等速の無限ループを簡単かつ安定して実装できる機能です。カルーセル応用よりシンプルで、画像・テキスト・動画の混在やホバー拡大にも対応できます。動きのあるサイト作りをさらに深めたい方は、Studioのアニメーションの付け方やスクロールエフェクトの設定方法もあわせて確認すると、機能ごとの使い分けが整理できます。まずは空のLoop Boxを1つ置いて、ロゴを数枚流すところから試してみてください。