配信開始前の待機画面に、開始までの残り時間と今日の進行予定をまとめて表示できるOBSブラウザソースです。 この商品は、静止画像1枚の待機画面では弱くなりがちな「あと何分で始まるか」「今日はどの順で進むか」「今どの項目を見せたいか」を、1つのHTML/CSS/JSでまとめて見せるための実用品です。 単なる下部テロップではなく、待機画面、開始直前、進行中の案内に寄せた待機特化パネルとして作っています。PNG1枚の見た目素材ではなく、購入後に自分の配信タイトル、開始時刻、進行項目を差し替えてそのまま動かせる形です。 同梱内容 ・index.html ・theme.css ・countdown-panel.js ・config.sample.json ・導入README ・利用範囲とサポート範囲 ・プレビュー画像 この商品でできること ・開始時刻までのカウントダウン表示 ・進行予定の一覧表示 ・現在項目と次項目の強調表示 ・4レイアウト切り替え ・3テーマ切り替え ・ローカルHTML/CSS/JSだけでの運用 レイアウト ・full-panel: 中央へ大きく置く標準版 ・compact-corner: 左下や右下に置く省スペース版 ・sidebar-right: 右側へ縦長に置く版 ・ticker-countdown: 横長バー版 テーマ ・midnight ・citrus ・mono 向いている人 ・待機画面に開始時刻と進行予定をまとめて出したい人 ・PNG1枚ではなく動く情報表示を使いたい人 ・OBSへローカルファイルを入れるだけで使いたい人 ・タイトル、開始時刻、項目名だけ差し替えてすぐ使いたい人 用途別の使い方 ・雑談配信では、オープニング、近況、テーマ、締めの4項目で流れを見せやすいです。 ・作業配信では、何を作るかを短く書くことで待機中の離脱を減らしやすいです。 ・企画配信では、sidebar-rightで順番を見せつつactiveIndexで今どこかを目立たせやすいです。 ・TRPGやセッション配信では、シーン順や休憩タイミングを見せる用途に向いています。 最初の10分 1. index.htmlをChromeで開く 2. カウントダウンと進行表が見えることを確認する 3. startAtかtitleを1つだけ変える 4. themeかlayoutを切り替える 5. OBSブラウザソースへ読み込む 販売ページで見せる証拠 ・実際の待機画面 ・中身の分かる同梱ファイル一覧 ・導入手順と使い方 ・レイアウト比較とテーマ比較 ・preview 画像で見える使用状態 ・利用範囲、license、サポート範囲 利用範囲 購入者自身の配信、動画、告知制作に使えます。色、文言、項目名、開始時刻、レイアウトの改変も可能です。ライセンスの範囲で商用利用もできます。 サポート範囲 サポートはファイル不足、zip破損、READMEの明確な誤りの確認に限ります。個別のOBS設定代行、デザイン制作、外部サービス連携、新機能実装は含みません。support boundary の詳細は同梱ファイルで確認できます。 注意 ・コメント取得や外部API連携は含みません。 ・素材そのものの再配布や、ほぼ同一構成での再販売は禁止です。 ・個別のOBS設定代行、デザイン制作、機能追加は含みません。 この商品は、待機画面を一瞬だけ映える画像にするためではなく、配信内容と開始タイミングを視聴者へ分かりやすく伝えるための小さな運用道具として作っています。 OBS導入手順 1. OBSでブラウザソースを追加する 2. ローカルファイルにチェックを入れてindex.htmlを指定する 3. 幅1920 高さ1080を目安に読み込む 4. startAtとtitleを変える 5. layoutを切り替えて置き場所を決める 6. キャッシュ更新で再読込する よくある使い分け ・待機画面を主役にしたいときはcompact-corner ・進行表をしっかり見せたいときはfull-panel ・立ち絵と並べたいときはsidebar-right ・開始直前だけ短く見せたいときはticker-countdown よくある不安への答え ・外部URL不要です ・HTML CSS JSだけで動きます ・最初は開始時刻かタイトルだけ変えれば確認できます ・進行表は4項目前後で使うと読みやすいです ・利用範囲、license、サポート範囲は同梱ファイル内で先に確認できます ・config.sample.json をサンプルとして見ながら差し替えれば、最初の確認が速いです