今回は、OBS StudioやStreamlabs Desktopなどの配信画面に、HTMLソースファイルを追加するだけで配信画面内にカウントダウンタイマーを表示させることができる方法を紹介します。
本記事でダウンロードできるHTMLファイルを1つだけ追加するだけで利用できます。
YouTubeなどで、メン限を含めて「同時視聴」企画などを行うときに役立ちます。
また、カウントダウンの秒数や、テキスト、背景色の変更なども出来るようになっています。
下記の動画で、実際に本記事でのデータを使ったサンプルイメージ動画を作成したので、それが参考になれば幸いです。
配信のテンポに合わせて秒数を設定することができ、また、カウントダウンタイマーの素材を表示させると、フェードインで始まり、カウントが0秒になると、自動的にフェードアウトして消える仕様になっています。
配信画面の「カウントダウン」アニメーションファイルのダウンロードと準備
カウントダウンのHTMLファイルダウンロードは下記になります。
上記のファイルをダウンロードしていただき、OBS Studioなどの配信ソフトウェアに素材登録してください。
次章では、素材の登録事例と、カウントダウンタイマーの演出に変更を加えたい場合の設定方法を記述していきます。
配信画面の「カウントダウン」アニメーションファイルを読み込む
各OBSに本記事からダウンロードしたHTMLファイルを読み込む方法は簡単です。
OBS Studioの「ソース」エリアから「+」ボタンを押して「ブラウザ」を選択
「ローカルファイル」にチェックマークをつけてHTMLファイルを指定する
読み込んだ後に素材の設定（プロパティ）で
「表示されていないときにソースをシャットダウンする」をON（またはチェックマークを入れる）にしてください。
そうすれば、OBSのソースから表示・非表示を選択するだけで何回もカウントダウンをし直すことが可能になります。
配信画面の「カウントダウン」機能を設定する
カウントダウンタイマーのHTMLファイルは、一度、拡張子を「.txt」ファイルに変更することで、様々な変更をすることが可能です。
HTMLファイルをテキストファイルに変換してから、下記の部分を変更して設定することが可能になっています。
| countdown-seconds | カウントダウンする合計の秒数 |
| bg-color-hex | 背景色 |
| bg-opacity | 背景の透過度 |
| text-color-hex | テキスト色 |
| text-opacity | テキストの透過度 |
| font-size | テキストの表示サイズ |
| padding | テキスト背景内側の余白 |
| border-radius | テキスト背景の角の丸み具合 |
各設定値を変更後は、ファイル形式を「HTML」に戻していただいて、OBS上でファイルを更新していただければ反映されます。
カウントダウンタイマーファイルの使い道
今回の素材をすでに使っている事例としては、メン限枠での同時視聴開始カウントや、◯秒以内に◯をする。など、さまざまな企画で既に利用してもらっています。
本記事で公開できるように、ご協力いただいた配信者の皆様には感謝しております。
筆者自身も、2020年から自身がVTuber / Vライバーとして、特にライブ配信を中心に色々なことを試しながら情報発信しているのですが、下記の記事は、費用を抑えた機器でも十分に品質の高いライブ配信構成等を組むことが可能な仕様を紹介しています。
これら、本記事の内容が配信活動に役立てば幸いです。
最後まで読んでいただき、ありがとうございました。
