画像や動画ではありません。その場で描いて「ずっと動き続ける」背景です。設定ボタン(⚙)から配色も速さも変えられて、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 のメッセージからどうぞ。