Share
OBSに時計を表示するやり方！無料のおすすめテンプレートも紹介！
Index
配信画面に時計を表示するだけで、視聴者にリアルタイム感を伝えられるのはもちろん、画面全体のバランスを整える効果も期待できます。とはいえ、OBSで時計を追加する方法がわからず、つい後回しにしている方もいるでしょう。
この記事では、OBSに無料で時計を表示するやり方に加え、おすすめのテンプレートやカスタム素材を入手できる便利なサイトまで解説します。
配信画面を魅力的なものに仕上げたい方は、ぜひ参考にして実践しましょう。
また、記事の最後に動画による解説も入れてありますので、動画の方が見やすい方はそちらをご覧ください。
OBSに時計を表示するメリット3選
配信画面に時計を表示すると画面全体のデザインが引き締まり、よりプロらしい印象を与えられます。さらに、配信者と視聴者のタイムラグを意識しやすくなることで、配信体験がスムーズになります。
まずはOBSに時計を表示するメリットをチェックしましょう。
- 視聴者にリアルタイム感を伝えられる
- 配信画面をバランスよく仕上げられる
- 視聴者とのタイムラグを埋められる
視聴者にリアルタイム感を伝えられる
OBSで時計を表示するだけで、配信にリアルタイムのライブ感を加えられます。テレビの生放送に時刻が表示されているのと同じように、画面に時計があると配信の臨場感が一気に高まります。
朝活配信やタイムリーな話題を扱う配信では、時計があると視聴者が配信のリアルタイム性を直感的に感じられるでしょう。
さらに、配信を見ながら別の作業をしている視聴者にとっても便利です。わざわざ画面を切り替えなくても時間を確認できるので、視聴者の離脱を防げます。
配信画面をバランスよく仕上げられる
配信画面に時計を追加するだけで、全体のデザインバランスが良くなります。
雑談配信や動きの少ないシーンが続くと、画面が単調に見えやすいです。時計をはじめとしたツールを表示すれば、画面に適度なアクセントを加えられます。
時計には動きがあるので、静止画や固定された背景に変化を与える役割もあり、視聴者の目を引きつけ、画面にメリハリを生み出します。
配置を工夫すれば、配信画面が格段にプロらしくなります。時計を使えば、ただ画面の隙間を埋めるだけでなく、視聴者にも配信者のセンスが伝わるはずです。
視聴者とのタイムラグを埋められる
OBSで時計を表示することには、視聴者とのタイムラグを把握しやすくなるというメリットがあります。
また、次のような場面でも役立ちます。
- TikTokの同時視聴イベント：配信者と視聴者が同じタイミングで映像や音声を楽しめる
- YouTubeでのリプレイ視聴：視聴者がアクションのタイミングを正確に確認できる
- 権利関係のある映像の代替：動画の切り抜き者が時計を基準に進行状況を追いやすくなる
OBSに時計を表示する基本手順
OBSで時計を表示するには、特別なプラグインや難しい操作は必要ありません。
テンプレートの表示方法については後ほど触れますので、まずはOBSでの基本的な設定方法をチェックしましょう。
1.「ソース」の「＋」ボタンをクリック
2.「ブラウザ」を選択
3.「配信用時計」や「時刻表示」など、わかりやすい名前を付けて「OK」をクリック
続いては、以下2種類の方法があります。
- URLのコピペで時計を表示する方法
- ローカルファイルを使って時計を表示する方法
時計のテンプレートが「URL形式」なのか「ローカルファイル」なのかは、配布サイトによって異なります。
好みの時計を見つけたら、形式を必ずチェックしましょう。
OBSで使える時計テンプレートのおすすめ3選
配信をもっと楽しく、そしておしゃれに仕上げたい方におすすめの時計テンプレートを厳選しました。動きのあるデザインや、シンプルかつ実用的なスタイル、さらにはちょっと変わった個性派デザインまで幅広くあります。
各テンプレートの特徴や使い方を解説するので、配信スタイルに合ったものを見つけましょう。
動きが楽しい！パタパタ時計
「パタパタ時計」は、数字がめくれるアニメーションが特徴的なテンプレートです。
白と黒を基調にしたシンプルなデザインながら、その動きが配信画面にアクセントをプラスしてくれます。
ダウンロードからOBSへの設定までの手順をわかりやすくまとめましたので、参考にしながら設定を進めましょう。
1.Pixivアカウントの準備
パタパタ時計はPixivのアカウントが必要です。アカウントを持っていない方は、こちらで作成しましょう。
2.ダウンロードリンクにアクセス
Pixivにログイン後、パタパタ時計のページに移動します。「無料ダウンロード」をクリックしてファイルを取得しましょう。
3.ファイルの展開
ダウンロードしたファイル（pata_clock_v1.zip）は圧縮されているため、展開ソフトを使って解凍します。解凍後、フォルダ内にあるHTMLファイルが設定用データです。
OBSでの設定手順は、以下を参考にしましょう。
1.OBSを起動し、「ソース」欄の「＋」をクリックして「ブラウザ」を選択
2.ファイル名を「パタパタ時計」とするなど、わかりやすい名前を設定
3.「ローカルファイルを使用」にチェックを入れ、解凍したHTMLファイルを参照して選択
4.サイズや位置を調整し、画面の好きな場所に配置
画面に動きを加えたい方におすすめのデザインです。時計を設置するだけで、配信全体の印象が洗練されます。
パタパタ時計の色を変更する方法
パタパタ時計のデフォルトは白黒ですが、配布者が提供する「色変更用ツール」を使えば、色を変更できます。
色変更用ツールはこちらですので、まずはアクセスしましょう。
全4ヶ所の項目を調整したら、「カスタマイズコードをCopyする」をクリック。生成されたカスタムCSSコードを取得し、以下の順に沿ってHTMLファイルを編集しましょう。
1.HTMLファイルの編集
ダウンロードしたパタパタ時計フォルダ内のindex.htmlファイルをテキストエディタ（例: NotepadやVS Code）で開きます。
2.CSSコードを追加
ファイル内に「カスタマイズ設定ここまで」という記述があります。その直下にコピーしたCSSコードを貼り付けましょう。
3.編集内容を保存
ファイルを保存し、変更内容を反映させます。
続いてはOBSを開き、以下の順に沿ってHTMLファイルをアップロードしましょう。
1.OBSで「ブラウザ」ソースを開き、先ほど編集したHTMLファイルをアップロード
2.配信画面に戻り、色が変更されていることを確認
カラーカスタマイズをすることで、配信の雰囲気にぴったりの時計デザインを作成可能です。
暖色系を使えば温かみのある印象に、クールな青系なら落ち着いた雰囲気を演出できます。視聴者の目を引くインパクトのあるデザインを目指して色の調整をしましょう。
シンプル派におすすめ！日付と時間だけのデジタル時計
「余計な装飾なしで時刻表示したい」「実用性を重視したい」方には「日付と時間だけを表示するデジタル時計」がおすすめです。
このテンプレートは、視認性に優れたシンプルなデザインが特徴です。無駄を省きつつも、配信画面をすっきりと見せられます。
導入手順は以下の通りです。
1.サイトにアクセスし、テンプレートのURLをコピー
2.OBSの「ソース」で「ブラウザ」を追加し、URL欄に貼り付ける
3.サイズと位置を調整して配信画面に設置
URLを貼り付けるだけで利用できるので、時刻表示に時間をかけたくない方は試してみましょう。
配信画面を個性的に！おしゃれなアナログ時計
アナログ時計は、動きのある針や丸みを帯びたフォルムが、画面全体に柔らかさや温かみをプラスしてくれます。
パタパタ時計と同様の手順で導入可能です。
1.ダウンロードと解凍
配布サイトから時計のHTMLファイルをダウンロードして解凍。
2.OBSに追加
OBSの「ソース」欄で「＋」ボタンをクリックし、「ブラウザ」を選択。
3.「ローカルファイルを使用」にチェックを入れて、解凍したHTMLファイルを指定
4.サイズと位置の調整
画面内でドラッグして位置を調整。必要に応じてサイズも変更すれば完成。
OBSで使えるカスタム時計素材が手に入る便利サイト4選
「配信画面をもっとおしゃれにしたい」「機能的な時計を追加したい」という方におすすめの便利サイトを厳選して4つご紹介します。
それぞれのサイトでは、デザイン性豊かなテンプレートが手に入ります。
URLコピーから設定までの手順も解説するので、自分に合ったサイトを見つけましょう。
Neon Digital Clock
Neon Digital Clockは、ネオン風の輝きがおしゃれなデジタル時計配布サイト。配信画面に洗練された雰囲気を加えたい方におすすめです。
設定もシンプルで、ブラウザソースを使うだけで簡単に導入できます。
1.Neon Digital Clockの公式サイトにアクセス
2.時計のデザインをカスタマイズ
ページを開いたら、以下の設定をします。画面のプレビューを確認しながら進めましょう。
2-1.Font Size：フォントサイズを調整（推奨サイズ50〜100）
2-2.Color：好きな色を選択
2-3.Type：表示する情報を選択（日付、時刻など）
2-4.Design：囲み線や2段構成などのデザインを選択
3.「Viewer URL」をコピー
設定を完了したら、画面に表示される「Viewer URL」を右クリックし、「リンクのアドレスをコピー」を選択します。このURLがOBSで使用するリンクです。
続いてはOBSを起動し、以下の手順でネオン時計を導入しましょう。
1.「ソース」から「ブラウザ」を選択
2.「URL」欄にコピーしたViewer URLをペースト
3.サイズや位置を調整し、デザインが画面に合うように配置
OBS-clock
OBS-clockは、時計だけでなくタイマー機能も備えた配布サイトです。全25種類のテンプレートから選択できるので、その日の気分に合わせてデザインを変えられます。
OBS-clockの導入手順は、以下の通りです。
1.OBS-clockの公式サイトにアクセス
2.テンプレートを選択
3.「時計モード」or「タイマーモード」を選択
4.「デジタルモード」or「アナログモード」を選択
5.URLの取得
設定が完了したら、画面右上に表示される「URL」をコピーします。このURLはOBSに貼り付けるためのものです。
続いてはOBSを起動し、以下の手順で導入しましょう。
1.「ソース」から「ブラウザ」を選択
2.「URL」欄にコピーしたViewer URLをペースト
3.サイズや位置を調整し、デザインが画面に合うように配置
スコラボ
スコラボは、豊富なテンプレートと高いカスタマイズ性が魅力のサイトです。会員登録が必要ですが、ダウンロード不要でURLだけで設定が完了します。
デザイン性にこだわりたい方や、配信画面をワンランク上に仕上げたい方におすすめです。
スコラボでの時計導入手順は、以下の通りです。
1.アカウント登録
スコラボの公式サイトにアクセスし、「新規登録」をクリック。GoogleやX（旧Twitter）のアカウントで登録できます。
2.時計テンプレートを選ぶ
ログイン後、画面右上の「アイテムを追加する」ボタンをクリックして「時計」を選択。豊富なテンプレートから、配信スタイルに合うデザインを選びましょう。
3.デザインをカスタマイズ
フォントサイズ、文字色、背景色、配置などを自由に調整可能です。スコラボ上で配置チェックもできます。
4.配信用URLを取得
「配信ソフトと接続する」をクリックするとURLが表示されるので、コピーしましょう。
BOOTH
BOOTHは、クリエイターが制作した素材を購入・ダウンロードできるプラットフォームです。
前述した「パタパタ時計」もBOOTHで入手できるだけでなく、ライブ配信向けのおしゃれなものからカラフルでかわいいデザインまで、幅広い素材が揃っています。
そんなBOOTHの利用手順は、以下の通りです。
1.BOOTHにログイン
公式サイトにアクセスし、Pixivアカウントでログインします。
2.素材の検索と購入
「OBS 時計」と検索して好みの素材を選択しましょう。無料の場合は「ダウンロード」を、有料の場合は「カートに入れる」をクリックします。オーバーレイ素材が欲しいときは「OBS 時計 オーバーレイ」と検索しましょう。
3.素材のダウンロード
購入または無料ダウンロード後、ファイルを解凍すれば利用可能になります。
OBSでの設定手順は、以下を参考に進めましょう。
1.ダウンロードしたファイルを展開
解凍したファイルの中にあるHTMLファイルや画像素材を確認しましょう。
2.OBSに追加
OBSを起動し、「ソース」で「ブラウザ」を選択。「ローカルファイルを使用」にチェックを入れて、展開したファイルを指定しましょう。
3.配置を調整
配信画面の隅や中央など、好きな位置にドラッグして配置を調整しましょう。
Alive Studioを使って時計を表示させる方法
配信画面デザインサービスのAlive Studioを使うと、背景や小物だけでなく時計もワンタッチで表示させることが出来ます。月額利用料がかかるので、時計だけでなく背景をイベントや季節ごとに変えたい、お題ルーレットや効果音などのギミックで配信を手軽に盛り上げたいという人におすすめです。
1. Alive Studioの公式サイトからスクリプトをダウンロードする
2. OBS Studioの上部メニューバー「ツール」からスクリプトを選択
3. 右下の「＋」を押して先ほどダウンロードしたAlive Studioのスクリプトファイルを読み込む。Alive Studioを使うシーンを選択して「追加」ボタンを押して閉じる
4. OBSの上部メニューバーの「ドック」から「カスタムブラウザドック」を選択
5. ドック名とURLを下図の赤枠の内容で入力
6. 先ほどのドックメニューの下のほうのAlive Studioにチェックが入っていたらOK。最初はログイン画面になるのでGoogleアカウントで認証してログイン
7. 左側のメニューから「装置」を選択し「デジタル時計」をクリック
8. 好きなデザインの時計を選んでクリックすると配信画面に反映
Alive Studioはリアルタイムに表示させる要素を追加したり削除したりできるので、使い方次第では配信の幅が広がります。とはいえ時計目的で使うにはコストが掛かるので、一つひとつ素材を探す時間がない、いつも新鮮な画面で配信を行いたいなど、他の目的とセットで検討すると良いでしょう。
OBSに時計を表示したら、次は？
今回は、OBSに時計を表示する方法やおすすめのテンプレートを紹介しました。時計を追加することで、リアルタイム感を演出し、視聴者にとって便利な配信画面を作ることができます。
本記事の解説動画はこちらをご覧ください。
さらに、配信画面全体のデザインにこだわりたい方には、配信画面作成サービス「Alive Studio」がおすすめです。
- VTuber向け素材制作チーム「うさねこメモリー」提供の背景・小物素材が1,000種類以上使い放題！
- 音楽素材サイト「魔王魂」提供のBGMが100曲以上使い放題！
- お題ルーレット・カウンター機能搭載！
- 全機能使えて、月額980円（税込）！
「配信画面の見栄えがいまいち決まらない…」「もっと視聴者を引きつけるデザインにしたい！」
そんなときに役立つのが「Alive Studio」です。
＼ まずは無料お試し7日間、あなたの配信をワンランクアップ！ ／
