【配信】画面フレーム 16デザイン｜真ん中は透明・ゲーム画面やカメラに重ねるだけ｜静かに動く枠・太さ/角丸/色を変更可・OBS用・設定ボタン(⚙)つき

配信画面のまわりを囲む「枠」です。画面いっぱいの大きさで置くと、真ん中は完全に透明のまま、ふちだけに枠の絵が出ます。ゲーム画面・カメラ・立ち絵の上にそのまま重ねるだけで、画面がぴしっと締まります。位置合わせは要りません。

枠は静止画ではありません。ずっと静かに動き続けます。光が流れる、線が呼吸する、粒が回る——配信中つけっぱなしにできる、うるさくない動きにしてあります。動きが邪魔なときは設定ひとつで静止画にできます。

動画ファイルではありません。その場で描いているので、容量はごくわずかで、ループの継ぎ目もありません。どの解像度に置いてもにじみません。

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

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

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

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

・neonline.html … ネオン管（ガラス管が明滅し、光が管の中を一周します）

・circuit.html … 基板（回路の帯。信号が3本のトレースを走ります）

・artdeco.html … アールデコ（金の刻みと段の角飾り。光の帯が一周します）

・sakura.html … 和の花びら（二重の細線の帯に、花びらがゆっくり落ちて回ります）

・gradientflow.html … 流れるグラデーション（色が枠をぐるりと回り続けます）

・pixelborder.html … ドット絵の枠（大きめの粒が3段。明るさの波が斜めに流れます）

・filmstrip.html … フィルム（パーフォレーションの穴が流れます）

・techhud.html … HUD（四隅の括弧が伸び縮み。走査マーカーが一周します）

・paperframe.html … 和紙（紙の繊維とちぎったふち。とてもゆっくり呼吸します）

・goldline.html … 金の細線（二重の細線を光の粒が走ります）

・rainbowrgb.html … ゲーミングRGB（色が一周し、内側へやわらかく光がこぼれます）

・dashed.html … 破線（内と外の破線が逆向きに流れます）

・cornerbrackets.html … 四隅の括弧だけ（いちばん控えめ。長さが静かに伸び縮みします）

・steam.html … 湯気（やわらかい光がふちに沿って立ちのぼります）

・glassedge.html … すりガラス（曇ったふち。反射がゆっくり流れます）

・scanline.html … 走査線（ブラウン管の縞。明るい走査帯が抜けていきます）

16枚は見た目だけが違い、機能と設定はまったく同じです。

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

◆ 真ん中は完全に透明です

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

枠のふち以外は1画素も塗っていません。だからゲーム画面にも、カメラにも、立ち絵にも、背景素材にも、そのまま重ねられます。切り抜きも、透過PNGの用意も要りません。

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

◆ OBSへの入れ方

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

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

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

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

4. ソース一覧でいちばん上（＝いちばん手前）に置く

カメラだけを囲みたいときは、幅・高さをそのカメラソースと同じ大きさにして、カメラの真上に重ねてください。

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

◆ 設定ボタン（⚙）

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

太さも、色も、角の丸みも、URLを書き換えずに設定できます。

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

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

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

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

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

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

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

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

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

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

・?thick=64 … 枠の太さ（0〜200 px。末尾に % を付けると画面の短いほうに対する割合。例 ?thick=6%）

・?inset=40 … 画面の端からどれだけ内側に置くか（0〜400 px。% も使えます）

・?radius=32 … 角の丸み（0〜400 px。% も使えます）

・?theme=cyan … 配色（デザインごとに3〜4色）

・?color= / ?accent= … 主の色・差し色を自分で指定（#は不要・6桁）

・?speed=0.5 … 動きの速さ（0.2〜3。初期は1）

・?alpha=60 … 枠の濃さ（20〜100。初期は100）

・?anim=off … 動きを止めて静止させる

・?sides=lr … 出す辺を選ぶ（t=上 r=右 b=下 l=左 の組み合わせ。例 lr／tb／rbl＝上なし）

・?top=off … 上だけ消す（?right=off ?bottom=off ?left=off も同じ形）

・?lang=en … ⚙パネルを英語表示に ／ ?mode=stream … ⚙を完全に出さない

・?key=a … ⚙の保存先を分ける

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

◆ こんな使い方も

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

・カメラだけを囲む（カメラと同じ大きさにして真上に重ねる）

・下だけ空けてテロップを置く（?bottom=off）

・左右だけ細く出す（?sides=lr&thick=24）

・薄くして常設にする（?alpha=40&speed=0.4）

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

◆ ご注意

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

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

・文字は出ません。枠だけの素材です（名前ラベルなどは入っていません）

・枠の太さは、真ん中の穴が必ず残るところまでで頭打ちになります

・角の丸みを大きくすると、四隅を使うデザイン（HUD／四隅の括弧／アールデコ）は角の飾りが切れます。0 のままがきれいです

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

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

◆ 特長

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

・真ん中は完全に透明。下のソースがそのまま見えます

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

・枠は「その時刻の絵」を毎回計算しているだけなので、長時間つけっぱなしでもメモリが増えません

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

・Chrome／Edge で動作確認済み

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

◆ こんな方に

・配信画面が間延びして見えるので、ふちだけ締めたい方

・カメラの枠を毎回画像で作り直している方

・重い動画ループを回さずに、動く枠を置きたい方

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

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