手書き風時計オーバーレイ
配信画面の時計を、手書きのまま動かし続けるために作った。手書き風フォントを表示しているのではなく、数字を構成する7セグメントの一画ずつを手描きのストロークとして引き、0.18秒ごとに引き直している。同じ時刻でも1秒前と1秒後では線のかたちが違う。マーカー・クレヨン・鉛筆・チョーク・筆ペン・ボールペンの6画材を、かすれ・粒・にじみの出方から作り分け、背景あり／なし・日付あり／なし・秒あり／なしを掛けた48種をHTMLとCSSだけで組んだ。
画材6種を切り替えて動かす
販売しているHTMLをそのまま読み込んでいる。線が引き直され続けるようすと、画材ごとのかすれ方を、買う前にここで確かめられる。出しているのは背景ありの版で、読み込むのは選んだ1種だけ。
太い主線に薄い重ね線。インクの厚みが出る
何ができるか
配信画面に、手で書いたままの時計を置ける。OBSのブラウザソースに、選んだフォルダの index.html を指定するだけでいい。PCの時計から時刻を取り、24時間表記で表示する。表示サイズは 500×120px のワイド型で、48種すべて同じ寸法にしてある。
背景あり版は紙や黒板の地色が付いた状態、背景なし版は透過で、配信画面の上にそのまま重ねられる。背景なし版は線のふちに縁取りを入れて、下地が明るくても暗くても読めるようにした。チョークだけは線が白いので、縁取りのほうを濃い色にしている。
手書き風フォントではない
数字は書体ではない。7セグメントの一画ずつを手描きのストロークとして引いている。角の位置をわずかにずらし、線をたわませ、数字全体をかすかに傾けてから、SVGのパスに落とす。これを0.18秒ごとに引き直している。
だから時刻が変わらない1秒のあいだも線は揺れ続けるし、同じ「7」でも1秒前と1秒後ではかたちが違う。書体を並べているだけなら、止まった時刻は完全に止まって見える。上のデモを数秒ながめると、その違いが分かる。
外部ライブラリは使っていない。HTMLとCSSだけで動く。
48種の内訳
画材6種 × 背景あり／なし × 日付あり／なし × 秒あり／なし で48種になる。
| 画材 | 線の特徴 | 背景あり版の地 |
|---|---|---|
| マーカー（黒） | 太い主線に薄い重ね線。インクの厚みが出る | 紙の地色 |
| クレヨン（赤） | 蝋が紙目に乗るザラつき。粒が線に沿って乗る | 画用紙の地色 |
| 鉛筆（グレー） | 細く薄い線と、二度書きの重なり | 紙の地色 |
| チョーク（白） | 粉のかすれ | 黒板 |
| 筆ペン（黒） | 始点が太く、終点が細くなる抑揚 | 和紙風の地色 |
| ボールペン（青） | 細く均一な線 | 罫線ノート |
日付ありの版は、時刻の下に「2026年8月3日(月)」の形式で日付が出る。秒なしの版は時と分だけを出す。配信画面で秒が動き続けるのが気になる場合に使う。上のデモで切り替えられるのは、背景あり・秒ありの版（画材6種 × 日付あり／なし）。
OBSに入れる
- 使いたいフォルダを1つ決める。
- ソース欄の「＋」から「ブラウザ」を追加する。
- 「ローカルファイル」にチェックを入れ、選んだフォルダの
index.htmlを指定する。 - 幅を 500、高さを 120 にする。
- 「表示されていないときにソースをシャットダウン」のチェックを外す。
最後の1つを外さないと、シーンを切り替えるたびに時計がリセットされる。
入手先
BOOTHで ¥500 で販売している。48種すべてが入ったZIPで、中身はHTMLとCSSのデータ。動画・画像は含まない。OBS Studio と Streamlabs OBS で動作する。