【OBS用/HTML/MacOS対応】お知らせスライダー OBS用 配信者向けウィジェット
- Digital580 JPY
配信中に流れる「お知らせテロップ」を、もっとかわいく・わかりやすく表示しませんか？ OBSに読み込むだけで使える、シンプル＆カスタマイズ自由なお知らせスライダーです🎀
✅ 主な機能
📝 好きなテキストを表示（例：次回配信日など） 🎨 背景色・文字色を自由に変更可能 🕐 スクロール速度の調整OK 🖋 日本語対応フォント『Kosugi Maru』使用 💾 ローカル保存対応（設定内容は自動で記憶されます）
📦 内容
- display.html（お知らせ表示用） - panel.html（カスタマイズ用コントロールパネル） - README.txt（使い方の説明＆クレジット）
🧷 使い方・設定方法
本商品は「操作用パネル（panel.html）」と「配信用ディスプレイ（display.html）」の2つのファイルを使用します。 【⚠️ 設定時の重要ポイント】 OBSでブラウザソースを追加する際、必ず「ローカルファイル」のチェックを外して、URL欄に直接ファイルパス（file:///...）を貼り付けてください。 【推奨サイズ】 ・操作用パネル (panel.html)：幅 800px／高さ 800px 以上 ・配信用ディスプレイ (display.html)：幅 1920px／高さ 100px（配信画面の幅に合わせて調整） ━━━━━━━━━━━━━━━━━ 🟦 【Windows をご利用の方】 ━━━━━━━━━━━━━━━━━ 1. OBSに「ブラウザソース」を2つ追加し、それぞれのURL欄に【panel.html】と【display.html】のファイルパスを貼り付けます。 2. 操作用パネル（panel.html）のソースを右クリックし、「対話（Interact）」を選択します。 3. 表示されたパネルから直接文字を入力し、文字色・背景色・スクロール速度の調整を行ってください。 （※パネルの「更新」を押すと、配信画面用の display.html 側に自動で反映されます✨） ━━━━━━━━━━━━━━━━━ 🍎 【Mac をご利用の方（重要！）】 ━━━━━━━━━━━━━━━━━ Mac版OBSの仕様上、パネル内での文字入力ができない制限がございます。そのため、URLの末尾に設定用の文字を書き加えてテキストを設定します。 ▼ 設定手順 1. OBSに「ブラウザソース」を2つ追加し、それぞれのURL欄に各ファイルのパスを貼り付けます。 2. 操作用パネル（panel.html）のURLの末尾に、以下のように「?text=表示したいお知らせ」を追加して「OK」を押してください。 ✅ URLの作成例： .../panel.html?text=本日の配信は21時からスタート！コメント大歓迎です！ 🎮 配信中の操作（カラー・速度の変更）について テキスト以外の【マウスクリック・ドラッグ操作】はMac版でも正常に行えます！ テキストをURLで設定した後は、通常通り「対話」ウィンドウを開き、背景色や文字色の変更、スクロール速度の調整をマウスで楽しくカスタマイズしてください✨
🔧 こんな場面におすすめ！
📢「 新しいグッズが販売開始されました！」などのお知らせ表示 🗓 次回の配信予定を画面下に流す 💬「コメントお気軽にどうぞ！」など視聴者向け案内
🔄 更新履歴 / Update Log
【2026.04.12 アップデート】 ✨ Mac環境への完全対応 ・Mac版OBSでのテキスト入力に対応 操作パネル（panel.html）のURL欄にパラメータ（?text=...）を追加することで、Mac環境でも自由にスライダーのテキストを設定できるようになりました。 ・「ローカルファイル」チェック不要のURL直接入力方式へ移行 文字入力制限を回避するため、ブラウザソースのURL欄に直接パスを入力する方式にマニュアルを改訂いたしました。設定したテキストは即座に配信用ディスプレイへ同期されます。
✅ 利用規約
- 収益化された動画・配信での使用OK - 色変更OK - クレジット表記：不要（ご記載いただけたらとても嬉しいです！） ※記載される場合は「X（旧Twitter）: @skrm_sozaiya」と表記ください - 自作発言・再配布・転売は禁止 - 素材再配布、商標登録、公序良俗に反する用途での利用は禁止 ※ 著作権は放棄しておりません