【OBS Studio】配信画面に時計を表示する方法は?おすすめツールも解説!

配信している方の中には、配信画面に時計を表示させたいと思う方も多いのではないでしょうか。配信時間の長さを把握したり、視聴者との時間感覚を共有したり、あるいは、単に配信画面のデザイン性を高めたいという理由など、時計表示には様々なメリットがあります。

しかし、OBS Studioで時計を表示させる方法は一見複雑に見えるかもしれません。そこで、本記事では、OBS Studio初心者の方にも分かりやすく、時計表示のメリットから、複数の表示方法を合わせて解説します。

配信画面に時計を表示するメリットは?

配信画面に時計を表示することは、視聴者と配信者双方にとって多くのメリットがあります。

視聴者の利便性を向上させるだけでなく、配信の質を高めることにも繋がるため、ぜひ導入を検討してみてください。主なメリットは以下の2点です。

  1. 視聴者の離脱防止
    配信中に視聴者が時間を確認するために配信画面から目を離してしまうことを防ぎます。特に長時間の配信では、視聴者が時間を気にせず配信に集中できるため、離脱率の低下に繋がります。

  2. 配信画面の充実化
    時計は、配信画面の空白を埋める効果的なツールです。特に、動きが少ない雑談配信などでは、画面が単調になりがちです。時計を表示することで視覚的な変化が生まれ、視聴者の飽きを防ぎ、配信をより魅力的に演出できます。時計以外にもコメント欄などを併用することで、さらに効果を高めることができます。

OBS Studioで時計を表示する方法

ここからはOBS Studioで時計を表示する方法を複数紹介していきます。

Alive Studio(アライブスタジオ)を使って時計を表示する方法・手順

Alive StudioとはOBS Studioと連携して様々な機能を追加できる、配信支援ツールです。豊富なウィジェット(機能)を備え、時計表示を始めとした、様々な情報を配信画面に表示することが可能です。高度なカスタマイズ性も魅力であり、配信をより魅力的に演出するための強力なツールとして活用できます。 特に、設定が比較的容易なため、OBS Studio初心者にもおすすめです。

ここからはAlive Studioを使った手順を紹介していきます。

1.Alive Studioの設定スクリプトをダウンロード
こちらのページにてAlive Studio設定スクリプトをダウンロードします。
※すでに「Alive Studio」のスクリプトをインストール済みの方は、新しいバージョンのスクリプトを適用する必要があります。こちらからダウンロードして、スクリプトを適用してください。

2.OBS Studioに設定スクリプトを登録
OBS Studioのツール > スクリプトを開いて、「スクリプト」タブから設定スクリプトを登録後、Alive Studioを使用したいシーンを選択します。

3.Alive Studioカスタムブラウザドックを追加
OBS Stuidoのドック > カスタムブラウザドックを開いて、Alive Studioを表示するドックを設定しましょう。

4.Alive Studioにログイン後、装置タブから「デジタル時計」を選択し、配信画面に配置します
歯車マークを押すと、時計が表示されるので、32種類のバリエーションの中から好きなデザインを選ぶことができます。

はいしんツールキットのデジタル時計を使ってOBSに表示する方法・手順

はいしんツールキットとは配信者向けの様々なツールを提供するウェブサイトです。その中でもデジタル時計は、シンプルながらも視認性の高いデザインが特徴で、配信画面に時計を追加したい配信者にとって非常に便利なツールです。 様々なデザインの時計が用意されているため、自分の配信テーマや好みに合わせて選ぶことができます。

はいしんツールキットを使った手順は下記になります。

1.はいしんツールキットのウェブサイトを開き、「配信用デジタル時計」を選択します。

2.グラデーション時計、カラー時計、シンプル時計、バブル時計、バー時計、NYAN の中から好みの時計デザインを選びます。
また、有料のプレミアム時計も利用可能なので、好みによっては検討してみましょう。

3.日付の表示/非表示、背景色、フォントをカスタマイズします。

4.設定が完了したら、「配信ソフト用URL」をコピーします。

5.OBS Studioを開き、ソースに追加から「ブラウザ」を選択して新規作成します。
プロパティの「URL」欄にコピーしたURLを貼り付け、「OK」をクリックします。

時計が配信画面に追加されます。必要に応じて、配置やサイズを調整してください。

スコラボを使ってOBSに時計を表示する方法・手順

スコラボは多様な時計デザインを提供する便利なツールです。OBS Studioと連携させることで、配信画面に手軽に時計を追加できます。17種類もの時計から好みのものを選び、サイズやフォント、色までカスタマイズ可能です。

手順は以下のとおりです。

1.スコラボアカウントの作成とログイン:スコラボのウェブサイトにアクセスし、「今すぐ始める」ボタンをクリックしてアカウントを作成します。X(旧Twitter)やGoogleアカウントを利用して簡単に登録できます。

2.アイテムの作成:ログイン後、画面右上の「+」ボタンから「時計」を選択し、豊富なデザインの中からお好みの時計を選びます。画面上部にある設定項目で、時計のサイズ、文字のフォント、色などをカスタマイズし、配信画面上での配置も調整できます。

3.OBS Studioとの接続:「配信ソフトと接続する」をクリックすると、OBS Studioとの連携に必要なURLが表示されますので、これをコピーします。

4.OBS Studioでのブラウザソースの作成:OBS Studioを開き、ソースに追加ボタン(「+」)から「ブラウザ」を選択します。表示されたプロパティ画面で、以下の設定を行い「OK」をクリックします。

項目設定内容
URL手順3でコピーしたURLを貼り付け
1920
高さ1080

これでOBS Studioに時計が表示されます。表示を確認し、必要に応じて位置やサイズを微調整してください。

時計の素材をDLしてOBSで時計を表示する方法・手順

配信画面に個性を出したい方には、ダウンロードした素材を使う方法がおすすめです。BOOTHなどのサイトでは、クリエイターが制作した様々な時計素材が配布されています。無料のものも多いので、手軽に利用できます。

ダウンロード形式としてはHTMLファイル形式の時計素材が多く配布されている傾向にあります。

ここでは、BOOTHでダウンロードしたHTMLファイル形式の時計素材をOBS Studioで表示する手順を解説します。

1.時計素材のダウンロード: BOOTHなどのサイトで「OBS 時計」などで検索し、好みの時計素材を見つけます。利用規約をよく確認し、ダウンロードします。多くの場合、zip形式で圧縮されています。

2.ファイルの展開: ダウンロードしたzipファイルを展開します。中には、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイルなどが含まれている場合があります。これらを適切なフォルダに配置します。

3.OBSの設定: OBS Studioを起動し、ソースに追加ボタン(+)をクリックします。「ブラウザ」ソースを選択します。「新規作成」をクリックし、任意の名前を入力します。

4.ソースのプロパティ設定: 表示されたブラウザソースのプロパティ画面で、「ローカルファイル」にチェックを入れます。「参照」ボタンをクリックし、展開したフォルダ内のHTMLファイル(通常はindex.html)を選択します。幅と高さは配信画面に合わせて調整します。推奨設定は1920×1080です。

5.配置と微調整: OBSのプレビュー画面で時計の位置とサイズを調整します。時計がプレビュー画面に表示されない場合は、HTMLファイルのパスが正しく設定されているか確認してください。必要に応じて、ブラウザソースのプロパティで再度サイズを変更できます。

上記の手順で、ダウンロードしたHTMLファイル形式の時計素材をOBS Studioで表示できます。様々な素材サイトを探して、配信に最適な時計を見つけてみましょう。

OBS Studioで時計を表示する際のポイント

配信画面に時計を表示することは、視聴者への情報提供や配信の質向上に繋がりますが、いくつかの点に注意する必要があります。ここでは、OBS Studioで時計を表示する際のTipsを3つの観点から解説します。

  • 配信画面のレイアウトとのバランス
    時計は配信画面の邪魔にならない場所に配置し、他の要素とのバランスを保つことが重要です。例えば、ゲーム配信の場合、ゲーム画面を遮らない隅に配置したり、時計のサイズを調整したりするなどの工夫が必要です。
  • 視聴者にとっての見やすさ
    時計は視聴者が見やすいように、適切な大きさ、色、フォントを選ぶ必要があります。背景色とのコントラストも重要です。例えば、背景が暗い場合は明るい色の時計、背景が明るい場合は暗い色の時計を選ぶと見やすくなります。また、フォントサイズは小さすぎず、大きすぎない適切なサイズを選びましょう。
  • CPU負荷への影響
    時計を表示するためのツールやプラグインによっては、CPU負荷が高くなる場合があります。特に、高機能な時計やアニメーションを使用する場合は注意が必要です。CPU負荷が高くなると、配信の遅延や画質の低下に繋がる可能性があります。そのため、PCのスペックに合わせて適切なツールやプラグインを選び、必要に応じて設定を調整しましょう。
項目注意点
レイアウト他の配信要素とのバランスを考慮し、邪魔にならない場所に配置する
見やすさ背景とのコントラスト、大きさ、色、フォントを調整し、視聴者が見やすいようにする
CPU負荷PCスペックに合わせたツールを選び、負荷が高くなりすぎないように設定を調整する

これらのポイントを参考に、配信スタイルに合った時計表示で、より良い配信を実現しましょう。

OBSと連携して利用できるAlive Studioでは、配信画面へ簡単に時計を表示することができます。気になる方はこちらもチェックしてみてください。

Alive Studio | 豊富な素材で配信画面をお手軽・簡単デザイン

まとめ

配信画面に時計を表示することは、配信者と視聴者の双方にとってメリットがあります。配信スタイルに合わせた時計表示を取り入れることで、より良い配信環境を構築することが可能です。

配信者側のメリットとしては、主に以下の点が挙げられます。

  • 切り抜きの作成が容易になる。
  • 配信の特定シーンを時間指定で共有しやすくなる。
  • 配信のリアルタイム性を高める効果がある。
  • 視聴者側が配信を見ながら時間を確認できるため、他の作業との並行がしやすい。

これらのメリットを踏まえ、配信の目的や視聴者層などを考慮しながら、時計の表示形式やデザインを選択することが重要です。例えば、長時間配信を行う場合は、視聴者の利便性を考えて時計を表示すると良いでしょう。

一方、ゲーム配信などでは、画面の見やすさを優先して時計を非表示にするという選択肢もあります。

このように、配信スタイルに合わせた時計表示で、配信者と視聴者の双方にとって快適な配信環境を目指しましょう。

時計に関する動画もありますので、こちらもチェックしてみてくださいね!

配信をもっと魅力的にするなら「Alive Studio」

OBS Studioで時計表示ができたら、次は配信全体のデザインも整えてみませんか?
配信画面デザインサービス「Alive Studio」なら、直感的な操作で、あっという間にあなたらしい配信画面が完成します。

  • VTuber向け素材制作チーム「うさねこメモリー」提供の背景・小物素材が1,000種類以上使い放題!
  • 音楽素材サイト「魔王魂」提供のBGMが100曲以上使い放題!
  • お題ルーレット・カウンター機能搭載!
  • 全機能使えて、月額980円(税込)!

「配信をもっと個性的にしたい!」「OBSの画面づくりに悩んでいる」
そんな方は、ぜひ「Alive Studio」をお試しください。

\ まずは無料お試し7日間!あなたの配信をワンランクアップ! /

この記事を書いた人

               

ストマガ編集部

「ストリーマーマガジン」は、VTuberや配信クリエイターに興味がある方、ご自身でも活動されている方、そしてこれから配信をはじめてみたい方を応援するWebメディアです。 配信初心者さんからベテランさんまで、幅広く楽しめる情報をお届けします。

Share

keyword