【配信】待機画面 第2弾 12デザイン｜開始時刻を入れるだけでカウントダウン｜「開いてから◯分後」でも数えられる・過ぎたら文字が変わる・OBS用・設定ボタン(⚙)つき・登録不要

配信を始める前の「まもなく開始します」の画面です。開始時刻を入れておけば、そこまでのカウントダウンが大きく出ます。背景はずっと動き続けます。同じ機能のまま、見た目だけ違うものを12デザインそろえました。

画像や動画ではありません。その場で描いて動かしているので、容量はごくわずかで、ループの継ぎ目もありません。文字はHTMLの文字なので、どんな大きさでもにじみません。設定は⚙のパネルから変えられます。

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

※ 既刊「待機画面 9デザイン」の第2弾です。設定のしかたは同じで、絵柄は1つも重なっていません。第2弾だけでも単体でお使いいただけます。

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

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

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

・sand.html … 落ちる砂（砂粒が降りつづけ、下の砂丘がゆっくり寄せては返します）

・ripple.html … 広がる輪（3か所から輪が静かに広がって消えます）

・flip.html … めくれる札（無地の札が並び、ばらばらに1枚ずつめくれます）

・liquid.html … 満ちる液体（水面が上下し、下から泡が昇ります）

・motes.html … 集まる光の粒（外から中心へ、光の粒が吸い寄せられます）

・paperwave.html … 波打つ紙（斜めの折り目に沿って、一枚の紙がうねります）

・gears.html … 噛み合う歯車（大小5つの歯車が、それぞれの速さで回ります）

・contour.html … 湧き出す等高線（地形図の等高線がゆっくり形を変えます）

・vortex.html … 渦のドット（点が渦の腕に並び、外へ流れながら回ります）

・brush.html … 筆の運び（太さの変わる筆跡が、書かれては薄れていきます）

・origami.html … 折り紙の面（折られた紙の面が、光の当たり方を変えながら動きます）

・radar.html … 掃引レーダー（走査線が回り、残光と光点が出ます）

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

◆ 開始時刻の入れかた

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

⚙の「開始の目標 — 時 / 分」に、その日の開始時刻を入れるだけです（初期値は 21:00）。真ん中の大きな数字が、その時刻までの残り時間になります。

・開始時刻を過ぎると、数字が「まもなく開始」の文字に変わります。出す文字は ⚙ で好きに書けます

・日付は入れません。毎日おなじ時刻で数え直します（21:00 を過ぎたら翌日の 21:00 まで）

・カウントダウンではなく「いまの時刻」を大きく出すこともできます

◆「開いてから◯分後」でも数えられます

時刻ではなく「この画面を出してから15分後」で数えたいときは、⚙の「開いてから何分後を目標にするか」に 15 と入れます（初期値は 0 ＝ 使わない）。休憩に入るときに画面を出し直せば、そこから15分を数えます。1以上を入れているあいだは「開始の目標 — 時 / 分」より優先されます。

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

◆ 待機画面のほかにも使えます

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

・休憩中の画面に（「開いてから15分後」にして、見出しを「休憩中」に）

・終了画面に（大きい数字を消して、見出しだけ出す）

・配信中の常設に（背景を切ると文字だけになり、透過して画面のすみに置けます）

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

◆ 設定ボタン（⚙）

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

文字も、色も、開始時刻も、URLを書き換えずに設定できます。

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

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

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

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

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

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

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

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

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

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

・?goalh=21&goalm=30 … 開始の目標時刻（初期は 21:00）

・?in=15 … 「開いてから15分後」を目標にする（0＝使わない。初期は0）

・?show=clock … 大きく出すもの（countdown＝残り時間（初期）/ clock＝いまの時刻 / elapsed＝この画面を開いてからの経過 / none＝出さない）

・?kicker= / ?title= / ?sub= … 上の小さい行／見出し／下の一行（空にすると消えます）

・?over=はじめます … 開始時刻を過ぎたときに出す文字

・?clock=on … 下の行にいまの時刻も出す ／ ?format=12 … 12時間表示（初期は24時間）

・?theme=jade … 配色（デザインごとに3〜4色。明るい配色も入っています）

・?align=left … 文字を左寄せ ／ ?scale=1.3 … 文字の大きさ（0.3〜3）

・?speed=0.5 … 背景の動きの速さ（0.2〜3）

・?scrim=0 … 文字の下に敷く下地の濃さ（0〜100。初期28。0で背景そのまま）

・?bg=off … 背景を描かない（＝文字だけ・透過）

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

・?lang=en … 英語表示 ／ ?key=a … ⚙の保存先を分ける ／ ?mode=stream … ⚙を完全に出さない

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

◆ OBSへの入れ方

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

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

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

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

4. ソース一覧でいちばん下（＝いちばん奥）に置く

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

◆ ご注意

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

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

・開始時刻は「時と分」だけです。日付の指定はできません

・「経過」と「開いてから◯分後」は、その画面を開いた時＝0 から数えます

・視聴者コメントの集計や、外部アプリ・APIとの連携機能はありません

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

◆ 特長

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

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

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

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

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

・Chrome／Edge で動作確認済み。OBS Studio 28以降のブラウザソース（Chromium）や、Streamlabs など、ブラウザソースがある配信ソフトでも同じように使えます

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

◆ こんな方に

・開始前の「あと何分」を、毎回画像で作り直している方

・すでに第1弾をお持ちで、シーンごとに別の絵柄を使い分けたい方

・待機画面・休憩画面・終了画面を1つでまかないたい方

・重い動画ループを回さずに、軽い待機画面にしたい方

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

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