動画編集を勉強するのに良い方法は、すでにある良いコンテンツを真似ることですね。
今回、ビジネス系YouTubeで有名な、「マナブ」の動画を分析し、マネてみました。
その作り方をざっくり解説していますので参考にしてください。
目次
マナブ とは？
プログラミングでフリーランス独立したいなら、どの言語を学ぶべきか
00:00 導入 1:08 これがオススメの言語です 2:00 Web言語がオススメな理由 5:02 Web言語を学ぶメリット 6:31 Web系はオワコンって言われるけど・・・ 7:39 オワコンか判断する方法 8:26 結論 8:52 オススメな勉強法 11:03 勉強時間 12:14 【重要】基礎学習終わったらすべき事 14:08 就職保証型のスクールについて 16:39 独立の手順 16:55 ①いきなり独立 19:23 ②就職後に独立 21:03 オススメの会社 22:37 まとめ ブログ・アフィリエイト・プログラミングを愛しています。 新卒でセブ島に就職→11ヶ月で退職→フリーランス→起業→起業失敗→ブログを書きまくる→ブログ収益７桁達成。 普段はバンコクを中心に南国にひきこもりつつ、生活費は５万円くらいで生きています。 ■マナブログ https://manablog.org/ ■Twitter https://twitter.com/manabubannai ■個人で稼ぎ、自由に生きる為の、Webマーケ入門教材【10年の知識】 https://manablog.org/make-life-start/
個人で稼ぐ方法について情報発信されている、ビジネス系のYouTuberです。
登録者数は34万人（2020年3月30日時点）で、特に、20代、30代の男性に絶大な人気があります。
動画内容、動画編集（マナブ）、動画編集ツール
ビジネス系YouTuberの中で最も動画編集にも力を入れています。
テロップ、イラスト、アニメーションをふんだんに入れていて分かりやすくし、なるべく多くの人に見てもらえるように工夫されています。
動画編集はかふたろうという方の動画編集チームに外注されています。
動画編集ツールはAdobe Premiere Proを使用されています。
なお、Adobeオンライン講座とセットになったAdobe Creative Cloundパッケージもヒューマンアカデミーから販売されているのでそちらと比較して購入すると良いでしょう。
かふたろうさんのYouTubeチャンネルでAdobe Premiere Proでの動画編集の方法について解説されていて、それを見るだけでもマナブチャンネルの動画がどのように作られているかがだいたい分かります。
上記のマナブの動画をマネてみたのがこちらです。
【動画編集】マナブをマネてみた_2
Adobe Premiere Pro勉強用。 マナブの以下動画等で使われているテロップです。 プログラミングでフリーランス独立したいなら、どの言語を学ぶべきか Vrewで字幕データを作り、Adobe Premiere Proに字幕データを取り込んで作りました。
最初から約4分間をマネています。（一部ブラーの効果などが抜けてます。後述を参考に）
Adobe Premiere Proの動画編集の画面はこのようになっています。
下の2トラックは土台のカラーマットと見本の元画像です。
見本はスクリーンショット撮影し、PhotoshopでHDサイズに自動で切り抜いて作っています。
以下にこの作り方を解説します。
動画の作り方 分析と解説
オープニング（全体）
オープニングは特にないですが、動画の冒頭で簡単にマナブさんの自己紹介と今回のテーマを喋っています。
「manablog」のロゴは静止画で、「自己紹介」と「今回のテーマ」はフリップで画面外からヒョコッと出てくる感じです。
「自己紹介」、「今回のテーマ」は説明を終えるとそれぞれ次のようなアニメーションで画面から消えていきます。
- 「自己紹介」：小さくなって消えていく
- 「今回のテーマ」：画面下に移動して消えていく
「今回のテーマ」は画面外に戻るだけです。
これをマネしてみたのがこちらです。
【動画編集】マナブをマネてみた_プロフィール
Adobe Premiere Pro勉強用。 マナブの以下動画等で使われているプロフィール動画編集です。 プログラミングでフリーランス独立したいなら、どの言語を学ぶべきか
「manablog」ロゴ、「自己紹介」、「今回のテーマ」それぞれでエッセンシャルグラフィックスを作り、各パーツをグループでまとめるといいです。
こんな感じで。
これは「自己紹介」のエッセンシャルグラフィックスのグループです。
別の方法として、各々を分けてシーケンスに配置し、それをネストしてグループ化でも実現できるでしょうが、上のようにエッセンシャルグラフィックスパネルの中でグループ化した方が操作も管理もしやすいです。
オープニング（manablogロゴ）
manablogロゴのテキストはこんな感じに設定しています。
フォント：Futura
文字間：-21
行間：0
揃え：中央
塗り：FFFFFF
シャドウ：3F3F3F（個々のパラメータ；適当）
Font Bookアプリを使って「manablog」の書体と似たフォントを探したところ、Futuraが似てました。
が、同一ではないので妥協してます。
これを縦長にしたイメージなので、電球アイコンと一緒に文字列もIllustratorで加工したほうがよさげですね。
電球アイコンはPIXTAのこちらで販売されてます。
練習でマネるのにわざわざ買うこともないので、フリーのもので代用してます。
オープニング（プロフィール）
「プロフィール」文のテキストはこんな感じに設定しています。
フォント：M + 1P（heavy）
文字間：-10
行間：18
揃え：左
塗り：343235
プロフィールが画面外から画面内に入ってくるアニメーションアニメーションですが、こんな感じでキーフレームを設定します。
エフェクトコントロールの一番上のベクトルモーションの「位置」にキーフレームを打ちます。
キーフレームを打つとき、アニメーション速度が単調にならないように、以下のようにキーフレーム設定するのがポイントです。
アニメーション開始点: イーズアウト
アニメーション終了点: イーズイン
を打ち、速度が開始点寄りに盛り上がるようにキーハンドルを動かす
続いて、「自己紹介」の内容が後から出てくる表現です。
これは文章にアニメーション設定とマスクをかけることで作れます。
手順はこの通りです。
- 最初文章が見えないように文章をボックス外に配置
- エッセンシャルグラフィックス全体が画面内で停止した後、文章が下に降りてきて停止するようにアニメーション設定
- 文章全体を白い矩形内のみで表示されるようにマスクを設定しておく
これで「自己紹介」を表示させる部分は実現できました。
今度はこれを消すときの方法です。
「自己紹介」はだんだん小さくなって消えていくので、全体の「スケール」にキーフレームを打つといいです。
その際、速度感が出るように全体の矩形をぼかすため、フリップ全体に「ブラー（ガウス）」のエフェクトをかけてみました。
値はとりあえずこのように設定しています。
ブラーの長さ：75
方向：水平および垂直
このあたりの調整は画面を見ながら適切な値に調整すると良いですね。
オープニング（テーマ）
「今回のテーマ」のテキストはこんな感じに設定しています。
フォント：Noto Sans CJK JP（Black）
（今回のテーマ）
文字間：0
行間：0
揃え：中央
塗り：FFFFFF（白）
（テーマの内容）
文字間：0
行間：0
揃え：中央
塗り：1E80D7（青）
全体のアニメーションは最上位のベクトルモーションの位置にキーフレームで設定し、全体の矩形ぼかしもフリップ全体に「ブラー（方向）」のエフェクトをかけて表現しています。
値はとりあえずこのように設定しています。
ブラーの長さ：15
方向：180
右上のテーマ
オープニングの後、画面右外からこのテーマが画面内に入ってきます。
テキストはこんな感じに設定しています。
フォント：Noto Sans CJK JP（Black）
文字間：-19
行間：0
揃え：中央
塗り：2D2D2F（濃い灰色）
これら白矩形、青枠、文字列、黄色線をエッセンシャルグラフィックスを一つのグループでまとめます。
こんな感じです。
このグループを先ほどのプロフィールと同様にエフェクトコントロールの位置にキーフレームを打ってアニメーションさせればいいです。
なお、黄色の下線ですが、後からニョキニョキっと伸びます。
これは黄色の線のマスクパスを変形させればいいです。
画面内に図形が表示されたところと約20フレーム先にぞれぞれキーフレームを打ち、パスを最初の形、（全て文字列が表示された）最終の形に変形させるだけです。
 |
「動画編集は稼げる！」とインフルエンサーや動画編集オンラインサロンがよく言ってますね。 ですが、YouTubeの動画編集だけでは稼げません。 動画編集で稼ぐためには、独学では習得が困難な専門知識や専門技術が必要です。 詳しくはこちらを参照してください。 |
テロップ（文字列のみ）
テロップもエッセンシャルグラフィックスで作っています。
VrewでAdobe Premiere Pro用の字幕ファイルを作り、それを取り込んでテロップにしています。
Vrewで字幕データを作成する際、Adobe Premiere Proで編集する時のテロップの大きさと大体同じになるように、Vrewの字幕設定をこのようにしています。
基本的なテロップのテキストはこのように設定しています。
フォント：Noto Sans CJK JP（Black）
文字間：-9
行間：0
揃え：中央
Y座標：980
サイズ：93
塗り：1E80D7（青）、C7051D（赤）、C91580（ピンク）
ストローク：FFFFFF（白）、（サイズ：6）
シャドウ：FFFFFF（白）
サイズ：8.4
ブラー：35
なお、エッセンシャルグラフィックスのデフォルト設定だと文字の角が尖ってトゲトゲになってしまいます。
それを防ぐために、グラフィックプロパティでラウンド結合に変更しておくと良いです。
テロップ（クロップあり）
これは（3分45秒）クロップありのテロップです。
最初「内部の仕様書」以降の文字が見えないようにし、読み上げると表示するようにします。
方法は以下2つあります。
- テキストのマスクをアニメーションさせる
- エフェクトのクロップを使う
1.はマスクを動かすのが操作しづらいので、2.のエフェクトのクロップを使うのが良いでしょう。
文字が出る位置と1フレームずらした位置でクロップの右にキーフレームを打ち、最初後半の文字列が見えないようにクロップの右の位置を調整するだけです。
ここは一瞬なのでイーズイン、イーズアウトはいらないでしょう。
テロップ（２段、クロップあり）
最初上の段の文字列が表示され、喋り終えたら下の段の文字列が表示されます。（0分52秒）
Vrewから字幕データを取り込む場合、改行ありの1つテロップは1つのエッセンシャルグラフィックスグループで２つのテキストに分かれてしまいます。（実際試してみると一目瞭然）
それだと管理が面倒なので、Vrewでは１行にまとめておいて、Premiere上で改行した方が楽です。
文字列の表示はクロップのエフェクトを使い、クロップの下にキーフレームを打って調整すると楽です。
テロップ（背景あり）
強調したいテロップには背景を使っています。
これもエッセンシャルグラフィックスで表現でき、アピアランス設定だけでできます。
背景の大きさを調整し、少しだけ背景を透かしています。
各値はこんな感じに設定しています。
フォント：Noto Sans CJK JP（Black）
文字間：-9
行間：0
揃え：中央
Y座標：980
サイズ：93
塗り：FFFFFF（白）
背景：1E80D7（青）、C7051D（赤）、C91580（ピンク）
不透明度：90%
サイズ：32.4
テロップ（背景あり、アニメーション）
画面右外から画面内に背景ありのテロップが入ってくるアニメーションです。
個々のエッセンシャルグラフィックスにブラー（方向）のエフェクトをかけました。
値はとりあえずこのように設定しています。
ブラーの長さ：10
方向：90
テロップ（固定） + テロップ（アニメーション）
固定のテロップとアニメーションありのテロップです。
「Web系の言語」は最初から固定で表示されていて、そこを読み終えると「→在宅ワークが多い」が「Web系の言語」の裏から右に流れてくるアニメーションです。
これは不透明度のパスを使えば簡単です。
パスをこんな感じに設定しておき、あとは文字列をアニメーションさせるだけです。
上から出てきたり、それら組み合わせだったりいくつかパターンがあります。（2分54秒）
その他テロップ
過去の経験談、コメント等を話すとき、かわいいキャラクター付きのテロップが下からニョキっと出てきます（0分39秒）。
こんな感じのやつです。
これらテロップもエッセンシャルグラフィックスでグループごとにまとめるのがよいでしょう。
アニメーションはこれまでと同じやり方で出来ます。
グループ毎に最上位のみにキーフレームを打てばいいですが、こんな感じでビデオのモーションに打ってもOKです。
マスクが動かしたいかどうかの違いで、今回マスクを使ってないからどっちでもいい、との認識です。
文章の切り替えですが、それぞれ喋ってる時だけ不透明度を100にし、喋り終えたら即座に0に設定すればいいです。
リスト
面倒なのが次のリスト表示。
動きはこんな感じになっています
- 画面右外から青い矩形が画面内に入ってくる
- 青い矩形が停止した後、白い矩形がサイズを広げながら表示される
- 白い矩形が表示されたら、文章が画面右外から白い矩形内に入ってくる
- 項目を一つ読む毎にその項目のアピアランスが赤色に変わる
これもエッセンシャルグラフィックスでまとめればいいのですが、矩形と文章とで動きが異なるのでグループも分けるといいでしょう。
白い矩形のアニメーションですが、パスにキーフレームを打てばいいです。
アニメーションの最初はパスを閉じた状態でキーフレームを打ち、最後はパスを開ききった状態でキーフレームを打てばいいです。
白い矩形が表示されてから文章全体をアニメーションさせてその中に入れればいいです。
フォントのアピアランスの「塗り」の変更ですが、アピアランスにキーフレームを打てません。
で、どうやったらいいのか考えたところ、テロップを青白、赤白２つ用意し、それぞれの不透明度にキーフレームを打って表現しました。
ただ、そのやり方だと、
不透明度の設定を同時に4つも変更しないといけないのでかなり面倒です。
他にもっとスマートな方法がありそうですが、とりあえず表現してみたといったところです。
リストのテキストはこんな感じに設定しています。
フォント：M + 1P（black）
文字間：0
行間：0
揃え：左
エンディング
エンディングはかなり凝ってます。
たぶんAdobe After Effectで作って、それをテンプレート化してAdobe Premiere Proに入れているのでしょう。
前回はかなり雑だったので一旦削除しました。
After Effectを勉強してからマネてみようと思います。
テンプレート化
ここまで各パーツを分けてエッセンシャルグラフィックスで作ってきました。
タイムラインはこんな感じになってます。
下地の板の上に基本一行だけパーツを並べています。
後半の３行のものはテロップ（固定）+ テロップ（アニメーション）です。
これらを一つのエッセンシャルグラフィックスにまとめることもできますが、音声とのタイミングに合わせてアニメーションさせる際、バラバラの方が揃えやすいのであえて分けています。
なので、１行ものはモーショングラフィックステンプレートで書き出してテンプレート化し、複数行のものはテンプレート用のシーケンスを用意し、ここからAlt + ドラッグしてシーケンスにコピペするのが効率が良いと思います。
なお、モーショングラフィックステンプレートの作り方はこの通りです。
- テンプレートファイル（.mogrt）を出力する
（「グラフィックス」-「モーショングラフィックステンプレートとして書き出し」） - テンプレートを使いたいプロジェクトでテンプレートをインストールする
（「グラフィックス」-「モーショングラフィックステンプレートをインストール」） - モーショングラフィックステンプレートをタイムラインに配置
（「エッセンシャルグラフィックス」-「参照」-「マイテンプレート」でテンプレートを選択）
そうするとこんな感じになります。
※スクリーンショットは以前作ったもの
これで各パーツを簡単に別プロジェクトで使い回すことができます。
テンプレート化追記：2021年1月
本記事をアップしてから10ヵ月以上経つのですが、今もたくさんのアクセスがあります。
そこで、本記事で紹介した作り方のAdobe Premiere Proプロジェクトも需要があるのかな？と思いました。
こんな感じのものです。
【Premiere Pro】誰でもマナブくん
ビジネス系YouTuber マナブさんの動画編集をマネてみたものです。
動画編集を始めて一ヶ月の時に作ったものとほぼ同じの大したものではないですが、必要な方はこちらからご連絡ください。
先着数名にPremiere Proプロジェクトでお渡します。
※希望者が増えてきたので一旦締め切らせていただきました（2021年2月10日）
テンプレート化追記：2020年4月
3月のアップデートでプロダクション機能というものが追加されました。
複数のプロジェクトをグループ化して管理する機能です。
これまでもAdobe Premiere Proでは複数プロジェクトを同時に開けてましたが、プロジェクト間でパーツを共有しようとすると、共有する全てのパーツがプロジェクトにコピーされてました。
これをプロダクション機能を使って複数プロジェクトを作り、そのプロジェクト間でパーツを共有する場合、利用先のプロジェクトに素材のコピーは発生しません。リンク情報のみがコピーされます。
なので、テンプレート化は、プロダクション機能でテンプレートプロジェクトをまず作り、そのプロダクション下に新規プロジェクトを作っていく管理方法が良いと思われます。
結論として、先ほど紹介したモーショングラフィックステンプレートでの管理は必要なく、プロダクション機能とテンプレートプロジェクトで管理すると良いでしょう。
仕様を見てそう感じただけで、試してないので確かではないですが笑。
まとめ
ビジネス系YouTuberの中で動画編集にも力を入れてるマナブさんの動画でも、だいたいの動きならそれほど難しくないです。
ただ、動画編集にかなり時間がかかります。
いかにテンプレート化して編集時間を減らすことができるかが課題です。
その他のYouTuberのマネてみた動画一覧とマネる手順と解説を参照してください。
