ストップウォッチ＋カウントダウンタイマー

配信用タイマーセット

配信で使える可愛いタイマーセットです。

ストップウォッチとカウントダウンタイマーの2種類が含まれています。

📁 ファイル内容

無料版 / おやつ代版（同一内容）

kawaii-stopwatch-timer.html - ストップウォッチタイマー

kawaii-countdown-timer.html - カウントダウンタイマー

🎯 各タイマーの機能

ストップウォッチタイマー（kawaii-stopwatch-timer.html）

基本機能：0秒から時間を計測

-3秒スタート機能：-3秒から開始してカウントアップ（同時視聴の開始合図などに便利）

ボタン：

スタート/ポーズ：計測の開始と一時停止

-3秒スタート：マイナス3秒からカウント開始

リセット：0秒に戻す

カウントダウンタイマー（kawaii-countdown-timer.html）

基本機能：設定した時間からカウントダウン

時間設定：画面下部の入力欄で時間を設定（デフォルト30秒）

警告機能：残り10秒で数字が赤く点滅

終了通知：0秒になると自動停止＆アニメーション

ボタン：

スタート/ポーズ：カウントダウンの開始と一時停止

リセット：設定前の状態に戻す

🎮 OBSでの設定方法

1. ブラウザソースの追加

OBSでソースの追加「＋」をクリック

「ブラウザ」を選択

新規作成で任意の名前を付ける（例：タイマー）

2. ファイルの設定

「ローカルファイル」にチェック

「参照」ボタンから使用したいHTMLファイルを選択

3. サイズ設定

幅：800px

高さ：400px（ストップウォッチ）/ 500px（カウントダウン）

FPS：30

4. カウントダウンタイマーの時間設定を隠す場合

カウントダウンタイマーの下部にある時間設定欄を配信画面に表示したくない場合：

ブラウザソースのプロパティで高さを300pxに設定

または、OBSのフィルタで「クロップ/パッド」を追加し、下部をカット

5. 背景の透過

HTMLファイルは背景透過に対応しているため、そのまま配信画面に重ねて使用できます。

🎨 デザインの特徴

パステルブルーとピンクの優しい配色

丸みのあるかわいいデザイン

リボンのワンポイント

見やすい大きめフォント

アニメーション効果付き

💡 使用例

同時視聴の開始カウント（-3秒スタート機能）

雑談配信の時間管理

ゲーム配信のタイムアタック計測

料理配信のタイマー

休憩時間の表示

🍰 おやつ代版について

無料版と同じ内容ですが、もし気に入っていただけましたら、作者のおやつ代としてご支援いただけると嬉しいです！

※利用規約

好きに使ってたもれ