Creator Labo クリエイターの、小さな制作室。
STREAMING TOOLS 無料・登録不要

配信に、あなたらしいパーツを。

数える、時間を測る、目標を見せる。デザインして、OBSへそのまま。

ライブプレビュー
端末に自動保存
TRANSPARENT CANVAS · 720 × 360
背景を確認

配信中の操作を試す

書き出したHTMLでは、OBSの「対話」から同じ操作ができます。

プレビューの操作値も保存されます。書き出し時は現在の値を引き継ぎ、タイマーは一時停止した状態にします。

↓

準備ができたら、OBSへ。

外部通信なしのHTMLファイル1つ。透過背景に対応。

720 × 360 px 推奨オフラインで動作

設定はこのブラウザに保存されます。大切な設定はバックアップしてください。

✦
あなたの配信に、ちょうどいいデザイン。

数値は大きく、操作はシンプルに。背景やカラーを変えて、いつもの配信画面になじませよう。

QUICK START

3ステップで、配信画面に。

01

HTMLを保存

パーツをカスタマイズして「HTMLを書き出す」をクリック。保存したファイルは移動せず使える専用フォルダーへ。

02

OBSに追加

ソースの「+」→「ブラウザ」→「ローカルファイル」を有効にしてHTMLを選択。幅720・高さ360を指定します。

03

「対話」で操作

ソースを右クリック→「対話」。数字をクリックで加算、右クリックで減算。勝敗は左右それぞれ操作できます。

タイマーやカウンターの操作方法

カウンターとゲージは数字を左クリックで+、右クリックで−。勝敗はWとLの数値をそれぞれクリック。タイマーは数字をクリックして開始・一時停止。「対話」の中で Tab キーで数字にフォーカスし、Enterでも操作できます。Rキーを押すとリセット待機になります。配信画面に操作ボタンや確認画面は表示せず、「対話」で5秒以内にもう一度Rキーを押すとリセットします。Escで取り消せます。タイマーは配信の表示・非表示に関係なく実時間で進み、ゼロで停止します。音は鳴りません。OBSのグローバルホットキーには対応しません。

背景が黒い・白いときは?

必ず「ブラウザ」ソースとして追加してください。「ウィンドウキャプチャ」では透過になりません。書き出したHTMLのhtmlとbodyには透過を指定しています。カード自体を透明にするには不透明度を0%にします。OBSのカスタムCSSに不透明な背景指定を追加しないでください。確認はOBSの下層に色ソースや映像を置いて行います。通常のブラウザでHTMLを開いたときの白背景は透過の判定には使えません。

html, body { background: transparent !important; margin: 0; overflow: hidden; }
値の保持・更新・別のパーツの作成

サイトとOBSは保存領域が別なので、サイト上の操作がOBSへ自動同期されることはありません。OBSの値は「対話」で操作します。HTMLには固有IDを付け、可能な環境ではOBSのlocalStorageに操作値を保存します。「表示されていないときにソースをシャットダウン」と「シーンがアクティブになったときにブラウザを更新」はオフを推奨します。キャッシュ削除、別PC、ファイル移動などで状態が失われる場合があります。終了前に現在値を控えてください。

同じIDで再出力するとOBS側の保存値が優先されます。デザインは新ファイルへ更新されます。サイトで設定した現在値から始めたい場合は「別パーツとして複製」後に書き出し、OBSでファイルを選び直してください。同じHTMLを複数ソースに指定すると保存値を共有する場合があるため、独立したカウンターは複製して個別に書き出してください。

無料・利用条件・データについて

生成したパーツは個人・商用配信で無料利用でき、クレジット表記は不要です。OBS Studioの公式製品ではありません。設定はブラウザ内に保存し、アカウント登録や解析・広告スクリプトは使用しません。ホスティング提供者がアクセスログを扱う場合があります。フォントは端末標準のものを使うため、PCによって見た目が変わることがあります。酒量カウンターは記録用です。飲酒量を競わせる用途を意図していません。

ADVERTISEMENT 広告掲載準備エリア · 現在、広告は配信していません