テンプレートギャラリー

次をご覧ください: 画像で見られる全オーバーレイギャラリーを利用するか、下のカスタムテンプレートや取り込み機能をご覧ください。

配信の見た目を選ぶ

チャット、選択メッセージ、アラートのオーバーレイをプレビューし、お気に入りをOBSやStreamlabsに追加できます。

🧭 オーバーレイの種類を選ぶ

💬 統合チャット

接続したプラットフォームから届くメッセージを流し続けます。チャットテンプレート、または次から始めてください: ドック.

⭐ 選択メッセージ

ドックで選んだ1件のメッセージを表示します。インタビュー、Q&A、紹介には選択メッセージ用デザインを選んでください。

🎉 イベントアラート

フォロー、メンバー登録、寄付をお祝いします。SSNのアラート設定でアニメーションと音声を設定してください。 アラートガイド

テンプレートライブラリ

配信にぴったりのテンプレートを見つけましょう

🎨 おそろいのテーマパック

3つのブラウザソースに統一した見た目を適用できます。ギャラリーで次を選びます: おそろいのセットを使うを選んでセッション情報を入力し、OBS用リンクをコピーしてください。動きは任意です。

眠そうな三毛猫、いちごミルク、淡いピンクの文房具

🐱 いちごの猫

眠そうな三毛猫、いちごミルク、淡いピンクの文房具。おそろいのチャット、選択メッセージ、アラートのスタイルが付属します。

パックをプレビューして使う
空色のポストカードに元気なコーギー

🐶 よき仲間

空色のポストカードに陽気なコーギー。おそろいのチャット、選択メッセージ、アラートのスタイルが付属します。

パックをプレビューして使う
静かな森にいる絵本のようなカエル

🍄 苔とキノコ

静かな森の、絵本のようなカエル。おそろいのチャット、選択メッセージ、アラートのスタイルが付属します。

パックをプレビューして使う
ライラック色の星くずを漂う宇宙飛行士のウサギ

🌙 月のウサギ

薄紫の星くずを漂う宇宙飛行士のウサギ。おそろいのチャット、選択メッセージ、アラートのスタイルが付属します。

パックをプレビューして使う
光る魔法のクリスタルと小さなドラゴン

🐉 クリスタルの守護者

光る魔法のクリスタルを持つ小さなドラゴン。おそろいのチャット、選択メッセージ、アラートのスタイルが付属します。

パックをプレビューして使う
ミントとプラム色の、ヘッドホンのアライグマとレコード

🎵 真夜中のミックステープ

ミント色とプラム色で描いた、ヘッドホンのアライグマとレコード。おそろいのチャット、選択メッセージ、アラートのスタイルが付属します。

パックをプレビューして使う
かわいいお化け、光るカボチャ、真夜中のプラム色

🎃 カボチャのおばけ

親しみやすいおばけ、光るカボチャ、真夜中のプラム色。おそろいのチャット、選択メッセージ、アラートのスタイルが付属します。

パックをプレビューして使う
マフラーを巻いたトナカイとクリスマスの緑

🎄 陽気な子トナカイ

マフラーを巻いたトナカイと、お祝いの常緑樹。おそろいのチャット、選択メッセージ、アラートのスタイルが付属します。

パックをプレビューして使う

テーマパッケージ

ドキュメント、サンプル画像、ガイドが付属するテーマ一式

Deukのテーマ
完全パッケージ

Deukのテーマ

色をカスタマイズでき、なめらかな切り替えを備えた洗練されたアニメーションテーマ。ゲーム配信に最適です。

新規
Windows 3.1テーマ
レトロなスタイル

Windows 3.1テーマ

クラシックなウィンドウと細かなピクセル表現を備えた、懐かしいWindows 3.1風チャットオーバーレイ。

Neutronテーマ
モダンなデザイン

Neutronテーマ

なめらかなアニメーションと高い読みやすさを備えた、すっきりしたモダンなデザイン。配色を変更できます。

すぐに使えるシンプルなテンプレート

セッションIDを指定するだけで使えるテンプレート

サンプルテンプレート
最小

サンプルテンプレート

必要な機能を備えた、すっきりした軽量テンプレート。カスタマイズの出発点に最適です。

装飾付きテンプレート
アニメーション

装飾付きテンプレート

なめらかなアニメーションと視覚効果を使った上品なデザイン。目を引きつつ、視聴を邪魔しません。

t3nk3yのテーマ
ゲーム

t3nk3yのテーマ

ゲーム配信用に設計された、くっきりした高コントラストのテーマ。展開の速い映像でも見やすく表示できます。

LuckyLootTube Liquid Glassテーマ
リキッドガラス

LuckyLootTubeのテーマ

なめらかなアニメーションと印象的なエモート表示を備えた、洗練されたリキッドガラス風チャットオーバーレイ。

YouTube CSS互換テンプレート

YouTube向けCSSスタイルを使用できるテンプレート

YouTube CSSテンプレート
YouTube互換

YouTube CSSテンプレート

YouTubeと同じ構造のオーバーレイページで、YouTube向けCSSを使えます。Septapusのスタイルにも対応しています。

開発者向けテンプレート

独自のカスタムオーバーレイを作るためのひな形

最小テンプレート
開発者向け

最小テンプレート

一から独自のオーバーレイを作るための最小限のコード。開発者やLLMを使ったコーディングに適しています。

オーバーレイサンプル
開発者向け

サンプルオーバーレイテンプレート

コメントとドキュメントが付いた、より充実したひな形です。独自のオーバーレイ作成に役立ちます。

共有したいテンプレートはありますか?

Social Stream Ninja用のすてきなテンプレートができたら、GitHubリポジトリへプルリクエストを送り、コミュニティと共有してください。

GitHubで投稿

StreamElementsのチャットウィジェットをSocial Stream Ninjaで使う

取り込みは初めてですか? チャットスキンの完全ガイドを読む でウィジェットファイルの探し方、対応形式、OBSの設定、問題の解決方法を確認できます。

SSNのWindowsデスクトップアプリとChrome拡張機能の両方で動作し、コードの編集は不要です。

SSNがチャットを受信していることを確認する

SSNアプリまたは拡張機能でプラットフォームのソースを開き、テストメッセージを送信します。SSNドックに表示されてから次へ進んでください。

元のウィジェットの書き出しファイルを入手する

ウィジェットのデザイナーが提供するZIP、フォルダー、ファイルを使ってください。通常、適切な書き出しにはHTML、CSS、JavaScript、fields/data、アセットが含まれます。スクリーンショットやStreamElementsのオーバーレイURLだけでは不十分です。

取り込みツールを開く

取り込みツールを開き、ZIP、フォルダー、ファイルを選択します。ウィジェットの構成を検出し、すぐにデモプレビューを表示します。

ウィジェット取り込みツールを開く

SSNセッションIDを追加する

SSNポップアップから取り込みツールを開くと、セッションIDとパスワードが自動入力されます。直接開いた場合は、次からコピーしてください: セッションオプション(Session Options) をアプリまたは拡張機能で確認します。セッションIDは取り込みツールで一度入力すると、ダウンロードしたファイル内に保存されます。

メッセージ履歴を選ぶ

取り込んだウィジェットに対応する設定があれば、次を使います: メッセージ履歴(Message history) で、時間経過による削除を無効にしたり、画面に残すメッセージ数を変更したりできます。これはウィジェットの設定を変えるもので、コードは変更しません。

ダウンロード前にテストする

デモプレビュー(Demo Preview) はサンプルメッセージでデザインを確認します。 ライブプレビュー(Live Preview) は起動中のSSNアプリまたは拡張機能からの実際のチャットでセッションを確認します。

ダウンロードしてOBSに追加する

クリックする項目: OBS用HTMLをダウンロード(Download OBS HTML)。OBSにブラウザソースを追加し、次を有効にします: ローカルファイルを有効にして、ダウンロードしたHTMLファイルを選択します。 OBSでセッションIDを追加したりURLを編集したりしないでください。 配信中はSSNを起動したままにしてください。取り込みツールとStreamElementsは閉じてもかまいません。

デモが空白

取り込みツールが検出したファイルを確認し、HTML、CSS、JavaScriptの選択が間違っていた場合はAdvanced file selectionを使ってください。

Live Previewが空白

チャットがSSNドックに届き、セッションIDと任意のパスワードが完全に一致していることを確認してください。

OBSが空白

取り込みツールのページ、元のZIP、StreamElements URLではなく、ダウンロードしたHTMLファイルを使用し、OBSブラウザソースを更新してください。

テンプレートの使い方

次の簡単な手順で始められます

テンプレートを選ぶ

テンプレートライブラリから配信の雰囲気に合うものを選んでください。スクリーンショットギャラリーでデザインを比較できます。多くの組み込みテンプレートはURLから直接使え、ダウンロードは不要です。

セッションIDを追加する

置き換える値: YOURSESSIONID をテンプレートURL内で、SSNアプリまたは拡張機能のSession Optionsにある実際のSocial Stream NinjaセッションIDへ置き換えます。パスワードを使用するセッションでは、それも含めてください。

https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID

OBS/Streamlabsに追加する

変更したURLを配信ソフトのブラウザソースとして追加します:

  1. OBSでソース欄の「+」をクリックし、「ブラウザ」を選択します
  2. ソースに名前を付け、OKをクリックします
  3. セッションID付きのテンプレートURLを貼り付けます
  4. 幅と高さを設定します(推奨:1920×1080)
  5. OKをクリックしてシーンに追加します

テンプレートをカスタマイズする

次のいずれかの方法で、カスタムCSSを使ってオーバーレイを調整できます:

  • OBSカスタムCSS: ブラウザソースのプロパティにCSSを追加します
  • URLパラメータ: 次を追加します: &css=URL_TO_YOUR_CSS_FILE をテンプレートURLへ追加します
  • Base64 CSS: インラインCSSには次を使用します: &b64css=YOUR_BASE64_ENCODED_CSS

🛠️ 自分のテンプレートを作る

動作するオーバーレイを出発点に、見た目を変更します。

🎨 見た目を変える

OBSブラウザソースを使用する カスタムCSS で色、余白、文字のスタイルを変更できます。元のSSN URLと接続は維持してください。

📦 ウィジェットを持ち込む

StreamElementsのチャットウィジェットの書き出しファイルをお持ちですか? StreamElements変換ツールを開くへ取り込み、プレビューしてからOBS用HTMLをダウンロードします。スクリーンショットやオーバーレイURLではなく、元のZIPまたはファイルを使用してください。 下の設定手順を見る.

🧩 動作を変える

動作するひな形をコピーし、HTML、CSS、JavaScriptを編集します。 クイックスタート · 開発者ガイド · イベントフィールド

🔧 ファイル、振り分け、テスト
  1. 使う項目: sampleoverlay.html は統合チャット用、 featured-modern.html は選択メッセージ用、または multi-alerts.html はイベント用です。ソースと必要なアセットは次からダウンロードしてください: betaリポジトリ.
  2. 元の接続コードを維持してください。チャットと選択メッセージのオーバーレイは異なるフィードを受信します。チャットフィードの見た目を変えても、選択メッセージ用オーバーレイにはなりません。
  3. 参照する共通スクリプト、フォント、画像は、同じ相対パスを保ってファイルと一緒に配置してください。または、AIに単独で使える書き出しを依頼してください。HTMLファイルの名前を変えるだけでは、依存ファイルは同梱されません。
  4. ファイルをホストし、そのURLにセッションと任意のパスワードを指定して使用します。単一で使えるローカル書き出しの場合は、その設定手順に従ってください。OBSのローカルファイル設定には、セッションパラメータを指定するURL欄がありません。
  5. まず架空のデータでプレビューし、その後自分のSSNセッションでテストしてください。選択メッセージ、消去、長い名前、画像、透明背景を確認します。実際の使用中はSSNを起動したままにしてください。

トリガーに応じた動作には、まず次を確認してください: Event Flowエディタ および アラートエフェクトのルール 。新しいオーバーレイを書く前に確認してください。

✨ AI用プロンプトをコピー

出発点を選んでプロンプトをコピーし、角括弧内のデザイン指定を書き換えてください。AIがリンクを読めない場合はソースファイルを添付してください。非公開のセッションIDとパスワードは会話に含めないでください。

💬 統合チャット
⭐ 選択メッセージ
🎉 音付きアラート
🎨 CSSだけで模様替え

複雑なウィジェットを変換する場合 StreamElements / Streamlabs変換用の完全なプロンプトを使う.

動画チュートリアル

AIの支援を使ったカスタムチャットオーバーレイの作成方法を学ぶ

動画の簡単な手順

  1. サンプルオーバーレイテンプレート(sampleoverlay.html)を探します
  2. テンプレートのコードをクリップボードにコピーします
  3. ClaudeなどのAIアシスタントを使ってカスタマイズを手伝ってもらいます
  4. 希望のスタイルに合うようCSSを変更するようAIに依頼します
  5. カスタマイズしたテンプレートを使用するようOBSを設定します
  6. OBSブラウザソースの設定でカスタムCSSを適用します