CITY POP オーバーレイ

RETRO CITY POP OVERLAY

CITY POP

USER GUIDE — 説明書

OVERVIEW — 概要

CITY POP について

80年代シティポップにインスパイアされた、レトロネオン配信オーバーレイです。夕暮れの都市シルエット・ゴールドとピンクのネオングロー・CRTスキャンラインが特徴。OBS の「ブラウザソース」に読み込んで使用します。

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

CONTROLS — 基本操作

操作	内容
DOUBLE CLICK	何もない場所でパーツ追加メニューを開く
HEADER DRAG	ボックスを移動する
LONG PRESS 0.2s	ボックス内のどこでも長押し → そのままドラッグで移動
HANDLE DRAG	ホバーで表示されるハンドルをドラッグでリサイズ
≡ MENU	ボックス右上に出現 → 複製・文字サイズ・色変更・削除
HEADER TEXT	ヘッダーのテキストはクリックで直接編集できます

PARTS — パーツ一覧

HEADER PARTS

パーツ名	説明
🔴 配信中バッジ	点滅する ON AIR バッジ。グラデーション背景で存在感を演出
👤 プロフィール欄	複数行を自動スクロール表示。ダブルクリックで編集
✉️ メッセージ入力欄	自由にテキストを入力できる横長バー
🕐 時計（バー埋め込み型）	ネオングロー付きの日付＋時刻バー

BOX PARTS

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

BACKGROUND PARTS

🌆 CITY SILHOUETTE

SVG描画のビル群＋夕焼けグラデーション＋点滅する窓の明かり＋星空

▦ GRID

アンバーグローの格子模様。レトロな透視図感

≡ SCANLINE

CRTモニター風のスキャンライン効果

おすすめ組み合わせ： シティシルエット＋スキャンラインを重ねると本格的なレトロ感が出ます。
≡ メニュー → 削除 で個別に取り除けます。
「🖼️ 背景を変える」の 背景をすべて消す を選ぶとすべての背景パーツが消えます。

SAVE & PRESETS — 保存・プリセット

1

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

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

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

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

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

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

保存先について

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

LIVE 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 CONNECT — OBS接続

🔌 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 以降が必要です。

CUSTOMIZE — カスタマイズ

CONFIG ブロック（HTML 内）

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

設定項目	初期値	説明
`color.accent`	`#f59e0b`	枠線・時計・ネオングローのメインカラー（ローズゴールド）
`color.sub`	`#ec4899`	点滅アイコン・サブネオンカラー（ホットピンク）
`color.liveBadge`	`#c2410c`	バッジグラデーションの開始色
`color.background`	`#1c0a00`	画面の背景色（深夜ブラウン）
`color.bodyText`	`#fef9e7`	コメント・メモの文字色（クリーム）
`text.liveBadge`	`ON AIR`	バッジに表示する文字
`text.titleBoxHeader`	`NOW PLAYING`	タイトルボックスのヘッダー
`text.commentBoxHeader`	`COMMENT`	コメントボックスのヘッダー
`profile`	3行の配列	プロフィール欄に表示する文字列リスト
`animation.neonPulseDuration`	`3s`	ネオングローの点滅周期
`animation.starBlinkDuration`	`4s`	ビルの窓・星の点滅周期
`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, },

PALETTE — カラーパレット

ROSE GOLD（メインアクセント）

#f59e0b

NEON PINK（サブ・点滅アイコン）

#ec4899

SUNSET（バッジグラデーション）

#c2410c

MIDNIGHT BROWN（背景）

#1c0a00

CREAM（本文テキスト）

#fef9e7

OBS SETUP — OBS 設定

1

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

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

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

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

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

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

FONTS — 使用フォント

JOSEFIN SANS

ヘッダー・バッジ・ラベルに使用。幾何学的でレトロ感のある大文字書体。80年代の雰囲気を演出。

DM SANS

本文・入力テキストに使用。クリーンで可読性の高いモダンサンセリフ。

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