【配信】線と立体の背景 12デザイン｜等高線・製図方眼・回路・ワイヤーフレーム地形｜真ん中を空けられるので立ち絵と重ねられる｜動画ではないので継ぎ目なし・軽い・設定ボタン(⚙)つき・登録不要

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

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

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

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

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

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

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

・contour.html … 等高線（地図のような線が、湧いて・伸びて・消えていきます）

・grid.html … 方眼と座標（製図用紙の上を、十字の定規と寸法線が滑ります）

・circuit.html … 回路の光（基板の配線の上を、光の粒が走っていきます）

・wireframe.html … ワイヤーフレームの地形（起伏のある面が、手前へ流れてきます）

・polyhedron.html … 回る多面体（正二十面体・正八面体・立方体が、稜線だけで回ります）

・tunnel.html … 消失点のトンネル（六角形の輪が、奥から手前へ抜けていきます）

・extrude.html … 押し出した柱（等角投影の床に立てた四角い柱が、波で上下します）

・steps.html … 階段状のブロック（段々のブロックが、奥・中・手前と重なって流れます）

・dots.html … 点の格子（等間隔の点の大きさが、斜めに走る波で変わります）

・rings.html … 同心円のリップル（2つの中心から、輪が広がり続けます）

・stripes.html … 斜線ストライプ（幅の違う帯が、斜めに並んで流れます）

・hexcell.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=）

・contour … moss（初期）/ ink / amber / paper

・grid … blueprint（初期）/ paper / graphite / teal

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

・wireframe … night（初期）/ moss / ember / ice

・polyhedron … graphite（初期）/ gold / cobalt / rose

・tunnel … cyan（初期）/ plum / amber / ink

・extrude … slate（初期）/ clay / mint / ivory

・steps … dusk（初期）/ sand / copper / sea

・dots … ink（初期）/ cyan / rose / paper

・rings … teal（初期）/ graphite / amber / indigo

・stripes … ink（初期）/ mustard / sea / linen

・hexcell … mint（初期）/ cobalt / ember / ash

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

◆ OBSへの入れ方

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

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

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

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

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

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

◆ ご注意

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

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

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

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

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

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

・人物・動物・キャラクターは出てきません。線と図形だけです

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

◆ 特長

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

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

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

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

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

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

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

◆ こんな方に

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

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

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

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

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