【OBS Studio】美しいテロップ・テキストを入れる方法。文字を流す方法も

この記事をシェアする

OBS Studio(以下OBS)で、テロップ(テキスト、文字、字幕)を表示させるにはどうしたらよいのでしょうか。

テキストの表示

テロップは、いろいろな用途に使えます。簡単に表示できるので、どんどん使ってみましょう。

  • お知らせがあるとき
  • 注意事項があるとき
  • 現在の状況を伝えたいとき
  • 画面に隙間があって、それをデザイン上埋めたいとき

テキストを追加しよう

まずは、OBSでテロップを表示する方法です。色・サイズなどの変更方法は後述します。

  1. 「ソース」の「+」をクリックして、「テキスト (GDI+)」を選択します。
  2. 「テキスト

  1. 適当な名前をつけて「OK」をクリックします。
  2. 「OK」をクリック

  3. 「テキスト」横の欄に、任意の文字を入力しましょう。
  4. テキスト欄に文字を入力

  5. 「OK」をクリックします。
  6. 「OK」をクリック

  7. テキストをドラッグして、画面内における文字の位置を調整します。
  8. プレビュー画面でテキストの位置を調整

フォントの種類、サイズを変更しよう

フォントを変える

フォントの種類を変更するには、プロパティを開きましょう。「テキスト (GDI+)」をダブルクリックします。

「テキスト

そして、「フォントを選択」をクリックし、任意のものを選択してください。

フォントを選択

文字の大きさを変える

文字の大きさは、いまの「フォントを選択」の設定画面の「Size」で変更できます。

文字サイズの変更

初期設定の「36」では文字がぼやけやすいので、美しく表示したいなら最大の「72」に設定しておきましょう。設定後、「OK」をクリックして画面を閉じます。

文字サイズを72に

もしまだ文字が小さい場合は、赤い罫線(バウンディグボックス)の辺・角をドラッグすれば大きくなります。ただし、あまり大きくしすぎると、やはり文字がぼやけます。

ドラッグでテキストを大きく

文字の色を変更しよう

文字色を変える

文字の色を変えるには、プロパティで「色」のところにある「色を選択」から設定します。

文字色の変更

グラデーションをかける

文字の色にグラデーションをかけることもできます。試しに「グラデーション」にチェックを入れてください。そして、「グラデーションカラー」の「色を選択」から2色めの色を選びます。

グラデーション

また、必要であれば「グラデーションの不透明度」や「グラデーションの方向」も調整しましょう。

境界線をつける

境界線(ボーダー)をつけるには、設定画面の下のほうにある「輪郭」にチェックを入れます。「輪郭のサイズ」は、境界線の太さのことです。「輪郭の色」で色を変えられます。

縁取り

背景を作って文字を重ねよう

文字が見づらい場合は、背景(テロップベース)を作るのもよいでしょう。今回は2種類のやり方をご紹介します。

テキストのプロパティからやる方法

これがいちばん簡単な方法です。

  1. 追加したテキストのプロパティを開く。
  2. 背景色」の「色を選択」で色を決める。
  3. 背景の不透明度」のスライダーを右に移動する。
  4. 「OK」をクリックする。

背景色を選択

下記画像のような背景が完成します。背景の大きさは文字の大きさに依存します。

背景の完成図

色ソースを使う方法

もう少し自由に背景をデザインしたいなら、色ソースを使ってみましょう。色ソースは四角形のことで、この上に文字を重ねます。

まず色ソースを追加します。

  1. 「ソース」の「+」をクリックし、「色ソース」を追加する。
  2. 「色を選択」から色を決める。
  3. 透明度は、「色を選択」→「Alpha channel」で変更できる。
  4. 設定画面を閉じる。

「色ソース」の追加

つぎに、ソース一覧で「色ソース」をドラッグして「テキスト (GDI+)」よりも下の位置にしましょう。すなわち、ソースの重なり順を変えて文字が背景よりも手前になるようにします。

ソースの順序を変更

OBSのプレビュー画面上で、Shiftキーを押しながら色ソースのバウンディングボックスの角・辺をドラッグし、任意の大きさにしてください。位置も調整します。

Shiftキーを押さずに色ソースをドラッグすると、アスペクト比(縦横比)が維持されるため、うまく色ソースの大きさを変えられません。

テキストと色ソースをまとめて移動したいときは、Ctrlキー、またはShiftキーを押しながら、ソース一覧にある2個のソースをクリックし、その後プレビュー画面上でドラッグします。

複数のソースを選択して移動

文字をスクロールさせよう

文字を横に流すと、リアルタイム感が強調されて視聴者に新鮮な印象を与えることができます。さっそくやってみましょう。フィルター機能というものを使います。

スクロール

どのような情報を流すのかは人それぞれですが、よくあるのは自分のTwitterアカウントを表示して横スクロールさせるパターンです。

テキストにフィルターを追加する

テキストを追加後、フィルターを追加します。具体的には、まず追加したテキスト上で右クリックし、「フィルタ」を選択します。

そして、「+」をクリックして「スクロール」を選択してください。適当なフィルタ名をつけて、「OK」をクリックします。

「スクロール」を追加

スクロールの設定をする

文字を右から左に流したいので、「水平速度」のスライダーを右に移動します。速度を遅くしたいなら15~30、速くしたいなら140以上を試してください。

水平速度

文字をスクロールさせると、間断なく文字が連続で表示されてしまいます。そこで、以下のように設定して「間」を作りましょう

  1. 追加したテキストのプロパティを開く。
  2. プロパティの下のほうにある「テキスト領域の範囲を指定する」にチェックを入れる。
  3. 「折り返す」のチェックを外す。
  4. より大きな数字を「幅」に入力する(例 : 1,100)。
  5. 「OK」をクリックする。

「テキスト領域の範囲を指定する」の設定

もし「テキスト領域の範囲を指定する」の設定がうまくいかない場合は、フィルターのスクロール範囲を狭くします。

  1. 追加したテキスト上で右クリックし、「フィルタ」を選択する。
  2. 幅を制限する」にチェックを入れて、より小さな数字を「幅」に入力する(例 : 500)。
  3. 「閉じる」をクリックする。

「幅を制限する」の設定

文字がガクガクするときは

文字のスクロールがガクガクしてスムーズでない場合は、「設定」→「映像」の「FPS 共通値」を「60」にすると直せます。

ただし、これは不具合ではありません。ゲーム配信では、環境によってはPCの動作が重くなることがあるでしょう。無難なのは初期設定の「30」です。

https://www18.atwiki.jp/live2ch/pages/561.html

スポンサーリンク
レクタングル(大)
レクタングル(大)

この記事をシェアする

Twitterで最新情報をツイートしています!フォローお願いします。

スポンサーリンク
レクタングル(大)