Contents
Streamlabs OBS のインストールとアカウントログイン
このセクションでは、公式サイトから最新の Streamlabs OBS を取得し、配信に必要なアカウントへサインインするまでの流れを解説します。正しい手順でインストールすれば、以降の設定作業がスムーズに進むだけでなく、セキュリティ面でも安心できます。
ダウンロード手順
公式ページ（ https://streamlabs.com ）から OS を選択し、提供されているインストーラを保存します。Windows の場合は Streamlabs OBS Installer.exe、macOS の場合は Streamlabs OBS.dmg が配布されています。
- ダウンロードしたファイルを実行（Windows はダブルクリック、macOS はマウントしてアプリケーションフォルダーへドラッグ）。
- 画面の指示に従いインストール先やショートカット作成の有無を選択。
- インストールが完了したらデスクトップ（Windows）または Launchpad（macOS）のアイコンから起動します。
アカウントサインイン方法
初回起動時に表示されるサインイン画面で、以下のいずれかの方法で認証できます。2 要素認証を有効にしておくとアカウント保護がさらに強化されます。
- メールアドレス：登録済みメールとパスワードを入力し、届いたコードを入力。
- 外部サービス連携：Google、Twitch、YouTube のいずれかのボタンをクリックして OAuth 認証を完了。
サインインが成功すると、設定ウィザードが自動的に起動し推奨ビットレートや解像度を提示します。
Alert Box ウィジェットの追加と基本設定
Alert Box はフォロー・サブスクライブなどの視聴者アクションをリアルタイムで通知する中心的なウィジェットです。ここではシーンへの配置手順と、主要パラメータの調整ポイントをまとめます。
ウィジェットの配置
左側の Widgets パネルから「Alert Box」を選び、対象シーンへドラッグ＆ドロップします。配置後はプレビュー画面で位置やサイズを直感的に変更できます。
- ハンドルを使って四隅・辺を伸縮し、目的の領域に合わせる。
- 右クリック → Transform → Center to Screen ですばやく中央揃えが可能。
主要パラメータの調整
Alert Box の設定画面はタブ構造で整理されており、各項目はリアルタイムにプレビューへ反映されます。
| パラメータ | 説明 |
|---|---|
| Enable | フォロー・サブスクライブ・ビッツなど、個別にオン／オフを切替。 |
| Image / Animation | カスタム画像や GIF アニメーションの指定（ローカルまたは URL）。 |
| Sound | 通知音声。デフォルト以外は MP3/OGG 形式でアップロード可能。 |
| Duration | アラートが画面に残る時間（秒単位）。 |
必要な項目だけを有効化し、サイズやレイヤー順序は Order → Bring to Front で最前面に設定すると視認性が高まります。
メディア差し替えと AI テンプレート活用
配信者の個性を表現するために、画像・音声・テキストを自由に差し替える方法と、公式が提供している AI 補助テンプレートの利用手順をご紹介します。
ローカル/URL 指定方法
- 画像：Alert Box 設定画面の「Image」欄で Upload → ファイル選択、または URL に直接リンクを貼り付け。対応形式は PNG/JPEG/GIF。
- 音声：同様に「Sound」欄でファイルをアップロードするか、外部 CDN の URL を入力（MP3・OGG が推奨）。
- テキスト：
Message Textに変数（例:{username}）やカスタム文言を記入。フォントサイズや色は下部の Style タブで調整可能です。
AI 生成テンプレートの選択とカスタマイズ
公式リリースノート（2025 年版）に基づき、Streamlabs OBS では「AI Templates」タブからテーマ別テンプレートを呼び出すことができます。利用手順は次の通りです。
- AI Templates → Choose Theme を開く。
- 「Gaming」「Music」「Minimal」など目的に合うテーマを選択し、簡単なプロンプト（例:「青と紫のグラデーション背景、ポップフォント」）を入力。
- AI が生成した画像・音声・エフェクトがプレビューに表示されるので、Customize タブで色相やアニメーション速度を微調整。
- 「Apply」をクリックすると、Alert Box に自動的に反映されます。
AI 補助はあくまでベースデザインの提案であり、最終的な調整は手作業で行うことが推奨されています。
カスタム HTML/CSS/JS で独自アラートを作成
標準オプションだけでは実現できない演出も、HTML・CSS・JavaScript を組み合わせれば自由に設計できます。ここでは基本構造と実装手順を具体例とともに示します。
基本構造と必須要素
Custom HTML タブは HTML / CSS / JS の 3 エディタに分かれています。最低限必要なのは次の要素です。
- HTML：全体ラッパーとなる
<div id="alert">を配置。 - CSS：位置指定（
position: absolute;）とアニメーションを記述。 - JS：サウンド再生や表示時間の制御ロジックを実装。
変数置換は {{variable_name}} 形式で行われ、配信イベント情報が自動的に埋め込まれます。
実装手順とサンプルコード
- Alert Box 設定画面の Custom HTML タブを開く。
- 下記サンプルコードをそれぞれのエディタに貼り付ける（必要に応じて変数名やデザインを変更）。
- 「Save」→「Preview」で動作確認し、問題なければシーンに戻す。
|
1 2 3 4 5 6 |
<!-- HTML --> <div id="alert" class="follow"> <img src="{{image_url}}" alt="Avatar" class="avatar"/> <p class="msg"><strong>{{username}}</strong> がフォローしました！</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* CSS */ #alert { position: absolute; top: 20px; left: 20px; animation: fadeIn 0.8s forwards; } .avatar { width: 80px; border-radius: 40px; margin-right: 10px; } .msg { font-size: 24px; color:#fff; text-shadow:0 0 5px #000; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
|
1 2 3 4 5 |
// JS let audio = new Audio('{{sound_url}}'); audio.play(); setTimeout(() => document.getElementById('alert').remove(), 4000); |
上記コードは「フォロー」アラートの最小構成例です。サブスクライブやビッツ用に変数名を置き換えるだけで再利用できます。
WebHook と Discord の連携、テスト方法とエラー対処
配信外でも視聴者の動向を把握したい場合は、Streamlabs の WebHook 機能と Discord の Incoming Webhook を組み合わせると便利です。設定手順とトラブルシューティングのポイントを整理しました。
設定手順
- Streamlabs ダッシュボード → 「Integrations」→「Webhooks」→「Add New」。
- イベント種別（Follow、Subscribe など）を選択。
- ペイロードテンプレートはデフォルトの JSON をそのまま使用可。
- Discord サーバー側で Server Settings → Integrations → Webhooks → New Webhook を作成し、通知したいテキストチャンネルを指定。生成された URL を Streamlabs の Webhook 設定画面に貼り付けて保存。
これだけで、対象イベントが発生するたびに Discord に自動投稿されます。
テスト方法とエラー対処チェックリスト
- プレビュー：Alert Box 設定画面右上の「Preview」ボタンで各アラートを手動再生。
- ショートカットキー（デフォルト）
Ctrl + Shift + F– フォロープレビューCtrl + Shift + S– サブスクライブプレビューCtrl + Shift + D– ドネーションプレビュー
エラー対処チェックリスト
| 項目 | 確認ポイント |
|---|---|
| ファイル形式 | 音声は MP3/OGG、画像は PNG/JPEG/GIF か |
| ビットレート / 解像度 | 音声 ≤ 192 kbps、画像サイズは 1080px 以下が推奨 |
| URL の正当性 | https:// で始まる完全なパスか |
| CORS 設定 | 外部 URL が Access‑Control‑Allow‑Origin: * を返すか |
| キャッシュ | 「Refresh Sources」ボタンで再読み込みし、最新データが取得できているか |
上記項目を順に確認すれば、音声が出ない・画像が表示されないといった多くの不具合は迅速に解決できます。
まとめと次のアクション
この記事では、最新版 Streamlabs OBS をインストールしアカウントへサインインする方法から、Alert Box の基本設定、メディア差し替え・AI テンプレート活用、独自 HTML/CSS/JS アラート作成、さらに WebHook と Discord 連携まで、一通りの流れを実践的に解説しました。これらの手順を踏めば、配信開始直後から視聴者に合わせたカスタムアラートが表示され、エンゲージメント向上につながります。
次にすべきこと
- 公式サイトから最新インストーラを取得し、この記事の手順どおりにインストール。
- Alert Box をシーンに追加し、必要な画像・音声・テキストを差し替える。
- AI テンプレートやカスタム HTML が必要なら試作してプレビューで確認。
- WebHook と Discord の連携設定を行い、通知が正しく届くかテスト。
不明点やさらに高度なカスタマイズが必要な場合は、Streamlabs の公式サポートフォーラムやコミュニティガイドをご参照ください。配信環境が整ったら、あとはコンテンツ作りに集中して視聴者との交流を楽しみましょう！