オンラインイベントの画面デザイン-StreamYardの場合
StreamYardって何？
私が働いているPeatixではポッドキャスト番組「Peapod」を今年の1月から配信し始めました。現在、こんな状況なので集まって収録することができなくなり、それぞれの場所からオンライン上で集まりオンラインイベントとしての配信を4月から始めました。
Peapodを生配信する時に StreamYard というサービスを使っています。
無料でも使えますが、PeatixのPeapod配信は有料プランを使っています。
私はスピーカーとしてオンラインイベント配信に参加したことはまだありません。今回はPeapodの配信で私の担当している画面のデザイン周りのことについてお伝えします。
StreamYardで配信時にできる画面デザイン
使用するプランによって使える機能が変わります。
[無料プラン]
・ブランドカラーを設定
・画面の表示を7つのレイアウトから選べる
・画面左下に文字のバナーを表示できる
・画面下にテロップを流せる
・視聴者からのコメントを配信画面に表示
・StreamYardのロゴが右上に表示される
配信管理ページ、ブラウザの上の配信スタジオはこんな感じになっています。（私個人の無料アカウントの配信ページ）
このキャプチャーでは、自分の映像(Snap Cameraの3D Sock Puppet)を写しながら、Chrome別タブで開いてるPeatixのページをスクリーンをシェアしている状態です。
[I'm learning...] の部分がバナー
[#test] の部分がテロップ
それぞれブランドカラーで設定した色が背景色になってます。
有料プランに変更すると無料プランに追加して以下のことができるようになります。
[有料プラン]
・画面右上のStreamYardロゴを非表示にできる
・画面右上にロゴを表示できる（PNG/GIF）
・オーバーレイを設定（画像/GIF/動画）
・背景に画像/GIFを設定
Peapodの配信画面デザイン
Peapod生配信は、
[左上] Peapodロゴ
[右下] ゲスト名、イベントのテーマ
をオーバーレイで表示させています。
5/7に配信したときの画面キャプチャです。この時は以下のPNGファイルをオーバーレイに設定しました。
オーバーレイ作成時に気をつけた2つのこと
1. テロップにオーバーレイの要素がかからないようにする
初めてPeapodの生配信をした時の画面です。
StreamYardの機能を把握しきれておらず、テロップを流せることを知りませんでした。なので、イベントのハッシュタグを流すためにテロップを使った時、テロップがオーバーレイの要素に被ってしまいました。
・見えそうで見えない文字が気になる
・テロップが表示されている部分の高さはそこまで大きくない
ので、2回目以降の配信ではテロップとオーバーレイの要素が被らないようにオーバーレイを作成しました。
2. オーバーレイ要素の大きさ
右下に配置しているイベントテーマなどがテロップに被らないように位置を調整したところ、テーマの文字数が多いと画面割によってはスピーカーの顔にオーバーレイの文字が被ってしまいました。
アフロマンスさんにゲストで登場いただいた2回目のPeapod生配信。
オーバーレイの要素が大きく、この画面割にした時にスピーカーの口元が見えなくなってしまいました。アフロマンスさんごめんなさい。
幸い、StreamYardは配信中でもオーバーレイを変更できるので、文字数を減らして変更しました。
配信画面のレイアウトは7つのパターンから選べ、またスピーカーの人数によっても見え方が変わってきます。
この回以降は、
・参加スピーカー数(配信画面に出てくるのは最大6人)
・使われるであろう画面レイアウト
などを考慮してオーバーレイを作成するようにしています。
オーバーレイの可能性
オーバーレイは動画のファイルも設定することができます。
まだPeapodでは動画のオーバーレイを試したことはないですが、オーバーレイに動画を入れておけば、イントロ、アウトロ動画として使えそうです。
どんな感じになるかはStreamYardのチュートリアル動画をご覧ください。
きっともっとすごい使い方をされてる方いらっしゃると思うので、いろんな方々の使い方を参考にさせていただきながら、オンラインイベントをもっと楽しく見ていただけるように進化させていきたいと思います。
今までに配信したPeapodは、YouTubeにアーカイブがありますので、ぜひご覧ください。
私のnoteをご覧いただきありがとうございます！いただいたサポートは制作環境の充実や、海外カンファレンス参加やおいしいフライドポテトを食べる資金として大事に使わせていただきます！