Adobe XD で絵素材を作りつつ StreamYard 有料版 (Basic) での1イベント単位の設定する初動メモです。
StreamYard 有料版 (Basic)
StreamYard 無料版だとデフォルトの StreamYard アヒルな見た目で配信できるんですが、有料版 (Basic) は何といってもブランドと言って独自の絵素材で配信できるようになります。
ほかにも、いろいろ機能が強化されます。
以前、このように 「はじめてのNode-RED ver.1.3.0対応版」書籍出版記念イベント を StreamYard で配信しました。
今回メモする範囲
今回は1イベント単位の設定の初動メモします。もしかしたら漏れがあるかもしれませんが、地味に色々対応があったので、まず言語化していきたい次第。
ただ、設定してしまうと、ほんと良い配信ができる。すてき。
2021/08/05 現在の情報で進めます。
ブロードキャスト作成
まず、ログインして Create a broadcast ボタンをクリックして作成開始。
New broadcast をクリック。
Youtube Live を選択してタイトルと概要を設定
ブロードキャストの詳細設定ができます。ここで配信先を決めます。今回は Node-RED v2.0新機能&Node-RED Con紹介 イベントを配信設定するので、事前に Destination で配信先を設定しておいたものを選択しました。
イベント情報を反映するなら、connpass からイベント情報を取ってくるといいですね。
これが YouTube Live の場合は各配信の下部にある概要説明とタイトルになります。このあたり、勝手に設定してくれるの素晴らしい。
先々のイベントなので配信予約をする
今すぐの配信じゃないので Schedule for Later のチェックをクリックして、イベント当日の配信設定をします。
こんな感じで AM 12:00 配信の場合、10分くらい前から配信できるようにしています。実際、配信するスタジオ内で配信開始ボタンを押さない限り、配信されないので大丈夫です。GMT+9 と日本時間の時差表記もあって時間間違えるリスクが減ります。
ということで、出来上がったら Create broadcast ボタンを押して配信する設定を作ります。
出来上がりました。
配信設定がされているか確認
配信する1つの単位(部屋)を StreamYard では Studio と言います。
設定が出来上がったら、配信設定がされているか確認しましょう。
Enter studio ボタンの横にある3点詳細 をクリックして、いくつかの機能が出てくるので、 View on YouTube をクリックして、実際に設定された配信設定を確認します。
行く前に、サウンド設定大丈夫?ハウリングしない?みたいな気遣いがあって素敵です。 Continue to YouTube ボタンをクリック。
無事、設定がされました。
- 配信時間があっているか
- 公開や限定公開の設定があっているか
- そもそも、チャンネルの配信先があっているか
あたりを確認しましょう。とくに、チャンネルの配信先があっているかは重要で、以前、私は一度やらかしました。複数のチャンネル配信を持っていると割と別のところに出しちゃったりしますので、気をつけてみてみましょう。
タイトルや概要も反映されていて、このあたりの情報が充実していると、配信への信頼感も増すので良い感じ。
スタジオ内の設定をしていく
配信設定が問題ないと確認出来たら、いよいよスタジオ内を設定していきます。Enter studio をクリックして設定をはじめます。
カメラやマイクの設定を確認して Enter Studio ボタンをクリック。
スタジオが表示されます。
Brand の設定
右メニューにある Brand に移動します。
New Brand をクリックして新しいブランドをつくります。
名前を決めます。
最初はアヒルな StreamYard の初期設定なので変えていきます。
Adobe XD で絵素材を作る
こういった透過PNGであったり、画像サイズをしっかり書き出すのは Adobe XD の1プロジェクトの中でアートボードをロゴ用背景用など作っていき制作していくのが管理しやすかったです。
こんなアートボードで作っていきました
Brand color
塗りのスポイト機能で、Node-RED のロゴのメインカラーを抽出しました。
これで Brand color を設定すると、一気に雰囲気が決まるのでテンションが上がります。
Logo
Logo で使われる 200 x 200 のサイズにして Node-RED のロゴを書き出したり。
Background
背景画像は、こうやってオーバーレイでロゴを背景に馴染ませてレイアウトした後に 1280 x 720 で書き出しました。
Overlay でより細かくレイアウトする
Logo と Background で設定すると、すでにそれっぽいんですが、右上にロゴがあると共有表示のドキュメントにかぶるケースもあって、画面全体を透過でレイアウトできる Overlay をかぶせることによって、自由により細かくレイアウトします。
ということで Adobe XD で右上にテロップが出る形でレイアウトしてアートボード書き出ししました。
この設定のコツは、アートボードのアピアランスの塗りのチェックを外して透明にしておくとなにも配置されてない部分は透過されます。今回のような Overlay させる透過PNGを作る際に役に立つ設定です。
実はこれは前回のイベントで、微妙に画面共有資料に Overlay によるヘッダーがかぶったという知見から、ブラッシュアップしたものです。
すでにイベント中でも対策したものなのですが、かぶらないようになるべく上部に1行で案内するようにしています。
今回の Overlay にはそのあたりが活かされています。
Brand の設定を確認する
ここまでできたら、だいぶ設定できました。あとは念入りに表示を確認します。
Brand color ・ Theme ・ Logo なし ・Overlay で設定したものです。
良い感じに設定されました。
人がいないときは Backgroud が見えます。
自分を Remove stream して確認。こちらも良い感じに設定できました!
追加でしておくと良い設定
その他に設定しておくと便利な設定もメモしておきます。
Banner も設定しておくとより良い
Banner はイベント中に色々なテロップを出せる機能です。
イベントで使えそうな文言を事前に設定しておくと便利です。
ただいま準備中です文言は、イベント開始前に重宝しました。
絵文字も指定できますが、たぶん配信画面の後ろで実際のストリーミングを合成しているサーバーがあるためなのか、スタジオのプレビューで見える絵文字を、実際に配信時に使われる絵文字の見た目が変わるのが面白かったです。
実際に配信されたものはこちらなのですが。
こちらのスタジオで設定しているプレビューではこのようになってました。おなじメガホンではあるものの、見た目が違いますね。
ブロードキャスト作成時にサムネイルがあるとより良い
ブロードキャスト作成時にサムネイルも作ることができます。これは、YouTube の予約配信時に使われるもので、ぜっていしておくと、配信まで見た目がより見栄えが良くなります。
このような形で切り取りは出来ますが、本家の 動画のサムネイル の仕様に合わせて、きっちり設定するほうがよいでしょう。
こちらも Adobe XD で 1280×720 の画像サイズで作ってみました。
いい具合に、サムネイルも設定されました!
だいたい設定できたと思う
ということで、ここまで設定できると StreamYard 的にも「当日に配信してもイイ見た目で出せそうだなー」というある程度の設定ができたなと思います。
そして Adobe XD は、文字や簡単なオブジェクトなどササっとつくれて、いろいろな画像サイズを書き出しやすくていいですね。いいコラボレーションをしてくれました!