【配信】粒と流れの背景 12デザイン｜降る粒・昇る泡・火の粉・渦・光の筋・流れる砂｜真ん中を空けられるので立ち絵と重ねられる｜動画ではないので継ぎ目なし・軽い・設定ボタン(⚙)つき・登録不要

画像や動画ではありません。その場で描いて「ずっと動き続ける」背景です。設定ボタン(⚙)から配色も速さも変えられて、zipは12デザイン合わせて170KBほど。

配信画面いっぱいに敷く «粒と流れ» の背景を12デザイン。絵ではなく、細かい粒・筋・流れだけで組み立ててあります。BGM配信・作業配信・待機画面・雑談配信の下地にどうぞ。

いちばんの特徴は「真ん中を空けられる」こと。立ち絵やカメラを置く場所だけ粒を薄くできるので、背景と主役がぶつかりません。空ける量は0〜1で自由に決められます。

単一HTML・インストール不要・アカウント不要・オフライン動作。OBSのブラウザソースに入れるだけ。日本語／English 切替対応。

━━━━━━━━━━━━━━━━━━

◆ 収録している12デザイン

━━━━━━━━━━━━━━━━━━

・drift.html … 漂う粒（大小の粒がゆっくり横へ流れていきます）

・bubble.html … 昇る泡（輪郭だけの泡が、揺れながら下から上へ昇ります）

・flowfield.html … 流れ場の筋（見えない流れに沿った筋の上を、明かりが走ります）

・vortex.html … 渦（粒が外から内へ、渦を巻きながら吸い込まれていきます）

・snow.html … 降る粒（細かい粒が三層に分かれて、横風に流されながら降ります）

・ember.html … 舞い上がる火の粉（下から吹き上がる粒が、揺らぎながら消えます）

・ribbon.html … 流れる帯（幅の変わる帯が、中に筋を走らせながら横へ流れます）

・swarm.html … 集まって散る点（散らばった点が寄り集まり、また散っていきます）

・burst.html … 弾ける火花（画面のあちこちで、粒が放射状に弾けて広がります）

・beam.html … 走る光の筋（細長い光が、尾を引いて画面を斜めに横切ります）

・sandfall.html … 流れ落ちる砂（細かい粒が筋になって落ち、下に砂の山があります）

・magnet.html … 磁力線の粒（動く極のあいだに張った曲線の上を、粒が走ります）

━━━━━━━━━━━━━━━━━━

◆ 真ん中を空ける（?center=）

━━━━━━━━━━━━━━━━━━

・?center=0 … 空けない（画面いっぱいに粒が出ます）

・?center=0.35 … 初期値。立ち絵1体ぶんくらいが静かになります

・?center=1 … いちばん大きく空ける

⚙の「中央を空ける量」でも同じことができます（0.05きざみ）。

完全に消すのではなく薄く残すので、背景がぷっつり切れて見えません。

━━━━━━━━━━━━━━━━━━

◆ 背景を透過して使う（?bg=off）

━━━━━━━━━━━━━━━━━━

?bg=off を付けると地の色を描かず、粒と筋だけになります。

OBSのブラウザソースは背景が透けるので、自前の画像や映像の上に粒だけを重ねられます。

━━━━━━━━━━━━━━━━━━

◆ 設定ボタン（⚙）

━━━━━━━━━━━━━━━━━━

配色も、速さも、中央を空ける量も、URLを書き換えずに設定できます。

1. ソース一覧の背景を右クリック →「対話」を選ぶ

2. 画面にマウスを乗せると、右上に ⚙ が出ます（出ないときは S キー）

3. 変更して「保存して閉じる」

・普段 ⚙ は見えないので、配信画面には映りません

・設定は保存され、OBSを再起動しても残ります。「設定を初期化」で購入時の状態に戻せます

・?key=a ?key=b を付けると、同じデザインでもシーンごとに別の設定にできます

※ 設定の保存先はブラウザごとに別々です。Chromeで開いて設定してもOBS側には反映されません。OBSで使うぶんは、必ずOBSの「対話」画面の中で設定してください。

━━━━━━━━━━━━━━━━━━

◆ 12デザインすべてに共通の設定

━━━━━━━━━━━━━━━━━━

・?palette=ink … 配色（デザインごとに4種。落ち着いた色が初期値です）

・?speed=0.2 … 動きの速さ（0.1〜3。初期 0.35）

・?center=0.6 … 中央を空ける量（0〜1。初期 0.35）

・?scale=1.6 … 粒の大きさ（0.3〜3。初期 1）

・?density=0.6 … 粒の多さ（0.3〜2。初期 1）

・?thick=1.8 … 線・尾の太さ（0.3〜3。初期 1）

・?bg=off … 地の色を描かない（背景が透過します）

・?dark=on … 全体を暗く沈める

・?text=配信中 … 真ん中に一行だけ文字を出す（| で改行）

・?textsize=1.4 / ?textcolor=ffffff … 文字の大きさ・色（色の#は不要）

・?lang=en … ⚙の表示言語 ／ ?mode=stream … ⚙を完全に出さない

配色（?palette=）

・drift … dusk（初期）/ moss / amber / paper

・bubble … aqua（初期）/ mint / plum / ink

・flowfield … teal（初期）/ ember / indigo / linen

・vortex … night（初期）/ gold / rose / steel

・snow … ice（初期）/ graphite / cobalt / cream

・ember … fire（初期）/ copper / teal / violet

・ribbon … aurora（初期）/ dusk / peach / ivory

・swarm … ink（初期）/ cyan / clay / sage

・burst … spark（初期）/ cyan / rose / mono

・beam … cyan（初期）/ gold / violet / night

・sandfall … dune（初期）/ ash / rust / linen

・magnet … teal（初期）/ plum / amber / steel

━━━━━━━━━━━━━━━━━━

◆ OBSへの入れ方

━━━━━━━━━━━━━━━━━━

1. ソース →「＋」→「ブラウザ」

2.「ローカルファイル」にチェック → 使いたい .html を選ぶ

3. 幅・高さは配信画面と同じ大きさ（例: 1920 x 1080）を入れる

4. ソース一覧でいちばん下（＝いちばん奥）に置く

━━━━━━━━━━━━━━━━━━

◆ ご注意

━━━━━━━━━━━━━━━━━━

・効果音はありません（表示のみです）

・時計・カウントダウン・コメント表示などの機能はありません。背景だけです

・?text= は一行を置くための簡単なものです。時刻や自動更新はしません

・視聴者コメントの集計や、外部アプリ・APIとの連携機能はありません

・?density= や ?thick= を大きくすると、そのぶん描画は重くなります

・人物・動物・キャラクターは出てきません。粒と流れだけです

━━━━━━━━━━━━━━━━━━

◆ 特長

━━━━━━━━━━━━━━━━━━

・粒は「その時刻の居場所」を番号から毎回計算しているだけなので、長時間つけっぱなしでもメモリが増えません（900倍速で12時間ぶん回して確認済み。URLに ?qa=fast を付ければ同じ確認がご自身でできます）

・動きはちょうど一周でつながっています（最後のコマと最初のコマが画素まで完全に一致することを12デザインとも実測で確認済み）。動画ではないので継ぎ目が出ません

・1920x1080 での1コマの描画時間は、12デザインとも実測で 12〜22 ミリ秒（GPUを使わない設定のChromiumでの実測。毎秒46〜84コマ）

・外部への通信は一切ありません（ネット接続不要・Webフォントなし）

・Chrome／Edge で動作確認済み。OBS Studio 28以降のブラウザソース（Chromium）や、Streamlabs など、ブラウザソースがある配信ソフトでも同じように使えます

・配信可・商用利用可（同梱の利用規約参照）

◆ こんな方に

・立ち絵やカメラの後ろに敷く、主張しすぎない動く背景がほしい方

・重い動画ループを回さずに、軽い背景がほしい方

・絵柄のある背景だと自分の絵とケンカしてしまう、という方

万が一素材に不備がありましたらメッセージまでお願いします。

不具合・ご要望は BOOTH のメッセージからどうぞ。