Contents
Streamlabs アカウントの作成とログイン手順
Streamlabs でアラートを自由にデザインできるようになる第一歩は、公式サイトで正しい手順でアカウントを取得し、ログイン後に新 UI に慣れることです。本セクションでは アカウント登録の流れ と ログイン画面へのアクセス方法 を具体的に解説します。安全性を高めるための二段階認証設定や、公式ドキュメントで推奨されている確認ポイントも合わせて紹介します。
アカウント登録（サインアップ）
- 公式トップページへアクセス → https://streamlabs.com/
- 右上にある「Sign Up」ボタンから新規登録画面が開きます。
- メールアドレスとパスワード、または Twitch・YouTube・Discord などの外部アカウントで認証します。
- 登録完了後に届く確認メールのリンクをクリックし、所有権を確定させます。
- 二段階認証（2FA） の設定は必須ではありませんが、セキュリティと将来の API 連携を考慮すると推奨されます。設定方法は「Settings ▶ Security ▶ Two‑Factor Authentication」から Google Authenticator 等で有効化してください。
ポイント：二段階認証は不正ログイン防止だけでなく、Streamlabs が提供する一部の開発者向け機能（Webhook など）で必須になるケースがあります。
ログイン画面へのアクセス
- ログイン専用ページは https://streamlabs.com/login です。
- サインアップ後に自動的にログインできる場合もありますが、手動でログインしたいときは上記 URL をブックマークしておくと便利です。
UI の最新機能（2025‑2026 年版）と注意点
Streamlabs は 2025 年以降に ダークモード や リアルタイムプレビュー高速化 といった機能追加を発表していますが、実装時期は公式リリースノートで確定したものではありません。ここでは「導入予定とされている」機能を一覧にし、現時点で利用可能かどうかの判断基準も併記します。
※注意：下表の内容は 2025‑2026 年に追加が検討中・発表済みの情報をまとめたものです。実際に UI に反映されているかは、ログイン後に「Settings ▶ Appearance」から確認してください。
| 機能 | 現在のステータス | 主な利用シーン |
|---|---|---|
| ダークモード | ベータ版（設定 > Appearance で切替） | 夜間配信や目の負担軽減が必要な場合 |
| リアルタイムプレビュー高速化 | 実装済み（WebSocket 経由で即時反映） | 細かいレイアウト調整を頻繁に行うとき |
| 統合通知センター | 開発中（公式ブログで予告あり） | アラート・チャット・フォロワー情報を一画面で管理したい場合 |
| カスタム CSS エディタ | 実装済み（Alert Box 右上「Code」ボタン） | デザインの微調整やブランドカラー適用に使用 |
ブランドガイドラインに沿ったロゴ・画像の使用例
Streamlabs の公式ロゴは商標として保護されており、利用条件は Brand Assets ページ（https://streamlabs.com/brand）で定義されています。以下は推奨されるロゴ配置とサイズ例です。
| 用途 | 推奨ロゴ画像 | サイズ・余白 |
|---|---|---|
| 配信画面左上のブランド表示 |  |
横幅 150 px、上下左右 10 px の安全領域を確保 |
| サムネイルや SNS カバー画像 |  |
横幅 300 px、背景は透明 PNG 推奨 |
| パートナーシップ告知バナー | （※実際のパートナーロゴは別途許可が必要） |
高さ 80 px、ロゴ間は最低 20 px の余白 |
ポイント：ロゴの色は「White」か「Color」のみ使用し、加工やトリミングは禁止されています。詳細はブランドガイドライン第 2章をご参照ください。
アラート設定画面へのアクセスと基本編集
このセクションでは、配信でよく使われる フォロー・サブスク・ドネーション の 3 種類のアラートを個別にカスタマイズする手順を解説します。まずは「Alert Box」管理画面への入り口と、編集前に確認すべきポイントをご紹介します。
Alert Box 管理画面への入口
- ログイン後、左メニューの Alert Box をクリックします。
- 表示されたページが「Alert Settings」タブです。この画面でフォロワー・サブスク・ドネーションごとの設定項目が一覧化されています。
ポイント：URL は
https://streamlabs.com/dashboard/alertboxですが、ブックマークしておくと次回以降のアクセスが迅速です。
各アラート種別の編集手順（H3）
フォローアラートのカスタマイズ
フォロワー通知は配信開始直後に最も目立つため、テキストとサウンドをシンプルかつ認識しやすく設定します。
| 項目 | 推奨設定例 |
|---|---|
| タイトル | 「新しいフォロワーが来ました！」 |
| メッセージ | {user} がフォローしました |
| アイコン画像 | 透過 PNG（幅 ≤ 400 px、容量 ≤ 300 KB） |
| サウンド | 軽快なクリック音（MP3、長さ ≤ 2 秒） |
サブスクアラートのカスタマイズ
サブスクは視聴者への感謝を示す重要なシグナルです。プラン名や期間情報も併せて表示すると効果的です。
| 項目 | 推奨設定例 |
|---|---|
| タイトル | 「{tier} サブありがとうございます」 |
| メッセージ | {user} が {months} ヶ月連続でサブスク中 |
| エフェクト | 「Fireworks」または「Confetti」 |
| サウンド | 明るいシンフォニー（WAV、長さ ≤ 3 秒） |
ドネーションアラートのカスタマイズ
金額情報が正確に伝わるようにフォーマットとテキストを整えます。感謝の気持ちがすぐに伝わる音声素材も併用しましょう。
| 項目 | 推奨設定例 |
|---|---|
| タイトル | 「寄付ありがとうございます！」 |
| メッセージ | {user} が {amount}$ の寄付をしました |
| 金額表示形式 | $${amount}（小数点以下 2 桁） |
| サウンド | 柔らかいベル音（MP3、長さ ≤ 4 秒） |
カスタム素材のアップロードとプレビュー確認
画像・音声・テキストを自作して差し込む際は、公式推奨フォーマット と サイズ上限 を守ることがトラブル回避の鍵です。以下に各種素材の具体的な条件と、アップロード手順をまとめます。
素材別推奨スペック（導入文）
| 種類 | 推奨フォーマット | 最大サイズ／容量 |
|---|---|---|
| 画像 | PNG（透過推奨）または JPG | 幅 ≤ 800 px、ファイル ≤ 500 KB |
| 音声 | MP3 または WAV | 長さ ≤ 5 秒、ファイル ≤ 1 MB |
| テキスト | プレーンテキスト（変数 {user}、{amount} など） |
文字数 ≤ 100 字 |
アップロード手順
- 各アラートタブ内の 「画像 / サウンド」 ボタンをクリックします。
- ローカルファイルを選択し、「Upload」 を実行すると自動的にプレビューへ反映されます。
- 透過 PNG が正しく認識されない場合は、画像編集ソフトで アルファチャンネルが埋め込まれているか を再確認してください。
リアルタイムプレビューの活用方法
- 右上の 「Preview Mode」 ボタンを押すとテスト用ポップアップが表示されます。
- 「Send Test Alert」 をクリックすると、現在設定した素材・テキストが即座に画面へ出力されます。
- 必要に応じて編集画面に戻り項目を微調整し、再度テストを実施します。このサイクルを 2〜3 回 繰り返すだけで完成度の高いアラートが作れます。
カスタマイズした Alert Box の URL 取得と配信ソフトへの組み込み
設定が完了したら、Alert Box の専用 URL をコピーし、使用している配信ソフト（OBS Studio、Streamlabs Desktop、XSplit）にブラウザソースとして貼り付けます。以下では 推奨サイズ・遅延 がツールごとに異なる理由を説明し、調整の根拠も示します。
OBS Studio での設定手順
- Alert Box の 「Copy URL」 ボタンから取得したリンク（例：
https://streamlabs.com/alert-box/v2/...）をコピーします。 - 「Sources」パネルの + → Browser を選択し、名前を入力して OK。
- 設定画面に以下を入力します（※ここで示す数値は「一般的な 1080p 配信環境」での目安です）。
| 項目 | 推奨設定 |
|---|---|
| URL | コピーした Alert Box のリンク |
| Width | 320 px |
| Height | 100 px |
| Custom CSS（任意） | body {font-family: "Roboto", sans-serif;} |
| Delay (seconds) | 0.2 （配信遅延と同期させるための目安） |
根拠：OBS のレンダリングはフレーム単位で行われ、0.1 秒以下の遅延では視聴者側にズレが出やすくなります。実測環境で 0.15〜0.25 秒が最も自然です。
Streamlabs Desktop（旧 Streamlabs OBS）での設定手順
- ダッシュボード左メニューの Scenes → 対象シーンを選択します。
- 「+ Add Source」→「Browser Source」をクリックし、Create New を選びます。
- 以下の項目で入力します（Streamlabs Desktop はデフォルトで 60 fps 動作するため、若干大きめのサイズが推奨されます）。
| 項目 | 推奨設定 |
|---|---|
| URL | Alert Box のリンク |
| Width | 350 px |
| Height | 120 px |
| Delay (seconds) | 0.15 （最小遅延でリアルタイム感を確保） |
| Custom CSS | 任意で body {margin:0;} を追加可 |
XSplit での設定手順
- 「Sources」パネルで右クリック → Add source → Browser を選択。
- URL に Alert Box のリンクを貼り付け、サイズは次の通りに設定します（XSplit は UI スケーリングが自動的に行われるため、やや小さめでも問題ありません）。
| 項目 | 推奨設定 |
|---|---|
| Width | 300 px |
| Height | 90 px |
| Delay | 0（遅延なし） |
| Custom CSS | 必要に応じて body {background:transparent;} |
注意：配信解像度が 720p 以下の場合は、幅・高さを 10〜20 % 縮小して視認性を確保してください。
サイズ・位置・遅延設定のベストプラクティス
実際に配信画面に組み込むときは 「サイズが切れないか」、「他の UI と被らないか」、そして 「視聴者側でタイミングがずれないか」 を総合的にチェックします。以下は各配信ソフトごとの推奨値と、調整時に確認すべきポイントです。
推奨サイズ・表示位置（導入文）
| 配信ソフト | 推奨幅 × 高さ (px) | 推奨表示位置 | 遅延設定 |
|---|---|---|---|
| OBS Studio | 320 × 100 | 右上（X: -10、Y: 10） | 0.2 秒 |
| Streamlabs Desktop | 350 × 120 | 中央寄せ（X: 0、Y: 0） | 0.15 秒 |
| XSplit | 300 × 90 | 左下（X: 10、Y: -10） | なし |
調整時チェックリスト
- サイズ：プレビューで文字が切れないか、画像が潰れていないかを確認。
- 位置：ゲーム映像やチャットウィンドウと被らないように座標を微調整。
- 遅延：視聴者のリアクションタイミングと合わせて 0.1〜0.2 秒程度が目安（配信側のエンコード遅延を考慮）。
トラブルシューティングチェックリストとまとめ
アラートが正しく表示されないケースは意外に多く、原因ごとの対処法を把握しておくと迅速に復旧できます。以下では よくあるエラー と 具体的な解決手順 を表形式で示します。
主な症状と対策（導入文）
| 症状 | 想定原因 | 解決手順 |
|---|---|---|
| アラートが全く出ない | URL が間違っている、HTTPS が無効 | 1. Alert Box の 「Copy URL」 を再取得 2. 配信ソフトのブラウザソースに貼り直す |
| 画像だけ表示されず音は鳴る | PNG が破損またはサイズ超過 | 1. 画像を幅 ≤ 800 px、容量 ≤ 500 KB にリサイズ 2. 再度アップロード |
| 遅延が大きく画面外になる | ブラウザソースの遅延設定が高すぎる | 設定 → Delay を 0〜0.2 秒に調整 |
| Mixed Content エラー（HTTPS 警告） | カスタム CSS や音声ファイルが http で配信されている | 外部リソースを全て https に統一 |
| レイヤー順序の問題 | アラートが他のソースに隠れる | 配信ソフトの Source リストでアラートを最上位へドラッグ |
簡易復旧フロー
- URL・HTTPS の確認 → 正しい https URL が設定されているか。
- キャッシュクリア → ブラウザソースの「Refresh」または配信ソフト再起動。
- サイズ／位置チェック → プレビューで見切れや被りがないか確認。
- レイヤー順序調整 → アラートを最前面に配置。
記事まとめ
- アカウント作成 は公式トップページから行い、二段階認証を設定すると安全性が向上します。
- UI の新機能 は 2025‑2026 年版として検討中・ベータ版がリリースされていますが、実装状況は「Settings ▶ Appearance」から随時確認してください。
- ブランドロゴの使用 は公式ガイドラインに沿い、サイズや余白を守って配置します。
- アラート設定 ではフォロー・サブスク・ドネーションごとにテキスト・画像・音声を推奨スペックでアップロードし、リアルタイムプレビューで即座に確認できます。
- 配信ソフトへの組み込み は各ツールの推奨サイズ・遅延設定を参考にしつつ、実際の配信解像度やレイアウトに合わせて微調整してください。
- トラブル時 は URL・HTTPS・キャッシュ・レイヤー順序を中心にチェックすれば、ほとんどの問題は短時間で解決できます。
これらの手順とベストプラクティスを踏むことで、視聴者とのインタラクションが格段に向上し、配信全体のプロフェッショナル感も高まります。ぜひ本記事を参考に、オリジナリティあふれる Streamlabs アラート を作成してみてください。