縦画面のライブ配信のために、最初から1080×1920で作った「配信画面」のセットです📱 「まもなく開始」「配信中」「休憩中」「配信終了」の4画面が、8とおりの配色でそろっています。全部で32画面です。 ■ 横型の素材を縦画面に置くと、文字が読めません 横1920×縦1080の素材を縦画面に置くと、OBSが横幅1080に合わせて縮めるため、文字が3分の1くらいの大きさになります。 このセットは最初から1080×1920で組んであるので、縮みません。 さらに、縦画面はスマホで見られます。スマホのライブ画面は下のほう3割くらいがコメント欄とボタンで隠れます。 そこで、文字は画面の上〜中央に寄せて、下は意図的に空けてあります。 ■ 4つの画面 ・まもなく開始 … 開始予定時刻までのカウントダウン ・配信中 … 配信タイトル・経過時間・SNS（真ん中は映像用に大きく空けてあります） ・休憩中 … 戻るまでのカウントダウン ・配信終了 … 今日の記録と次回の告知 ■ 全8テーマ✨ ・コバルト（濃紺×水色・夜の配信やゲーム配信に） ・エンバー（黒×朱色・熱のあるゲーム配信に） ・抹茶（深緑×若草・作業配信やのんびり枠に） ・グレープ（濃紫×藤色・歌枠や雑談に） ・サンド（生成り×こげ茶／明るい画面・朝配信やASMRに） ・フロスト（白×アイスブルー／明るい画面・清潔感を出したいときに） ・ローズ（ボルドー×桃色・かわいい系に） ・カーボン（黒×山吹・硬派な配信や企画枠に） ※明るい画面が2色入っています。暗い配色ばかりのセットが多いので用意しました。 ■ 書き換えるのは config.js だけ 配信者名・開始予定時刻・配信タイトル・休憩の長さ・SNS名などは、config.js を1回直すだけで 8テーマ32画面すべてに反映されます。テーマごとに直す必要はありません。 ■ わんコメ連動（任意の機能です） わんコメを起動していれば自動でつながります（設定不要・ポート11180）。 つながっていなくても画面はそのまま使えます。数字が0のままになるだけです。 ・まもなく開始／休憩中 … 「いま N人が待っています」 ・配信中 … 「コメント N件」＋コメントが届くたびに画面のふちが光ります ・配信終了 … 「今日の記録」コメント数と参加した人数 数字はその日ぶんを数え、日付が変わると自動でリセットされます。 配信中に数えた数を、そのまま配信終了の画面に出せます。 Twitchをお使いの方は config.js にチャンネル名を入れると、わんコメ無しでも直接つながります （アカウント連携もAPIキーも要りません）。 ■ 導入（3ステップ・2分） 1. zipを展開して、フォルダごと好きな場所に置きます 2. config.js を開いて、配信者名・開始予定時刻・SNS名を書き換えます 3. OBSで「ソース」→「＋」→「ブラウザ」を追加し、「ローカルファイル」にチェックを入れて 　 使いたい html を選びます（幅1080・高さ1920） 例：まもなく開始の画面 → 01-cobalt/starting.html ■ わんコメの対応配信サイトについて（正直に書きます） YouTube / Twitch / ツイキャス / SHOWROOM / bilibili / ミクチャ / ニコ生 / Kick / ふわっち などに対応しています。 ※ TikTok LIVE はわんコメが対応していません。TikTok LIVEでも画面はそのまま使えますが、 コメント連動の数字だけは動きません（TikFinity や Streamer.bot など別のツールを経由すれば取り込めます）。 ■ 動作確認 わんコメ 5.x / OBS 30.x（Windows・macOS）。 実際にわんコメへコメントを流して、数字が増えることを配布zipの状態で確認しています。 画像ファイルは使っておらず、すべてHTML/CSS/JSで描いています。 外部サーバーへの通信もわんコメ／Twitch以外にありません。 ■ ライセンス 個人・法人を問わず配信での使用は自由です（商用可）。改変も自由です。 ファイルそのものの再配布・販売はご遠慮ください。 ■ うまく動かないとき OBSのブラウザソースが真っ白になるときの確認手順をまとめています。 https://panda-hq-7af784ab.pages.dev/guide/standalone-widget-not-showing ■ 更新履歴 v1.0（2026-09-02）初版。8テーマ×4画面＝32画面。わんコメ／Twitch連動つき。 同じ縦型シリーズもあります（縦型コメント欄テーマ／縦型インフォメーションバー／縦型配信の目標達成ゲージ／縦型配信のアラート）。 ほかの商品はこちら https://panda-kaihatsu.booth.pm/ ■ 入っているもの・できること zipの中身は 36 ファイルです。 フォルダ: PANDA-VERTICAL-OVERLAY-v1.0 それぞれのファイルの役割 ・config.js … 設定ファイル（ここだけ直せば32画面すべてに反映されます） ・01-cobalt/ 〜 08-carbon/ … テーマごとのフォルダ（各4画面） ・starting.html … まもなく開始（開始予定時刻までのカウントダウン） ・live.html … 配信中（タイトル・経過時間・SNS） ・brb.html … 休憩中（戻るまでのカウントダウン） ・ending.html … 配信終了（今日の記録・次回予告） ・_shared/ … わんコメ連動ライブラリ できること ・わんコメを起動していれば自動でつながります（設定不要・ポート11180）。 ・つながっていなくても、画面はそのまま普通に使えます。数字が0のままになるだけです。 ・つながると、こうなります: ・まもなく開始 … 「いま N人が待っています」（コメントした人数） ・配信中 … 「コメント N件」＋コメントが来るたびに画面のふちが光る ・休憩中 … 「待っている人 N人」 ・配信終了 … 「今日の記録」コメント数と参加した人数 ・数字は「その日ぶん」を数えます。日付が変わると自動でリセットされます。 ・配信中に数えた数を、そのまま配信終了の画面で出せます。 ・Twitchをお使いの方は config.js の twitchChannel にチャンネル名を入れると、 ・わんコメ無しでも直接つながります（アカウント連携もAPIキーも不要です）。 ・※ わんコメ本体は別途ご用意ください（無料プランで動きます）。 入っているテーマ ・01-cobalt コバルト … 濃紺×水色。夜の配信・ゲーム配信に ・02-ember エンバー … 黒×朱色。熱のあるゲーム配信に ・03-matcha 抹茶 … 深緑×若草。作業配信・のんびり枠に ・04-grape グレープ … 濃紫×藤色。歌枠・雑談に ・05-sand サンド … 生成り×こげ茶（明るい画面）。ASMR・朝配信に ・06-frost フロスト … 白×アイスブルー（明るい画面）。清潔感を出したいときに ・07-rose ローズ … ボルドー×桃色。かわいい系に ・08-carbon カーボン … 黒×山吹。硬派な配信・企画枠に ・※ 明るい画面が2色（サンド・フロスト）入っています。 ・暗い画面ばかりのセットが多いので、明るい配信をしたい方向けに用意しました。 同梱のREADMEに、導入の手順とカスタマイズの方法をもう少し詳しく書いています。 ■ 縦型配信シリーズ 　1080×1920（スマホの縦画面）に合わせて作っているものを、ほかにも出しています。 　配色の考え方をそろえてあるので、並べても画面がちぐはぐになりません。 ・縦型コメント欄テーマ 全32色 ¥800 　　視聴者のコメントを縦長の画面に合わせて流します 　　https://panda-kaihatsu.booth.pm/items/8710323 ・縦型インフォメーションバー 全16テーマ ¥800 　　配信タイトル・SNS・「まもなく開始」を1本の帯で出します 　　https://panda-kaihatsu.booth.pm/items/8710327 ・縦型配信の目標達成ゲージ 全8テーマ ¥800 　　コメントやスパチャで伸びる目標バー。耐久企画に 　　https://panda-kaihatsu.booth.pm/items/8719820 ・縦型配信のアラート 全8テーマ ¥1,000 　　フォロー・スパチャ・メンバー・レイドの通知。効果音つき 　　https://panda-kaihatsu.booth.pm/items/8720625 　TikTok LIVE・YouTubeのショート配信・ツイキャスの縦画面など、 　スマートフォンで見られる配信を想定しています。