◉
0000/00/00
00:00:00
≡
≡
≡
// PARTS
── HEADER
🔴
配信中バッジ
👤
プロフィール欄
✉️
メッセージ入力欄
🕐
時計(バー埋め込み型)
📺
テロップ(スクロール)
── BOX
🕐
時計(独立)
⏱
ストップウォッチ
🔢
カウンター
📝
メモボックス
▭
テキスト入力
◻
図形 ▶
▭
四角形
○
円
🏷
タイトルボックス
🖼
画像ボックス
── BACKGROUND
🖼️
背景を変える
── SYSTEM
⚙️
設定(保存・OBS接続)
📡
表示更新(別タブ)
📤
OBSに反映
// HOW TO USE
PARTS
DOUBLE CLICK
何もない場所でパーツ追加メニューを開く
MOVE & RESIZE
HEADER DRAG
ボックスを移動
LONG PRESS 0.2s
ボックス内のどこでも長押し → ドラッグで移動
HANDLE DRAG
ホバーで表示、ドラッグでリサイズ
≡ MENU
右上に出現 → 複製・文字サイズ・色変更・削除
SAVE / LOAD
AUTO SAVE
今の画面は自動で保存され、次に開いたときは続きから始まります
PRESET
今の画面に名前を付けて、いくつでも保存・読み込み
EXPORT
今の画面とプリセットをJSONファイルとしてダウンロード
IMPORT
書き出したJSONを読み込んで、今の画面とプリセットを復元
DISPLAY UPDATE
同じURLを別タブで開いている場合、その画面へ即座に反映(同一オリジンで開く必要あり)
OBS CONNECT
「⚙️ 設定」からOBSに接続すると、Chromeで編集した内容がOBSのブラウザソースに反映されます(OBSのWebSocketサーバーを有効にする必要あり)。確定モードではメニューの「📤 OBSに反映」か Ctrl+Enter で送ります
SPEC
CANVAS
1920 × 1080 px 推奨
Created by どんま / donnma web :
donnma.com
CLOSE
// BACKGROUND
飾りを追加
🌆 シティシルエット
▦ グリッド
≡ スキャンライン
色・画像
🎨 背景の色を選ぶ
📁 背景画像を選ぶ
消す
🧼 背景をすべて消す
飾り・色・画像をまとめて消して、透明(OBSでは下の映像が見える状態)にします。
CLOSE
// SETTINGS
保存・読み込み
今の画面は自動で保存され、次に開いたときは続きから始まります。取っておきたい画面は、名前を付けてプリセットにできます。
+ プリセットに保存
⬇️ ファイルに書き出す
⬆️ ファイルから読み込む
今の画面とプリセットを、まとめて1つのファイルに書き出します(画像も含む)。別のPCやブラウザへ持っていったり、バックアップにしたりできます。
OBS接続
OBSの「ツール → WebSocketサーバー設定」で「WebSocketサーバーを有効にする」をオンにし、「接続情報を表示」のポートとパスワードを入れてください。接続すると、ここでの編集をOBSのこのオーバーレイに送ります。
ポート
パスワード
反映のしかた
リアルタイム
確定したときだけ
「確定したときだけ」は、メニューの「📤 OBSに反映」か Ctrl+Enter を押したときにOBSへ送ります。配信中にこっそり直したいとき向けです。
● 未接続
🔌 接続
切断
// PROFILE EDIT
+ ADD
SAVE