【配信】画面フレーム 第2弾 12デザイン｜真ん中は透明・ゲーム画面やカメラに重ねるだけ｜縄/組子/額縁/竹/ステンドグラス/電球のマーキー｜静かに動く枠・太さ/角丸/色を変更可・OBS用・設定ボタン(⚙)つき

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

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

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

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

※ 既に出している「画面フレーム 16デザイン」の第2弾です。題材は16デザインと1つも重ねていません（どちらか片方だけでも使えます）。

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

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

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

・rope.html … 縄（撚った縄がふちを一周し、撚り目がゆっくり流れます）

・kumiko.html … 組子（木の格子。斜めの桟が菱形を作り、明かりが一周します）

・lensbarrel.html … レンズの鏡筒（金属の筒。ローレットが回り、反射が逆向きに流れます）

・moulding.html … 額縁のモールディング（削り出しの木型。数珠と隅飾り。艶が流れます）

・tapeborder.html … テープで貼った縁（短いテープを傾けて貼り重ねた枠。艶が渡ります）

・rivetplate.html … リベット留めの鉄板（ヘアラインの鋼板。鋲が2列。反射が渡ります）

・stitch.html … ステッチ（革の帯に糸を通した縁。針目がゆっくり進みます）

・bamboo.html … 竹（青竹の稈と節。やわらかい明かりがゆっくり流れます）

・stainedglass.html … ステンドグラスの鉛線（色ガラスと鉛の桟。裏からの光が回ります）

・rulerscale.html … 目盛のついた定規（刻みと数字。カーソルが一周します）

・marquee.html … 電球のマーキー（劇場の看板。電球が3つおきに点いて走ります）

・chain.html … チェーン（金属の鎖が枠に沿って送られていきます）

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

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

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

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

枠のふち以外は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の「対話」画面の中で設定してください。

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

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

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

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

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

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

・?theme=brass … 配色（デザインごとに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）

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

◆ ご注意

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

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

・名前ラベルなどの文字入力機能はありません。枠だけの素材です（目盛のついた定規 rulerscale だけは、絵の一部として目盛の数字が出ます）

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

・角の丸みを大きくすると、四隅に飾りのあるデザイン（額縁のモールディング）は隅飾りが切れます。0 のままがきれいです

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

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

◆ 特長

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

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

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

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

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

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

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

◆ こんな方に

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

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

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

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

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