説明書 — GAMING GIRLY NEON

OBSへの追加方法 ✦

How to Add to OBS

ブラウザソースとして追加 / Add as Browser Source

OBSを起動し、使用したいシーンを選択する。
Launch OBS Studio and select the target scene.
「ソース」パネルの＋をクリックし、「ブラウザ」 を選択する。
Click + in Sources → choose Browser.
「ローカルファイル」 にチェックを入れ、gaming_girly_neon.html を選択する。
Check "Local File" and select gaming_girly_neon.html.
幅: 1920、高さ: 1080 に設定する。
Set Width: 1920, Height: 1080.
「カスタムCSS」欄は空欄のままにする。
Leave Custom CSS empty.
「OK」をクリックして完了。
Click "OK" to finish.

操作するには「対話」を有効化: OBSでソースを右クリック → 「対話」 を選択。対話ウィンドウ内でクリック・ドラッグ操作ができます。
Enable "Interact": Right-click the source → "Interact".

推奨設定 / Recommended Settings

設定項目 / Setting	推奨値 / Value
幅 / Width	1920
高さ / Height	1080
カスタムCSS / Custom CSS	空欄 / Empty

基本操作 ✦

Basic Operations

✏️

テキスト編集

テキスト部分をクリックして直接編集できます。
Click any text to edit it directly.

📋

メニューを開く

空白エリアをダブルクリックするとメニューが表示されます。
Double-click an empty area for the context menu.

✋

ボックス移動

ボックスのヘッダーをドラッグして位置を変更できます。
Drag the box header to move it.

☰

ボックスメニュー

右上の ≡ ボタンでオプションを表示します。
Click ≡ on a box for its options.

メニュー機能 ✦

Menu Features

ダブルクリックメニュー / Double-Click Menu

項目 / Item	説明 / Description
ボックス追加 `Add Box`	テキストボックスを追加します。タイトル・メモ・コメント欄として自由に使えます。 Adds a movable text box for titles, memos, comments, etc.
図形追加 `Add Shape`	サブメニューから形を選んで図形を追加します。 Adds a shape — select type from the submenu. □ 四角形 / Rectangle ○ 円 / Circle
背景色 `Background Color`	画面全体の背景色を変更します。カラーピッカーが開きます。 Changes the background color. Opens a color picker.
背景クリア `Clear Background`	背景を透明に戻します。 Resets background to transparent.

≡ メニュー (ボックス・図形共通) / Box & Shape Options

操作 / Action	説明 / Description
リサイズ / `Resize`	ハンドルをドラッグしてサイズを変更します。 Drag handles to resize.
回転 / `Rotate`	スライダーで -180°〜+180° の範囲で回転します。 Slider controls rotation from -180° to +180°.
塗り色 / `Fill Color`	背景色を変更します。 Changes the fill/background color.
枠色 / `Border Color`	枠線の色を変更します。 Changes the border color.
削除 / `Delete`	要素を削除します。 Removes the element.

カスタマイズ設定 (CONFIG) ✦

Customization

HTMLファイルをテキストエディタで開き、ファイル上部の CONFIG ブロックを編集してください。
Open the HTML in a text editor and edit the CONFIG block near the top.

const CONFIG = {
                color: {
                accent: '#ff6ec7', // メインカラー（枠線・発光） / Main color
                liveBadge: '#c92b8a', // LIVEバッジ色 / LIVE badge color
                background: '#0d0010', // 背景色 / Background color
                bodyText: '#e8c0e0', // テキスト色 / Text color
                },
                text: {
                liveBadge: 'LIVE',
                titleBoxHeader: 'TITLE',
                titleBoxContent: 'LIVE配信用オーバーレイ画面',
                commentBoxHeader: 'COMMENT',
                memoBoxHeader: 'MEMO',
                memoBoxContent: '空白ダブルクリックでメニュー選択可能',
                messagePlaceholder: 'メッセージを入力...',
                memoPlaceholder: 'メモを入力...',
                },
                profile: [
                'あなたの名前 / Your Name',
                'WEB: yourwebsite.com',
                'X: @yourhandle',
                ],
                animation: {
                profileInterval: 3000, // プロフィール切替間隔(ms)
                },
                };

カラー設定 / Color Settings

キー / Key	説明 / Description	初期値 / Default
`color.accent`	枠線・発光カラー Border & glow color	`'#ff6ec7'`
`color.liveBadge`	LIVEバッジ背景色 LIVE badge color	`'#c92b8a'`
`color.background`	画面背景色 Screen background	`'#0d0010'`
`color.bodyText`	テキスト色 Text color	`'#e8c0e0'`

プロフィール / Profile

上部バーに順番に表示されるテキストの配列です。
An array of texts displayed in rotation in the top bar.

profile: [
                '配信者名',
                'X: @yourhandle',
                'プレイ中: ゲームタイトル',
                // 行を追加するほど増やせます ♡
                ],

ヒント: 色はHEX（#ff6ec7）またはRGBA（rgba(255,110,199,0.5)）形式で指定できます。
Tip: Colors accept HEX or RGBA format.

機能設定 / FEATURES

キー / Key	説明 / Description	初期値 / Default
`features.autoLoad`	ページを開いたとき保存済み設定を自動で読み込む。 `false` にすると「保存を読み込む」を手動で押す必要があります。 Auto-load saved config on page open. Set `false` for manual load only.	`true`
`features.saveConfigEnabled`	設定の保存・読み込み機能を有効にする。 `false` にすると「設定を保存」ボタンが非表示になります。 Enable save/load config. Set `false` to hide the save button.	`true`

トラブル対処 ✦

Troubleshooting

症状 / Symptom	対処法 / Solution
クリックに反応しない No response to clicks	OBSでソース右クリック → 「対話」を選択。 Right-click source → "Interact".
画面が真っ黒 Black screen	「ローカルファイル」にチェックが入っているか確認。 Check "Local File" is enabled.
サイズがずれる Wrong size	幅 1920・高さ 1080 を確認。 Verify width=1920, height=1080.
配置が保存されない Layout lost on reload	`CONFIG` を直接編集することで永続化できます。 Edit `CONFIG` directly for permanent changes.
フォントが変わる Different font	インターネット接続がない場合、Google Fontsが読み込めず代替フォントになります。 Without internet, a fallback font is used.