Setup Guide
設置ガイド
ダウンロードしたHTMLファイルをOBSやその他の配信ツールに設置する方法を解説します。
透明背景対応のため、クロマキー不要で使えます。
01 OBS Studio
ソースを追加
OBSの「ソース」パネル下部の「＋」ボタンをクリック → 「ブラウザ」を選択します。
ローカルファイルを指定
「ローカルファイル」にチェックを入れ、「参照」からダウンロードしたHTMLファイルを選択します。
サイズを設定
ツールに合わせてサイズを入力してください。
| ツール | 推奨幅 | 推奨高さ | 備考 |
|---|---|---|---|
| タイマー（カードあり） | 240px | 80px | — |
| タイマー（カードなし） | 320px | 60px | 文字サイズに合わせて調整 |
| スコアカウンター（カードあり） | 200px | 100px | — |
| スコアカウンター（カードなし） | 240px | 80px | 数字が大きい場合は拡大 |
背景を透明に設定
「カスタム CSS」の下にある「背景色」をクリックし、透明（アルファ値 0）に設定します。
#00000000配置を調整
「OK」を押してソースを追加したあと、プレビュー画面でドラッグして好きな位置に配置します。
02 その他の配信ツール
Streamlabs
- ソース → ＋ → ブラウザソース
- URLにローカルパスを入力
- サイズをOBSと同様に設定
XSplit Broadcaster
- ソース追加 → Webページ
- ファイルパスを入力
- クロマキー不要・透明そのまま使用可
Twitch Studio
- レイヤー → ＋ → ブラウザソース
- ローカルファイルを指定
- 幅・高さを調整
ニコニコ生放送
（NLE等）
- OBS経由で出力する構成を推奨
- OBS仮想カメラ → NLEで取り込み
03 スコアカウンターの操作方法
ブラウザソースにフォーカスがある状態で以下のキーボード操作が使えます。
window.addScore(10) — 指定数を加算window.setScore(0) — 指定値にセット
04 よくある質問
背景が黒くなってしまう
OBSのブラウザソース設定で「背景色」を完全透明（#00000000）に設定してください。「シャットダウン」オプションがオフになっているか確認してください。
フォントが表示されない
HTMLファイルはGoogleフォント（Fira Mono）をオンラインで読み込んでいます。配信PCがインターネットに接続されている必要があります。
タイマーをリセットしたい
OBSのソースを右クリック →「更新」または「インタラクト」→「F5キー」でページを再読み込みするとタイマーがリセットされます。
ライセンスの期限が切れた
カスタム版は30日間のライセンス制です。BOOTHで再購入していただくと、新しいライセンスコードが発行されます。すでにダウンロードしたHTMLはライセンス期限後もそのまま使い続けられます。