和 WA オーバーレイ

✿ ── ✿

和 WA 説明書

Japanese Stream Overlay — User Guide

概要 / Overview

和 WA について

桜・竹・格子をモチーフにした和風ストリーミングオーバーレイです。OBS の「ブラウザソース」に読み込んで使用します。すべての設定はブラウザ内に保存されるため、外部ファイルは不要です。

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

基本操作 / Basic Operations

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

パーツ一覧 / Parts

ヘッダーパーツ

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

ボックスパーツ

パーツ名	説明
🕐 時計（独立）	自由配置できる独立した時計ボックス
⏱ ストップウォッチ	開始・停止・リセット付きのタイマー
🔢 カウンター	＋／－／リセット付き。ステップ値を変更可能
📝 覚書ボックス	メモ用テキスト入力ボックス
▭ テキスト入力	ヘッダーなしのシンプルなテキスト欄
◻ 図形（四角形）	リサイズ・色変更できる四角形
○ 図形（円）	リサイズ・色変更できる円形
🏷 演目ボックス	タイトル表示用の大きな文字ボックス
🖼 画像ボックス	クリックまたはドラッグ＆ドロップで画像を表示

背景パーツ

▦ 格子 (bg-koshi)

桜色の細い格子模様。和の空間を演出

▸ 竹林 (bg-take)

縦縞の竹をモチーフにした背景模様

🌸 桜霞 (bg-sakura)

桜色のやわらかいグラデーション

複数の背景パーツを重ねて使用できます。≡ メニュー → 削除 で個別に取り除けます。
背景削除 を選ぶとすべての背景パーツが消えます。
背景画像アップロード では任意の画像を背景として使えます。

設定の保存と読み込み / Save & Load

1

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

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

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

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

リアルタイムプレビュー / 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を設定すれば、ローカルサーバーなしでもこの機能はそのまま使えます。

カスタマイズ / Customization

CONFIG 設定（HTML 内）

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

設定項目	初期値	説明
`color.accent`	`#b5627e`	枠線・バッジなどのメインカラー（桜色）
`color.liveBadge`	`#8b3a56`	配信中バッジの背景色
`color.background`	`#faf6f0`	画面の背景色（和紙風クリーム）
`color.bodyText`	`#5a3a4a`	コメント・メモの文字色
`text.liveBadge`	`配信中`	バッジに表示する文字
`text.titleBoxHeader`	`演目`	演目ボックスのヘッダー
`text.commentBoxHeader`	`声`	コメントボックスのヘッダー
`text.memoBoxHeader`	`覚書`	覚書ボックスのヘッダー
`profile`	3行の配列	プロフィール欄に表示する文字列リスト
`animation.profileInterval`	`3000`（ms）	プロフィールの切替間隔
`features.autoLoad`	`true`	ページを開いたとき保存済み設定を自動で読み込む（`false` にすると手動のみ）
`features.saveConfigEnabled`	`true`	設定の保存・読み込み機能を有効にする（`false` で「設定を保存」ボタン非表示）

カラーパレット / Color Palette

桜 Sakura（アクセント）

#b5627e

深桜 Fukabeni（バッジ）

#8b3a56

和紙 Washi（背景）

#faf6f0

紫鳶 Murasaki-tobi（本文）

#5a3a4a

OBS 設定 / OBS Setup

1

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

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

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

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

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

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

使用フォント / Fonts

Noto Serif JP

ヘッダー・ラベル・装飾テキストに使用。明朝体で和の雰囲気を演出。

Noto Sans JP

本文・入力テキストに使用。可読性の高いゴシック体。

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