【動画編集】ビジネス系 YouTuber(マナブ)の動画をマネてみた

動画編集 マナブ

動画編集を勉強するのに良い方法は、すでにある良いコンテンツを真似ることですね。

今回、ビジネス系YouTubeで有名な、「マナブ」の動画を分析し、マネてみました。

その作り方をざっくり解説していますので参考にしてください。




マナブ とは?

個人で稼ぐ方法について情報発信されている、ビジネス系のYouTuberです。

登録者数は34万人(2020年3月30日時点)で、特に、20代、30代の男性に絶大な人気があります。

動画内容、動画編集(マナブ)、動画編集ツール

ビジネス系YouTuberの中で最も動画編集にも力を入れています。

テロップ、イラスト、アニメーションをふんだんに入れていて分かりやすくし、なるべく多くの人に見てもらえるように工夫されています。

動画編集はかふたろうという方の動画編集チームに外注されています。

動画編集ツールはAdobe Premiere Pro を使用されています。

かふたろうさんのYouTubeチャンネルでAdobe Premiere Pro での動画編集の方法について解説されていて、それを見るだけでもマナブチャンネルの動画がどのように作られているかがだいたい分かります。

上記のマナブの動画をマネてみたのがこちらです。

最初から約4分間をマネています。(一部ブラーの効果などが抜けてます。後述を参考に)

Adobe Premiere Proの動画編集の画面はこのようになっています。

スクリーンショット_2020-03-30_17_51_40_2

下の2トラックは土台のカラーマットと見本の元画像です。

見本はスクリーンショット撮影し、PhotoshopでHDサイズに自動で切り抜いて作っています。

動画編集 人気YouTuber

【動画編集】人気YouTuberのテロップをマネるためのスクリーンショットの作り方

2020年3月16日

以下にこの作り方を解説します。

動画の作り方 分析と解説

オープニング(全体)

オープニングは特にないですが、動画の冒頭で簡単にマナブさんの自己紹介と今回のテーマを喋っています。

「manablog」のロゴは静止画で、「自己紹介」と「今回のテーマ」はフリップで画面外からヒョコッと出てくる感じです。

「自己紹介」、「今回のテーマ」は説明を終えるとそれぞれ次のようなアニメーションで画面から消えていきます。

  • 「自己紹介」:小さくなって消えていく
  • 「今回のテーマ」:画面下に移動して消えていく

「今回のテーマ」は画面外に戻るだけです。

これをマネしてみたのがこちらです。

 

「manablog」ロゴ、「自己紹介」、「今回のテーマ」それぞれでエッセンシャルグラフィックスを作り、各パーツをグループでまとめるといいです。

こんな感じで。

これは「自己紹介」のエッセンシャルグラフィックスのグループです。

別の方法として、各々を分けてシーケンスに配置し、それをネストしてグループ化でも実現できるでしょうが、上のようにエッセンシャルグラフィックスパネルの中でグループ化した方が操作も管理もしやすいです。

オープニング(manablogロゴ)

manablogロゴのテキストはこんな感じに設定しています。

テキスト

フォント:Futura
文字間:-21
行間:0
揃え:中央
塗り:FFFFFF
シャドウ:3F3F3F(個々のパラメータ;適当)

Font Bookアプリを使って「manablog」の書体と似たフォントを探したところ、Futuraが似てました。

が、同一ではないので妥協してます。

YouTuber フォント

【Adobe Premiere Pro】人気YouTuberが使っているフォントの探し方と管理方法

2020年3月18日

これを縦長にしたイメージなので、電球アイコンと一緒に文字列もIllustratorで加工したほうがよさげですね。

電球アイコンはPIXTAのこちらで販売されてます。

練習でマネるのにわざわざ買うこともないので、フリーのもので代用してます。

オープニング(プロフィール)

「プロフィール」文のテキストはこんな感じに設定しています。

テキスト

フォント:M + 1P(heavy)
文字間:-10
行間:18
揃え:左
塗り:343235

プロフィールが画面外から画面内に入ってくるアニメーションアニメーションですが、こんな感じでキーフレームを設定します。

プロフィールスクリーンショット_2020-03-30_18_29_57_2

エフェクトコントロールの一番上のベクトルモーションの「位置」にキーフレームを打ちます。

キーフレームを打つとき、アニメーション速度が単調にならないように、以下のようにキーフレーム設定するのがポイントです。

ポイント(アニメーションのキーフレーム)
アニメーション開始点: イーズアウト
アニメーション終了点: イーズイン
を打ち、速度が開始点寄りに盛り上がるようにキーハンドルを動かす

続いて、「自己紹介」の内容が後から出てくる表現です。

プロフィールスクリーンショット_2020-03-30_18_35_34_2

これは文章にアニメーション設定とマスクをかけることで作れます。

手順はこの通りです。

  1. 最初文章が見えないように文章をボックス外に配置
  2. エッセンシャルグラフィックス全体が画面内で停止した後、文章が下に降りてきて停止するようにアニメーション設定
  3. 文章全体を白い矩形内のみで表示されるようにマスクを設定しておく

これで「自己紹介」を表示させる部分は実現できました。

今度はこれを消すときの方法です。

プロフィールスクリーンショット_2020-03-30_18_53_19_2

「自己紹介」はだんだん小さくなって消えていくので、全体の「スケール」にキーフレームを打つといいです。

その際、速度感が出るように全体の矩形をぼかすため、フリップ全体に「ブラー(ガウス)」のエフェクトをかけてみました。

値はとりあえずこのように設定しています。

ブラー(ガウス)の値
ブラーの長さ:75
方向:水平および垂直

このあたりの調整は画面を見ながら適切な値に調整すると良いですね。

オープニング(テーマ)

「今回のテーマ」のテキストはこんな感じに設定しています。

テキスト

フォント:Noto Sans CJK JP(Black)

(今回のテーマ)
文字間:0
行間:0
揃え:中央
塗り:FFFFFF(白)

(テーマの内容)
文字間:0
行間:0
揃え:中央
塗り:1E80D7(青)

全体のアニメーションは最上位のベクトルモーションの位置にキーフレームで設定し、全体の矩形ぼかしもフリップ全体に「ブラー(方向)」のエフェクトをかけて表現しています。

テーマスクリーンショット_2020-03-30_19_07_14_2

値はとりあえずこのように設定しています。

ブラー(方向)の値
ブラーの長さ:15
方向:180

右上のテーマ

オープニングの後、画面右外からこのテーマが画面内に入ってきます。

スクリーンショット 2020-03-30 22.04.56

テキストはこんな感じに設定しています。

テキスト

フォント:Noto Sans CJK JP(Black)
文字間:-19
行間:0
揃え:中央
塗り:2D2D2F(濃い灰色)

これら白矩形、青枠、文字列、黄色線をエッセンシャルグラフィックスを一つのグループでまとめます。

こんな感じです。

このグループを先ほどのプロフィールと同様にエフェクトコントロールの位置にキーフレームを打ってアニメーションさせればいいです。

なお、黄色の下線ですが、後からニョキニョキっと伸びます。

これは黄色の線のマスクパスを変形させればいいです。

画面内に図形が表示されたところ約20フレーム先にぞれぞれキーフレームを打ち、パスを最初の形、(全て文字列が表示された)最終の形に変形させるだけです。

テロップ(文字列のみ)

テロップもエッセンシャルグラフィックスで作っています。

VrewでAdobe Premiere Pro用の字幕ファイルを作り、それを取り込んでテロップにしています。

Vrewで字幕データを作成する際、Adobe Premiere Proで編集する時のテロップの大きさと大体同じになるように、Vrewの字幕設定をこのようにしています。

スクリーンショット 2020-03-30 20.50.52
Vrew テロップ

【Adobe Premiere Pro】Vrewを使ってビジネス系YouTubeのテロップを作る方法

2020年3月21日
マナブ_スクリーン3.00_00_54_29.静止画001

基本的なテロップのテキストはこのように設定しています。

テキスト

フォント:Noto Sans CJK JP(Black)
文字間:-9
行間:0
揃え:中央
Y座標:980
サイズ:93
塗り:1E80D7(青)、C7051D(赤)、C91580(ピンク)
ストローク:FFFFFF(白)、(サイズ:6)
シャドウ:FFFFFF(白)
     サイズ:8.4
     ブラー:35

なお、エッセンシャルグラフィックスのデフォルト設定だと文字の角が尖ってトゲトゲになってしまいます。

アピアランス_ラウンド結合

それを防ぐために、グラフィックプロパティでラウンド結合に変更しておくと良いです。

テロップ(クロップあり)

マナブ_スクリーン3.00_03_45_29.静止画002

これは(3分45秒)クロップありのテロップです。

最初「内部の仕様書」以降の文字が見えないようにし、読み上げると表示するようにします。

方法は以下2つあります。

  1. テキストのマスクをアニメーションさせる
  2. エフェクトのクロップを使う

1.はマスクを動かすのが操作しづらいので、2.のエフェクトのクロップを使うのが良いでしょう。

スクリーンショット_2020-03-30_21_22_12_2

文字が出る位置と1フレームずらした位置でクロップにキーフレームを打ち、最初後半の文字列が見えないようにクロップのの位置を調整するだけです。

ここは一瞬なのでイーズイン、イーズアウトはいらないでしょう。

テロップ(2段、クロップあり)

マナブ_スクリーン3.00_00_52_22.静止画005

最初上の段の文字列が表示され、喋り終えたら下の段の文字列が表示されます。(0分52秒)

Vrewから字幕データを取り込む場合、改行ありの1つテロップは1つのエッセンシャルグラフィックスグループで2つのテキストに分かれてしまいます。(実際試してみると一目瞭然)

それだと管理が面倒なので、Vrewでは1行にまとめておいて、Premiere上で改行した方が楽です。

スクリーンショット 2020-04-01 17.04.27

文字列の表示はクロップのエフェクトを使い、クロップの下にキーフレームを打って調整すると楽です。

スクリーンショット 2020-04-01 17.09.37

テロップ(背景あり)

強調したいテロップには背景を使っています。

マナブ_スクリーン3.00_00_13_08.静止画003

これもエッセンシャルグラフィックスで表現でき、アピアランス設定だけでできます。

アピアランス_スクリーンショット 2020-04-01 15.44.02

背景の大きさを調整し、少しだけ背景を透かしています。

各値はこんな感じに設定しています。

テキスト(背景あり)

フォント:Noto Sans CJK JP(Black)
文字間:-9
行間:0
揃え:中央
Y座標:980
サイズ:93
塗り:FFFFFF(白)
背景:1E80D7(青)、C7051D(赤)、C91580(ピンク)
   不透明度:90%
   サイズ:32.4

テロップ(背景あり、アニメーション)

画面右外から画面内に背景ありのテロップが入ってくるアニメーションです。

個々のエッセンシャルグラフィックスにブラー(方向)のエフェクトをかけました。

スクリーンショット 2020-04-01 17.18.12

値はとりあえずこのように設定しています。

ブラー(方向)の値
ブラーの長さ:10
方向:90

テロップ(固定) + テロップ(アニメーション)

テンプレート_202003.00_01_22_06.静止画001

固定のテロップとアニメーションありのテロップです。

「Web系の言語」は最初から固定で表示されていて、そこを読み終えると「→在宅ワークが多い」が「Web系の言語」の裏から右に流れてくるアニメーションです。

これは不透明度のパスを使えば簡単です。

スクリーンショット 2020-04-01 18.03.16

パスをこんな感じに設定しておき、あとは文字列をアニメーションさせるだけです。

マナブ_スクリーン3.00_02_54_09.静止画007

上から出てきたり、それら組み合わせだったりいくつかパターンがあります。(2分54秒)

その他テロップ

過去の経験談、コメント等を話すとき、かわいいキャラクター付きのテロップが下からニョキっと出てきます(0分39秒)。

マナブ_スクリーン3.00_00_43_08.静止画004

こんな感じのやつです。

これらテロップもエッセンシャルグラフィックスでグループごとにまとめるのがよいでしょう。

スクリーンショット 2020-04-01 16.03.40

アニメーションはこれまでと同じやり方で出来ます。

スクリーンショット 2020-04-01 16.24.12

グループ毎に最上位のみにキーフレームを打てばいいですが、こんな感じでビデオのモーションに打ってもOKです。

マスクが動かしたいかどうかの違いで、今回マスクを使ってないからどっちでもいい、との認識です。

文章の切り替えですが、それぞれ喋ってる時だけ不透明度を100にし、喋り終えたら即座に0に設定すればいいです。

リスト

面倒なのが次のリスト表示。

マナブ_スクリーン3.00_01_37_27.静止画006

動きはこんな感じになっています

  1. 画面右外から青い矩形が画面内に入ってくる
  2. 青い矩形が停止した後、白い矩形がサイズを広げながら表示される
  3. 白い矩形が表示されたら、文章が画面右外から白い矩形内に入ってくる
  4. 項目を一つ読む毎にその項目のアピアランスが赤色に変わる

これもエッセンシャルグラフィックスでまとめればいいのですが、矩形と文章とで動きが異なるのでグループも分けるといいでしょう。

スクリーンショット 2020-04-01 17.29.39

白い矩形のアニメーションですが、パスにキーフレームを打てばいいです。

アニメーションの最初はパスを閉じた状態でキーフレームを打ち、最後はパスを開ききった状態でキーフレームを打てばいいです。

スクリーンショット 2020-04-01 17.36.57

白い矩形が表示されてから文章全体をアニメーションさせてその中に入れればいいです。

フォントのアピアランスの「塗り」の変更ですが、アピアランスにキーフレームを打てません

で、どうやったらいいのか考えたところ、テロップを青白、赤白2つ用意し、それぞれの不透明度にキーフレームを打って表現しました。

ただ、そのやり方だと、

スクリーンショット 2020-04-01 17.39.54

不透明度の設定を同時に4つも変更しないといけないのでかなり面倒です。

他にもっとスマートな方法がありそうですが、とりあえず表現してみたといったところです。

リストのテキストはこんな感じに設定しています。

テキスト

フォント:M + 1P(black)
文字間:0
行間:0
揃え:左

エンディング

エンディングはかなり凝ってます。

たぶんAdobe After Effect で作って、それをテンプレート化してAdobe Premiere Pro に入れているのでしょう。

前回はかなり雑だったので一旦削除しました。

After Effectを勉強してからマネてみようと思います。

テンプレート化

ここまで各パーツを分けてエッセンシャルグラフィックスで作ってきました。

タイムラインはこんな感じになってます。

スクリーンショット 2020-04-01 18.16.43

下地の板の上に基本一行だけパーツを並べています。

後半の3行のものはテロップ(固定)+ テロップ(アニメーション)です。

これらを一つのエッセンシャルグラフィックスにまとめることもできますが、音声とのタイミングに合わせてアニメーションさせる際、バラバラの方が揃えやすいのであえて分けています。

なので、1行ものはモーショングラフィックステンプレートで書き出してテンプレート化し、複数行のものはテンプレート用のシーケンスを用意し、ここからAlt + ドラッグしてシーケンスにコピペするのが効率が良いと思います。

なお、モーショングラフィックステンプレートの作り方はこの通りです。

  1. テンプレートファイル(.mogrt)を出力する
    (「グラフィックス」-「モーショングラフィックステンプレートとして書き出し」)
  2. テンプレートを使いたいプロジェクトでテンプレートをインストールする
    (「グラフィックス」-「モーショングラフィックステンプレートをインストール」)
  3. モーショングラフィックステンプレートをタイムラインに配置
    (「エッセンシャルグラフィックス」-「参照」-「マイテンプレート」でテンプレートを選択)

そうするとこんな感じになります。

AdobePremiere_sc_2
※スクリーンショットは以前作ったもの

これで各パーツを簡単に別プロジェクトで使い回すことができます。

まとめ

ビジネス系YouTuberの中で動画編集にも力を入れてるマナブさんの動画でも、だいたいの動きならそれほど難しくないです。

ただ、動画編集にかなり時間がかかります

いかにテンプレート化して編集時間を減らすことができるかが課題です。

なお、YouTuberをマネてみた動画編集一覧マネる手順と解説を以下記事にまとめています。そちらも参考にしてください。

動画編集 YouTuber

【動画編集】YouTuberをマネてみた一覧とマネる手順を一から解説

2020年3月27日












動画編集

YouTube

YouTubeを本気でやるなら、Adobe Premiere Pro

動画編集を仕事にするなら、Affter Effectも必要。

その両方が入ったパッケージ、Adobe Creative Clound  がおすすめ。

半額で購入できる学生・教職員版 もあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください