TOKI×Maker

既存の配信用時計ウィジェットは「最低限の数字表示」か「特定の世界観に寄せたデザイン」が多く、自分のサイト・ブランドに合わせて自由に調整するのが難しい現状があります。TOKI×Makerは「自分の世界観に合った時計を、コードを書かずに作って配信に貼る」ことを目的にしています。

プレビュー → 微調整 → HTML書き出し → OBSに貼る、までを1ファイルで完結。Peraravatar 同様、外部サーバ不要のクライアント完結型です。

• 3つのモード: 時計 / カウントダウンタイマー / カウントアップ
• 時計タイプ: デジタル / アナログ
• 副時計 (別タイムゾーン): UTC / JST / KSTなど14種プリセット + IANAカスタム
• 計 23 種のプリセット: 時計 18 種 / タイマー 3 種 / カウントアップ 2 種 (一覧は プリセット)
• 4つのUIテーマ: ダーク / ライト / ファンシー / 手芸 (クロスステッチ風)
• 多言語フォント 100種以上: 日本語 / 韓国語 / 中国語 / タイ語 / ロシア語 / 等幅 / Sans / Display / Script
• 文字スタイル: 太字 / 斜体 / 下線 / 縁取り / 影 / グラデーション
• 背景: 単色 / 線形・放射グラデ / 画像レイヤー (複数枚) / Material Iconスタンプ
• 枠線・フレーム: 通常枠 / 画像 (フレーム / 伸縮) / 画像 (9スライス)
• 形状: 矩形 / 角丸 / 円形 / 上下半円 / 上下のみ角丸
• AM/PMスタイル: AM / PM / a.m. / p.m. / 午前 / 午後 + 位置・色・スタイル個別調整
• バッジ: テキスト + Materialアイコン (左右)、6種アニメ (点滅 / パルス / バウンス / シェイク / グロー / マーキー)
• 日付フォーマット: moment.js風プレースホルダ (YYYY/MM/DD など)、[Mar] D [Birthday] のブラケットエスケープ対応
• レイアウト: 時刻 / 日付 / バッジ / 副時計の並び替え + 9方向アンカー + 個別配置 (左/中/右)
• 書き出し: 自己完結HTML / PNG画像 / クリップボードコピー / SNSシェア / JSON / URLエンコード共有 (非推奨)
• 自動保存: localStorageに常時保存、Undo / Redo (Ctrl+Z / Ctrl+Y)
• 多言語: 日本語 / 英語
• UIカスタム: テーマ切替 / メニュー位置 (右・左) / 文字サイズ (90-150%) / UI非表示
• モバイル対応: スマホでは縦並びレイアウト (プレビュー上 / メニュー下) で操作可能

ヘッダ下の「時計 / タイマー / カウントアップ」タブで切替。それぞれ独立した設定を保持し、「モード間で見た目を引き継ぐ」トグルONで現在の見た目を他モードに持ち越せます。

‹ ›

「プリセット」タブから1クリックで適用。ベースとして読み込み → 各タブで微調整するのが最速の使い方です。

エディタUI自体の見た目をヘッダ右上の「テーマ」セレクタから切り替えられます (時計プレビュー自体には影響しません)。

‹ ›

プレビュー上の時刻、日付、バッジ、副時計の各要素にホバーすると ✎ ボタン が出ます。クリックでその要素だけのインライン編集ポップアップが開き、フォントや色を即変更できます。

タイマー / カウントアップモード時は、プレビュー右下に再生コントロールが表示されます (時計モードでは非表示)。

• ▶ / ⏸: 再生 / 一時停止 (ショートカット: Space)。タイマー「時間 (期間) を指定」と、カウントアップ「0 から (ページ読み込み起点)」のみ表示 (それ以外は実時刻基準で動作するため一時停止不要)
• ↻: リセット (ショートカット: R)。タイマー残り時間 / カウントアップ起点を再初期化
• ✎: 編集ポップアップ (ショートカット: E)。タイマーは「終了日時 / 期間」、カウントアップは「起点日時」を直接編集。カウントアップの「0 から」モード時は編集対象が無いため ✎ 自体が非表示

時刻表示の本体を設定するタブ。タイプ (デジタル / アナログ) によって設定項目が大きく変わり、追加で副時計も同じタブ内に置かれます。タイマー / カウントアップモード時は、固有設定 (終了日時 / 期間 / 満了テキスト) もこのタブ内に表示されます。

主な下位セクション:

• 時刻タブ - デジタル: タイプ「デジタル」選択時の設定 (表示形式、数字、コロン、AM/PMなど)
• 時刻タブ - アナログ時計: タイプ「アナログ」選択時の設定 (文字盤 / 針 など)
• 時刻タブ - 副時計 (別タイムゾーン): 主時計と並べて別タイムゾーンを表示

タイプを「デジタル」にしているときの設定項目。

• 形式: 24時間 (HH:MM) / 12時間 (h:MM AM/PM) (12時間時に AM/PMスタイル セクションが有効化)
• 秒の表示: ON/OFF
• 数字のアニメーション: なし / フェード / スライド (上) / スライド (下) / フリップ / 拡大
• AM/PMスタイル (12時間時):
  • AM/PM表記: AM / PM / a.m. / p.m. / 午前 / 午後
  • AM/PM位置: 時刻の後 / 時刻の前 / 非表示
  • スタイル: フォント / サイズ (px) / 太さ (font-weight 100-900) / 文字スタイル (斜体 / 下線) / 色 / 縦位置 (px) / 横位置 (px)
• 数字 (時・分・秒):
  • フォント / サイズ (px) / 太さ (font-weight 100-900) / 文字スタイル (斜体 / 下線) / 色 / 字間 (px)
  • テキスト装飾: なし / ネオン光彩 / 縁取り / 影 (ぼかし) / レトロ影 (オフセット)
  • 装飾色 / 装飾の強さ (px) (テキスト装飾≠なしのとき)
• 時刻と日付の区切り線: 区切り線を表示 ON/OFF / 位置 (下のみ / 上のみ / 上下両方) / 色 / スタイル (実線 / 破線 / ドット / 二重線) / 太さ (px) / 線とテキストの間隔 (px)
• コロン:
  • 点滅 ON/OFF
  • 点滅スタイル: 普通 (オン/オフ) / なめらか / うっすら / ハード (カクッとオン/オフ) / グロー (光る)
  • カスタムコロンを使う ON/OFF (ON で「:」記号を任意の文字や Material Symbols アイコンに置換)
    • 記号の種類: 文字 / アイコン
    • 記号の種類=文字: 任意文字を入力 (デフォルト「・」、最大 3 文字)
    • 記号の種類=アイコン: Material Symbols アイコン名 + スタイル (アウトライン / 塗りつぶし / ラウンド / シャープ / ツートーン)
  • 縦位置 (px) / 記号の間隔 (px)
  • フォント / サイズ (px) (「数字に合わせる」ボタンで 時 / 分 / 秒 の数字サイズに同期) / 太さ (font-weight) / 色
• タイムゾーン表示 (時計モード + デジタル時のみ):
  • ラベルを表示 ON/OFF
  • 内容: 自動 (端末のタイムゾーン) / カスタム
  • 表示文字列 (内容=カスタム時の自由入力、例: Tokyo)
  • 位置: 時刻の前 / 時刻の後
  • フォント / サイズ (px) / 主時計との間隔 (px)

時刻タブの「タイプ」を「アナログ」に切り替えるとデジタル設定が消えてアナログ用設定が現れます。

ダイヤル

• サイズ (px) / 形状 (円 / 正方形)
• 文字盤の色 / 枠の色 / 枠の太さ (px)

目盛り

• 時目盛: なし / 点 / 線 / 数字 (1-12) / ローマ数字 (I-XII)
• 表示位置の数: 12 (全ての時) / 4 (12 / 3 / 6 / 9 のみ)
• 数字のフォント (時目盛が「数字」「ローマ数字」時のみ)
• 分目盛を表示 ON/OFF
• 分目盛の強調: 強調なし / 3分ごと / 5分ごと (時の位置)
• 強調スタイル: 太線 / 長線 / 別色 (「別色」時のみ強調色を指定)
• 目盛り色
• 個別目盛をカスタマイズ: 12 時の目盛それぞれをデフォルトの代わりにテキスト / Material Symbols アイコン / 画像 URL に置き換え可能

時針 / 分針 / 秒針

• 秒針のみ 秒針を表示 ON/OFF あり (時針 / 分針は常時表示)
• 長さ (%) / 太さ (px) / 色
• 針先: 丸 (デフォルト) / 平 (フラット) / 矢印 / 矢印 (角丸) / 菱形 / 円 / 葉 / 画像
• 針先サイズ (px) (針先が対応する形状のときのみ)
• 秒針のみ 秒針アニメ: 刻み (1秒ごと) / なめらか (スイープ)

中央装飾

• 針の背面に描画される飾り (文字盤中央のロゴ・宝石・キャラクターなど)
• タイプ: なし / 円 / アイコン (Material Symbols) / 画像 (PNG / JPG / SVG)
• 色 / サイズ (px) / 不透明度
• アイコン / 画像時のみ縦位置・横位置の微調整 (px)

中心ピン

• 針の前面に描画される止め釘的なアクセント
• タイプ: なし / 円 (デフォルト) / アイコン / 画像
• 色 / サイズ (px) / 不透明度

主時計と異なるタイムゾーンの時刻を並べて表示できる機能です。海外向け配信や、国内 + UTCの併記などに。時計モード + デジタル時のみ有効 (アナログ / タイマー / カウントアップでは表示されません)。

• 副時計を表示 ON/OFF
• タイムゾーン (14 種プリセット + IANA カスタム):
  • UTC / JST / KST / CST / SGT / IST / GMT / CET (Europe/Paris) / CET (Europe/Berlin) / ET / CT / PT / AEST / NZST
  • カスタム… (選択時に Europe/Madrid のような IANA 形式の名前を入力)
• ラベル: 自動 (JST / UTC など) / カスタム / 表示しない
• カスタムラベル (ラベル=カスタム時のみ)
• ラベル位置: 時刻の前 / 時刻の後
• ラベル スタイル: フォント / サイズ (px) / 時刻との間隔 (px)
• サイズ: 主時計に対する % で指定
• 太さ (font-weight 100-900)
• 文字スタイル: 斜体 / 下線
• 色: 色 / コロンの色 / AM/PMの色 (それぞれ「主時計に合わせる」ボタンで主時計に同期)
• AM/PMを調整する: OFF で主時計の AM/PM設定 (形式 / 位置 / 表記) を継承、ON で副時計に独立指定
  • 形式: 24時間 (HH:MM) / 12時間 (h:MM AM/PM)
  • AM/PM位置: 時刻の後 / 時刻の前 / 非表示
  • AM/PM表記: AM / PM / a.m. / p.m. / 午前 / 午後
• 秒を表示 ON/OFF
• 余白: 上の余白 (px) / 下の余白 (px)
• 主時計に合わせる ボタン (6 箇所): ラベルのサイズ / ラベルと時刻の間隔 / サイズ (%) / 色 / コロンの色 / AM/PMの色 — それぞれ主時計の対応値に即同期

日付表示の有無とフォーマットを設定します。

• 日付の表示 ON/OFF
• フォーマット: プリセット (YYYY-MM-DD / YYYY年MM月DD日 / ddd, MMM D など) または「カスタム…」を選んで自由入力。プリセットは「数字 (日本式)」「日本式 + 曜日」「数字 (海外式)」「月名 (短)」「月名 + 曜日」「序数 / 装飾」のグループに分かれて選択可能
• 言語: 日本語 / 英語 (曜日や月名のローカライズ)
• カスタム書式: フォーマットを「カスタム…」にしたとき自由入力 (例: YYYY/MM/DD, MMM D, YYYY)
• アルファベット大文字化 ON/OFF (英字フォーマット時に大文字化)
• プレースホルダ: YYYY YY MM M DD D ddd dddd MMM MMMM Do
• ブラケットエスケープ: [Mar] D [Birthday] のように [...] 内はそのまま文字列として出力。記念日や固定ラベルの埋め込みに
• フォント / 曜日のフォント: 既定では日付フォントを継承。「ddd / dddd」だけ別フォントを当てたい場合のみ個別指定 (英字フォント + 曜日だけ日本語フォントなど)
• サイズ (px) / 色
• 余白: 上の余白 (px) / 下の余白 (px) (時刻や他要素との間隔)
• 文字スタイル: 太字 / 斜体 / 下線
• テキスト装飾: なし / ネオン光彩 / 縁取り / 影 (ぼかし) / レトロ影 (オフセット) + 装飾色 / 装飾の強さ (px) を個別指定
• 曜日の色をカスタム: ON で 日 / 月 / 火 / 水 / 木 / 金 / 土 の 7 曜日それぞれに色を指定 (プレビューボタンあり)

時計の上下や横に短いラベル (LIVE / 配信中 / 朝活 など) いわゆる「バッジ」を表示できます。

• バッジ表示 ON/OFF
• テキスト (例: LIVE, 配信中, 朝活)
• フォント / サイズ (px) / 色 / 字間 (px)
• 余白: 上の余白 (px) / 下の余白 (px)
• 文字スタイル: 太字 / 斜体 / 下線
• テキスト装飾: なし / ネオン光彩 / 縁取り / 影 (ぼかし) / レトロ影 (オフセット) + 装飾色 / 装飾の強さ (px) を個別指定
• アイコンを使用する ON/OFF (アイコン関連項目をまとめて有効化)
• アイコン: バッジテキストの左右に Material Symbols を個別配置可能
  • 左側に配置 / 右側に配置: プルダウンから選択。「カスタム…」を選ぶと入力欄が出て任意の Material Symbols 名 (例: crown, favorite) を直接指定可能
  • 左側スタイル / 右側スタイル: アウトライン / 塗りつぶし / ラウンド / シャープ / ツートーン
  • 左右サイズを連動 ON/OFF (OFF で左サイズ / 右サイズを個別指定)
  • 色 (左右共通)
  • 左右の間隔を連動 ON/OFF (OFF で左の間隔 / 右の間隔を個別指定、いずれも px)
• アニメーション:
  • 種類: なし / 点滅 / パルス (拡縮) / バウンス (上下) / シェイク (左右) / グロー (発光) / マーキー (右→左流れる)
  • 速度 (倍率スライダ、全アニメに適用)

カードの背景・形状・枠線・画像レイヤーまで全部このタブで設定します。

形状

• 矩形 / 角丸 / 円形 / 下だけ角丸 / 上だけ角丸 / 下半円 / 上半円
• 角丸の量 (px) は対応する形状のときだけ表示
• 「画像 (9スライス)」フレーム使用時は clip-path で角丸を適用するため、フレーム画像の四隅装飾は丸めた領域の外側で切り取られる (例: 円形にすると四隅装飾が見えなくなる)

余白 (カード内側)

• 上下 (px) / 左右 (px)

塗り

• 塗り方: 単色 / 線形グラデーション / 放射グラデーション
• 背景色 / 背景色2 (グラデーション時)
• 角度 (度) (線形グラデーション時)
• 透過 (0=透明) (0-1)

背景画像

• 塗り (単色やグラデーション) の上に、画像レイヤーを複数枚重ねることができる (上のリストほど下のレイヤー)
• 「+ 画像を追加」ボタンでレイヤーを追加。各レイヤーは画像 (PNG / JPG / SVG) または Material Symbols アイコンを選択可能
  • 画像モード: 全体に表示 (はみ出し可) / 全体に表示 (はみ出さない) / 並べて配置 / 引き伸ばし / アイコン (原寸 + 位置指定)
  • アイコン: 名前 (カスタム入力可)、スタイル (アウトライン / 塗りつぶし / ラウンド / シャープ / ツートーン)、色 / サイズ / 位置 / 回転角度 / 不透明度
  • レイヤーの順序入れ替え / 削除 / コピー

枠線

• スタイル: なし / 実線 / 破線 / ドット / 二重線 / 溝 / 隆起 (これらは 太さ (px) / 色 を指定)
• 画像 (フレーム / 伸縮): 任意の画像 (PNG / JPG / SVG) をカード全体に伸縮配置 (アスペクト比に応じて変形)
  • サンプル: 木製肉球 / ゆめかわ / ゴシック / 鳩時計 / サーカス
  • 縦横サイズを連動 ON/OFF / 縦サイズ (%) / 横サイズ (%)
  • 縦位置 (px) / 横位置 (px)
  • コンテンツの上に重ねる ON/OFF (アナログ時計など中身が大きい場合に有効)
• 画像 (9スライス): 角を保ったまま辺と中央を伸縮する Unity 風フレーム
  • サンプル: 桜 / キラキラ / ステッチ / アーガイル
  • スライス幅 (px)
  • 辺の描画: 引き伸ばし / 繰り返し / 繰り返し (端を調整)
  • 中央も塗る ON/OFF
  • 枠の下を透過 ON/OFF (枠領域の背景色を塗らず、ステージ背景が透ける)
  • 塗り範囲の外寄せ (px)
• 独自画像のアップロード対応 (PNG / JPG / SVG)

• OBS シーン内での位置: 9方向アンカー (↖ ↑ ↗ ← ● → ↙ ↓ ↘) で時計をシーン内のどこに置くか指定
• 並び順: 時刻 / 日付・曜日 / バッジ / 副時計 を ↑↓ ボタンで上下入れ替え
• テキスト配置:
  • 左右: 左寄せ / 中央 / 右寄せ (既定では全要素一括)
  • 「個別に指定する」ON: 時刻 / 日付・曜日 / バッジ / 副時計 を個別に「自動 (全体に合わせる) / 左寄せ / 中央 / 右寄せ」で指定可能

用意済みのプリセットをワンクリックで適用するタブ。選ぶと現在のモードの全設定が上書きされます (Ctrl+Z で取り消し可)。

全プリセットの見た目のサンプルは プリセット を参照。

HTML書き出し

• HTML書き出し: 設定をすべて埋め込んだ単一HTMLを書き出し。OBSの「ブラウザソース」→「ローカルファイル」で読み込み

設定の共有・移行

• JSONをコピー / JSONを貼り付けて適用: クリップボード経由でJSON共有
• JSONをファイルで書き出し / JSONファイルを読み込み: 画像を含む設定など、JSONが長くなる場合

シェア

• シェアする: SNS・メール・クリップボードに画像とテキストを共有 (シェアモーダル)
• PNG画像だけ保存: 現在のプレビューをそのままPNGとしてダウンロード

タイマー / カウントアップモード時、時刻タブ内に専用セクション (タイマー設定 / カウントアップ設定) が表示されます。

タイマー設定 (タイマーモード時)

• 指定方式: 終了日時を指定 / 時間 (期間) を指定
  • 終了日時を指定: 日付 + 時刻で指定。起動時に過ぎていたら 24 時間単位で自動翌日ロール → 毎日同時刻終了のリピート配信に最適
  • 時間 (期間) を指定: 時 / 分 / 秒 を入力 → ブラウザを開いてからカウントダウン
• 満了時の挙動: 00:00:00 で停止 / マイナス (超過時間) 表示
• 満了テキストを表示 ON/OFF
• 満了テキスト: 満了時に表示する文字列 (例: 時間です！)
• 満了テキスト スタイル: フォント / サイズ (px) / 色 / 文字スタイル (太字 / 斜体 / 下線)
• 満了時にバッジを隠す ON/OFF

カウントアップ設定 (カウントアップモード時)

• 起点: 特定日時から / 0 から (ページ読み込み起点)
  • 特定日時から: 起点日時 (datetime) を指定 → そこからの経過時間を表示。配信開始日からの経過カウンタなどに
  • 0 から (ページ読み込み起点): ブラウザを開いてから 0 スタート。配信経過時間に
• 起点日時 (起点=「特定日時から」時のみ)
• 日付エリア: 現在日時を表示 / 起点日時を表示 / 非表示

時計の数字、日付、バッジ、副時計、AM/PM、タイムゾーンラベル など コロンを除く全テキスト要素 に共通で:

• 太字 (font-weight 100-900)
• 斜体
• 下線
• カラーピッカー + HEX直入力
• フォント選択

内蔵フォントは 100種以上 あり、日本語 / 等幅 (時刻表示向け) / Sans / Display / Script / 韓国語 / 中国語 / タイ語 / ロシア語 / System の10カテゴリに分類されています。

1. HTMLを書き出す: 書き出しタブから「HTMLを書き出す」
2. 適当な場所に保存: 例 C:\配信\tokei.html
3. OBSでブラウザソースを追加: ソース → + → ブラウザ
4. ローカルファイル にチェック → 保存したHTMLを指定
5. 幅 / 高さ を時計のサイズに合わせて調整 (例: 600×200)
6. 「カスタムCSS」 は不要 (HTML側に全部入っているため)
7. OBS上で位置を調整 して完了

ヘッダ右上から以下を切替可能 (すべてlocalStorageに永続化):

• 言語: 日本語 / English — UIラベル・ヒント・日付ロケール・書き出しHTMLのテキスト全部に反映
• テーマ: ダーク / ライト / ファンシー / 手芸
• UI非表示 (F キーまたはボタン): エディタUIを隠して書き出し後と同じ見た目で時計のみ表示
• 表示設定 (ボタンクリックでポップオーバーが開く):
  • エディタ表示 — 文字サイズ (90% / 100% / 110% / 125% / 150%) / メニュー位置 (右 / 左)
  • プレビュー (表示確認用。書き出しには含まれません):
    • プレビュー背景: チェッカー柄 / ダーク / ライト / 透明 / 単色 (OBSのソース下の見え方確認用)
    • 時刻プレビュー (時計モード時のみ): 任意の年月日時刻を指定してその瞬間の見え方を確認 (曜日表示・深夜/正午・年末年始など)
• モード間で見た目を引き継ぐ (チェックボックス): 時計 / タイマー / カウントアップ切替時に現在の見た目を新モードへ持ち越す

• localStorageに自動保存: 変更のたびにブラウザに保存されるので、タブを閉じても次回開くと復元される
• モードごとに独立: 時計 / タイマー / カウントアップは別々の設定として保存
• Undo / Redo履歴: 直近の編集を1操作単位で巻き戻せる (Ctrl+Z / Ctrl+Y、最大履歴数あり)
• リセット: ヘッダの「リセット」ボタンで現在モードの設定を初期化
• JSONをコピー / JSONをファイルで書き出し: 全モード分の設定をJSONとしてクリップボードかファイルに出力。チャット貼り付けや別PCへの移行に
• JSONを貼り付けて適用 / JSONファイルを読み込み: 受け取ったJSONテキストやファイルから設定を復元

スマートフォン (画面幅768px以下) ではUIが自動的に縦並びになります:

• プレビュー: 上 (画面の約半分)
• メニュー: 下 (残り、縦スクロール)
• 左右分割スプリッタは非表示 (タップでドラッグ困難なため)
• 「メニュー位置」設定はモバイルでは無視され、固定でこのレイアウトになる

本ツールを配信や個人プロジェクトで使う場合、クレジット表記は必須ではありません。ですが、表記してもらえると制作の励みになります。

標準フォーマット

TOKI×Maker by Ichigyun
https://gyungyun.dev/works/toki-maker

配信概要欄向け (短縮)

時計: TOKI×Maker (gyungyun.dev) / @zkmy_kuro

汎用ガイドは トップページのクレジット表記 を参照。