POP ★ オーバーレイ

✨ 概要 / Overview

POP ★ について

スカイブルー × ピンクのポップでかわいい配信オーバーレイです。丸みのあるデザインと星の装飾が特徴。OBS の「ブラウザソース」に読み込んで使用します。すべての設定はブラウザ内に保存されるため、外部ファイルは不要です。

推奨設定： キャンバスサイズ 1920 × 1080 px、OBS ブラウザソース幅 1920・高さ 1080、「OBSと同じ解像度を使用する」を有効に。

🎮 基本操作 / Basic Operations

操作	内容
ダブルクリック	何もない場所でパーツ追加メニューを開く
ヘッダーをドラッグ	ボックスを移動する
長押し（0.2秒）	ボックス内のどこでも長押し → そのままドラッグで移動
角・辺のハンドル	ホバーで表示、ドラッグでリサイズ
≡ ボタン	ボックス右上に出現 → 複製・文字サイズ・色変更・削除
ヘッダー文字	クリックで直接編集できます

🧩 パーツ一覧 / Parts

ヘッダーパーツ

パーツ名	説明
🔴 配信中バッジ	点滅する LIVE ラベル。文字は直接編集可能。丸みのあるピル形状
👤 プロフィール欄	複数行を自動スクロール表示。ダブルクリックで編集
✉️ メッセージ入力欄	自由にテキストを入力できる横長バー
🕐 時計（バー埋め込み型）	日付＋時刻を常時表示する時計バー

ボックスパーツ

パーツ名	説明
🕐 時計（独立）	自由配置できる独立した時計ボックス
⏱ ストップウォッチ	▶ 開始・⏸ 停止・↺ リセット付きのタイマー。ストップウォッチは時間を押すと開始・停止し、≡ メニューでリセットや、配信・録画・リプレイバッファ・仮想カメラとの連動ができます。連動すると、OBS でそれを始めたときに自動で数えます。
🔢 カウンター	＋／－／リセット付き。ステップ値を変更可能
📝 メモボックス	メモ用テキスト入力ボックス
▭ テキスト入力	ヘッダーなしのシンプルなテキスト欄
◻ 図形（四角形）	リサイズ・色変更できる角丸四角形
○ 図形（円）	リサイズ・色変更できる円形
🏷 タイトルボックス	大きな文字のタイトル表示ボックス
🖼 画像ボックス	クリックまたはドラッグ＆ドロップで画像を表示

背景パーツ

╱ ストライプ

斜めのさりげないストライプ模様

★ ✦ ✧ ✩ ★ ✦

★ 星

回転アニメーション付きの星をランダム配置

· 水玉ドット

規則正しい水玉のドットパターン

🌈 グラデーション

ピンク × ブルーの淡いグラデーション

複数の背景パーツを重ねて使用できます（ストライプ＋星が特にオススメ！）。
≡ メニュー → 削除 で個別に取り除けます。
「🖼️ 背景を変える」の 背景をすべて消す を選ぶとすべての背景パーツが消えます。
「🖼️ 背景を変える」の 背景画像を選ぶ では任意の画像を背景として使えます。

💾 保存・プリセット / Save & Presets

1

自動保存 — 今の画面は、操作するたびに自動でこのブラウザに保存されます。次に開いたときは続きから始まります。
2

プリセット — 「⚙️ 設定」で今の画面に名前を付けて、いくつでも保存できます（例：雑談用・ゲーム実況用）。一覧から読み込む・上書き・削除ができます。
3

ファイルに書き出す — 今の画面とすべてのプリセットを、画像も含めて1つのJSONファイルにまとめてダウンロードします。別のPCへの持ち運びやバックアップに使えます。
4

ファイルから読み込む — 書き出したJSONファイルから、今の画面とプリセットを復元します。同じ名前のプリセットがあるときは上書きするか確認します。以前の形式のファイルも読み込めます。
5

画面リセット — 「⚙️ 設定」から、画面を初期状態に戻します（今の画面は消えます。プリセットは残ります）。
6

以前の「設定を保存」 — 前のバージョンで「設定を保存」していた内容は、プリセット一覧の先頭に「以前の『設定を保存』」として残っています。

保存先について

保存先はこのブラウザの中（IndexedDB）です。file:// で開いたときと http://localhost で開いたとき、またブラウザが違うときは、それぞれ別の保存になります。別のPCやブラウザへは「ファイルに書き出す」で持っていってください。

📡 リアルタイムプレビュー / Real-time Preview

📡 表示更新（別タブ）

パーツメニューの「表示更新」を押すと、今の編集内容を同じURLで開いている別タブへ即座に反映できます。編集用タブと配信確認用タブを並べて作業したいときに便利です。

条件：同一オリジン

2つのタブが同じオリジン（同じURL）で開かれている必要があります。ファイルをダブルクリックして file:// で直接開いた場合、ブラウザによっては2タブ間でデータが共有されず、この機能が動作しません。http:// または https:// 経由で開いてください。

1

同梱の サーバー起動.bat をダブルクリックする（要 Python）。
2

自動でブラウザタブが2つ開く（編集用・確認用、どちらも同じURL）。
3

片方のタブで編集し、メニューから「表示更新」を押す。
4

もう一方のタブに変更が即座に反映される。
5

終わったら、開いたウィンドウで何かキーを押すとローカルサーバーが停止する。

Pythonが必要です

このPCにPythonが入っていない場合、サーバー起動.bat を実行してもエラーになります。python.org からダウンロード・インストールしてください（インストール時に「Add python.exe to PATH」に必ずチェック）。インストール後、 サーバー起動.bat を再度実行すれば起動します。

配信本番では

OBSの「Custom Browser Dock」と「ブラウザソース」の両方に同じ公開URLを設定すれば、ローカルサーバーなしでもこの機能はそのまま使えます。

🔌 OBS接続 / OBS Connect

🔌 Chromeでの編集をOBSにそのまま反映

Chromeで開いたこの画面から、OBSのWebSocketサーバーに接続すると、編集内容をOBSのブラウザソースにそのまま反映できます。「対話」ウィンドウで操作する必要がなくなります（「表示更新」は同じブラウザのタブどうしでしか届かないため、OBSへはこちらを使います）。

1

OBSのメニュー 「ツール → WebSocketサーバー設定」 で「WebSocketサーバーを有効にする」をオンにし、「接続情報を表示」でポートとパスワードを確認する（最初の1回だけ）。
2

OBSのブラウザソースには、今までどおりこのHTMLファイルを入れておく。
3

同じPCのChromeで同じHTMLファイルを開き、空いている場所をダブルクリック → 「⚙️ 設定」 → 「OBS接続」にポートとパスワードを入れて 「接続」。
4

Chromeで編集すると、OBSのブラウザソースにそのまま反映されます。OBS側にも保存されるので、OBSを再起動しても消えません。

リアルタイム

編集すると、少しあとに自動でOBSへ送ります。

確定したときだけ

メニューの「📤 OBSに反映」か Ctrl+Enter を押したときだけ送ります。配信中にこっそり直したいとき向けです。

注意

ChromeとOBSは同じPCで動かしてください（スマホなど別の機器からは接続できません）。Chromeが「ローカルネットワークへのアクセス」を確認してきたら許可してください。ポート・パスワードはこのブラウザに保存され、次に開いたときは自動で再接続します。OBS 28 以降が必要です。

🎨 カスタマイズ / Customization

CONFIG 設定（HTML 内）

ファイル上部の const CONFIG = { ... } ブロックを編集することで、色・テキスト・アニメーション速度などを変更できます。

設定項目	初期値	説明
`color.accent`	`#7ec8e3`	枠線・バッジなどのメインカラー（スカイブルー）
`color.sub`	`#ff9ecb`	コーナー星・サブカラー（ピンク）
`color.liveBadge`	`#5bb3d8`	配信中バッジの背景色
`color.background`	`#f0faff`	画面の背景色（水色）
`color.bodyText`	`#3a8bb5`	コメント・メモの文字色
`text.liveBadge`	`LIVE`	バッジに表示する文字
`text.titleBoxHeader`	`タイトル ★`	タイトルボックスのヘッダー
`text.commentBoxHeader`	`コメント ✨`	コメントボックスのヘッダー
`text.memoBoxHeader`	`メモ 📝`	メモボックスのヘッダー
`profile`	3行の配列	プロフィール欄に表示する文字列リスト
`animation.starSpeed`	`8s`	コーナー星の回転速度
`animation.profileInterval`	`3000`（ms）	プロフィールの切替間隔
`features.autoLoad`	`true`	ページを開いたとき、前回の画面（自動保存）から始める。`false` にすると毎回初期状態から始まります。
`features.saveConfigEnabled`	`true`	今の画面を自動で保存する。`false` にすると自動保存しません（プリセット・ファイル書き出しは使えます）。
`features.presetSave`	`true`	設定画面に「プリセットに保存」（名前を付けて保存・上書き）を出す。
`features.presetLoad`	`true`	設定画面にプリセットの一覧（読み込む・削除）を出す。
`features.obsSettings`	`true`	設定画面に「OBS接続」の欄を出す。`false` にすると、ブラウザに保存された値ではなく、いつも下の `obs` の値で接続します。
`features.fileExport`	`true`	設定画面に「ファイルに書き出す」を出す。
`features.fileImport`	`true`	設定画面に「ファイルから読み込む」を出す。
`features.resetButton`	`true`	設定画面に「画面リセット」を出す。
`features.editLock`	`false`	表示専用にする。`true` にすると、パーツメニュー・ドラッグ・入力など画面の編集が一切できなくなります（OBS接続で送られてきた変更は反映されます）。
`obs.port`	`4455`	OBSのWebSocketサーバーのポート番号。
`obs.password`	`''`	OBSのWebSocketサーバーのパスワード。このファイルを人に渡すとパスワードも渡るので注意してください。
`obs.mode`	`'auto'`	反映のしかた。`'auto'` = リアルタイム、`'manual'` = 確定したときだけ。
`obs.autoConnect`	`false`	ページを開いたら自動で接続する。

ゲームセンターなど、画面を触られたくない場所では

features.editLock を true にすると、画面の編集が一切できなくなります。obs にパスワードを入れて autoConnect: true にしておけば、開くだけでOBSにつながり、別のPC（editLock をかけていないファイル）から編集を送れます。

features: { // … editLock: true, }, obs: { port: 4455, password: 'OBSのパスワード', mode: 'auto', autoConnect: true, },

🎀 カラーパレット / Color Palette

Sky Blue（メインアクセント）

#7ec8e3

Pink（サブカラー・星）

#ff9ecb

Deep Sky（バッジ）

#5bb3d8

Sky White（背景）

#f0faff

Ocean（本文テキスト）

#3a8bb5

📡 OBS 設定 / OBS Setup

1

OBS の ソース追加 → ブラウザ を選択し、「ローカルファイル」 にチェックを入れる
2

pop.html を選択する（このフォルダ内のファイル）
3

幅 1920、高さ 1080 に設定する
4

「OBSと同じ解像度を使用する」 を有効にする（推奨）
5

ソースを右クリック → 「インタラクト」 でブラウザ内を操作できます

背景を透明にする場合：「カスタム CSS」欄に body { background-color: transparent !important; } を追加し、「ページが表示されていない場合にソースをシャットダウン」のチェックを外してください。

✍️ 使用フォント / Fonts

Quicksand

ヘッダー・ラベル・ボタンに使用。丸みのある太字でポップな印象を演出。

Nunito

本文・入力テキストに使用。Quicksandと相性抜群の可愛らしいゴシック体。

フォントはGoogle Fontsから読み込みます。オフライン環境ではシステムのデフォルトフォントが使用されます。