Adobe XD で絵素材を作りつつ StreamYard 有料版 (Basic) での1イベント単位の設定する初動メモ

Adobe XD で絵素材を作りつつ StreamYard 有料版 (Basic) での1イベント単位の設定する初動メモです。

StreamYard 有料版 (Basic)

image
StreamYard 無料版だとデフォルトの StreamYard アヒルな見た目で配信できるんですが、有料版 (Basic) は何といってもブランドと言って独自の絵素材で配信できるようになります。

image

ほかにも、いろいろ機能が強化されます。

以前、このように 「はじめてのNode-RED ver.1.3.0対応版」書籍出版記念イベント を StreamYard で配信しました。

今回メモする範囲

今回は1イベント単位の設定の初動メモします。もしかしたら漏れがあるかもしれませんが、地味に色々対応があったので、まず言語化していきたい次第。

ただ、設定してしまうと、ほんと良い配信ができる。すてき。

2021/08/05 現在の情報で進めます。

ブロードキャスト作成

image

まず、ログインして Create a broadcast ボタンをクリックして作成開始。

image

New broadcast をクリック。

Youtube Live を選択してタイトルと概要を設定

ブロードキャストの詳細設定ができます。ここで配信先を決めます。今回は Node-RED v2.0新機能&Node-RED Con紹介 イベントを配信設定するので、事前に Destination で配信先を設定しておいたものを選択しました。

image

イベント情報を反映するなら、connpass からイベント情報を取ってくるといいですね。

image

これが YouTube Live の場合は各配信の下部にある概要説明とタイトルになります。このあたり、勝手に設定してくれるの素晴らしい。

先々のイベントなので配信予約をする

image

今すぐの配信じゃないので Schedule for Later のチェックをクリックして、イベント当日の配信設定をします。

image

こんな感じで AM 12:00 配信の場合、10分くらい前から配信できるようにしています。実際、配信するスタジオ内で配信開始ボタンを押さない限り、配信されないので大丈夫です。GMT+9 と日本時間の時差表記もあって時間間違えるリスクが減ります。

ということで、出来上がったら Create broadcast ボタンを押して配信する設定を作ります。

image

出来上がりました。

配信設定がされているか確認

配信する1つの単位(部屋)を StreamYard では Studio と言います。

設定が出来上がったら、配信設定がされているか確認しましょう。

image

Enter studio ボタンの横にある3点詳細 image をクリックして、いくつかの機能が出てくるので、 View on YouTube をクリックして、実際に設定された配信設定を確認します。

image

行く前に、サウンド設定大丈夫?ハウリングしない?みたいな気遣いがあって素敵です。 Continue to YouTube ボタンをクリック。

image

無事、設定がされました。

  • 配信時間があっているか
  • 公開や限定公開の設定があっているか
  • そもそも、チャンネルの配信先があっているか

あたりを確認しましょう。とくに、チャンネルの配信先があっているかは重要で、以前、私は一度やらかしました。複数のチャンネル配信を持っていると割と別のところに出しちゃったりしますので、気をつけてみてみましょう。

image

タイトルや概要も反映されていて、このあたりの情報が充実していると、配信への信頼感も増すので良い感じ。

スタジオ内の設定をしていく

image

配信設定が問題ないと確認出来たら、いよいよスタジオ内を設定していきます。Enter studio をクリックして設定をはじめます。

image

カメラやマイクの設定を確認して Enter Studio ボタンをクリック。

image

スタジオが表示されます。

Brand の設定

image

右メニューにある Brand に移動します。

image

New Brand をクリックして新しいブランドをつくります。

image

名前を決めます。

image

最初はアヒルな StreamYard の初期設定なので変えていきます。

Adobe XD で絵素材を作る

image

こういった透過PNGであったり、画像サイズをしっかり書き出すのは Adobe XD の1プロジェクトの中でアートボードをロゴ用背景用など作っていき制作していくのが管理しやすかったです。

image

こんなアートボードで作っていきました

Brand color

image

塗りのスポイト機能で、Node-RED のロゴのメインカラーを抽出しました。

image

これで Brand color を設定すると、一気に雰囲気が決まるのでテンションが上がります。

Logo

image

Logo で使われる 200 x 200 のサイズにして Node-RED のロゴを書き出したり。

Background

image

背景画像は、こうやってオーバーレイでロゴを背景に馴染ませてレイアウトした後に 1280 x 720 で書き出しました。

Overlay でより細かくレイアウトする

image

Logo と Background で設定すると、すでにそれっぽいんですが、右上にロゴがあると共有表示のドキュメントにかぶるケースもあって、画面全体を透過でレイアウトできる Overlay をかぶせることによって、自由により細かくレイアウトします。

image

ということで Adobe XD で右上にテロップが出る形でレイアウトしてアートボード書き出ししました。

image

この設定のコツは、アートボードのアピアランスの塗りのチェックを外して透明にしておくとなにも配置されてない部分は透過されます。今回のような Overlay させる透過PNGを作る際に役に立つ設定です。

image

実はこれは前回のイベントで、微妙に画面共有資料に Overlay によるヘッダーがかぶったという知見から、ブラッシュアップしたものです。

image

すでにイベント中でも対策したものなのですが、かぶらないようになるべく上部に1行で案内するようにしています。

image

今回の Overlay にはそのあたりが活かされています。

Brand の設定を確認する

ここまでできたら、だいぶ設定できました。あとは念入りに表示を確認します。

image

Brand color ・ Theme ・ Logo なし ・Overlay で設定したものです。

image

良い感じに設定されました。

image

人がいないときは Backgroud が見えます。

image

自分を Remove stream して確認。こちらも良い感じに設定できました!

追加でしておくと良い設定

その他に設定しておくと便利な設定もメモしておきます。

Banner も設定しておくとより良い

Banner はイベント中に色々なテロップを出せる機能です。

image

イベントで使えそうな文言を事前に設定しておくと便利です。

image

ただいま準備中です文言は、イベント開始前に重宝しました。

image

絵文字も指定できますが、たぶん配信画面の後ろで実際のストリーミングを合成しているサーバーがあるためなのか、スタジオのプレビューで見える絵文字を、実際に配信時に使われる絵文字の見た目が変わるのが面白かったです。

image

実際に配信されたものはこちらなのですが。

image

こちらのスタジオで設定しているプレビューではこのようになってました。おなじメガホンではあるものの、見た目が違いますね。

ブロードキャスト作成時にサムネイルがあるとより良い

image

ブロードキャスト作成時にサムネイルも作ることができます。これは、YouTube の予約配信時に使われるもので、ぜっていしておくと、配信まで見た目がより見栄えが良くなります。

image

このような形で切り取りは出来ますが、本家の 動画のサムネイル の仕様に合わせて、きっちり設定するほうがよいでしょう。

image

こちらも Adobe XD で 1280×720 の画像サイズで作ってみました。

image

いい具合に、サムネイルも設定されました!

だいたい設定できたと思う

ということで、ここまで設定できると StreamYard 的にも「当日に配信してもイイ見た目で出せそうだなー」というある程度の設定ができたなと思います。

そして Adobe XD は、文字や簡単なオブジェクトなどササっとつくれて、いろいろな画像サイズを書き出しやすくていいですね。いいコラボレーションをしてくれました!