【OBS配信用】手書き風時計オーバーレイ48種｜線を描き直し続ける手描きアニメーション｜秒あり／秒なし｜マーカー・クレヨン・鉛筆・チョーク・筆ペン・ボールペン｜ブラウザソース対応

OBS配信用の手書き風デジタル時計オーバーレイです。

OBSに読み込むだけですぐに使えます。プラグインのインストールは不要です。

◆ 手書き「フォント」ではありません

この時計は、手書き風のフォントを表示しているのではありません。

数字を構成する7セグメントの一画ずつを、手描きのストロークとして描いています。

しかも0.18秒ごとに引き直しているので、時刻が変わらない間も線が揺れ続けます。

同じ「20:45」でも、1秒前と1秒後では線のかたちが違います。

配信画面の中で、時計だけがずっと生きているように見えます。

◆ 秒あり／秒なし、どちらも入っています

「秒が動くのが気になる」「時間と分だけでいい」という方のために、

秒を出さない版（時：分の4桁）を全種類ぶん用意しました。

秒なし版も、線が0.18秒ごとに引き直されるのは同じです。

数字が変わらない間もずっと揺れ続けるので、止まって見えることはありません。

◆ 特徴

・数字の線を0.18秒ごとに描き直す、常時アニメーション

・画材6種（マーカー／クレヨン／鉛筆／チョーク／筆ペン／ボールペン）

　それぞれ、かすれ・粒・にじみ・線の抑揚を作り分けています

・秒あり版（時：分：秒）と秒なし版（時：分）の両方を収録

・背景あり版と背景なし（透過）版の両方を収録

・背景なし版は線に縁取りを入れてあり、明るい画面でも暗い画面でも読めます

・日付あり版と日付なし版の両方を収録

・インターネット接続が無くても時計は表示されます

　（日付あり版は、接続が無いと日付の書体だけPCの書体になります）

・CSS変数で色・線の太さ・揺れ方を変更可能

・48種すべて 500×120px のワイド型

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

収録内容（48種）

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

画材6種 × 背景あり／なし × 日付あり／なし × 秒あり／なし ＝ 48フォルダ

フォルダ名の読み方

<画材>_<bg か nobg>[_nodate][_nosec]

bg 紙・黒板などの背景あり

nobg 背景なし（透過）

nodate 日付を出さない（時計だけ）

nosec 秒を出さない（時と分だけ）

例）marker_nobg_nodate_nosec

マーカー ／ 背景なし ／ 日付なし ／ 時と分だけ

■ マーカー（黒）── 太い主線に薄い重ね線。インクの厚みが出るタイプ

　　　　　　　　　　背景あり版は紙の地色

■ クレヨン（赤）── 蝋が紙目に乗るザラつき。粒が線に沿って乗ります

　　　　　　　　　　背景あり版は画用紙の地色

■ 鉛筆（グレー）── 細く薄い線と二度書きの重なり。芯の粉っぽさ

　　　　　　　　　　背景あり版は紙の地色

■ チョーク（白）── 粉のかすれ。背景あり版は黒板になります

■ 筆ペン（黒）── 線の太細に抑揚。始点が太く終点が細くなります

　　　　　　　　　背景あり版は和紙風の地色

■ ボールペン（青）── 細く均一な線。背景あり版はノートの罫線が入ります

※ 上の6種それぞれに、bg／nobg・日付あり／nodate・秒あり／nosec の

　 組み合わせで8通りずつ入っています（6 × 8 ＝ 48種）。

　 お好みのフォルダを1つ選んで使います。CSSを書き換える必要はありません。

　 48種すべてのフォルダ名は、同梱の README.txt と preview.html で確認できます。

このほかに、48種を1ページで見比べられる preview.html、README.txt、

LICENSE.txt が入っています。preview.html はインターネット接続なしで開けます。

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

使い方

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

OBSの「ブラウザソース」という機能を使います。

ブラウザソースは、HTMLファイルを配信画面に表示する機能です。

1. ダウンロードしたZIPファイルを解凍します。

（解凍せずにZIPの中を直接開くと、preview.html が正しく動きません）

2. 同梱の preview.html をブラウザで開いて、48種を見比べます。

気に入ったデザインのフォルダ名を控えてください。

（例：黒いマーカーで背景なし・秒なしなら「marker_nobg_nosec」）

3. OBS Studioを開き、「ソース」欄の「＋」ボタンを押します。

4. 一覧から「ブラウザ」を選び、名前を付けて「OK」を押します。

5. 設定画面で以下のように設定します：

・「ローカルファイル」にチェックを入れる

・「参照」ボタンを押して、選んだフォルダの中にある

index.html というファイルを選択する

・「幅」を 500、「高さ」を 120 にする

・「表示されていないときにソースをシャットダウン」のチェックを外す

6. 「OK」を押すと時計が表示されます。

ドラッグで好きな位置に移動できます。

◆ うまく表示されないときは

・時計が出ない

→ index.html のファイルパスが正しいか確認してください。

フォルダごと移動・コピーして使ってください。

・preview.html を開いても時計が出ない

→ ZIPを解凍してから開いてください。

・シーン切替のたびに時計がリセットされる

→ ブラウザソースのプロパティで

「表示されていないときにソースをシャットダウン」のチェックを

外してください。

・日付の書体が違う

→ 日付の書体はGoogle Fontsから読み込んでいます。オフラインのときは

PCにある書体で表示されます（時計そのものは変わりません）。

日付なし（_nodate）のフォルダは外部の読み込みが無いので、

オフラインでも見た目が変わりません。

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

色や線を変えたい場合（上級者向け）

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

各フォルダの style.css をテキストエディタで開くと、先頭の :root{ } の中に

設定が並んでいます。値を書き換えるだけで変更できます。

以下は marker_nobg（マーカー・背景なし）の値です。数値はフォルダごとに違います。

--ink:#141414 ← 線の色

--ink-opacity:.95 ← 線の濃さ（0.0〜1.0）

--stroke-w:9 ← 線の太さ

--outline:#FBF9F5 ← 縁取りの色

--outline-w:4 ← 縁取りの太さ（0 で縁取りなし）

--wobble-ms:180 ← 線を引き直す間隔（ミリ秒）

--wobble-corner:2.2 ← 角の揺れの大きさ

--wobble-bend:5 ← 線のたわみの大きさ

--wobble-rot:1.6 ← 数字全体の傾きの揺れ

日付ありのフォルダには --date-color / --date-size もあります。

秒なし（_nosec）のフォルダには --show-seconds:0 が入っています。

1 に変えると秒あり（6桁）に戻ります。

また、線のふちに紙目のギザつきを足す表示を用意しています（既定はオフ）。

style.css の --paper-filter を 0 から 1 に変えると有効になります。

鉛筆・ボールペン・マーカーのような均一な線に効果が出ます。

※ style.css は改行なしの1行で書いてあります。エディタの折り返しを有効にするか、

　 検索機能で設定名を探してください。

※ 編集前にファイルのバックアップを取ることをおすすめします。

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

注意事項

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

・本商品はデジタルデータ（HTML + CSS ファイル）です。動画・画像は含みません。

・時刻はPCの時計を自動取得して表示します（24時間表記）。

・秒なし版は時と分だけを表示します。数字の大きさは秒あり版と同じで、

　4桁が 500×120px の中央に並びます。

・日付は「2026年8月4日(火)」の形式で表示します。

・日付あり版は日付の書体だけ Google Fonts から読み込みます。読み込めない環境でも

　時計は表示されます（日付がPCの書体になるだけです）。

　日付なし版は外部の読み込みが無いため、オフラインでも見た目が変わりません。

・OBS Studio / Streamlabs OBS で動作します。

・配信・アーカイブ・切り抜き・収益化での利用は、個人・法人を問わず可能です。

　クレジット表記は不要です。改変も自由です。

・ファイルそのものの再配布・転売・共有はできません。

　時計部分を画像や動画として書き出して素材配布・販売することもできません。

・詳しいご利用条件は、同梱の LICENSE.txt に記載しています。