こんにちは！
動画編集スクール「ワクジョイ」専属ライターの稲葉です。
今回はPremiere Proのテロップデザインについて解説していきます。
テロップは細かい設定が多いため、初心者の方は少し面倒に感じるかもしれません。
しかしこの記事でご紹介するコツを抑えれば、動画のクオリティが格段に上がること間違いなし！
・動画編集のスキルアップをしたい方
・テロップデザインのアイディアが欲しい方
・テロップデザインの作り方を知りたい方
このような方におすすめの記事となっています。
これを見て動画の質を高めましょう！
最新の情報はX（旧Twitter）から！
この記事でもフォントデザインについて解説していきますが、X（旧Twitter）でもPremiere Proの使い方などを発信しています。
ぜひフォローをお願いします。
＼オフィシャルブログ限定／
3周年記念キャンペーン実施中!!
Premiere Proのフォントデザインテクニック
フォントデザインと言っても、デザインを決める時に考えるポイントがいくつかありますので、まずは、それぞれの要素ごとにどのように決めているのかを解説していきます。
フォントデザインの基礎①ゴシック体と明朝体の選び方
フォントデザインをイメージすると、まず配色を意識するかもしれませんが、大前提としてゴシック体と明朝体のどちらを利用するのかを決めなければいけません。
厳密に決まったルールはないので、その動画の内容によっても異なりますが、佐久間学長が出演しているYouTubeを例に出すと、
YouTubeなどのカジュアルな動画であればゴシック体をメインフォントにし、強調するテロップに太字の明朝体を利用しています。
これはこの後に解説する配色やグラデーションによっても変わりますので、一例として押さえておきましょう。100％忠実にする必要はなく、それぞれ適切な使い分けができれば自然なフォントデザインになります。
知識として入れておくのもいいですが、実際にどのように使い分けをしているのかをいろいろな動画を見てインプットしておくことで実践的なフォントの使い方を感覚的に利用できるようになっていくでしょう。
フォントデザインの基礎②グラデーション
次にグラデーションです。
グラデーションはフォントの塗り部分のグラデーションや、全体の配色のグラデーションなど複数ありますが、これはゼロから準備する必要はありません。
グラデーションのサンプルサイトがWeb上でいくつもありますので、その場面にあったグラデーションをサイト上で探したり、他の動画で利用されているデザインを真似すると一定のクオリティのデザインが担保できます。
自分で考えて制作するのも重要ですが、まずは他の動画を参考にして真似てみることから始めていくことでノウハウとして蓄積ができていくでしょう。
フォントデザインの基礎③境界線
ここからが差がつくフォントデザインのテクニックですが、まずは境界線についてです。
境界線はテロップの視認性、可読性を高めるために利用しますが、細くした方がいいのか、太めに設定した方がいいのか迷ったことがないでしょうか？
まず覚えておいた方がいいのは、
- 境界線が太いデザイン：強調させる時（連続して利用すると可読性が下がる）
- 境界線が細いデザイン：強調以外に使用する時（連続して利用すると視認性が下がる）
このパターンを覚えておきましょう。
これだけだと、デザインに素人感が出てしまい、どれだけ動画が良くてもクオリティが低い印象を与えてしまうので、実際に利用する場合はこのデザインにシャドウを入れて淡白さを解消します。
フォントデザインの基礎④シャドウ
そして最後にシャドウです。
テロップデザインではシャドウの入れ方で印象は大きく変わりますが、基本的にこの2パターンの使い分けを行います。
今回の例では、境界線で解説したフォントを利用していますが、細い境界線の場合は、くっきりしたシャドウの方が視認性が高くなります。
ではぼやけているシャドウの使い方については、シャドウの効果をあまり見せずに視認性を高めるために利用します。
今回サンプルで出しているものは背景が全て白色ですが、動画では様々な色が背景に使われます。そこで、
- 明度の高い背景：黒色などの明度の低いシャドウ
- 明度の低い背景：白に近い明度の高い背景
この2パターンを覚えておくと、視認性が低い時の解決策として活用できます。
Premiere Proのテロップデザインは気になったらまずは真似してみる
様々な動画で利用されているテロップデザインですが、気になったフォントがあった時にはまずはそのまま真似してみましょう。
自分でテロップデザインを作ってみるのもアリですが、それがいいデザインだと思っていても実際に視聴者からは悪いデザインと捉えられることもあります。
だからこそ、様々な動画の中で利用されているテロップのデザインを丸々コピーする方法がおすすめです。
そうすることで、テロップデザインの作り方も学べ、作り方の規則性もわかります。規則性が分かればあとは配色やグラデーションを工夫するだけでオリジナルのテロップデザインが構築できます。
この後にも実際の作り方の例を細かく解説していきますので、参考にしてみてください。
Premiere Proのテロップデザインテンプレート
ここからは、実際のテロップデザインのアイディアをいくつか公開していきます。
実際のPremiere Proのデザインから実際の作り方まで細かく解説していきますので参考にしてください。
YouTube動画汎用フォント
まずはYouTubeでYouTuberがよく利用するフォントです。
サンプルでは青色で利用していますが、その時の動画のカラーに合わせて色を変えても違和感なく利用できる汎用的なフォントデザインになっています。
画像に方法は記載していますが、下記にデザインの手順を解説していきます。
- STEP1テロップの文字を入力する
ゴシック体、明朝体どちらでも違和感はないが、ゴシック体の方が利用率は高い傾向があります。
（このあと境界線を太めに設定するので、スタイルは太字がおすすめです） - STEP2白の境界線を適用する
ここでは、6pxで適用していますが、大元のフォントサイズの半分程度のサイズであればより自然な見栄えになります。
- STEP3黒の境界線を適用する
黒の境界線は9pxで適用しましょう。
白の境界線の下に適用されるイメージなので、表示される部分は3pxのみです。
白と比べて細く適用すると綺麗な見た目になります。 - STEP4シャドウを適用する
下記の設定で適用すると、シャドウの影響で可読性や視認性に悪影響が出にくいです。
透明度：75%
角度：135°
距離：7.0
サイズ：0.0
ブラー：40
ネガティブ・ホラーフォント
ネガティブな言葉や、ホラー系で使用できるフォントです。
塗りにグラデーションを入れているので、少し立体的に見えるので、他の使用しているフォントとの差別化がしやすい反面、このテロップだけ強調しすぎるということにもなるので、使用ケースに合わせて塗りのグラデーションを深めの紫に変更したりしましょう。
シャドウのブラーをゼロにすることではっきりした印象を与えることもでき、汎用性のあるフォントデザインになっています。
- STEP1テロップの文字を入力する
このフォントデザインは明朝体のような、エッジのあるフォントがおすすめです。
ゴシックだとネガティブ・ホラー感が薄れたデザインになってしまいます。 - STEP2テロップの塗りにグラデーションを適用する
今回は下から上に明るくしたグラデーション（#1D0B2C→#6E2DA7）にしていますが、逆にしてもまた違ったデザインの印象を与えられるので、試してみましょう。
- STEP3白の境界線を適用する
白の境界線を4pxで適用しましょう。
ネガティブ・ホラーイメージなので、全体的に暗い印象にするため、太すぎるとそのコンセプトが崩れてしまうので注意が必要です。 - STEP4#A7A427のカラーで薄くシャドウを適用する
#A7A427のカラーでシャドウを適用します。
このカラー自体が無くても全体として違和感はさほど感じませんが、全体が暗めなのでワンポイントで明るめの色を組み込みます。
設定内容は下記の通りになります。カラー：#A7A427
透明度：60%
距離：0.0
サイズ：2.0
ブラー：10 - STEP5黒のシャドウを適用する
最後に大枠の黒のシャドウを適用します。
透明度：100%
距離：0.0
サイズ：19.0
ブラー：25
豪華なイメージを与えるフォント（簡易版）
強調させたいテロップ、豪華な印象を与えるために使うフォントです。このあとに少し複雑なフォントを解説しますが、たったの3ステップで作れ、シンプルなので使い勝手がいいフォントです。
- STEP1テロップの文字を入力する
ゴシック体、明朝体どちらでも違和感はないが、明朝体の方が利用率は高い傾向があります。
（太すぎると視認性が落ちてしまうので、太すぎないようにしましょう） - STEP2白の境界線を適用する
5pxで設定します。太すぎた場合、このあとに適用するシャドウよりこの境界線が目立ってしまうので注意しましょう。
- STEP3シャドウを適用する
ボヤけ過ぎず、くっきりし過ぎずちょうどいい塩梅に設定しないとクオリティが低く見えてしまうので注意しましょう。
下記の内容で設定します。カラー：#FFFE67
透明度：100%
距離：0.0
サイズ：3.0
ブラー：50
豪華なイメージを与えるフォント
先ほど紹介したデザインにグラデーションやシャドウを追加したバージョンです。
一度作成して、テンプレートとして保存しておくのがオススメです！
- STEP1テロップの文字を入力する
フォントは先ほど解説したデザインと同様で、明朝体の方が利用頻度が高い傾向にあります。
- STEP2文字にグラデーションを適用する
上下のグラデーションで、中央を明るめのカラーで設定しましょう。両端と中央のカラーを以下の色コードで設定します。
0%、100%：#B00911
50%：#F40F1B - STEP3境界線を作成しグラデーションを適用する
3pxで境界線を作成し、上下のグラデーションを適用します。
適用する色コードは下記になります。0%、100%：#FFFEDA
50%：#BDBB63 - STEP4立体的に見せるためのシャドウを適用する
これだけ適用するとあまり意味がないように見えますが、完成後のデザインのクオリティを上げるためのワンポイントです。
設定内容は下記になります。カラー：#878655
透明度：100%
角度：135°
距離：2.0
サイズ：2.0
ブラー：0 - STEP5白のシャドウを適用する
白のシャドウを下記の内容で適用します。
透明度：100%
距離：0.0
サイズ：19.0
ブラー：25 - STEP6黄色のシャドウを適用する
最後に黄色のシャドウを適用して、光沢のあるイメージを追加しましょう。
下記の内容で設定します。カラー：#EDE15D
透明度：100%
距離：0.0
サイズ：9.0
ブラー：40
Premiere Proのデザインアイディア集のまとめ
Premiere Proのテロップだけでなく、どのような動画編集ソフトを利用しても、このテロップのデザイン方法は基本的に同じです。
だからこそ、ここで解説したテロップデザインをまずは真似してみましょう。そしてどのようにして作っているのかを学びましょう。
そして作り方が分かれば、普段見る動画の中で利用したいフォントデザインがあれば、意外と手軽にトレースが可能です。そのようにして、自分のテロップパターンを増やしていき、様々なケースで利用できるテロップ集を作れるようにしましょう！
