【配信】光と色の背景 12デザイン｜オーロラ・プラズマ・水面の光・夕暮れの空色・回るグラデーション｜真ん中を静かにできるので立ち絵と重ねられる｜動画ではないので継ぎ目なし・軽い・設定ボタン(⚙)つき・登録不要

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

配信画面いっぱいに敷く «光と色» の背景を12デザイン。粒でも線でも模様でもなく、色が «面» のまま溶け合って移り変わります。輪郭のはっきりした形が出てこないので、上に載せた文字や立ち絵の邪魔をしません。BGM配信・作業配信・待機画面・雑談配信の下地にどうぞ。

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

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

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

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

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

・plasma.html … プラズマ（向きの違う色の波が重なって、干渉した所が灯ります）

・aurora.html … オーロラの幕（縦にゆれる光の幕が、重なりながら流れます）

・cloud.html … 流れる色の雲（色が練られるように混ざっていきます）

・sweep.html … 斜めに流れる光の帯（幅の広い光が、斜めに流れ続けます）

・wheel.html … 回るグラデーション（配色が中心のまわりをぐるりと回ります）

・glass.html … すりガラス越しの色（曇りガラスの向こうで色のかたまりが動きます）

・dusk.html … 夕暮れから夜へ（上から下への «色だけ» が、一周かけて移ります）

・swell.html … 光のうねり（横に長い光のふくらみが、うねりながら昇ります）

・breathe.html … 静かな明滅（大きな光だまりが、それぞれの速さで息をします）

・veil.html … 重なる色の幕（半透明の幕が向きを変えながら重なります）

・caustic.html … 水面越しの光（水の面で曲がった光が、網のように渡っていきます）

・bleed.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=rose … 配色（デザインごとに4種。落ち着いた色が初期値です）

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

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

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

・?depth=1.4 … 色の濃さ（0.3〜2。初期 1）

・?soft=1.6 … にじみの強さ（0.3〜2。初期 1。大きいほどぼやけます）

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

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

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

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

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

配色（?palette=）

・plasma … magma（初期）/ deepsea / orchid / citrus

・aurora … polar（初期）/ rose / cobalt / copper

・cloud … mist（初期）/ peony / jade / linen

・sweep … neon（初期）/ amber / mint / plum

・wheel … prism（初期）/ sunset / lagoon / ash

・glass … frost（初期）/ blush / moss / paper

・dusk … evening（初期）/ harbour / ember / frostnight

・swell … tide（初期）/ dune / violet / slate

・breathe … lantern（初期）/ aqua / berry / mono

・veil … silk（初期）/ teal / clay / ivory

・caustic … pool（初期）/ shallow / gold / night

・bleed … dye（初期）/ ink / tea / wave

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

◆ OBSへの入れ方

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

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

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

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

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

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

◆ ご注意

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

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

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

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

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

・?soft= を小さくすると細かくなりますが、そのぶん描画は重くなります

・人物・動物・キャラクター・風景は出てきません。光と色だけです

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

◆ 特長

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

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

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

・にじみは «小さく描いて引き伸ばす» 作りにしてあります。全画面をぼかす作りだと1コマ60ミリ秒を超えてしまうためです

・1920x1080 での1コマの描画時間は、12デザインとも実測で 25〜35 ミリ秒（GPUを使わない設定のChromiumで、画素の読み出しまで含めた値。毎秒29〜39コマ）。設定を全部いちばん重い側に振っても最悪 50ミリ秒（毎秒20コマ）

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

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

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

◆ こんな方に

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

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

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

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

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