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 付きのタイマー
🔢 カウンター	＋／－／RST 付き。ステップ値を変更可能
📝 メモボックス	メモ用テキスト入力ボックス
▭ テキスト入力	ヘッダーなしのシンプルなテキスト欄
◻ 図形（四角形）	リサイズ・色変更できる四角形
○ 図形（円）	リサイズ・色変更できる円形
🏷 タイトルボックス	NOW PLAYING 表示用の大きな文字ボックス（ネオングロー付き）
🖼 画像ボックス	クリックまたはドラッグ＆ドロップで画像を表示

BACKGROUND PARTS

🌆 CITY SILHOUETTE

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

▦ GRID

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

≡ SCANLINE

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

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

SAVE / LOAD — 設定の保存と読み込み

1

SAVE CONFIG（設定を保存） — パーツの配置・内容をブラウザのローカルストレージに保存します。次回読み込み時に自動的に復元されます。
2

EXPORT（設定をエクスポート） — citypop-overlay-config_日時.json としてダウンロードします。バックアップや PC 間の移行に使用できます。
3

IMPORT（設定をインポート） — エクスポートした JSON ファイルを選択して復元します。
4

RESET（画面リセット） — ページをリロードして初期状態に戻します。保存データは消えません。

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を設定すれば、ローカルサーバーなしでもこの機能はそのまま使えます。

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` で「設定を保存」ボタン非表示）

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から読み込みます。オフライン環境ではシステムのデフォルトフォントが使用されます。