YouTubeライブ配信画面のデザイン｜配信画面のデザインに役立つソフトやサイトを紹介
目次
配信画面＝オーバーレイではない
配信オーバーレイとは、配信画面に透かしのように重ねて表示する画像や動画です。このオーバーレイを使うことで、より鮮やかで美しい画面を作ることができるので、配信画面の重要な構成要素の一つといえます。
そのため、配信画面をデザインする際に、真っ先にこの画像のことをイメージする人も多いかと思います。
しかし、あくまでオーバーレイは配信画面の構成要素の一つであり、配信画面そのものではありません。
この記事ではYouTubeの配信画面全体をデザインするためのソフトやサイト、その使い方を解説していきます。
配信画面のデザインに役立つソフトやサイト
この章では、
- 配信画面を編集できるソフト
- 画像素材やオーバーレイが入手できるサイト
- プロにオーバーレイ素材を依頼できるサイト
の三つの観点でそれぞれサービスを紹介していきます。
配信画面を編集できるソフト
CastCraft
CastCraftとは、配信者（ゲーム配信者やVtuber）が、視聴者との関係を深めるためのサービスです。
CastCraft内のScreenという機能は、視聴者とのやり取りを視覚的に楽しくすることを目的に設計されており、YouTubeの配信画面をデザインするのに最適です。
詳細については下記の記事をご参照ください。
Adobe Photoshop／Adobe AfterEffect
言わずと知れた画像デザインソフトであるIllustratorと、動くエフェクトなどを自作する際に最適なAfterEffectsは、スキルと手間を惜しまない配信者にとって、配信画面を作るための有力な選択肢と言えるでしょう。
画像素材やオーバーレイが入手できるサイト
Booth
Boothは、国内Vtuberの文化を理解したクリエイターが作成した配信オーバーレイを購入できます。
Nerd or Die
Nerd or Dieは、プロクオリティの配信用素材のパックを一式購入できるため、統一感を出したい方におすすめです。
Etsy
無料配布はありませんが、Etsyならクオリティの高い配信オーバーレイが購入できます。
プロにオーバーレイ素材を依頼できるサイト
SKIMA
SKIMAは配信オーバーレイやVtuberのアバター制作も依頼でき、クリエイティブなデザイナーが多く在籍しています。
ココナラ
ココナラはクリエイター仲介サービスの中でも大手といえ、在籍しているクリエイターが非常に多い点が特長です。
多くの選択肢から選びたい方は、ココナラで配信オーバーレイを探してみてください。
Behance
Behanceは非常に高い技術を持つクリエイターに依頼できますが、海外のサービスとなるため英語が必要です。
英語が話せる方は、どのような配信オーバーレイが作成してもらえるのかを確認してみてください。
視覚的に楽しいYouTube配信画面の作り方
画像や動画でのオーバーレイをOBSに設定することの難易度はそこまで高くないと思われます。
ここでは、一歩踏み込んで視聴者とのやり取りを視覚的に楽しくするような配信画面の作り方を解説していきます。
CastCraftを利用して、YouTubeの配信画面で
- コメント等に反応するエフェクト
- カスタマイズ可能なコメント欄
- 文字エフェクト
- エフェクトの色やデザインのカスタマイズ
- 流れるテロップ（お知らせ）
- 動く画像スタンプ
- 特定のエリアでポップアップするコメント
等を追加・カスタマイズして配信画面を作っていくための手順を一つずつご説明します。
CastCraftの導入
CastCraftの配信画面を作る機能を配信で使うあたっては、まずはCastCraftでコメント取得するところから始めましょう。
CastCraftデスクトップ版をインストール
まずはCastCraft公式サイトにアクセスし、CastCraftのデスクトップアプリをダウンロードしてください。
ダウンロードしたファイルをダブルクリックすると、インストールがはじまります。
ログイン
CastCraftを起動したら、「CastCraftにログイン」ボタンを選択してログインしましょう。
ログインするアカウントは、YouTube Liveを行うアカウントでログインしてください。
CastCraftの「YouTube」タブに切り替えて、YouTube Studioが表示されていることを確認しましょう。
YouTubeタブで、CastCraftにログインしたものと異なるYouTubeチャンネルが表示されている場合は、YouTube Studioの右上のアイコンをクリックして正しいアカウントに切り替えてください。
配信を開始
CastCraftのYouTubeタブから配信を開始しましょう。
その後、OBS等の配信ソフトウェアで配信を開始しましょう。
Live Dashboardタブで配信に接続
YouTubeタブから配信を開始したら、自動で「Live Dashboard」タブでも配信に接続され、コメントの取得が開始されます。
自動で接続されない場合、Live Dashboard内の緑色の「配信に接続」ボタンを押しましょう。
この際、URLの入力を行う必要はございません。
Screenの導入
LiveDashboardでコメントが無事に取得できたら、次はいよいよ配信画面の作成に移りましょう。
配信画面のデザインには、Screenという機能を使います。
ScreenをOBS等に追加
「OBS等に接続する」というボタンから、OBSにScreenを追加します。
コメント等に反応するエフェクト
「エフェクト一覧」の中から、設定したいエフェクトの「設定」ボタンを押します。
デフォルトで追加されていない種類のエフェクトを新規追加したい場合は、「エフェクトを追加」から追加できます。
エフェクトごとに発生する条件を追加することで、コメントの回数や、コメント内のキーワードに応じてエフェクトを出しわけることができます。
設定するには、「チャットに反応する条件」内の「条件を追加」というボタンを押します。
条件内容を記入して「作成」を押せば各エフェクトがどのようなチャットの時に出現するかが設定できます。
コメント欄の追加
配信画面のコメント欄は、Screenの「チャットボックス」ウィジェットでカスタマイズできます。
Screenの「デモメッセージ出力」と言うトグルをONにしてみてください。配信中のコメントが画面上にどのように表示されるかが見られます。
配信中の操作
- 「デモメッセージを流す」をOFFにして、配信で実際に使ってみましょう。
- CastCraftを配信に接続すれば、Screenにもコメントが反映されます
編集モードでウィジェットのカスタマイズ
Screenタブの左上部のバーを「編集モード」にします。
「チャットボックス」ウィジェットの設定アイコン（歯車のアイコン）を押すとデザインが詳細に設定できます
文字エフェクトの追加
Screenでは、特定の条件に反応する高度な文字エフェクトが簡単に作れます。
Screen右側の「エフェクトを追加」をクリックします。
文字エフェクトである、
- 文字スタンプ
- 流れる文字
- 落ちる文字
のいずれかを追加します。
エフェクトの色や動きをカスタマイズ
Screenの一部のエフェクトの色やアニメーションはカスタマイズできます。
上記の文字エフェクトはもちろん、
- 花火
- ペンライト
- 流れ星
等の動きや色を自由に設定できます。
流れるテロップ（お知らせ）の追加
「メッセージボード」ウィジェットを使えば、設定した複数のテキストを、アニメーション付きのテロップ形式でOBSに映し出せます。
追加方法としては、
「ウィジェットを追加」から「メッセージボード」を追加してください。
編集モードの状態で画面内のウィジェットをクリックすると、ウィジェットの周りに緑色の枠線が現れます。
この状態でドラッグ＆ドロップすることでウィジェットの位置と大きさを調整できます。
SHIFTを押しながらドラッグ＆ドロップするとスナップ（吸着）せずに位置を調整できます
縦に文字が流れるテロップを作りたい場合、編集モード状態でウィジェットを選択し、ドラッグ＆ドロップでウィジェットの形状を縦長の長方形にする（縦幅を横幅より大きくする）と、自動的に縦に文字が流れるテロップに切り替わります。
「メッセージ設定」の項目では、流れるメッセージの修正・追加が可能です。
動く画像スタンプ
Screenの「画像スタンプ」ウィジェットを使えば、お手持ちの画像やGIFで、配信につかえるアニメーション付きのエフェクトが気軽に作成でき、OBSに映し出せます。
画像スタンプウィジェットの追加は、
「ウィジェットを追加」から「画像スタンプ」を追加してください。
「画像設定」から、お手持ちの画像やGIFをエフェクトに設定できます。
設定可能なアニメーションとして、
- 出現時のアニメーション
- 発生中のアニメーション
- 消失時のアニメーション
- 画像回りにでるエフェクト
等がカスタマイズできます。
また、他のScreenのエフェクトと同様、「チャットに反応する条件」等から出現条件を設定できます。
Screenを配信で使うときは「配信モード」に切り替えましょう
また、コメント等に反応させるには、他の機能と同様にLiveDashboardで配信に接続してコメントを取得する必要があります
特定のエリアでポップアップするコメント
「チャットポップアップ」ウィジェットを使えば、指定した特定のエリアにコメントがポップアップするような見た目のコメント表示が実現できます。
上図のような見た目のコメント表示を実現する方法について以下で説明します。
「ウィジェットを追加」から「チャットポップアップ」ウィジェットを追加します。
「デモメッセージ出力」と言うトグルをONにしてみてください。配信中のチャットポップアップが画面上にどのように表示されるかが見られます。
配信画面のデザインで考慮すること
配信画面をデザインしていくにあたって、下記のようなことを考慮に入れながら作っていくと良いでしょう。
配色
YouTube配信画面の魅力を引き出すために、配色は非常に重要です。たとえば、一つの配色に統一することで統一感を出すことができます。また、配色に関しては、自分のキャラクターカラーやロゴカラーを取り入れることで、配信者の個性を強調することができるでしょう。配色の選び方は、YouTubeチャンネルのテーマやコンセプトに合わせて考えることが大切です。
レイアウト
YouTube配信画面のレイアウトは、動画投稿とは異なり、画面の一部をライブ配信者が占めることになります。その分、レイアウトが美しく整っていることで、視聴者に快適な視聴体験を提供できるようになります。また、各要素のバランスを取ることで、より見やすく、違和感のない配信画面を作ることができます。
オーバーレイ
配信画面に透かしのように重ねて表示する画像や動画のオーバーレイを使うことで、より鮮やかで美しい画面を作ることができます。
エフェクト
音を合わせたエフェクトなどを用いることで、よりダイナミックで楽しい配信画面を作ることができます。特にゲーム配信などでは、効果音やBGMに合わせて画面が光るエフェクトなどを取り入れることで、よりこころを掴んでみてもらえることでしょう。
背景
最後に、配信画面の背景についても考慮することが大切です。特に、自分で描いたイラストや使用権の無い素材を使う場合には、著作権問題に気を付ける必要があります。背景に自分のブランディングを取り入れることで、より一貫性のある画面を作り上げることができます。
視聴者にとって楽しいYouTube配信画面を
YouTube配信画面のデザインについて紹介しました。配信者の個性を出すために、配色やレイアウト、オーバーレイ、エフェクト、背景など、様々な要素を取り入れて工夫する必要があります。自分の個性を取り入れつつ、視聴者にとって見やすく、楽しい配信画面を作り上げることができると良いですね。是非、この記事を参考にして、より充実したYouTube配信生活を送ってください。
配信をより面白くするために
配信で視聴者のコミュニティ形成をうまく行うことで、日常の配信をより面白いものにすることができます。
そのような観点で最もおすすめな配信ツールがCastCraftです。
大きく分けて、
- 視聴者を覚えるYouTubeコメビュ
- 配信画面演出のScreen
- 収益化のための機能
の三つの機能があり、それぞれ下記のような目的があります。
| 機能 | 目的 |
|---|---|
| YouTubeコメビュ | 視聴者が配信に馴染めるようなやり取りをサポート |
| Screen | 視聴者とのやり取りを視覚的に楽しくする |
| 収益化 | 視聴者を大事にする形で収益化する |
CastCraftのYouTubeコメビュで視聴者ごとにコメントを蓄積することで視聴者全員を覚えて、配信中のダッシュボードで分かりやすく情報を表示することで、視聴者が常連化していくためのやり取りをサポートします。
特定の条件に当てはまった視聴者やコメントに対して、Chatbotやリッチな画面演出で視聴者をインタラクティブに楽しませる仕組みも作ることができます。
さらに、視聴者を大事に定着させながらも配信活動のための収益を上げる仕組みも提供しています。
CastCraftは上記のような機能により、配信者（ゲーム配信者やVtuber）が視聴者との関係を深めることを手助けします。
導入している配信者さんの事例としては、
等がいらっしゃいます。
導入されたチャンネルの総登録者数は3,000万人を超えており、これまで43万回以上の配信で使われています。
CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。
YouTubeライブ配信画面デザインでよくある質問
配信画面デザインで一番大事なのは何ですか？
見た目だけでなく、視聴者が情報を追いやすいことが重要です。
オーバーレイを入れれば十分ですか？
十分とは限りません。記事でも配信画面はオーバーレイだけではないと整理されています。
どんなツールやサイトが役立ちますか？
記事では配信画面デザインに役立つソフトやサイトが紹介されています。
デザイン時に何を考慮すべきですか？
視認性、情報量、画面の楽しさ、配信内容との相性を考える必要があります。
視聴者にとって楽しい画面にするにはどうすればいいですか？
見やすさを保ちながら、テーマ性や演出を加えると印象に残りやすくなります。