使い方・ツールについて
🕐 配信用時計とは?
配信画面に表示できる時計ウィジェットです。
OBSの「ブラウザソース」にURLを貼るだけで、おしゃれな時計を配信画面に追加できます。
すべてのデザインを無料で利用できます。
アカウント作成は不要です。すぐに使えます。
シンプル、ネオン、グラデーションなど多数のテイストから選べます。
文字色・背景色・フォントサイズを自分好みに調整できます。
画面の右上・左下など、配置する場所に合わせて角丸パターンを選べます。
🙋 こんな人におすすめ
- 配信画面に時計を出したいけど、設定が面倒な人
- 配信画面をもっとおしゃれにしたい人
- アカウント登録なしでサクッと使いたい人
- 色々なデザインをサクサクっと試したい人
✨ このツールの特徴
選ぶ → コピー → OBSに貼付!
設定項目で迷うことなく、「選んで、使う」が出来るようにたくさんプレビューを用意しています!
シンプル・ネオン・グラデーション・モチーフなど、テイスト別に豊富なデザインを用意しました!
色・フォント・表示内容の組み合わせで、自分に合う時計がきっと見つかります!
画面の右上・左下など、置く場所に合わせて角丸の位置を選べます!画面の端にぴったり収まるデザインに。
右上配置の場合、角丸は左下のみ。上配置の場合は右下・左下が角丸になります。
デザイン選択は「この時計を使う」→「カスタマイズ・詳しい設定方法」から詳細ページへ移動し、「配置位置」を選択して「URLをコピー」ボタンでURLをコピーしてください。
プリセットをそのまま使ってもOK!
詳細ページから、文字色・背景色・フォントサイズなど簡単なカスタマイズもできます!
さらに細かい調整をしたければ、OBSのカスタムCSS欄から調整OK!
📖 使い方
デザインを選ぶ
配信用時計のデザイン一覧から好きなデザインを選びます。
テイスト別(シンプル、ネオン、グラデーション等)に分かれているので、配信の雰囲気に合ったものを探してください。
URLをコピー
デザインカードの「この時計を使う」ボタンを押すと、URLが表示されます。
「URLをコピー」ボタンを押してクリップボードにコピーしてください。
OBSでブラウザソースを追加
OBSを開き、ソース一覧の下にある「+」ボタンをクリックします。
メニューから「ブラウザ」を選択して、新しいソースを追加します。
URLを貼り付けて完了!
ブラウザソースのプロパティ画面で、URL欄にコピーしたURLを貼り付けます。
幅・高さをデザイン詳細ページに記載の「おすすめサイズ」に設定して、OKを押せば完了です。
📐 配置位置について
背景付きのデザインでは、配信画面のどこに時計を配置するかによって角丸パターンを選べます。
デザイン詳細ページの「配置位置」セクションで切り替えられます。
例えば画面の右上に配置する場合は「右上」を選ぶと、画面の角に接する部分の角丸がなくなり、ぴったり収まるデザインになります。
🔧 もっとカスタマイズしたい方へ
OBSのブラウザソースには「カスタムCSS」欄があり、より細かい調整が可能です。
各デザインの詳細ページに、CSSカスタマイズのサンプルコードを掲載しています。
PCにインストール済みのフォントを使いたい場合も、カスタムCSSから --clock-font-family を変更することで対応できます。
❓ よくある質問
料金はかかりますか?
いいえ、すべてのデザイン・機能を完全無料で利用できます。アカウント登録も不要です。
OBS以外の配信ソフトでも使えますか?
ブラウザソース(Webページの埋め込み)に対応している配信ソフトであれば、同じURLで利用できます。Streamlabs OBSなどでも動作します。
時計の時刻は正確ですか?
お使いのPCの時刻を表示しています。PCの時刻が正確であれば、時計も正確です。
タイムゾーンの変更はできますか?
現在はPCのタイムゾーンに従って表示されます。タイムゾーン指定機能は将来の追加を検討しています。
データはサーバーに保存されますか?
いいえ。時計の表示はすべてブラウザ上で行われ、サーバーにデータを送信することはありません。
💡 つくったきっかけ
ちょこちょこ配信を見ていると、時計が「とりあえず置いてる」感じのもあれば、「配信の雰囲気にめっちゃマッチしてる!」ものもあって、個人的に、時計って意外と印象に残るパーツだなぁと思っていました…!
自分もおしゃれな時計を使いたい!でも探すのも面倒だし、有料のものを買ったとしても、ずっと使うかはわからない…。だったら…
じゃあ、自分で作っちゃおう!
…ということでこのツールを作り始めました😂
デザインの品質は正直 "それなり" かもしれないですが、いろんなパターンを気軽に試せるのがこのツールの良いところだと思っています。
「自分の配信にはこういう方向性が合うんだな」というのが見つかれば、有料の素材を買うときの判断基準にもなるんじゃないかなって!
あと、どうせ作るなら"おすそわけ"として誰でも使えるようにしたいなと思って公開しました!
バイブコーディング(AIと一緒にコーディングするスタイル)のアイデア集めとしても楽しく作っています!
🚧 現在の開発状況
まだ公開したばかりのツールです。デザインを増やしながら改善を続けています!
- シンプル・ネオン・グラデーションの3テイストを公開中です
- レトロ・サイバー・ナチュラルなど、他のテイストもコツコツ追加していきます!
- デザインのリクエストも受け付けています!
📨 リクエストについて
「こんなデザインがほしい!」「この色のバリエーションがほしい!」など、X(Twitter)で声をかけてもらえればリクエストにお応えします!
急ぎで作るなどの対応はできませんが、気長にお待ちいただければうれしいです!
📋 利用について
- クレジット記載は不要です!
- 個人・法人など業態を問わず、商用利用OKです!
- もし気に入っていただけたら、SNS・配信・動画・ブログなどで紹介お願いします!
🚫 禁止事項
以下に該当するプロジェクトでの使用を禁止します。
- 反社会的勢力に関連するプロジェクト
- 性的コンテンツを扱うプロジェクト
- 公序良俗に反するプロジェクト
※ ここでのプロジェクトとは、配信活動・Webサイト・Webサービス・アプリ・講演・印刷などの媒体を問わず、すべての活動を指します。
⚠️ 免責事項
- すべての環境・すべてのデザインパターンでの動作を保証するものではありません。
代表的なパターンでテストを実施していますが、すべてのパターンを網羅的にテストしているわけではありません。不具合を発見された場合は、X(Twitter)でご報告いただければ早めに対応いたします。
- 本ツールの利用により生じた損害(配信トラブル、データ損失、その他一切の損害)について、開発者は責任を負いません。
- 本ツールは予告なく仕様変更・提供終了する場合があります。
- OBSなど外部ソフトウェアとの互換性について保証するものではありません。
- 表示される時刻はお使いのPCの時刻に依存します。時刻の正確性について保証するものではありません。
📣 紹介テキスト
X(Twitter)での紹介や動画概要欄などでご紹介いただけるとうれしいです!
OBSにURLを貼るだけ!配信画面にオシャレな時計を追加できる無料ツール https://pochipochi-stamp.com/tools/stream-clock/
@yosiakatsuki_mh