【配信】待機画面 9デザイン｜開始時刻を入れるだけでカウントダウン｜過ぎたら文字が変わる・見出しは自由・OBS用・設定ボタン(⚙)つき・登録不要

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

開始時刻を過ぎると、数字は「まもなく開始」の文字に自動で切り替わります。その文字も自分で書けます。

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

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

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

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

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

・minimal.html … ミニマル（紙のような無地。秒の目盛だけが静かに進みます）

・neon.html … ネオンの地平線（夜のグリッドが手前へ流れ、遠くにビルの影）

・gradient.html … 流れるグラデーション（斜めの色帯がゆっくり動きます）

・terminal.html … ターミナル（黒地にログが流れ、走査線が入ります）

・washi.html … 和紙（紙の繊維・墨の円相・流水・朱の落款）

・broadcast.html … 放送のスタンバイ（下にカラーバー、セーフエリアの枠）

・aurora.html … オーロラ（星空にカーテンが揺れ、下は雪の稜線）

・grid.html … 製図の方眼（方眼が流れ、四隅にトンボ）

・film.html … フィルムのリーダー（円のワイプが1秒で1周）

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

◆ 開始時刻の入れかた

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

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

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

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

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

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

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

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

・休憩中の画面に（見出しを「休憩中」、戻る時刻を目標に入れる）

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

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

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

◆ 設定ボタン（⚙）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

・?theme=cyan … 配色（デザインごとに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 … 英語表示 ／ ?mode=stream … ⚙を完全に出さない

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

◆ OBSへの入れ方

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

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

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

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

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

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

◆ ご注意

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

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

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

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

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

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

◆ 特長

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

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

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

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

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

・Chrome／Edge で動作確認済み

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

◆ こんな方に

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

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

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

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

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