【配信】いまの状態バー 12デザイン｜作業中・休憩中をキー1つで切り替え｜経過時間つき・状態は好きなだけ登録・OBS用・設定ボタン(⚙)つき・登録不要

配信画面のすみに置きっぱなしにして、「いま何をしているか」を1行で出す帯です。「作業中」「休憩中」「もうすぐ戻ります」――状態はいくつでも自分で登録できます。OBSの「対話」でキーボードの 1〜9 を押すと、その状態にパッと切り替わります。

同じ機能のまま、見た目だけ違うものを12デザインそろえました。背景は透過なので、ゲーム画面や待機画面の上にそのまま置けます。

動画ファイルではありません。その場で描いているので、容量はごくわずかで、ループの継ぎ目もありません。文字はHTMLの文字なので、どんな大きさでもにじみません。

単一HTML・インストール不要・アカウント不要・オフライン動作。OBSのブラウザソースに入れるだけ。日本語／English 切替対応。

━━━━━━━━━━━━━━━━━━

◆ 収録している12デザイン

━━━━━━━━━━━━━━━━━━

・pill.html … 丸い錠剤（角を完全に丸めた1粒。いちばん素直な形）

・tag.html … タグ・付箋（左が尖った荷札。見出しの札が状態の色になります）

・led.html … ドットマトリクス（黒い盤に光る粒で字が出ている風）

・neon.html … ネオン（ふちも文字も発光。たまにチカッと瞬きます）

・terminal.html … ターミナル（等幅。プロンプトと点滅カーソルつき）

・paper.html … 紙のラベル（明朝。左上にテープで留めてあります）

・badge.html … バッジ（二重の縁で囲った記章）

・minimal.html … 極細の一行（下地はほぼ無し。左の細い線だけが状態の色）

・glass.html … すりガラス（半透明の札に光の帯）

・pixel.html … ドット絵（角ばった二重の枠。丸も四角）

・ribbon.html … リボン（両端を燕尾に切った帯）

・marquee.html … 電球の枠（ふちの電球が順に流れて光ります）

━━━━━━━━━━━━━━━━━━

◆ 状態の切り替えかた

━━━━━━━━━━━━━━━━━━

OBSのソース一覧でこの帯を右クリック →「対話」を選び、その窓の中でキーを押します。

・1 〜 9 … その番号の状態にする

・→ … 次の状態へ ／ ← … 前の状態へ

・切り替えた状態はこのブラウザに保存されます。ソースを更新してもOBSを再起動しても、最後に選んだ状態のままです

・数字キーで直接飛べるのは9件目までです（10件目より先は → ← で送れます）

・「対話」の窓は閉じても構いません

━━━━━━━━━━━━━━━━━━

◆ 状態の書きかた

━━━━━━━━━━━━━━━━━━

⚙の「状態」の欄に、1行に1件書くだけです。件数に上限はありません。

作業中 22c55e

休憩中 f59e0b

まもなく戻ります 38bdf8

・名前のうしろに半角スペース＋6桁の色（#は不要）を書くと、その状態の「色の丸」になります

・アイコンの代わりに記号を出したいときは、名前の頭に書いてください（例:「■ 収録中」）

・初期状態では 作業中／休憩中／まもなく戻ります／配信準備中／雑談中 の5件が入っています

━━━━━━━━━━━━━━━━━━

◆ 経過時間も出せます

━━━━━━━━━━━━━━━━━━

⚙の「その状態になってからの経過時間を出す」を入れると、状態名のうしろに経過時間が出ます（例: 休憩中 · 12:34）。初期は出ません。

・数え始めは「その状態に切り替えた瞬間」です。切り替えるたびに 0:00 から数え直します

・切り替えた時刻も一緒に保存されるので、画面を開き直しても続きから数えます（休憩に入って何分経ったかが、ソースを更新しても分かります）

・ブラウザの保存が消えているときは、素直に 0:00 から数え直します

・1時間を超えると 1:02:03 の形になります

━━━━━━━━━━━━━━━━━━

◆ 設定ボタン（⚙）

━━━━━━━━━━━━━━━━━━

状態も、色も、置く場所も、URLを書き換えずに設定できます。

1. ソース一覧の帯を右クリック →「対話」を選ぶ

2. 画面にマウスを乗せると、右上に ⚙ が出ます（出ないときは S キー）

3. 変更して「保存して閉じる」

・普段 ⚙ は見えないので、配信画面には映りません

・設定は保存され、OBSを再起動しても残ります。「設定を初期化」で購入時の設定に戻せます

・?key=a ?key=b を付けると、同じデザインでもシーンごとに別の状態にできます

※ 設定の保存先はブラウザごとに別々です。Chromeで開いて設定してもOBS側には反映されません。OBSで使うぶんは、必ずOBSの「対話」画面の中で設定してください。

━━━━━━━━━━━━━━━━━━

◆ 12デザインすべてに共通の設定

━━━━━━━━━━━━━━━━━━

・?states=作業中|22c55e|休憩中|f59e0b … 状態の一覧（1件1行。| でも改行でも区切れます）

・?s=2 … いま何番目か（1から数える。初期は1）

・?elapsed=on … その状態になってからの経過時間を出す（初期は出しません）

・?dot=off … 状態の色の丸を消す ／ ?label=いま … 左の見出し（空にすると消えます）

・?theme=cyan … 配色（デザインごとに3〜4色）

・?color= / ?accent= / ?bgcolor= … 色を自分で指定（#は不要）

・?pos=br … 画面のどこに置くか（tl / tc / tr / ml / mc / mr / bl / bc / br の9箇所。初期は tl＝左上）

・?scale=1.4 … 大きさ（0.3〜4）／ ?alpha=40 … 帯の下地の濃さ（0〜100。0で文字だけ）

・?anim=off … 動きを止める（丸の明滅・電球・カーソルの点滅）

・?remember=off … 切り替えた状態を覚えない

・?lang=en … 英語表示 ／ ?mode=stream … ⚙を完全に出さない

━━━━━━━━━━━━━━━━━━

◆ OBSへの入れ方

━━━━━━━━━━━━━━━━━━

1. ソース →「＋」→「ブラウザ」

2.「ローカルファイル」にチェック → 使いたい .html を選ぶ

3. 幅・高さは配信画面と同じ大きさ（例: 1920 x 1080）を入れる

4. ソース一覧でいちばん上（＝いちばん手前）に置く

帯は画面の左上に出ます。置く場所は ⚙ から9箇所選べます。

━━━━━━━━━━━━━━━━━━

◆ ご注意

━━━━━━━━━━━━━━━━━━

・効果音はありません（表示のみです）

・状態の切り替えは手で押すものです。ゲームや配信ソフトの状況を自動で読む機能はありません（視聴者コメントの集計や、外部アプリ・APIとの連携もありません）

・キー操作はOBSの「対話」の窓の中でだけ効きます。OBS全体のホットキーではありません

・経過時間は「その状態に切り替えてから」の時間です。いまの時刻は出しません

・ブラウザの保存を消すと、いまの状態と経過時間は初期値に戻ります

・状態名が長すぎて帯が画面幅に収まらない場合は、末尾が「…」で省略されます

━━━━━━━━━━━━━━━━━━

◆ 特長

━━━━━━━━━━━━━━━━━━

・文字はHTMLの文字、飾りだけキャンバス。どの解像度でもにじみません

・外部への通信は一切ありません（ネット接続不要・Webフォントなし）

・飾りは「その時刻の絵」を毎回計算しているだけなので、長時間つけっぱなしでもメモリが増えません

・動画ではないので容量はごくわずかで、ループの継ぎ目もありません

・Chrome／Edge で動作確認済み

・配信可・商用利用可（同梱の利用規約参照）

◆ こんな方に

・席を立つたびに「休憩中」の画像を差し替えている方

・作業配信で、いま何をしているかを常に出しておきたい方

・休憩から何分経ったかを、自分と視聴者の両方に見せたい方

万が一素材に不備がありましたらメッセージまでお願いします。

不具合・ご要望は BOOTH のメッセージからどうぞ。