nanja素材 > シンプルOBSデザインその1

シンプルOBSデザインその1:ライブデモ

シーンボタンを押すと、実物のスティンガートランジションが再生されて画面が切り替わります。トランジションの種類や、縦型(ショート配信用)への切り替えも試せます。

シーン切替
トランジション
画面の向き
まもなくはじまるよ
STARTING SOON
マリオカートやってます
コメント
きゅうけいちゅう ☕
BE RIGHT BACK
おつかれさまでした!
THANKS FOR WATCHING

※ デモは低解像度・SAMPLE透かし入りの簡略版です。販売版はフルHD(横1920x1080/縦1080x1920)・透かしなし。オーバーレイ本体はさらに細かいアニメーションが入ります。

トランジション単体プレビュー

マウスを乗せると再生されます。市松模様の部分は透過(アルファ付きwebm)で、配信画面にそのまま重なります。

暖色ストライプの斜めワイプマウスを乗せると再生(1.5秒)
パッチワークふうダイヤマウスを乗せると再生(1.5秒)
ジグザグのカーテンマウスを乗せると再生(1.5秒)
セット内容
  • オーバーレイ 8種(HTML)待機・ゲーム3種・休憩・終了+縦型2種。OBSのブラウザソースに入れるだけ
  • スティンガートランジション 6種横型3種+縦型3種(透過webm・各1.5秒)
  • OBSシーンコレクション(横・縦)インポートするだけで全シーン・トランジション設定済み
  • Twitch / YouTube チャット用CSSコメント欄をおそろいのデザインに
  • コメント読み上げソースローカルVOICEVOX連携のHTML(外部送信なし)
  • 縦配信用プロファイル1080x1920設定済み。ショート配信がすぐ始められる
  • セットアップ手順書インポート2回+機材選択だけの簡単導入
入手方法
単品購入

BOOTH

このセットを買い切りで購入できます。アップデートは無料で再ダウンロードできます。

BOOTHで購入する

※ 決済はBOOTH上で行われます。このサイトが個人情報を収集することはありません。

ダウンロード後のセットアップ手順

zipファイルを入手したあとの流れです。OBS Studio(無料)がインストールされていれば、5分ほどで配信画面が完成します。

  1. zipを解凍して、置き場所を決める

    zipファイルを右クリック→「すべて展開」(Macはダブルクリック)で解凍し、出てきたフォルダを C:\OBS素材\nanja-obs-simple-theme01 に置くと、設定済みのパスがそのまま使えるのでおすすめです。あとでフォルダを移動・リネームすると画面が表示されなくなるので、先に置き場所を決めてから次に進んでください。

  2. OBSにシーンコレクションを取り込む

    OBSを起動し、上部メニューの「シーンコレクション」→「インポート」を開きます。解凍したフォルダの中の nanja-obs-simple-theme01.json を選んで「インポート」を押します。

  3. シーンコレクションを切り替える

    もう一度「シーンコレクション」メニューを開き、「シンプルOBSデザインその1」を選びます。画面左下のシーン一覧に「待機」「ゲーム」「休憩」「終了」などが並んだら成功です。トランジションもすでに設定されています。

  4. ゲーム映像をつなぐ(機材の選択だけ手動)

    ゲームシーンの「Switchキャプチャ」ソースをダブルクリックし、「デバイス」でお使いのキャプチャーボードを選びます。GeoGuessrなどPCゲームのシーンは「PC画面キャプチャ」でキャプチャ方法と画面を選択してください。

  5. コメント欄を配信サイトに合わせる

    Twitchの方はそのままで動きます。YouTubeで配信する時は「コメント:YouTube」ソースのプロパティを開き、URL内の動画IDを配信ごとに入れ替えて、Twitchチャットと表示を切り替えてください。

  6. 映像設定を確認して完成

    「設定」→「映像」の基本(キャンバス)解像度が 1920x1080 になっているか確認します。配置やトランジションは設定済みなので、これで配信を開始できます。

縦型(ショート配信)を使うとき 「プロファイル」→「インポート」で profiles/vertical-short フォルダを選ぶとキャンバスが1080x1920になります。そのあと「シーンコレクション」→「インポート」で nanja-obs-simple-theme01-vertical.json を取り込めば、縦型も同じ手順で使えます(配信のストリームキーは新しいプロファイル側で設定し直してください)。
画面が真っ白・真っ黒になるとき 素材フォルダを移動・リネームした可能性が高いです。ブラウザソースのプロパティを開き、「ローカルファイル」のパスを今のフォルダの場所に指定し直してください。それでも解決しない場合は、同梱のREADMEのトラブルシューティングをご覧ください。