【配信】模様の背景 10デザイン｜万華鏡・ステンドグラス・大理石・枯山水｜BGM配信や作業配信の下地に｜動画ではないので継ぎ目なし・軽い・設定ボタン(⚙)つき・登録不要

配信画面いっぱいに敷く、ゆっくり変わり続ける「模様」の背景です。BGM配信・作業配信・待機画面の下地にどうぞ。万華鏡・ステンドグラス・水面の波紋・枯山水の砂紋など、名前で言える模様を10デザインそろえました。

動画ファイルではありません。その場で描いているので、10デザイン合わせて zip が 130KB ほど。ループの継ぎ目もありません。

背景なので、初期値の動きはかなり遅くしてあります（速さ 0.35）。上に文字やカメラを載せる前提で、10種とも真ん中がうるさくならない構図にしています。

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

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

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

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

・kaleidoscope.html … 万華鏡（鏡で折り返した硝子の欠片が、ごくゆっくり回ります）

・stainedglass.html … ステンドグラス（鉛線で区切ったガラスに、光の帯が流れます）

・ripple.html … 水面の波紋（3か所から輪が広がり、重なった所が干渉の模様になります）

・zengarden.html … 枯山水の砂紋（まっすぐな熊手の線と、石のまわりだけ同心円の輪）

・marble.html … 大理石（石の流れと、うねりながら枝分かれする脈）

・textile.html … 織物（縦糸の上を横糸が1本おきにくぐります。色の縞がゆっくり移ります）

・tiles.html … タイル（釉薬の照りが、面から面へ移っていきます）

・moire.html … モアレ（細い格子2枚のずれから、太い縞が生まれて動きます）

・lava.html … 溶岩ランプ（蝋のかたまりが左右に分かれて、ゆっくり上下します）

・paperfold.html … 折り紙（三角の面が、折り角の変化にあわせて明暗を入れ替えます）

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

◆ 上に文字やカメラを載せるなら

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

・?dark=on で全体を暗く沈められます（真ん中はもう少し落ちます）

・一行だけ出したいときは ?text=BGM配信中 で置けます（文字の色・大きさも指定できます）

・にじませたいときは ?blur=14。輪郭を消すと、さらに主張しなくなります

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

◆ 設定ボタン（⚙）

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

配色も、速さも、模様の大きさも、URLを書き換えずに設定できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

・?density=0.6 … 模様の細かさ（0.3〜2。初期 1）

・?blur=14 … にじみ（0〜40。初期 0。0で輪郭くっきり）

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

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

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

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

配色（?palette=）

・kaleidoscope … twilight（初期）/ amber / moss / rose

・stainedglass … chapel（初期）/ forest / amber / night

・ripple … lake（初期）/ ink / dawn / moss

・zengarden … sand（初期）/ ash / dusk / clay

・marble … carrara（初期）/ nero / verde / rosso

・textile … linen（初期）/ indigo / wine / moss

・tiles … seaglass（初期）/ terracotta / cobalt / ivory

・moire … graphite（初期）/ ink / teal / sepia

・lava … amber（初期）/ plum / sea / ash

・paperfold … kraft（初期）/ snow / indigo / sage

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

◆ OBSへの入れ方

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

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

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

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

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

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

◆ ご注意

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

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

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

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

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

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

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

◆ 特長

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

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

・1920x1080 での1コマの描画時間は、10デザインとも実測で 0.1〜5 ミリ秒です

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

・動画ではないので容量はごくわずかで、ループの継ぎ目もありません

・Chrome／Edge で動作確認済み

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

◆ こんな方に

・BGM配信や作業配信で、画面が寂しいのをどうにかしたい方

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

・待機画面やカメラの下に敷く、主張しすぎない下地を探している方

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

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