ライブ配信で現在時刻が表示されているのを見たことがありませんか？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に表示することができます。ブラウザソースによる配信画面の装飾は、コメント欄の表示等に応用可能です。配信するうえでの必須知識なので、この機会に覚えておきましょう。また、多くのクリエイターさんの努力により、種類や色のカスタマイズも豊富です。配信するコンテンツや配信の雰囲気に合わせてカスタマイズし、自身の配信にピッタリの時計を表示しましょう。配信のオリジナリティが高まってより良い配信になるはずです。
OBS時計表示のよくある質問
OBSで時計を表示するにはどうすればいいですか？
Neon Digital Clockやはいしんツールキットなどで生成したURLを、OBSのブラウザソースに貼り付ければ表示できます。
時計のデザインは変更できますか？
できます。Neon Digital ClockならFont Size、Color、Type、Designを調整でき、日付表示の有無も変更できます。
URLを貼る方法以外でも時計を表示できますか？
はい。BOOTHのパタパタ時計のように、ローカルファイルをブラウザソースへ読み込む方法も使えます。
同時視聴配信で時計を出すメリットは何ですか？
配信者と視聴者で時間を合わせやすくなり、どの場面を見ているか共有しやすくなります。
紹介されたサービスで他の装飾も作れますか？
はいしんツールキットなら、コメント欄やDiscordオーバーレイなども同じサイトから設定できます。
関連の人気記事
OBS配信をより面白くするために
配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。
機能のご紹介
配信中のコメント管理ダッシュボード
- 視聴者ごとの情報をためて、視聴者全員を覚えられる
- 初見や常連を一目で判断できる
- スパチャ・ビッツ等を読み上げたかどうか管理できる
画面演出の「Screen」
- 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
- コメントを画面に横流しできる
- 設定した画像やGIFで自由に画面演出が作れる
いつでも投げ銭（収益化）機能
- 配信者に9割還元できる
- 投げ銭してくれた視聴者に対して個別のお礼の返信や、特典ファイル（画像や音声など）を送付することも可能
導入実績
CastCraftは上記のような機能により、配信者（ゲーム配信者やVtuber）が視聴者との関係を深めることを手助けします。
導入されたチャンネルの総登録者数は1.6億人を超えており、これまで20万回以上の配信で使われています。
CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。