OBS用 グラスモーフィズム テキストスクロールオーバーレイ｜リアルタイム編集対応 / Scrolly Glass for OBS

下記の動画で実際の商品の操作感も確認出来ます。

https://youtube.com/shorts/Erq9Pr3g380?si=Hq7yMV3VUeLcm65M

すりガラスのような質感のバーにテキストを流せる、

グラスモーフィズムデザインのテキストスクロールオーバーレイです。

OBSドックから直接テキスト・カラー・フォントをリアルタイムで変更できます。

購入前に、通常デザインとして作成したScrolly Live for OBSがあります。

https://flatshop.booth.pm/items/8448731

UI感は無料のブラウザ版でデザインや使い心地をお試しいただけます。

https://frworks805.github.io/scrolly/

配信中にテロップ内容をすぐ変えたい方に。

OBSを操作しながらドックで直接編集でき、変更はオーバーレイに即時反映されます。

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

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

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

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

「ガラスの濃さ」を下げるほど背景が透けて見えます。

暗い背景・明るい背景のどちらでも馴染みますが、

映像や画像の上に重ねると特にガラスらしさが際立ちます。

■ 同梱ファイル

dock.html 設定UI（OBSドックに登録するファイル）

overlay-ws.html オーバーレイ本体（ブラウザソースに登録するファイル）

README_JA.txt 日本語README

README_EN.txt English README

■ 動作環境

OS ：Windows 10 / 11

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

OBS ：OBS Studio 30以降

■ 主な機能

・テキストをドックから直接編集、オーバーレイにリアルタイム反映

・アイコン選択（なし含む10種）

・日本語対応Googleフォント 8種

・バーの形（まるい / しかくい）

・スクロールのON/OFF・速度調整

・バーの幅調整（100〜800px）

・文字サイズ調整（バーの高さと連動して自動調整）

・文字の太さ（Light / Regular / Medium / Bold）

・背景色・テキスト色のプリセット＋カラーコード直打ち

・色の反転（ワンクリックで背景色とテキスト色を入れ替え）

・接続状態の表示

■ セットアップ

【Step 1】

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

OBS → ツール → obs-websocket 設定

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

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

【Step 2】

オーバーレイをブラウザソースとして追加する

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

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

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

ファイル ：overlay-ws.html を選択

幅 ：dock.html で設定したバーの幅に合わせる

高さ ：dock.html で設定したバーの高さに合わせる

（文字サイズ13pxの場合は44pxが目安）

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

dock.html のプレビュー下部に推奨サイズが表示されるので参考にしてください。

【Step 3】

ドックを登録する

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

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

名前 ：Scrolly（任意）

URL ：file:/// に続けて dock.html のフルパスを入力

例）file:///C:/Users/ユーザー名/Desktop/Scrolly Live for OBS/dock.html

「追加」を押すとOBS内にドックパネルが表示されます。

■ OBSのブラウザソースサイズについて

バーの幅・文字サイズを変えるたびに、

dock.html のプレビュー下部に推奨サイズ（幅・高さ）が表示されます。

OBSのブラウザソース設定に合わせて調整してください。

設定後は Alt + ドラッグで端をトリミングして配置してください。

■ 注意事項

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

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

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

・認証（パスワード）が有効な場合は接続できません。

obs-websocket 設定で「認証を有効にする」をオフにしてください。

■ ご利用について

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

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

■ 免責事項

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

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

■ サポートについて

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

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