Vtuberの配信画面をデザイン！作成時のおすすめソフトやサイトも紹介
Vtuberになることは、ブームを超えてライブ配信の主流となりつつあります。
一度でもVtuberの配信を見たことがある方なら「自分もVtuberになって配信を始めたい」と考える方も多いのではないでしょうか。
この記事ではそんな方のために、Vtuberになるために必要な配信画面の作り方やデザインの方法について解説していきます。
目次
Vtuberの配信画面のデザイン
画面のデザインに必要になるものは？
ひと口に配信と言っても、その種類は多数存在します。
その中でもっとも基本的な形式として、以下の３つが挙げられます。
- ゲーム配信
- 雑談配信
- 歌配信
行いたい配信によって、配信画面のデザインは変えることが望ましいです。
配信内容によって必要になる素材やエフェクトは違ってくるのですが、全ての配信に共通している要素もあります。
- 配信中の背景
- コメント
- 画面の枠組みになるオーバーレイ
- 配信待機画面
- テロップ
- 時計
などがそれに該当します。
配信中の背景
背景は、全ての配信の元になる要素です。
背景を選ぶ時は、自身のアバターやキャラクター像に併せるようにしてみましょう。
全体の統一感を意識すると配信のクオリティが高まります。
コメント欄
配信は視聴者と共に作っていくものです。
そのため、コメントは配信画面に表示することをオススメします。
ツールを活用すれば、コメントのフォントを見やすくしたりコメント欄のデザイン性をより高めることもできます。
おすすめのツールとしては、CastCraft Screenのチャットボックスが挙げられます。
画面の枠組になるオーバーレイ
配信画面において、ゲーム画面以外の外枠をオーバーレイといいます。
オーバーレイがあると配信の見やすさが各段に変わりますので用意しておきましょう。
配信待機画面
配信が開始されるまでの間、視聴者に表示される画面のことを「配信待機画面」(別名:待機所)と呼びます。
OBSでの設定や各ツールとの連携など、配信を開始してからでないと行えない設定もいくつかあります。待機画面を作っておくことで配信開始時に慌てることなく準備を行うことができるので、こちらも用意しておきましょう。
テロップ
お知らせを流すテロップも用意することで、特定のメッセージを視聴者に伝えやすくなります。
時計
時計を表示することで、配信中に時計を確認するために離脱することを防ぐことができる他、配信アーカイブでも配信していた時の時刻が分かりやすくなります。
背景やオーバーレイをダウンロードできるサイト4選
OKUMONO
背景を無料でダウンロードできるサイトです。無料ですが商用利用も可能です。
BOOTH
クリエイターが作成した背景やオーバーレイを購入できるサイトです。
Canva
無料で使用できるグラフィックデザインツールです。
自身で背景を作成する時に活用しましょう。
1から作るのが難しいと感じる方には、テンプレートも用意されています。
ココナラ
在籍クリエイターが非常に多いクリエイター仲介サービスです。
クリエイターにオリジナルの背景やオーバーレイを依頼したい時に利用してみて下さい。
配信別の画面デザイン
ゲーム配信の画面デザイン
ゲーム配信を行う時は、当然ですがゲーム画面を大きく映さなければいけません。
ゲーム配信の主役はゲームのため、アバターやコメントなどはゲーム画面の邪魔にならないように配置する必要があります。
ここではゲーム配信の画面構成に必要な要素を4つ紹介します。
ゲーム画面
ゲーム配信はゲームが主役です。見やすいように大きく配置しましょう。
コメント欄
ゲーム配信でコメント欄を表示する時は、コンパクトなサイズにすることが重要です。
ただ、そうするとコメント自体が見づらくなってしまうので、ツールを使用しフォントに影を付けるなどの設定を行い、視聴者がコメントを見やすいようにしてあげましょう。
ゲーム画面を表示できる枠（オーバーレイ）
ゲーム配信に特化したオーバーレイは無料でダウンロードすることもできるので、自分の配信に合うオーバーレイを探して設定しましょう。
参考として、上記画像のオーバーレイはBOOTHからダウンロードできます。
コンパクトなテロップ
ゲーム配信ではお知らせを流すテロップも用意しておきましょう。
一文が長くなり画面に収まらない場合は、フィルターを使えばテロップをスクロールさせることもできます。
雑談配信の画面デザイン
雑談配信での主役は、自身のアバターとコメント欄です。
雑談を聞きに来てくれる視聴者はコアなファン が多いので、視聴者層に合わせた配信ができるようなデザインや配置を心掛けましょう。
ここでは雑談配信の画面構成に必要な要素を6つ紹介します。
配信背景(配信部屋)
雑談配信の背景は、アバターの雰囲気に合った色身やデザインを選び、統一感のある配信画面を心掛けましょう。
大きめのコメント欄
雑談配信ではコメント欄を大きく表示しましょう。
雑談配信は視聴者と共に作り上げるものです。ですのでコメントは視聴者にとって見やすいデザインやフォント、大きさにすることを心掛けましょう。
雑談用のオーバーレイ
雑談配信には雑談配信向けのオーバーレイを使用しましょう。
オーバーレイを選ぶ時はコメント欄の枠が大きいものがオススメです。
お知らせ等のテロップ
お知らせのテロップはゲーム配信より大きく作って見やすくしましょう。
時計
雑談配信は朝や深夜に行うことが多いため、時間を表示してあげると視聴者に親切です。
時計はOBSの【ブラウザ】ソースを使用して簡単に表示することができます。
素材自体はBOOTHから無料でダウンロードすることができます。
配信エフェクト
配信画面を盛り上げたいのであれば、配信エフェクトも設定してみましょう。
CastCraft Screenを使用すれば、配信画面にエフェクトを使用できます。
たとえば「おめでとう」とコメントされるたびに星が流れる設定にすると、コメントで「おめでとう」と言われるたびに配信画面に星が流れるようになります。
歌配信の画面デザイン
歌配信は、ゲーム配信や雑談配信に比べてイベント感の強い配信です。
そのため、視聴者に盛り上がってもらえるデザインや配置を意識しましょう。
ここでは歌配信の画面構成に必要な要素を3つ紹介します。
歌配信に適した配信背景
歌配信では、LIVEやステージを意識した背景などを用意しましょう。
参考として、上記の背景はOKUMONOからダウンロードできます。
曲のタイトル・セトリ
歌枠にはセットリストを表示できるようにしておきましょう。
途中から配信を見た視聴者にも状況が伝わりやすくなり、リクエスト形式をとる際もリクエストの重複を避けられます。
BOOTHから無料でダウンロードできるセトリスタを利用すれば、簡単な設定で凝ったデザインのセットリストを作ることができます。
弾幕表示やペンライト等のエフェクト
歌配信では弾幕表示やペンライト等のエフェクトを設定しておきましょう。
CastCraft Screenを使用すると、特定の条件を満たしたコメントが投稿されると、画面上にテキスト弾幕やペンライトなどの演出を表示させることができます。
かわいいデザインで配信画面にコメントを表示する方法
OBSでコメント表示をカスタマイズし、視聴者とのインタラクションをかわいいデザインで楽しむためには、CastCraft Screenを利用する方法がおすすめです。
「チャットポップアップ」ウィジェットを使えば、指定した特定のエリアにコメントがポップアップするような見た目のコメント表示が実現できます。
上図のような見た目のコメント表示を実現する方法について以下で説明します。
導入のための設定
CastCraftデスクトップ版をインストール
まずはCastCraft公式サイトにアクセスし、CastCraftのデスクトップアプリをダウンロードしてください。
ダウンロードしたファイルをダブルクリックすると、インストールがはじまります。
ログイン
CastCraftを起動したら、「CastCraftにログイン」ボタンを選択してログインしましょう。
ログインするアカウントは、YouTube Liveを行うアカウントでログインしてください。
CastCraftの「YouTube」タブに切り替えて、YouTube Studioが表示されていることを確認しましょう。
YouTubeタブで、CastCraftにログインしたものと異なるYouTubeチャンネルが表示されている場合は、YouTube Studioの右上のアイコンをクリックして正しいアカウントに切り替えてください。
Screen機能のインストール
Screen機能を使うには追加のインストールが必要です。 CastCraftのScreenタブからダウンロード後、ダウンロードフォルダ内のインストーラをダブルクリックして導入してください。
その後、CastCraftのScreenタブにてScreen機能が正常に起動したらインストール成功です。
（※初回の起動には時間がかかります）
ScreenをOBS等に追加
OBS等にて「映像キャプチャデバイス」（もしくは「ビデオキャプチャデバイス」）ソース を追加し、デバイス選択で「CastCraft Screen」を選択（下図）
映像キャプチャデバイスに「CastCraft Screen」の表示がされない方は、NDI経由でOBSに出力する方法をお試しください。
「チャットポップアップ」ウィジェットを追加
CastCraft Screenクラフトモードの「ウィジェット設定」にて「チャットポップアップ」ウィジェットを追加します。
デモメッセージをONに
「デモメッセージを流す」と言うトグルをONにしてみてください。配信中のチャットポップアップが画面上にどのように表示されるかが見られます。
表示させたくないウィジェットは「ウィジェット設定」のウィジェット一覧から削除することができます
チャットポップアップとチャットボックスは同時に使うことはないと思いますので、ウィジェット一覧からどちらかを削除するか、画面右上の「＋」ボタンからシーンを追加して、シーンを使い分けることを検討しましょう
位置と大きさの調整
チャットポップアップ・ウィジェットの緑枠を調整して、コメントが表示される位置と大きさを調整しましょう。
背景スタイル設定
ウィジェット一覧の「設定」ボタンからチャットポップアップ設定に入り、「背景スタイル設定」パネルを開いた後、下記の設定を行います。
- フレームの選択: 「Simple Frame」を選択
- ボーダーの幅: 「2」を入力
- ボーダー色: 好きな色を設定
- 角の丸み: 4つすべてに「10」を入力
レイアウト設定
次に、「レイアウト設定」パネルを開き、下記の設定を行います。
- レイアウト選択: 「タイプ2」を選択
視聴者アイコン設定
最後に、「視聴者アイコン設定」パネルを開き、下記の設定を行います。
- 縁の太さ: 「2」を入力
- 縁の色: 先ほど背景フレームで選択した色と同じ色を設定
- オフセット: X, Yともに「-20」を入力
以上の設定で、冒頭に示した見た目が実現できます。
配信での活用
配信前にScreenを起動
Screenでの画面演出を使うには、配信前にScreenタブをクリックして起動しておく必要があります。
CastCraftの「YouTube」タブから配信を開始
CastCraftのYouTubeタブから配信を開始しましょう。
その後、OBS等の配信ソフトウェアで配信を開始しましょう。
「Live Dashboard」タブで配信に接続
YouTubeタブから配信を開始したら、自動で「Live Dashboard」タブでも配信に接続され、コメントの取得が開始されます。
画面の枠組みになるオーバーレイのデザイン方法
配信オーバーレイとは配信画面に表示される枠やフレームを指し、画面のオリジナリティを出すために使用されます。配信オーバーレイを利用することで、画面が美しく整い、配信者としての独自性を打ち出すことができます。
たとえば、Vtuberの雑談配信では、アバターやコメント欄を大きく表示するデザインが好まれますが、ゲーム実況ではゲーム画面を最大限に活かすシンプルなデザインが求められます。
デザインの作成には、画像編集ソフトが必要です。無料で利用できる「Canva」や「GIMP2」、有料ですがより高度な編集が可能な「Adobe Photoshop」が一般的です。これらのソフトを使用して、配信に必要な枠やフレーム、SNSアカウントの表示などの素材を作成します。
オーバーレイの作成では、画像を透過させることが重要です。透過させることで、メインコンテンツが隠れることなく、視聴者に情報を提供できます。Adobe Photoshopを使用する場合、不要な部分を選択して切り抜くか、不透明度を調整して透過させます。
オーバーレイのデザインは自由で、配信者の個性や配信内容に合わせてカスタマイズすることが可能です。
Vtuberの配信部屋をデザインする方法
画像編集ソフトを活用して自分で制作する
配信部屋は、Vtuberが自室から配信しているように見せられる背景のことを指します。
自分らしさを最も表現できるものになりますので、可能であれば自身で作成してみましょう。
編集にはCanvaを使用し、細かな素材(椅子、飲み物などの小物)はAOmaterialから無料でダウンロードして作成することをオススメします。
作成する時の画像サイズに注意する
配信画面のアスペクト比(画像サイズ)は16:9です。
カスタマイズして作るときは、サイズを【1280×720px】や【1920×1080px】で作成しましょう。
フリー素材をダウンロードする
作成が難しい方はフリー素材をダウンロードしましょう。
OKUMMONOやBOOTH がオススメです。
プロに依頼する
フリー素材にもしっくりくるものがない場合は、プロに依頼しましょう。
プロに依頼する場合はココナラがオススメです。
配信待機画面をデザインする方法
OBSでのシーン追加方法
配信待機画面は、OBSを使用して簡単に作成することができます。
こちらでは配信待機画面を追加する手順を紹介していきます。
今回は静止画で設定していきます。
手順1：シーンを追加して名前をつける
画像で設定するため、画像スライドショーをソースに追加し、名前を配信待機画面などに変更しましょう。
手順2：ソースの追加から映したい項目を選択する
ソースに【画像】を追加し、用意した配信待機画面を挿入しましょう。
以上で準備は完了です。
配信開始時には【配信開始画面】が開くようにしておきましょう。
準備が完了したらそのまま別のシーンをクリックすれば配信を開始できます。
配信画面のデザインを工夫してVtuber活動を楽しく
今回は、Vtuberの配信画面の作り方について解説しました。Vtuberは素材やツールを使用することで、デザイン性が高い配信画面を作ることができます。ゲーム配信や雑談配信、歌配信などの種類によって魅せ方を出し分けることができるので、ぜひそれぞれの配信に合ったデザインや画面構成を考え、自分の魅力を表現できる配信画面を作ってみてください。
Vtuberが視聴者を定着させるために
視聴者を定着させるためにソフトに期待できることとしては、初見の視聴者を配信に定着させ、常連を積み上げていくような効果です。
そのような観点からおすすめなのがCastCraftです。
大きく分けて、
- 視聴者を覚えるYouTube/Twitchコメビュ
- 配信画面演出のScreen
- 収益化のための機能
の三つの機能があり、それぞれ下記のような目的があります。
| 機能 | 目的 |
|---|---|
| コメビュ | 視聴者が配信に馴染めるようなやり取りをサポート |
| Screen | 視聴者とのやり取りを視覚的に楽しくする |
| 収益化 | 視聴者を大事にする形で収益化する |
コメビュ（視聴者/コメント管理）機能
CastCraftでは、初見と常連を一目で判別できるだけでなく、視聴者データを蓄積して視聴者全員を覚えてメモを付けることができます。
ゲーム配信中に来てくれた初見の人が雑談配信のときにまた来てくれたら、その参加実績に気づくことが簡単になり、より新しい視聴者が定着しやすくなります。
さらに、配信で行われた未読スパチャ/未読ビッツ/その他投げ銭などの重要情報をコメントビューアー上部に固定しておき、読み上げたかどうかの既読管理ができます。
Screen（画面演出）機能
CastCraftのScreen機能では、視聴者の行動に応じて画面を盛り上げる演出を盛り込むことができます。
たとえば、下記のようなエフェクトを特定のコメントや視聴者の行動に応じて画面に出現させることができます。
自由自在な文字エフェクトもつくれます。
お手持ちの画像やGIFにもアニメーションを付けてエフェクト化することができます。
いつでも投げ銭（収益化）機能
また、視聴者を大事にしながら収益化を図ることができます。
上記のような機能により、CastCraftは配信者（ゲーム配信者やVtuber）が視聴者との関係を深めることを手助けします。
導入実績
導入している配信者さんの事例としては、
等がいらっしゃいます。
導入されたチャンネルの総登録者数は5,000万人を超えており、これまで70万回以上の配信で使われています。
CastCraftを活用すれば、視聴者との関係をより良いものに進化させ、あなたの配信コミュニティをより濃いものにできます。
日々の配信をより楽しくするために、ぜひ導入を検討されてみてください。