Loop Atelier の使い方

Loop Atelierは、独自の図形を組み合わせる無料のVJループ作成ツールです。利用者登録や有料APIは使わず、対応するPCブラウザ内で描画・動画化します。

先に確認:Loop Atelierが向いている用途

向いている:曲のBPMが分かっていて、短い無音の背景動画に拍の動きや拍カウンターを加えたい場合。BPMを入力するかタップテンポで指定できます。120 BPM・2小節なら4秒です。

向いていない:音楽ファイルやマイクからの自動解析、外部DJ機器とのクロック同期、透明背景・音声入りの書き出し、長時間映像や一括書き出しが必要な場合。

拍は入力・タップしたテンポに基づきます。実際の音との同期精度や各環境での保存操作は未確認です。作例で用途を確かめ、出力後は利用先の機器・ソフトでも確認してください。

120 BPM・2小節の作例を見る ↗

まずは3ステップ

  1. 見た目を選ぶ:画像をクリックして好きな柄を選びます。
  2. 色・動きを調整:色と速さを選び、「動きを見る」で再生します。そのままの設定でも使えます。
  3. 動画を保存:長さとサイズを選び、「動画を作成する」を押します。完成後、プレビューの下の「できた動画を保存」を押します。

文字や画像を入れるときは「細かく調整」を開きます。編集内容を次回も使いたいときは「作業を保存」から保存できます。

β版です。共通の描画・動画化処理から720p・30fps・8秒のMP4作例を生成しています。保存ボタンを使う一連の操作、すべての設定・ブラウザ・OS・スマートフォン・VJソフトでの動作は未確認です。

作例MP4を保存(8秒・約6.4MB)

追加機能の作例

4レイヤー、仕上げ効果、文字、独自の図形PNGを重ねて、共通の描画・動画化処理から1280×720・30fps・4秒のMP4を制作しています。実際の出力ファイルの幅・高さ・長さを読み取りました。保存ボタンや全組み合わせの動作確認を示すものではありません。

4レイヤーの作例MP4(4秒・約3.4MB) / 作例の設定JSON / 重ねた図形PNG

設定JSONを読み込んだ後、文字・画像の欄で同梱の図形PNGを選ぶと、画像も重ねられます。

18プリセットの作例一覧

1. スタイルを選ぶ

18種類の独自図形・18プリセットから始めます。雰囲気はTechno・Ambient・Geometricで絞り込めます。最大4枚のレイヤーを重ね、各レイヤーの表示・合成方法・不透明度・専用色・大きさ・回転・位置・周回の倍率と方向を選べます。プリセットを切り替えても、画面の形・長さ・書き出し設定は維持します。

2. 色と動きを整える

Aurora・Ember・Violet・Ice・Copper・Rose・Acid・Monoの8配色と、3色+背景色のカスタム配色を選べます。仕上げでは明るさ・コントラスト・彩度・色相・ぼかし・光のにじみ・RGBずれ・周辺減光・ミラーを調整できます。全体の密度と周回数も選べます。シード番号を保存すると同じ設定を再現できます。PNGには再生位置の映像を保存します。プレビュー外のラベル・ボタンは画像に入りません。

プレビューは一時停止から始まります。「再生」で動きを確認し、位置のスライダーで好きな場面を選べます。強いストロボや高速な明滅の機能は用意していません。

3. 秒数またはBPMで長さを決める

4・8・16秒、または60〜180 BPMと2・4・8小節を選べます。BPM指定は4拍子を前提に「60 ÷ BPM × 4 × 小節数」で秒数を計算します。

指定例長さ
120 BPM・4小節8秒
128 BPM・8小節15秒
120 BPM・8小節16秒

動画の長さは選択したフレームレートの1フレーム単位に丸めます。端数が出るBPMでは、指定した理論上の尺と実際の尺に小さな差が出ます。最終フレームに開始フレームの複製を足さず、一周をフレーム数で分けて描く設計です。実際の接続部やVJソフトでのループ再生は未確認です。

4. 動画を作り、保存する

16:9・9:16・1:1、720p相当または1080p相当、30・60 fpsを選べます。横長の場合、720pは1280×720、1080pは1920×1080です。縦長は縦横を入れ替え、正方形は720×720または1080×1080になります。動画は音声なし・背景が不透明の映像です。この無料Web版には透過動画、4K、音への自動反応、音楽の読み込み、DXV/HAP出力はありません。画質は軽量・標準・高画質から選べます。

「動画を作る」を押すと端末内で処理します。できあがったら「動画を保存」を押します。処理中に別の設定へ変更することはできません。中止は可能です。端末により作成時間が変わり、ブラウザのメモリーを利用します。大きい設定で失敗する場合は720p・30 fps・4秒からお試しください。160 MiBを超える出力は中止する設計です。

MP4はH.264、WebMは対応状況に応じてVP9またはVP8を使用します。ブラウザ・OSのエンコーダーが利用できない形式では、作成できない旨を表示します。PC版Chrome / Edgeの現行環境を想定していますが、すべての環境での動作を保証するものではありません。

4Kローカル版の試作と作例

別のPCローカル版の試作で、元の図形から3840×2160・30fps・4秒のMP4を生成しています。720p映像の拡大ではありません。この無料Web版の動画出力は720p・1080pです。4K版の販売価格・販売公開はまだ決定していません。

4Kの作例を保存(4秒・約21.5MB)

4K版の初期案は、対応PCブラウザで動く買い切りのローカル版、4Kは30fps・16秒までです。GPU・OS・ブラウザにより動画形式への対応が異なり、4K/60fpsや全環境での保存・再生は未確認です。

BPMに合わせて、映像で拍を取る

「ビートを使う」、または右側の「ビート」タブで同期をONにします。BPMは60〜180。4拍子・2/4/8小節で尺を決め、図形の大きさと光の強さを拍ごとに動かせます。毎拍・2拍ごと・小節ごとの間隔、強さ、余韻、小節の1拍目の強調を選べます。「4つ打ち」「ゆるい脈動」「拍カウンター」からも始められます。

拍表示は「1・2・3・4」「広がる輪」「4本のバー」から選べます。表示の位置・大きさ・色を調整でき、表示を外して図形の動きだけ使うこともできます。この表示は保存するPNGと動画にも描きます。ビートの設定は設定JSON・共有リンク・お気に入りに含みます。

曲のBPMを入力するか、「タップテンポ」を曲の拍に合わせて4回ほど押して設定します。曲の1拍目で「1拍目から再生」を押すと、プレビューの拍の頭を合わせ直せます。これは入力・タップしたBPMを使う方式です。音楽ファイルやマイクからの自動検出、外部のDJ機器とのクロック接続は実装していません。動画は従来どおり音声なしです。

例:120 BPMは1拍0.5秒。2小節は8拍・4秒です。プレビューは指定BPMと時刻から進め、描画が遅れた場合は次の描画で現在の拍に追いつく設計です。実際の音との同期精度、操作遅延、全環境の動作は未確認です。

書き出す動画は固定フレームレートのため、尺を1フレーム単位で丸めます。映像内の拍は小節数に合わせて一周するように計算し、実効BPMが指定値と異なる場合は画面に表示します。拍の境界もフレーム単位になります。曲へ長く重ねる場合は、生成した映像を利用先で合わせてください。

120 BPMのデモ設定を開く →

共通の描画・動画化処理から、120 BPM・2小節・8拍・4秒の作例を制作しました。作例MP4(約3.6MB) / 設定JSON / 4拍の作例。保存ボタン・タップ操作・音との実際の同期精度や全環境での動作を示すものではありません。

文字と画像を重ねる

文字は最大120文字・3行まで。書体、色、大きさ、位置、揃え、不透明度、縁取り、静止・ゆっくり上下・穏やかな濃淡を選べます。文字はHTMLとして実行せず、映像へ描きます。使用できる書体は端末にあるフォントで変わります。

画像はPNG・JPEG・WebP、10MB・1600万画素以内を1枚選べます。端末内で読み込み、長辺2048px以内に縮小して使います。大きさ、位置、不透明度、回転、静止・上下・1周回転を選べます。画像は図形と仕上げ効果の後、文字の前に重なります。権利を持つ画像を利用してください。外部画像の権利は付与しません。

文字・画像はプレビュー、PNG、動画で同じ描画処理に渡します。実際の保存操作やすべての組み合わせは未確認です。画像本体は設定JSON・共有リンク・お気に入りに含みません。別の端末や再訪時は画像を選び直してください。

共有・履歴・お気に入り

「設定を共有」で設定を含むURLをコピーできます。設定はURLの#以降に入り、このツールは共有先へ設定を送信しません。文字の内容もURLに入るため、共有したい情報だけ入力してください。ローカル版は設定JSONで共有します。

「戻す」「やり直す」は、このページを開いている間の最大30段階の設定履歴です。連続したスライダー操作はまとめます。ファイルの選択や画像の削除そのものは取り消せません。お気に入りは保存操作をした場合だけ、このブラウザのlocalStorageに最大12件保存します。ブラウザのデータを消すと失われます。「全画面」はプレビューを大きく表示します。

設定の保存と再利用

「設定を保存」でJSONファイルに保存できます。次回は「設定を読み込む」から選びます。Loop Atelierのバージョン1・2形式・64KB以内が対象です。保存はバージョン2形式です。古い2レイヤー設定は新しい4レイヤー形式へ読み替えます。作業中の設定は自動保存されません。ページを閉じる前に、ご自身で保存してください。読み込んだJSONは設定値として扱い、スクリプトとして実行しません。

出力物の利用条件

当サイトが権利を持つ範囲で、本ツールの図形から作成した映像・PNGを、商用・非商用の動画・配信・ゲーム・イベント等の作品に利用し、加工し、依頼を受けた完成物として依頼者へ納品することを非独占で許可します。ロゴ・透かし・クレジットの表示は不要です。独占権や商標権を与えるものではありません。

音楽・キャラクター・ロゴ・他者の映像やフォント等の権利は付与しません。本体や改変したツールを再配布・再販売したり、別のオンラインサービスとして提供することは許可していません。使用ライブラリMediabunnyには別途MPL-2.0が適用され、同ライセンスに基づく権利を制限しません。使用ライブラリとライセンスを確認できます。

本ツールは試作として提供します。個別制作・固定期間の有人対応・継続更新・特定環境や用途への適合を約束するものではありません。不具合や提供内容の変更がありえます。ご自身の用途に合うか、生成したファイルを実際の利用先で確認してください。既存BOOTH商品の条件は、それぞれの商品説明に従います。

データと広告について

本ツールのアプリコードは、設定・図形・生成した映像を外部へアップロードしません。映像はブラウザ内で作成します。ログイン、マイク、カメラ、決済情報、閲覧者の名簿は要求しません。画像の選択は任意です。選択したファイルは端末内で処理します。ファイルを保存する際は利用者が端末上の保存操作を行います。お気に入りの保存・読み込みには、このサイトのlocalStorageを使います。自動保存、アクセス解析用Cookie、独自のアクセス計測は実装していません。共有リンクの設定には入力した文字も含まれ、リンクを渡した相手が読めます。画像本体は含みません。

サイト配信サービス側では、通常のページ・ファイル配信やセキュリティ対策のために通信情報等が処理される場合があります。これはツールの入力・出力データを当アプリがアップロードすることとは異なります。

現在は運営者自身がBOOTHで販売する商品の案内を掲載しています。第三者の広告配信・アフィリエイトリンクは無効です。今後掲載する場合は、対象プログラムの承認・掲載条件、必要なプライバシー説明と同意対応を整え、広告・PRであることが分かるように表示します。動画・PNGへの広告挿入や、広告のクリックを保存の条件にすることはありません。

制作と参考情報

図形生成コード、画面、作例、説明文は独自に制作し、AIを制作補助に使っています。他サイトの図形・シェーダー・コード・ロゴを取り込んでいません。動画の格納処理には、作者の公開するMediabunny 1.61.5をライセンスに従って利用しています。

作成画面へ戻る ↗