【無料】OBS用 ガラス枠オーバーレイ｜10色・2タイプ / Stream Frame for OBS

配信画面のフチを、すりガラス風の枠で囲むOBS用オーバーレイです。

ブラウザソースに読み込むだけで、画面全体に上品な枠を重ねられます。

四辺の枠と四隅のコーナーの2タイプ、

枠の内側は透明／うっすらガラスを切り替えられます。

アクセントカラーは10色から選べ、配信のテーマカラーに合わせられます。

雑談配信・ゲーム配信・作業配信の画面演出に。

どんな配信画面にもなじむ、控えめで上品な枠です。

■ 2つの形

● 四辺の枠

画面のフチ全体を、ぐるりとガラスの枠で囲みます。

● 四隅のコーナー

四つの角にL字の飾りだけを置く、控えめなスタイル。

枠の内側は「透明」（中央がそのまま透ける）と

「うっすらガラス」（画面全体に薄いガラスをかける）を選べます。

■ アクセントカラー10色

Ocean / Crimson / Sunset / Lemon / Forest /

Mint / Night / Pop Pink / Purple / Mono

「つける」を選ぶと、枠の内側に選んだ色の細い光が入ります。

■ 同梱ファイル

stream_frame.html オーバーレイ本体

dock.html 設定パネル

README_JA.txt 日本語README

README_EN.txt English README

■ 動作環境

OS ：Windows 10 / 11

macOS（動作するはずですが動作確認はWindowsのみ）

OBS ：OBS Studio 30以降

※ ドックの設定を反映するため、OBSのWebSocketを有効にする必要があります。

※ フォントの読み込みにインターネット接続が必要です。

■ 主な機能

・枠の形を2タイプから選択（四辺の枠 / 四隅のコーナー）

・枠の内側を切り替え（透明 / うっすらガラス）

・アクセントカラー10色

・枠の太さ・角の丸みを調整

・コーナーの長さを調整（コーナー選択時）

・ガラスの濃さ・フチのはっきり感を調整

・すべての操作がOBS上のパネルで完結

・設定はブラウザに自動保存（再起動後も維持）

■ セットアップ

【Step 1】

OBSのWebSocketを有効にする（初回のみ）

OBS → ツール → obs-websocket 設定

「WebSocketサーバーを有効にする」にチェック

「認証を有効にする」はオフにする（必須）

【Step 2】

OBSのソースパネルで + → ブラウザ を追加する

以下を設定してください。

ローカルファイル ：チェックを入れる

ファイル ：stream_frame.html を選択

幅 ：1920（配信解像度に合わせる）

高さ ：1080

透明な背景 ：チェックを入れる

【Step 3】

OBS → ビュー → ドック → カスタムブラウザドック から

dock.html を登録してください。

（詳しい手順はREADMEに記載しています）

【Step 4】

ドックのパネルから、枠の形・色・太さなどを設定してください。

変更はオーバーレイにリアルタイムで反映されます。

■ 操作方法

ドックパネルの上部にプレビューが表示されます。

実際のオーバーレイと同じ見た目を見ながら調整できます。

枠の形・内側・色・太さなどをボタンとスライダーで切り替えられます。

■ グラスモーフィズムデザインについて

枠は半透明のガラス風デザインです。

上から差す光・ガラスの厚み・すりガラスのざらつき・

フチのハイライトを重ねて質感を表現しています。

※ OBSのブラウザソースの仕様上、ガラスのぼかしは

　背後の配信映像には適用されません。

　（半透明・ノイズ・ハイライトで質感を表現しています）

■ 注意事項

・OBSのブラウザソース設定で

　「シーン切り替え時にページを更新」をオフにすることを推奨します。

・dock.html のURLは file:/// から始まるローカルパスで指定してください。

・オーバーレイとドックは同じフォルダに置いてください。

■ ご利用について

配信での使用は、商用・非商用問わず自由です。

再配布・改変・転売はご遠慮ください。

■ 免責事項

本アプリの使用によって生じたトラブルや損害については、責任を負いかねます。

OBS Studioのアップデート等により、動作しなくなる場合があります。

■ サポートについて

不具合やご要望がありましたら、お知らせください。

可能な範囲で確認しますが、対応をお約束するものではありません。