配信画面のまわりを囲む「枠」です。画面いっぱいの大きさで置くと、真ん中は完全に透明のまま、ふちだけに枠の絵が出ます。ゲーム画面・カメラ・立ち絵の上にそのまま重ねるだけで、画面がぴしっと締まります。位置合わせは要りません。 枠は静止画ではありません。ずっと静かに動き続けます。光が流れる、線が呼吸する、粒が回る——配信中つけっぱなしにできる、うるさくない動きにしてあります。動きが邪魔なときは設定ひとつで静止画にできます。 動画ファイルではありません。その場で描いているので、容量はごくわずかで、ループの継ぎ目もありません。どの解像度に置いてもにじみません。 単一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 のメッセージからどうぞ。