Twitchのコメント表示を、潮だまりの輪郭と小さな海のきらめきで、コメントの流れを穏やかな海辺のリズムに変えるデザインに変えられる配信用コメントCSSセットです。 Social Stream Ninjaの dock.html / featured.html をOBS Studioのブラウザソースで使う配信向けに、Twitch用のセレクタを入れています。 ──────────────────── ■ 初版 v1.0.0 ──────────────────── カード形状、名前プレート、アバター装飾、背景レイヤー、入場／待機アニメーションをこのテーマ専用に設計した初版です。 カード外への装飾はみ出しを防ぎ、featured / dock、右寄せ、コンパクト表示、大アバター、アバターなしを実際の対象DOMで検証済みです。 ──────────────────── ■ 内容物 ──────────────────── ・Twitch用コメントCSS 5色（featured / dock 各5ファイル） ・導入説明テキスト ・ローカル確認用プレビューHTML 2種 ・サンプル画像 ・利用規約 収録カラー ・コバルトタイド ・シーグラス ・コーラルリーフ ・サンドバー ・トワイライトケルプ ──────────────────── ■ このデザインの特徴 ──────────────────── ・潮だまりの輪郭を重ねた有機的な浅瀬カード ・水面の輪を思わせるポートホール型アバター ・泡と反射がカード内をゆっくり漂うタイドアニメーション ・長めのコメントや絵文字が混ざるチャットでも読める行間 ・アニメーションを抑えるための prefers-reduced-motion 対応 ・文字サイズ、余白、色をCSS変数で微調整可能 ──────────────────── ■ 対応環境 ──────────────────── ・TwitchチャットをSocial Stream Ninjaで表示する配信 ・OBS Studioのブラウザソース ・Social Stream Ninja の dock.html（連続コメント）または featured.html（選択コメント） ※ Social Stream Ninja本体・コメント取得機能は商品に含まれません。 ※ Twitchのバッジ・エモートを隠さず、流量が多い時も読みやすい余白を確保しています。 ※ サービスやOBSの更新、ご利用のURLパラメータにより軽微な表示調整が必要になる場合があります。 ──────────────────── ■ 導入の概要 ──────────────────── 1. Social Stream Ninjaでコメント受信を有効化 2. dock.html または featured.html をOBSのブラウザソースに設定 3. 用途に合う dock_ または featured_ で始まる、お好きな色のCSSを「カスタムCSS」欄に貼り付け 4. 必要に応じてファイル先頭の :root で文字サイズ・余白を調整 ──────────────────── ■ 利用について ──────────────────── 【OK】 ・Twitch配信での利用 ・収益化配信での利用 ・OBS上での利用 ・色、サイズ、余白などの軽微な改変 ・配信画面や告知画像への使用 【NG】 ・素材データの再配布、再販売 ・購入者以外への共有 ・自作発言 ・改変後データの配布、販売 クレジット表記は任意です。