「OBSの配信画面にポモドーロタイマーを表示したい」「勉強配信や作業配信で残り時間を見せたい」。
OBS Studioを使った配信では、カメラや画面共有だけでなく、Webページを配信画面の一部として表示できます。
その仕組みを使えば、ブラウザで動くポモドーロタイマーをOBSへ表示することもできます。
25分集中・5分休憩の時間を視聴者にも見せられるため、勉強配信や作業配信との相性がよい使い方です。
この記事では、OBSにポモドーロタイマーを表示する基本的な方法や、配信画面を作るときのポイントを紹介します。
OBSにポモドーロタイマーは表示できる？
OBS Studioには、Webページを映像ソースとして追加できる「ブラウザ」ソースがあります。
OBS公式でも、ブラウザソースはURLを指定してWebページを読み込み、幅・高さやカスタムCSSなどを設定できる機能として案内されています。詳しい設定項目は、OBS公式のBrowser Source解説で確認できます。
そのため、ブラウザで利用できるポモドーロタイマーなら、URLを指定してOBS上に表示できる場合があります。
基本的な構成は、
- OBS Studio
- ブラウザで使えるポモドーロタイマー
- 配信画面
の3つです。
専用の動画素材としてタイマーを作らなくても、Webタイマーをそのまま配信画面へ組み込む方法があります。
OBSのブラウザソースを使う
OBSへWebタイマーを追加する場合は、ブラウザソースを利用します。
基本的な流れは次のとおりです。
- OBS Studioを起動する
- タイマーを表示したいシーンを選ぶ
- 「ソース」の追加ボタンを押す
- 「ブラウザ」を追加する
- 表示したいタイマーのURLを入力する
- 幅と高さを調整する
- 配信画面上で位置とサイズを整える
- OBS内でタイマーを開始・停止できるか確認する
これで、WebページをOBSの映像内へ表示できます。
配信画面ではタイマーを大きくしすぎない
ポモドーロ配信では残り時間が重要ですが、タイマーだけで画面の大部分を使う必要はありません。
例えば、
- 画面右上
- 画面左上
- カメラ映像の横
- 作業画面の下
など、視聴者が確認しやすい場所へ配置します。
タイマーは「必要なときに確認できる」程度の大きさにすると、作業画面や配信内容を邪魔しにくくなります。
25分集中・5分休憩なら配信にも使いやすい
一般的なポモドーロ・テクニックでは、
- 25分集中する
- 5分休憩する
- 再び25分集中する
- 数セットごとに長い休憩を取る
という流れで作業します。
配信でも同じように、
FOCUS 25:00
から開始し、終了後に
BREAK 05:00
へ切り替える構成にできます。
視聴者も「今は集中時間なのか、休憩時間なのか」を判断しやすくなります。
ポモドーロの基本については、ポモドーロタイマーのやり方も参考にしてください。
勉強配信との相性がいい
OBSでポモドーロタイマーを使う代表的な用途が勉強配信です。
例えば、
- 25分勉強
- 5分休憩
- 25分勉強
- 5分休憩
という流れを画面上で共有できます。
配信者だけでなく視聴者も同じタイミングで勉強できるため、「一緒に集中する配信」を作りやすくなります。
勉強での使い方については、ポモドーロタイマーで勉強する方法も参考にしてください。
作業配信にも使える
ポモドーロタイマーは勉強だけでなく、作業配信にも利用できます。
例えば、
- イラスト制作
- プログラミング
- ブログ執筆
- 動画編集
- 資料作成
などです。
配信画面に残り時間を表示しておけば、視聴者から見ても「今は集中する時間」と分かりやすくなります。
配信中の雑談を減らし、一定時間は作業に集中するというルールも作れます。
25分では短いなら50分でもいい
配信内容によっては25分では短すぎる場合があります。
例えばイラスト制作やプログラミングでは、集中してきたところで25分が終了することもあります。
その場合は、
- 45分集中・10分休憩
- 50分集中・10分休憩
- 60分集中・10〜15分休憩
などに変更できます。
特に50分集中・10分休憩なら、1セットを1時間単位で管理できます。
時間について迷った場合は、ポモドーロタイマーのおすすめ時間も参考にしてください。
タイマーの背景が邪魔になる場合
WebページをそのままOBSへ表示すると、タイマー以外の背景やボタンまで表示されることがあります。
配信画面では、
- 必要な部分だけ表示する
- サイズを調整する
- 背景と配信画面の色を合わせる
などの工夫をすると見やすくなります。
OBSのブラウザソースでは、利用するWebページによってはカスタムCSSを使って表示を調整する方法もあります。
ただし、Webサービス側の構造が変わるとCSSが使えなくなる場合もあるため、無理に複雑なカスタマイズをしないほうが管理しやすいでしょう。
OBS内のタイマーはブラウザソース側で操作する
OBSのブラウザソースは、普段使っているChromeなどとは別のブラウザ環境として動きます。
同じURLを通常のブラウザでも開き、そちらでタイマーを開始しても、OBS側のタイマーへ状態が自動的に同期されるとは限りません。
OBS内のページを操作するときは、ソース一覧で対象のブラウザソースを右クリックし、「対話（Interact）」からタイマーを開始できるか確認します。
対話機能で操作しにくい場合は、通常のブラウザ画面をウィンドウキャプチャする方法や、配信用の表示URLを提供しているタイマーを使う方法もあります。ウィンドウキャプチャを使う場合は、個人情報や別のタブが映り込まないように注意してください。
配信前には、
- タイマーが正常に進むか
- 集中から休憩へ切り替わるか
- 音が配信へ入るか
- シーンを切り替えても問題ないか
などをテストしておきましょう。
シーン切り替え時の動作にも注意する
OBSのブラウザソースには、「ソースが表示されていないときにシャットダウンする」と「シーンがアクティブになったときにブラウザを更新する」という設定があります。
前者を有効にすると非表示時にページが解放され、後者を有効にするとシーンへ戻ったときにページが再読み込みされます。どちらも、タイマーの状態がリセットされる原因になる可能性があります。
配信中もタイマーを継続したい場合は設定内容を確認し、実際の配信前にシーンの切り替えやソースの表示・非表示を試しておくことが大切です。
タイマー音を配信するか決める
ポモドーロの終了音を視聴者にも聞かせるかどうかも考えておきましょう。
終了音があれば、
「集中時間が終わった」
と視聴者にも分かりやすくなります。
一方、作業用BGMを流している場合は、通知音が大きすぎると驚かせてしまうことがあります。
配信前に音量を確認し、BGMとのバランスを調整しましょう。
YouTubeのポモドーロ動画との違い
YouTubeには、あらかじめタイマーを組み込んだポモドーロ動画もあります。
動画なら再生するだけなので簡単ですが、時間設定は動画ごとに固定されています。
OBSとWebタイマーを組み合わせる方法なら、
- 今日は25分
- 次回は50分
- 作業内容によって60分
というように、配信ごとに時間を変更できます。
YouTubeポモドーロについては、YouTubeのポモドーロタイマーも参考にしてください。
配信画面はシンプルなほうが集中しやすい
作業配信では、画面へ多くの情報を載せたくなることがあります。
しかし、
- タイマー
- コメント
- 時計
- BGM情報
- タスク一覧
- アニメーション
などをすべて表示すると、画面が騒がしくなることがあります。
ポモドーロ配信なら、
今何をしているか
あと何分か
が分かる程度でも十分です。
タイマーを目立たせながらも、集中を邪魔しないシンプルな配信画面を意識しましょう。
Pomolikaはブラウザで使えるポモドーロタイマー
Pomolikaは、ブラウザで使えるポモドーロタイマーです。
集中時間、短い休憩、長い休憩を設定できるため、仕事や勉強の時間管理に利用できます。
OBSでWebタイマーを利用したい場合も、まずブラウザで正常に動作することを確認してから、配信環境に合う表示方法を検討するとよいでしょう。
まとめ
OBS Studioではブラウザソースを利用できるため、Webで動くポモドーロタイマーを配信画面へ表示する方法があります。
勉強配信や作業配信なら、25分集中・5分休憩の残り時間を視聴者にも共有できます。
設定するときは、
- タイマーのサイズ
- 配置
- シーン切り替え時の動作
- 通知音
- 背景の見え方
などを配信前に確認しましょう。
25分だけでなく50分や60分へ変更すれば、イラスト制作やプログラミングなどの長めの作業配信にも利用できます。
自分と視聴者の両方が集中しやすい、シンプルなポモドーロ配信環境を作ってみましょう。