OBSで時計を表示する設定方法を解説！
ライブ配信で現在時刻が表示されているのを見たことがありませんか？OBS等の配信ソフトを活用することで、配信画面に時計を表示することができます。時計は配信画面を彩る要素の1つです。
オリジナルの時計を一から作る場合、プログラミングの知識が必要となり大変です。しかし、ネット上には数々のクリエイターさんが作ってくれた時計がたくさんあります。無料で配布されているものも多く、誰でもすぐに時計を使うことができます。
本記事では、OBSを使って配信画面上に時計を表示する方法を解説します。多種多様な時計を紹介するので、好みのものが1つはあるはずです。おしゃれな時計を表示して、配信画面をより華やかにしましょう。
目次
OBSで時計を表示するメリット
はじめに、配信画面に時計を表示するメリットを3つ紹介します。時計を表示するかどうか悩んでいる方は必見です。
メリット1：視聴者の離脱を防ぐ
時間は誰もが日常的に確認するものです。配信中も視聴者は頻繁に時計を確認するでしょう。その度に配信から目を離す機会が生まれてしまいます。時計を配信画面に表示することで、視聴者が画面から目を離す機会をある程度減らすことが可能です。視聴者に配信を長く見てもらうために、時計を表示してみるのはいかがでしょうか。
メリット2：配信画面の空いたスペースを埋める
ゲーム配信等であれば、画面に動きがあるので視聴者は飽きにくいです。しかし、雑談配信等の画面に動きが少ない配信では配信画面が殺風景になりがちで、視聴者が飽きる原因になってしまいます。時計をはじめとしたツールを画面に表示して画面に動きを与えることで、視聴者が視覚的に飽きないようにできます。
時計表示は他のツールと合わせての利用が効果的です。コメント欄等と一緒に使って華やかな配信画面を作りましょう。
メリット3：同時視聴コンテンツで役立つ
時計表示が真価を発揮するのは、ライブコンテンツの同時視聴です。テレビやゲーム大会の生配信等のライブコンテンツは、権利の関係で自身の配信画面に直接映すことができません。
そこで活躍するのが配信画面上の時計です。配信画面に時計を表示することで、配信者が何を見てリアクションを取っているのかわかりやすくなります。
Youtubeであれば、ライブ配信中に巻き戻して視聴者と配信者の間にある数秒のラグを埋めることができます。時計表示は時間を合わせる手助けをしてくれるでしょう。
OBSで時計を表示する方法
Neon Digital Clockを使用する方法
まずはじめに紹介するのはNeon Digital Clockです。Neon Digital Clockを使うと、名前にもある通りネオンっぽく光るデジタル時計を表示することができます。
手順1：Neon Digital Clockのサイトを開く
こちらからサイトにアクセスします。
手順2：フォントサイズやカラーなどの項目を変更する
Neon Digital Clockでは以下の4項目を変更することができます。
- Font Size
- Color
- Type
- Design
「Type」では日付や年の有無をカスタマイズ可能です。
「Design」を「Border + Compact」にすると、日付と時間が2段で表示されます。
手順3：URLをコピー
設定が完了したら、設定画面下にある「Viewer URL」をコピーします。
設定を変えるとURLも変わってしまいます。設定を変更した場合は、再度URLをコピーし直してください。
手順4：OBSでブラウザソースを作成
ブラウザソースにURLを貼り付けることでOBSに時計を表示します。
OBSを開き、ソースの「＋」→「ブラウザ」→「OK」の順でクリックしてブラウザソースを作成します。
プロパティが表示されたら「URL」にコピーしたURLを貼り付けて「OK」をクリックしてください。
これでネオン風の時計がOBSに表示されました。サイズや配置を好みに変更して完成です。
パタパタ時計を利用する方法
パタパタ時計は、パタパタと数字がめくれるアニメーションのある時計です。白と黒のシンプルでかっこいい色も特徴です。
手順1：pixivアカウントでログイン
こちらにアクセスし、pixivアカウントでログインします。
パタパタ時計をダウンロードするにはpixivアカウントが必要です。 無料で作成できるので、持っていない場合は新規で作成しましょう。
手順2：ファイルをダウンロード
ログインができたら「無料ダウンロード」をクリックしてダウンロードします。
手順3：圧縮ファイルを展開する
ダウンロードしたファイルは圧縮されています。ダウンロードしたファイル「pata_clock_v1」を展開します。下の画像と同じ画面を表示してください。
手順4：ブラウザソースの作成
ファイルを展開できたらOBSの設定に移ります。ソースの「＋」からブラウザソースを作成します。
プロパティで「ローカルファイル」にチェックを入れます。
「ローカルファイル」の「参照」からダウンロードしたファイルを指定して「OK」をクリックして設定完了です。
「vertical」の中にも時計があります。4種類の中から好みのものを設定してください。
手順5：色の変更方法
パタパタ時計は基本的に白黒です。しかし、別途設定を行うことで色をカラフルに変更することもできます。少し手間はかかりますが、色を変更したい場合は下記説明を参考にしてください。
-
こちらにアクセスします。
-
好みの色に設定します。
-
「カスタマイズコードをCopyする」をクリックして生成されたカスタマイズコードをコピーします。その下にペーストする場所が書いてあるので確認してください。
- 展開したフォルダの「readme.txt」を開きます。
- 画面左上の「ファイル」→「開く」→「PC」→「デスクトップ」→「pata_clock_v1」→「pata_clock_v1」の順でクリックします。画面下にある「ファイル名」の右の項目を「すべてのファイル」にして、手順3で指定されたHTMLファイルを開いてください。
- コピーしたカスタマイズコードを「カスタマイズ設定ここまで」の下に貼り付けます。貼り付ける場所がわかりにくいので、下の画像を参考にしてください。
-
左上の「ファイル」から上書き保存を行います。
-
OBSのブラウザソースを使ってパタパタ時計を表示する設定を行います。色の設定→OBSの設定の順で行うことで、色の設定を反映させることが可能です。
スコラボを利用する方法
スコラボでは17種類の時計が提供されています。好みのものを選んでOBSに表示させることが可能です。
手順1：アカウントを作成してログイン
こちらからスコラボにアクセスし、「今すぐ始める」をクリックしてアカウントを作成します。X(旧Twitter)やGoogleのアカウントを使ってスコラボのアカウント登録が可能です。
手順2：アイテムを作成
画面右上の「＋」から「時計」をクリックし、好きな時計を選びます。画面上部から時計のサイズ、文字のフォント、色のカスタマイズが可能です。配置もスコラボ上で設定してください。
手順3：OBSと接続
「配信ソフトと接続する」をクリックするとURLが表示されるのでコピーします。
手順4：ブラウザソースを作成
OBSを開き、ソースの「ブラウザ」を作成します。プロパティを下記のように設定して「OK」をクリックします。
- URL：手順3でコピーしたURLをペースト
- 幅：1920
- 高さ：1080
以上で設定完了です。OBSに時計が表示されているか確認してください。
OBS-clockを利用する方法
OBS-clockは時計に加えて、タイマーを表示することもできます。アカウント登録も不要なので、手軽に時計を作ることが可能です。
手順1：リンクを開く
こちらにアクセスしてください。
手順2：テンプレートを選択
15種類のテンプレートから好みのものを選択します。設定項目が多いので、好みのテンプレートから少しずつ編集していくのがおすすめです。
手順3：細かくカスタマイズ
文字の色や日付のフォーマットなどを細かくカスタマイズできます。枠線の種類や角の丸みを変更することも可能です。
手順4：URLをコピー
時計のカスタマイズが完了したら、画面右上のURLをコピーします。このとき、「横」と「縦」の数字を確認しておきましょう。OBSでの設定で使います。
手順5：ブラウザソースを作成
OBSを開いてブラウザソースを作成します。プロパティの「URL」にコピーしたURLをペーストしてください。また、幅と高さをOBS-clockに表示されている「横」と「縦」と同じにします。
「OK」を押したらOBSに時計が表示されます。配置を調整して設定完了です。
はいしんツールキットの配信用のデジタル時計を利用する方法
はいしんツールキットでも時計を表示することができます。コメント欄やDiscordオーバーレイなども同じサイトから設定できるのが特徴です。
手順1：はいしんツールキットを開く
こちらからサイトにアクセスし「配信用デジタル時計」をクリックします。
手順2：背景を3種類から選択
はいしんツールキットでは以下の3種類から選択できます。
- グラデーション時計
- カラー時計
- シンプル時計
背景が変わるので、好みのものを選んでください。
手順3：色やフォントをカスタマイズ
はいしんツールキットでは以下の3項目をカスタマイズできます。
- 日付の有無
- 背景色
- フォント
手順3：URLをコピー
設定が完了したら「配信ソフト用URL」をコピーします。
手順4：ブラウザソースを作成
OBSを開き、ソースの「＋」から「ブラウザ」をクリックしてブラウザソースを作成します。プロパティの「URL」にコピーしたURLをペーストして「OK」をクリックしてください。
以上で設定は完了です。配置やサイズを好みに変更してください。
BOOTHで探す
BOOTHとは
幅広い作品を出品することができるプラットフォームがBOOTHです。クリエイターの方々が出品している作品を購入できます。BOOTHでも時計をはじめとしたOBSのオーバーレイも出品されています。上記で紹介した「パタパタ時計」もBOOTHに出品された無料の時計です。
紹介したもので好みのものがない場合、BOOTHで好みの時計を探すのもおすすめです。
BOOTHでOBSに表示する時計をダウンロードする方法
無料のものをダウンロードする場合は、先述した「パタパタ時計」と同じ手順でダウンロードできます。詳しい手順はそちらを参照してください。
下記では、有料のものを購入し、ダウンロードする方法を紹介します。
手順1：pixivアカウントでログイン
こちらからアクセスし、pixivアカウントでログインします。
手順2：カートに入れる
「カートに入れる」をクリックして商品をカートに入れます。
手順3：レジへ進んで決済
「レジへ進む」をクリックして決済画面へ進みます。クレジットカード等の決済方法を設定します。
その他個人情報も入力し、支払いを完了してください。他のショッピングサイトと似た手順なので、直感的に操作できると思います。
配信画面を時計で彩る
今回はOBSで時計を表示する方法を紹介しました。ブラウザソースを使うことで、時計をOBSに表示することができます。ブラウザソースによる配信画面の装飾は、コメント欄の表示等に応用可能です。配信するうえでの必須知識なので、この機会に覚えておきましょう。また、多くのクリエイターさんの努力により、種類や色のカスタマイズも豊富です。配信するコンテンツや配信の雰囲気に合わせてカスタマイズし、自身の配信にピッタリの時計を表示しましょう。配信のオリジナリティが高まってより良い配信になるはずです。
配信をより面白くするために
配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。
大きく分けて、
- 視聴者を覚えるYouTube/Twitchコメビュ
- 配信画面演出のScreen
- 収益化のための機能
の三つの機能があり、それぞれ下記のような目的があります。
| 機能 | 目的 |
|---|---|
| YouTube/Twitchコメビュ | 視聴者が配信に馴染めるようなやり取りをサポート |
| Screen | 視聴者とのやり取りを視覚的に楽しくする |
| 収益化 | 視聴者を大事にする形で収益化する |
CastCraftのYouTube/Twitchコメビュで視聴者ごとにコメントを蓄積することで視聴者全員を覚えて、配信中のダッシュボードで分かりやすく情報を表示することで、視聴者が常連化していくためのやり取りをサポートします。
特定の条件に当てはまった視聴者やコメントに対して、Chatbotやリッチな画面演出で視聴者をインタラクティブに楽しませる仕組みも作ることができます。
さらに、視聴者を大事に定着させながらも配信活動のための収益を上げる仕組みも提供しています。
CastCraftは上記のような機能により、配信者（ゲーム配信者やVtuber）が視聴者との関係を深めることを手助けします。
導入している配信者さんの事例としては、
等がいらっしゃいます。
導入されたチャンネルの総登録者数は5,000万人を超えており、これまで70万回以上の配信で使われています。
CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。