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