【配信】時間と進み具合まとめ 4点セット 42デザイン｜バラで¥1,200→¥600｜カウントダウン20種・進捗バー20種・作業配信トラッカー・実績ボード｜OBS用・背景透過・設定ボタン(⚙)つき・登録不要

バラで買うと ¥1,200 のところ、まとめて ¥600 です。

配信画面に置く「あと何分か」「どこまで進んだか」を見せる道具を、4つのパックぶん（合計42デザイン）1つのzipにまとめました。単一HTML・インストール不要・アカウント不要・オフライン動作。OBSの「ブラウザ」ソースに入れるだけで動きます。

どれも動きます。静止画やGIFではなく、その場で線から描いている「動くウィジェット」です。文字も色も大きさも、画面の⚙ボタンからその場で変えられます。動画ファイルではないので、容量はごくわずかで、ループの継ぎ目もありません。

パックごとにフォルダを分けて、そのフォルダの中に日本語と英語の説明書を入れてあります。使いたいものから開いてください。

━━━━━━━━━━━━━━━━━━

◆ 「進み具合」でも、4つは別の物です

━━━━━━━━━━━━━━━━━━

・01 カウントダウン … 時刻で決まっているものを待たせる。時間が来ると自動で0になります

・02 進捗バー … 数字が1本、ゴールに向かって伸びる。値は自分で押して動かします

・03 作業配信トラッカー … 残りではなく「これまでにどれだけやったか」。区間ログが残ります

・04 実績ボード … やることが複数あって、1つずつ潰す。「あと何％」ではなく「あと何が残っているか」

待機画面は01、耐久企画は04、もくもく会は03、目標募集は02――というふうに、配信の中身ごとに使い分けられます。

━━━━━━━━━━━━━━━━━━

◆ 入っているもの（4パック / HTML 42本）

━━━━━━━━━━━━━━━━━━

【01_カウントダウン（20デザイン）】

フリップ／7セグLED／ネオンリング／曇りガラス／ミニマル／映画チケット／ホログラム／黒板／サイバーHUD／花びら／星座／極太フラット／半円ダイヤル／風船／電光掲示板／ロケット発射／手書きノート／レトロ端末／羊皮紙と封蝋／リキッド

※目標の日時と、0になった時のメッセージを自分で決められます。

【02_進捗バー（20デザイン）】

クラシックバー／ドーナツ／区切りブロック／液体タンク／温度計／バッテリー／8bitローディング／ハート／XPバー／ドット／貯金瓶／育つ植物／ロードトリップ／砂時計／イコライザー／星座／ネオン管／巻物／半円メーター／レンガの壁

※値はクリック・↑↓・＋−・←→・0(リセット)で自分で動かします。外部サービスは読みません。

【03_作業配信トラッカー】

開始／一時停止／再開／終了を自分で押して作業時間を計測し、区間ログ・今日の合計・通算の合計・目標の達成率・日別の棒グラフを1枚にまとめて表示します。ポモドーロ（作業N分／休憩M分）も任意で使えます。

※もくもく会・朝活・作業配信向けです。

【04_実績ボード（目標チェックリスト）】

今日の目標や企画の達成項目を自分で書いて並べ、達成したらクリックでチェック。その瞬間に実績解除風のポップアップが出て、全部そろうとコンプリート演出になります。1〜60項目・8テーマ・行頭「#」で見出し。

※操作用の窓と、OBSに出す表示用の窓（?mode=stream）が同期します。

━━━━━━━━━━━━━━━━━━

◆ 導入（30秒）

━━━━━━━━━━━━━━━━━━

1. OBSの「ソース」→「＋」→「ブラウザ」

2. 「ローカルファイル」にチェックを入れ、使いたい .html を選ぶ

3. 幅・高さを入れる（01は700×320／02は480×460／03は300×360／04は700×900あたりが目安）

背景は透過なので、そのまま配信画面に重なります。

━━━━━━━━━━━━━━━━━━

◆ 設定ボタン（⚙）― 42本すべてに付いています

━━━━━━━━━━━━━━━━━━

・OBSのソースを右クリック →「対話」→ 画面にマウスを乗せると ⚙ が出ます

・目標・文言・配色・大きさ・言語などを、URLを書き換えずに変えられます

・普段は見えないので配信画面には映りません（01と02の40本は、歯車が出ないとき S キーでも開けます。03と04に S の近道はありません。03はマウスを動かすと右上に、04はボードにマウスを乗せると右下に出ます）

・設定は保存され、OBSを再起動しても残ります

・「設定を初期化」でいつでも購入時の状態に戻せます

━━━━━━━━━━━━━━━━━━

◆ 値や記録が消えたときの取り戻しかた

━━━━━━━━━━━━━━━━━━

02・03・04 は「溜まっていく値」を持ちます。保存先はそのブラウザ（localStorage）なので、ブラウザのキャッシュ／サイトデータを消すと一緒に消えます。OBSのブラウザソースで「キャッシュを削除」したときも同じです。

・02 進捗バー … URLに ?value=0&goal=1000&label=目標 と書いておけば、保存が無い状態ならそこから始まります

・03 作業配信トラッカー … ⚙の「記録の書き出し／読み込み」で、記録をJSONとして表示・コピーできます。メモ帳などに貼って保管しておけば、消えても「読み込み（置き換え）」で戻せます。ときどき書き出して控えておくことを強くおすすめします。「設定のみリセット」は記録に触りません。記録が消えるのは⚙の「記録の削除」を押したときだけです

・04 実績ボード … URLに ?items=目標1|目標2|目標3 と書いておけば、保存が無い状態ならその盤面から始まります。このURLを控えておけば作り直しは数秒です

同梱の説明書に、この節をもっと詳しく書いてあります。

━━━━━━━━━━━━━━━━━━

◆ URLでの指定

━━━━━━━━━━━━━━━━━━

?lang=ja / ?lang=en 表示の言語 ※42本すべて（02だけ無指定のとき日本語。01・03・04はブラウザに合わせます）

?key=a 設定・値・記録の保存先を分ける ※42本すべて

?scale=1.2 大きさ ※42本すべて

?mode=stream 背景透過の表示専用にする ※04 実績ボードのみ

そのほかのパラメータはパックごとに違います。各フォルダの説明書に全部載せてあります。

━━━━━━━━━━━━━━━━━━

◆ できないこと（正直に書きます）

━━━━━━━━━━━━━━━━━━

・効果音は入っていません（表示のみです。音は鳴りません）

・視聴者コメントやチャットは読みません。自動集計もしません

・配信プラットフォーム・投げ銭・フォロワー数などの外部サービスとは繋がりません

・02の値、03の開始・停止、04のチェックは、すべて自分で押して動かします

・03の経過時間は自分で［▶ 開始］を押したところから数えます（配信開始やPC起動からの通算ではありません）

・04にチェックの自動リセット（日付が変わったら外す等）はありません

・時刻はお使いのPCの時計です。ネット上の時刻サーバーは見に行きません

━━━━━━━━━━━━━━━━━━

◆ すでにお持ちの方へ

━━━━━━━━━━━━━━━━━━

中身は、当店で単品として出している4商品と同じファイルです（1バイトも変えていません）。単品をすでにお持ちの場合は、その分は重複します。

また、当店の「OBS配信ウィジェット 28種」にもカウントダウンと進捗バーが1つずつ入っていますが、あちらは別実装で、このセットの42本とはファイルが1本も重なりません。

━━━━━━━━━━━━━━━━━━

◆ 同梱物

━━━━━━━━━━━━━━━━━━

・4パック（HTML 42ファイル・パックごとにフォルダ分け）

・4パックそれぞれの説明書（日本語／English）

・全体の説明書（日本語／English）

・利用規約（日本語／English）

━━━━━━━━━━━━━━━━━━

◆ 動作環境・補足

━━━━━━━━━━━━━━━━━━

・Chrome / Edge で動作確認済み。OBS Studio 28以降のブラウザソース（Chromium）や、Streamlabs など、ブラウザソースがある配信ソフトでも同じように使えます

・外部への通信は一切ありません（ネット接続不要・Webフォントなし）

・書体はお使いのPCに入っているものを使います

・画像ではなく線から描いているので、どんな大きさでもにじみません

・「その時点の絵」を毎回計算しているだけなので、長時間つけっぱなしでもメモリが増えません

・配信可・商用利用可（同梱の利用規約参照）

◆ こんな方に

・待機画面から本編、締めまで、進み具合の見せ方をひと通り揃えたい方

・耐久配信・マラソン配信・もくもく会をやる方

・外部サービスに繋がない、軽くて壊れにくい表示が欲しい方

万が一素材に不備がありましたらメッセージまでお願いします。

不具合・ご要望は BOOTH のメッセージからどうぞ。