【期間限定】無料でポートフォリオ添削実施中! 詳細はこちら

【テロップ克服編】テロップベースの効果的活用方法3選【動画編集】

動画編集で多くの人が苦手意識を持つテロップ。

「なんかダサい」

「なんか見づらい(視認性が低い)」

「いつもワンパターン」

など、色々なポイントがありますが、これらの問題はデザインの知識を持っていれば解決できます!

ただ、デザインの知識を勉強しようとするとそれなりに時間がかかります。

そこで、これらの課題をまとめて解決してくれる「テロップベースの活用」について紹介したいと思います!

本記事を読んでわかること
  • テロップベースとは何か?
  • どうしてテロップベースが必要なのか?
  • テロップベースを使うときのポイント
  • テロップベースを使ってテロップの質を爆上げする方法
  • 【上級編】マスクとテンプレート化を組み合わせた使い方
目次

そもそもテロップベースって何?

テロップベースとは、動画やテレビ番組で使用されるテキスト(テロップ)を視認しやすくするために背景に配置される半透明や不透明のボックス、帯、または図形のことです!

テロップベース以外にも「座布団」「ザブトン」「ベース」などと言われることもあります。

テロップベースの例の画像
テロップベースの例
キウイくん

上の画像の黒い長方形みたいなやつだよ!

どうしてテロップベースが必要なの?

テロップベースを使う主な目的は、テキストが映像の背景に埋もれず、視聴者にとって読みやすくするためです。

テロップベースがない場合とある場合でどれくらい見やすさに違いが出るか、下記の画像を参考にしてみてください。

背景に埋もれて読みにくいテロップの画像
背景に埋もれて読みにくいテロップ
半透明ボックスを入れて文字が読みやすくなったテロップの画像
半透明ボックスを入れて文字が読みやすくなったテロップ
キウイくん

テロップベースがあるだけで、こんなにも読みやすさに違いが出るのか!

明朝体のように細いフォントは視認性が落ちやすいから、テロップベースは本当に便利なんだ!
太いフォントを組み合わせるとさらに視認性が上がるよ!

テロップベースを使うときのポイント

テロップベースを使うときのポイントは主に二つです!

テロップベースの色は背景の色との差がはっきりしたものにする

一つ目のポイントは「テロップベースの色を背景の色と差がはっきりしたものにする」ということです。

例えば、海の映像に対して青や水色のテロップベースを使用してしまうと、背景と同化してしまってテロップベースを使う意味がありません。

テロップベースの目的は「テロップを見やすくすること」です。

そこの目的を見失わないように注意してください!

キウイくん

ちなみにこの差のことを専門用語で「コントラスト」と言うよ!

これは動画の雰囲気にもよりますが、文字や背景との明度の組み合わせを考えた時に、明度の低いもの(暗いもの)を選んだほうがバランスをとりやすいことが多いです(落ち着いた印象になります)

文字の色はテロップベースとの差がはっきりしたものにする

背景とベースの話と一緒ですが、文字の色もテロップベースとの差がハッキリするものにしましょう!

以下にいくつかオススメの組み合わせを紹介しておきます!

おすすめの組み合わせ(※テロップベースの色×テロップの色)
  • 青系×白
  • 赤系×白
  • 緑系×白
  • 黒系×白
  • 黒系×黄色

テロップベースを使ってテロップの質を爆上げする方法

テロップベースの色を変えて話者ごとにテロップを区別する

一つ目の使い方が話者ごとに色を変えるというものです。

例えば

Aさんの発言を文字に起こすときは青の背景、Bさんの発言を文字に起こす時は緑の背景

のような使い方です。

ツッコミテロップに使用する

よくアメトークや世界の果てまでイッテQなどのバラエティ番組で使用されている使い方です。

テロップベースを使用することで他の発言と差別化を図り、

「あ、ツッコミなんだな」というのを視聴者が無意識に理解しやすくなります。

この時にテロップベースで使用する色としておすすめの色が「赤」です。

どちらかというと明るめの赤がいいと思います。

理由は目立つからです。笑

赤は緑や青に対しても目立つ上、自然界に存在しにくく、尚且つ人の注意を引きやすい色となっています!

ただし、夕焼けのシーンで赤のテロップベースを使うのはやめてくださいね!笑

演出を作るのに使用する

少しツッコミテロップと似てしまいますが、例えば

  • カンペ風のテロップベースを背景に敷くことで何かを読んでると想像させる
  • 黒板風のテロップベースを背景に敷くことでレッスンを想像させる
  • 雲風のテロップベースを敷くことで心の声であることを演出する

といったようなイメージです。

ありがたいことにこちらのTelop.site(テロップサイト)というサイトでは、こういう演出に使いやすいテロップベースの素材を無料でダウンロードできます!

キウイくん

ぜひ一度覗いてみてね!

固有名詞に使用する

固有名詞にのみテロップベースを使って強調する、という使い方もおすすめです!

ビジネス系や教育系で使いやすい活用方法だと思います!

実際のテロップベースの作成手順(Premiere Proを使用)

新規プロジェクトを作成

Premiere Proを起動し、新しいプロジェクトを作成します。

タイムラインにクリップを追加

編集する動画クリップをインポートし、タイムラインにドラッグします。

エッセンシャルグラフィックスパネルを開く

メニューから「ウィンドウ」→「エッセンシャルグラフィックス」を選択し、エッセンシャルグラフィックスパネルを開きます。

新規グラフィックを作成

エッセンシャルグラフィックスパネルの「新規グラフィック」ボタン(+アイコン)をクリックし、「長方形」を選択します。

タイムラインに新しい長方形が追加されます。

テロップベースの設定

タイムライン上の長方形レイヤーを選択します。

エッセンシャルグラフィックスパネルで、「塗りつぶし」の色を設定します。

塗りつぶしの色の横にあるカラーピッカーをクリックし、希望の色を選択します。

「塗りつぶし」の透明度(Opacity)スライダーを使って透明度を調整します。

例えば、透明度を50%に設定すると半透明になります。

テキストを追加

エッセンシャルグラフィックスパネルの「新規グラフィック」ボタンを再度クリックし、「テキスト」を選択します。

タイムラインにテキストレイヤーが追加されます。

テキストツールでボックスの上にテキストを入力し、フォント、サイズ、色をエッセンシャルグラフィックスパネルで調整します。

テキストとベースの配置を調整

テキストレイヤーをドラッグしてテロップベースの中央に配置します。

必要に応じて、ベースのサイズを調整し、テキストがベース内に収まるようにします。

アニメーション効果を追加(必要に応じて)

フェードインやフェードアウトなどのアニメーションを追加する場合は、エフェクトコントロールパネルでキーフレームを使用して設定します。

【上級編】マスクとテンプレート化を組み合わせた使い方

上級編としてシェイプでマスクを作って、お気に入りのツッコミテロップを作ってそれを使い回す方法を解説していきます!

マスクとは、簡単にいうとある特定の範囲のみを表示したり、エフェクトが反映されたりするようにする機能のことです。

自分の好きな画像を切り抜いてテロップベースの背景とし、さらに文字数に合わせてテロップベースの幅が自動調整されるようにしちゃいましょう!

①シェイプを配置

まずは長方形ツールを選択して、図形(長方形)を配置していきましょう。

この図形がテロップベースの「形・位置・大きさ」の3要素を決定することになります!

ちょっと面倒くさいのですが、特に位置と縦の長さに気をつけて長方形を配置してください!

ちなみに今回は、下記の画像のようなツッコミテロップを作りたいと思っています。

テロップベースを活用したツッコミテロップの具体例
完成イメージ

こんな感じで通常テロップを表示し続けながらツッコミを入れられるようなテロップにしたいので、位置は画面の左側、通常テロップよりやや上に来る位置に図形を配置したいと思います。

ツッコミテロップの作り方1
まずはシェイプを配置
キウイくん

シェイプの色は何色でもOKだよ!
境界線は入れないでね!

後で詳しく解説するけど、長方形の横幅は最後に微調整をするので大体でOKだよ!

②シェイプと同クリップに画像を読み込む

続いて先ほどのクリップにテロップベースの背景として使いたい画像を読み込みます。

クリップに画像を追加する方法を解説した画像
クリップに画像を追加する

画像を読み込むときはエッセンシャルグラフィックスパネルで

「新規レイヤー」→「ファイルから…」→「読み込みたい画像を選択」

で読み込むことができます。

僕は今回、イラストACで「和紙 赤」と検索して見つけた下記の素材を使いたい思います!

今回、テロップベースの背景として使用する画像(画像はイラストACよりダウンロード)

素材を読み込んだら、レイヤーの位置関係がシェイプ(長方形)が上、画像が下に来るようにしてください。

エッセンシャルグラフィックス内でのレイヤーの位置関係を解説した画像
レイヤーの位置関係がシェイプが上、画像が下になるようにする
無料イラスト【イラストAC】

③画像の位置を調整

続いて、画像の中で切り取りたい部分が長方形の下に来るようにします。

次のステップでこの長方形でマスクを作るので、長方形と重なる部分が切り取られる部分になるからです。

一時的に長方形の透明度を下げるとわかりやすいと思います(透明度を下げた場合は最後に戻すのを忘れないでください)

僕は今回はこのまま使用したいと思います!

④シェイプでマスク

エッセンシャルグラフィックスパネル内でシェイプを選択し、下にスクロールをしていきます。

「アピアランス」の項目に「シェイプでマスク」というのがあるので、そこにチェックを入れましょう!

Premiere Pro内で「シェイプでマスク」にチェックを入れる方法を解説した画像
「アピアランス」の中にある「シェイプでマスク」にチェックをいれる

チェックを入れると長方形があった部分だけ、長方形レイヤーの下にあるものが透過されるようになります。

⑤テキストを入れる

シェイプレイヤーの上にテキストを入れていきましょう。

ツッコミテロップの完成イメージ
テロップベースの上にテキストを配置し、サイズを微調整すれば完成です

テキストの大きさや図形の幅などを微調整すれば、ツッコミテロップは完成です!

このままでも十分使えるのですが、今のままだと一つ問題があります。

それは、都度テキストの量に合わせてテロップベースの幅を自動調整しないといけないことです。

なので、これをテキストの量に合わせてテキストベースの幅が自動調整されるようにしていきましょう!

⑥自動追従を設定

テロップベースの幅の自動調整機能をつけるにはエッセンシャルグラフィックスパネルの「追従」という項目を設定する必要があります。

やり方は非常に簡単で

1.シェイプレイヤーを選択

2.「追従」の項目からビデオフレームをクリック(下記画像参照)

シェイプがテキストを自動追従するための親レイヤー設定(追従対象の選択)を解説した画像
「追従:ビデオフレーム」をクリックするとプルダウンが出てきます。
キウイくん

この追従する対象のことを「親レイヤー」と言ったりもするよ!

3.プルダウンからテキストレイヤー(今回の場合は「名前が長い!」を選択)

4.追従の基準点(固定位置)を中央に選択(下記画像参照)

追従する際の基準点(固定位置)を下記画像内で赤枠で囲まれている部分の角丸長方形をクリックします。

シェイプがテキストを自動追従するための設定(親レイヤーの固定位置)を解説した画像

これで自動追従機能が追加されました!

固定位置とはアンカーポイントのことだね!

最後に、モーショングラフィックスのテンプレートとして書き出しをして、ライブラリいつでも使えるようにしましょう!

⑦モーショングラフィックステンプレートとして書き出し

テンプレートとして保存するための手順は下記の通りです。

モーショングラフィックスをテンプレートとして保存する手順
  1. 今回作ったクリップを右クリック今回作ったクリップを右クリック
  2. 「モーショングラフィックスとして書き出し…」を選択
  3. 名前保存作を決める(名前は「ツッコミテロップ」、保存先は「ローカルテンプレートフォルダー」でいいと思います)
モーショングラフィックスをテンプレートとして保存する方法を解説した画像
クリップを右クリックして「モーショングラフィックステンプレートとして書き出し」を選択

使いたいときはエッセンシャルグラフィックスパネルの「参照タブ」をし、検索窓から「ツッコミ」と検索すれば見つかるはずです!

テンプレートとして保存したモーショングラフィックスを検索して使う方法を解説した画像
モーショングラフィックスパネルで「参照」のタブを選ぶと保存したテンプレを使用できます!

あとはこれをタイムライン上のドラッグ & ドロップすればOKです!

まとめ

焦点を当てられることが少ないテロップベースですが、活用方法を理解しておくと編集の幅がグッと広がります!

また、自動追従をつけたテンプレートを保存しておくと編集の効率化にもなるので、ぜひ本記事で解説したことをマスターしてください!

自信を持って動画編集ができない方のためのプレゼント特典

僕の公式LINEでは2024年の12月31日までの期間限定で、あなたのポートフォリオを無料添削します!

ポートフォリオ添削の注意点
  • フィードバックは1人1回のみ
  • 公式LINE登録後「ポートフォリオの添削希望」とメッセージをお送りください
  • 予告なく期間の変更や内容の変更をする可能性があります(お早めに!)

さらに

僕の公式LINEでは他にも下記の特典を無料で配布しています!

公式LINE 無料特典

✅YouTube課題発見 & 提案シート

✅編集クオリティチェックシート

✅編集が上手く見える6つのポイント

✅ダサいテロップ克服シート

✅チャットコミュニケーション克服シート

「独自性のあるポートフォリオ」と5つの豪華プレゼントを受け取ってください!

完全無料なので、ぜひ受け取って有効活用していただければと思います!
登録すれば他にもいいことがあるかも?

公式LINE特典 YouTube課題発見 & 提案内容自動作成シートを一部公開!

「センスがない」と悩んでいる動画編集者のための公式LINEの案内
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

SNSマーケター/動画編集ディレクター
大学卒業後、約2年半、京都にてSNSマーケターとして活動。
商品を販売するためのコンセプト作りや視聴者を惹きつけるための構成作りが得意。
まだまだ仕事と呼ぶには程遠いですが、絵本作りも行っています。

コメント

コメントする

目次