【AviUtl】YouTube等でよく使われるテキスト文字の作り方①

【AviUtl】YouTubeなどでよく使われるテキスト文字の作り方① 神音の社 AviUtl関連
AviUtl関連
スポンサーリンク

イントロダクション

今回はAviUtlでYouTubeとかニコニコ動画とかの『動画投稿サイトでよく使われているテキスト文字の作成方法』を記述していこうと思います。

↑何種類か作っていきますが、単純なものだとこんな感じのテキスト文字とかですね。

基本に立ち返るという意味では良い機会かも知れませんわね。

最近、新しいテキスト文字とか作ってませんでしたからね。

ぼちぼち動画作成準備をしていこうかなーという事で、今回は『YouTubeとかで使用頻度が高いテキスト文字を真似て、テンプレートとして保存していくついでに備忘録として残しておこう』といった感じの記事になります。

まあ、有名な人の動画だと1年で数万円くらいのライセンス料を払わなければ使用できないフォントとか使っていますので、完全に同じものは作れませんが。

↑お金に余裕がある人は1000種類くらいフォントが入っているモリサワフォントとかをサブスクで購入すればテレビとかでも使用されているテキスト文字なんかも再現できますのでお薦めではあります。

個人契約だと1年で54,780円ほど維持コストがかかりますけどね。

……いや~、私のブログの1年分くらいの収益のフォントとか流石に買えませんわー。

せめて全種類買い切りでこれぐらいの値段だったら考えても良いんですが、1種類で買い切り2万円とからしいので個人的に非常に使いにくい所です。

う~ん。専業で毎日動画投稿している人なら有用かも知れませんけど、私だと動画投稿を始めても週一投稿が精々なのが解っていますので、最大で1年に50個くらいしか動画を作れませんからね。

単純計算で1動画にフォントだけで1,000円以上使う事になりますし、よほど収益を上げる公算が高くないと使いたくないというのが本音です。

って事で、何か話題が逸れましたが、今回はフリーフォントを使ってよく使われる形式のテキスト文字を幾つか作成していこうかと思いますので、興味のある方は読んでいって下さいませ。

宜しくお願い致します。

スポンサーリンク

動画でよく使われるテキスト文字の作り方

使用するフォントに関して

↑今回はフリーフォントを使用していきますので、前準備として上記のサイト様から各自で好きなフォントをDLしてきて下さい。

基本的には商用利用可能なものを選んでおけば大丈夫です。

個人利用のみという条件がある場合は法人の人とかが使えないといった縛りがありますが、完全に個人で営利目的に使う予定がないのであれば、そっちのフォントを選んでも大丈夫です。

ちなみに一般的なウィンドウズPCに最初から入っているHG、MSシリーズとかを初めとしたフォントは商用利用できないものもありますので注意が必要だったりします。

知らずに動画等で使って将来的に面倒な事になる可能性がゼロではありませんので、基本的には商用利用可能なフリーフォントを使った方が無難だとは思います。

また、お金に余裕がある人は、有料フォントを使った方が最終的な完成度が上がると思いますので、よりクオリティの高いものを製作したいという情熱のある方は、そちらの方を購入してみて下さいませ。

テキスト文字を装飾する為のスクリプト

個人的に必須だと思うのは、テキスト装飾用の縁取りスクリプトですね。

一応、AviUtlにも標準で縁取り機能があるのですが、外部スクリプトを入れた方が綺麗に縁取りができますのでオススメです。


↑『縁取りスクリプト』です。デフォルトの縁取りよりも高機能で綺麗に縁取り出来るようになります。


↑『なめらか縁取り』です。その名の通りデフォルトの縁取りよりも滑らかな縁取りが出来るようになります。

まだ導入していないという方は上記の配布動画からDLして、可能なら2つとも導入しておく事を推奨いたします。

ただ、別にクオリティにこだわりがなかったり、導入が面倒臭いという方は通常の縁取りでも充分だと思います。カクカクした縁取りが好きな人だとデフォルトの方を使った方が良いでしょう。

縁取り文字の作り方

↑恐らく一番使われていて、一番汎用性があるのが単純な縁取り文字ですね。

私が参考用に見た有名な人達の動画でも例外なく使われてますし、とりあえず初心者ならこれだけ覚えておけば良いんじゃなかろうかというのが、シンプルな縁取り文字です。

って事で、まずはこれの作り方を記述していきましょう。基本中の基本なので、AviUtl初級者以上の人はスルーしても大丈夫です。

手順①AviUtlを起動して新規プロジェクトを作ります。

AviUtlを起動して新規プロジェクトを作ります。

↑拡張編集のタイムライン上で右クリックすると、上記のウィンドウが出てきますので『新規プロジェクトの作成』を選択して下さい。

↑新規プロジェクトの作成用ウィンドウが出てきますので、好きなように設定してOKボタンを押して下さい。

※フレームレートを上げると滑らかに動くようになりますが、動画の容量も上がりますので注意して下さい。私は適当に30くらいで設定してますが、激しい動きをする動画を作りたい人は60くらいでも良いと思います。

↑あとで要らない部分を切り取ってリサイズしたい場合は、こちらの記事を参考にしてトリミングしてみて下さいませ。

手順②レイヤー1にテキストオブジェクトを生成します。

↑タイムライン上のオブジェクトが何もない場所をクリック→『メディアオブジェクトの追加』→『テキスト』を選択して下さい。

↑テキストオブジェクトが生成されますので、レイヤー1に置いておきましょう。長さは適当に使う分だけ長くして下さい。

次に、このテキストオブジェクトに縁取りをしていきましょう。

手順③テキストオブジェクトに縁取りをかけます。

↑レイヤー1のテキストオブジェクトの設定ダイアログ右上にある『+』マークを選択して、出てきたリストの中から『アニメーション効果』を追加して下さい。

※先程紹介した外部スクリプトを導入していない場合は、アニメーション効果ではなく『縁取り』を選択して下さい。

アニメーション効果の種類は先程導入した外部スクリプトの『縁取りスクリプト』か『なめらか縁取り』を選択して下さい。

私は縁取りスクリプトを使用してみる事にします。

手順④各種パラメーターを設定します。

↑上記のように設定ダイアログのパラメーターを変更して下さい。

①サイズはフォントの大きさを変更する事が可能なので、好きな数値に変えて下さい。ちなみに拡大率の方でも大きさ自体は変えられますが、そっちは解像度がそのままで大きくなる仕様ですので、拡大すると汚く滲んで見えるようになりますのであまり推奨しません。

②文字色の設定ボタンを押すとカラーパレットが出てきますので、文字の色自体を変えたい場合は好きな色に変更して下さい。今のサンプルだと私は赤にしています。

③▼ボタンを押すとPCにインストールされているフォント一覧が出てきますので、好きなフォントを選択して下さい。今のサンプルだと私はけいふぉんとを使用しています。

④好きなテキスト内容を日本語入力でも英語や数字でもいいので入力して下さい。当ブログのサンプルでは大体アニメとか漫画とか映画とかの名言を適当に使っています。

⑤縁取りのサイズを調整して下さい。どの縁取り機能でも大体数字を大きくすると縁取りもデカくなるので、好きな大きさに調整して下さい。

⑥色ボタンを押すとカラーパレットが出てきますので、縁取りの色を変えたい時は使用して下さい。今のサンプルだと私は白に設定しています。

↑完成すると、こんな感じになります。

これで大体の作り方は終わりですので、次項で付随する情報でも記述していきましょう。

おまけ情報

↑縁取りは何重でも併用できますので、一つだけだと味気ないといった場合はそれぞれ色を変更して追加してみて下さい。

↑三重の縁取りだとこんな感じになりますね。このサンプルの場合は文字の色が赤→1つ目の縁取りがサイズ小さめの黒→2つ目の縁取りが白→3つ目の縁取りが赤となっております。

縁取りを重ねる事で立体感のあるテキストが出来ますが、デメリットとして縁取りを重ねるごとにAviUtlの動作が重くなっていく事が挙げられますね。

個人的な実用域としては三重縁取りくらいまでが適当なんじゃないかと思いますが、このあたりはお使いのPCスペック&自分の美的感覚と相談して下さいませ。

↑動作が重くなりますが、更にAviUtl標準のシャドーを追加するのもテキストに立体感が出るのでオススメです。(見やすいように背景をグリーンバックにしています)

↑ちなみに、縁取り文字を作る時の注意点としてはこんな感じで視認性が悪い色の組み合わせは、あんまり使わない方が良いかなーというのがありますね。

私が視聴者なら、よほど興味のある分野の動画でない限りは速攻で離脱します。

なるべく第三者の人達に見てもらって、見やすい色の組み合わせの縁取り文字を作ってください。割と自分一人だけの感覚だと世間一般の感覚とズレているパターンが多いです。

あとは気に入った縁取りのパターンが出来たら、テキストオブジェクトをエイリアスに登録しておいた方が後で楽ができます。

↑エイリアス登録というのはゲームでいう所のセーブ&ロード機能みたいなやつなので、一度登録すればタイムライン上で右クリック→メディアオブジェクトの追加から一発で呼び出し可能になる機能だったりします。

今作ったテキストオブジェクトを登録しておけば、あとで文字の内容だけを変更すれば他の動画を作る時なんかに使いまわせますので、ゼロから作るよりも格段に楽が出来るようになる訳ですね。

私は使えそうなものは種類分けして見境なく登録しております。

エイリアスへの登録はこちらの記事を参考にしてやってみて下さい。

グラデーション文字の作り方

↑次はこんな感じのグラデーションを使ったテキスト文字の作り方ですね。上から下に向かって色合いが変化していきますので、視覚効果はそれなりに高いです。

私が見た幾つかの参考動画の中では2番目くらいに使用頻度が高そうなやつですね。

製作方法ですが、先程説明した縁取り文字とあんまり変わらない為、共通解説部分はなるべく省略して書きますので御了承ください。

同じ説明を見るのも面倒でしょうからね。

手順①テキストオブジェクトにグラデーションを付加します。

先程説明した『手順②レイヤー1にテキストオブジェクトを生成します。』の項目までは全部一緒なので、とりあえず↑上記のようにタイムラインにテキストオブジェクトが置いてある状態から説明を開始します。

↑レイヤー1のテキストオブジェクトの設定ダイアログ右上にある『+』マークを選択して、出てきたリストの中から『グラデーション』を追加して下さい。

続いて、もう一度『+』マークを選択して、出てきたリストの中から『アニメーション効果』を追加します。※縁取りの外部スクリプトを導入していない場合は、アニメーション効果ではなくリストの中にある『縁取り』を選択して下さい。

↑設定ダイアログに2つの効果が追加されますので、アニメーション効果の種類の方は先程導入した外部スクリプトの『縁取りスクリプト』か『なめらか縁取り』を選択して下さい。※私は縁取りスクリプトを使用します。

手順②各種パラメーターを設定します。

↑上記のように設定ダイアログのパラメーターを変更して下さい。

①サイズはフォントの大きさを変更する事が可能なので、好きな数値に変えて下さい。

②▼ボタンを押すとPCにインストールされているフォント一覧が出てきますので、好きなフォントを選択して下さい。今のサンプルだと私はコーポレート・ロゴを使用しています。

③好きなテキスト内容を日本語入力でも英語や数字でもいいので入力して下さい。当ブログのサンプルでは大体アニメとか漫画とか映画とかの名言を適当に使っています。

④グラデーションの幅の数値を調整して下さい。こちらはグラデーションの色と色の境界線のぼかし具合を調整できますので、好きな感じにして下さい。

⑤グラデーションの開始色ボタンを押すとカラーパレットが出てきますので、テキストの上部にあたる色を好きな色に変更して下さい。私はピンクにしています。

同様に、グラデーションの終了色ボタンを押すとカラーパレットが出てきますので、テキストの下部にあたる色を好きな色に変更して下さい。私は薄い灰色にしています。

⑥縁取りのサイズを調整して下さい。どの縁取り機能でも大体数字を大きくすると縁取りもデカくなるので、好きな大きさに調整して下さい。

⑦色ボタンを押すとカラーパレットが出てきますので、縁取りの色を変えたい時は使用して下さい。今のサンプルだと私は白に設定しています。

↑完成すると、こんな感じになります。

縁取りを増加しても良いですし、シャドーを足して影を付けても良いですので適当に自分好みにアレンジしてみて下さい。

納得できるグラデーションパターンが出来たら、先程と同じようにエイリアスに登録しておくと他の動画でも使いまわしが出来るので便利ですよ。

エイリアスへの登録はこちらの記事を参考にしてやってみて下さい。

震えるテキスト文字の作り方

↑ゲーム実況とかでよく使われているやつですね。

主にエコー音声と共に使われる事が多いような気がします。※AviUtlで高品質なエコーとかをかける方法はこちらからどうぞ。

まあ、テキストを振動させる事自体は非常に簡単なんですが、知らない人もいる可能性もあるので一応記述していきましょう。

テキストオブジェクトに振動効果を付与する。

↑先程作ったグラデーション文字を流用して作りますので、既にテキスト文字がある状態から説明しますね。

↑レイヤー1のテキストオブジェクトの設定ダイアログ右上にある『+』マークを選択して、出てきたリストの中から『アニメーション効果』を追加して下さい。

↑追加したアニメーション効果の種類を『震える』に変更してパラメーターを好きな感じに調整して、自分好みの動きを作ってください。私は大してこだわりがないので、上記のような感じに調整しています。

↑尚、テキストオブジェクトの設定ダイアログにある『文字毎に個別オブジェクト』にチェックを入れておかないとテキスト全体が揺れるようになりますので注意が必要です。

↑ちなみに個別オブジェクトにチェックを入れない場合は、こんな感じで全体が動くようになりますが、これはこれでゲーム実況とかで使っている人がいますから、覚えておいても良いんじゃないかと思います。

これも『震える』効果の方をエイリアスに登録しておけば、パラメーター調整をしないですぐに使用できるようになりますので、面倒でもやっておいた方が良いと思います。

エイリアスへの登録方法はこちら

波打つテキスト文字の作り方

↑たまに見る波打つテキスト文字ですね。

まあ、これもアニメーション効果を一つ追加するだけで作れますので、非常に簡単に出来るんですが、一応記述していきましょう。

テキストオブジェクトに波打つ効果を付与する。

↑例によって先程作ったグラデーション文字を流用して作りますので、既にテキスト文字がある状態から説明します。

↑レイヤー1のテキストオブジェクトの設定ダイアログ右上にある『+』マークを選択して、出てきたリストの中から『ラスター』を追加して下さい。

↑パラメーターに関しては好きな感じに調整して、自分好みの動きを作ってください。私はこだわりがないので、上記のような感じに適当に調整しています。

今回は縦方向に波打つようにしているので『縦ラスター』にチェックを入れてますが、横向きの方が好きな人はチェックを外して下さい。

↑横向きの動きだとこんな感じになります。

って事で、これも『ラスター』効果の方をエイリアスに登録しておけば、パラメーター調整をしないですぐに使用できるようになりますので、面倒でもやっておいた方が良いと思います。

エイリアスへの登録方法はこちら

ホラー系テキスト文字に使われるフォント紹介

↑こんな感じのホラー系のテキスト文字に使用されているフォントを紹介していこうと思います。

まあ、一応外部のスクリプトとかを使って通常のフォントを加工し、それっぽいものを作る事もできるんですが、YouTubeなんかで広く使われているのが、フォントをホラー系にして縁取り文字にするだけのものなんですよね。

そういう訳なので、今回はフォントだけの紹介となります。縁取り方法に関しては先程記述したので、そちらを参照して自分好みのものを作ってみて下さい。

g_コミック古印体フォント-教漢版です。多分、ホラー系としては個人的に一番汎用性が高いフォントなんじゃないかと思います。

源界明朝です。YouTubeのサムネでよく見るフォントですね。

これもホラー系ではよく使われていますが、縁取りをすると途端に安っぽくなるフォントでもあるので、怖い雰囲気を大事にしたい場合は個人的にはそのまま使った方が良いような気がします。

Nemukeフォント!です。会話の中でピンポイントで使われる事が多いような気がします。

怨霊(おんりょう)フォントです。個人的にはゲーム実況とか切り抜き動画とかで使われているイメージがありますが、ホラー系の動画では必ずと言っていいほど高頻度で使われている程に知名度が高いフォントだったりします。

g_コミックホラー恐怖(R)-教漢版です。ホラー特化型のフォントで、そっち系の中でもトップクラスのクオリティを誇ります。個人的にお気に入りのフォントなので紹介してみました。

他にもホラー系のフォントは色々とありますが、廃墟とかオカルト系の動画を量産したいという人以外なら、とりあえずこの5つぐらいを入れておけば当分は困らないと思います。

正直、普通のフォントと比べてホラー系は意図的に文字を崩している関係で視認性という点においては一歩劣りますので、サムネに使うか会話の中でピンポイントに使用するぐらいにしておいた方が無難です。

全編にこのフォントを使ってしまうと、流石に読みにくくて視聴者が離脱する確率が上がるかも知れません。(少なくとも私なら避けます。)

って事で、本日の記事は以上となります。

まあ、まだ書く事はあるんですが、あんまり長くなっても読む人が大変でしょうから、キリの良い所で終わりにしておきましょう。

何か予想以上に長くなりましたからね。

続きはその内に書くであろう第二回目に記述する予定です。

ここまで読んでくださった方はありがとうございます。

お疲れ様でしたわ。

他のAviUtl関連の記事はこちらからどうぞ。

他のテキスト関連の記事はこちらからどうぞ。

他のAviUtlプラグイン紹介記事はこちら

AviUtlスクリプト紹介記事はこちらです。

新規でブログを作りたい方はこちらのレンタルサーバーがお薦めです。⇒≪新登場≫国内最速・高性能レンタルサーバー【ConoHa WING】

動画編集、3Dモデリング用のパソコンをお求めの方はこちらがお薦めです。⇒BTOパソコンのサイコム

スポンサーリンク

今回の経費&記事作成時間&日記

今回の記事作成時間&支出

記事作成時間:約5時間

さて、今回は使えそうなテキスト文字を色々と作ろうといった記事だったので、その過程で普段は全然自分からは見ようとしない有名な人達の動画を参考という名目で見る事になった訳なんですが。

テレビ並みにテキストをメチャクチャ凝っている人もいれば、特に動きとかも加えていないシンプルな単独縁取り文字でフォントもフリーのものしか使っていない人もいて千差万別だったりします。

つまり、別にテキストに凝らなくても視聴者を集める事は可能なんですね。

まあ、凝りまくった豪華なテキスト文字の方が目を引くのは確かですが、動画作成とかした事がない一般人だと、それを見ても別に何とも思わないのが現実だと思います。

実際、私が動画作成とか全然知らなかった頃の記憶だと『テキストなんて内容だけ解れば見てくれは何でもいい』くらいの感覚でしたからね。

私の周囲の一般人(デザインや動画作成経験なし)10人に聞いてみたら、似たような意見が多かったので……多分、普通の人はテキスト文字の外見には大して興味ないんじゃないかと思います。

そのあたりを鑑みると、個人的には動画内容が面白ければテキスト文字とか極度のクソダサ配色や視認性が極悪じゃなければなんでも良いんじゃないか、というのが正直な所だったりしますね。

何というか、今回の記事内容を微妙に否定しているような気がしますけど、要はテキスト文字に凝る前に他人が見て面白い動画を作れるようになる方が遥かに有益なんじゃないかという事をお伝えしたかった訳です。

編集技術が凄くても内容が全く面白くない動画とか沢山ありますからね。

技術的には興味深いので、そういったものでも私は面白さを度外視して見る事が多いですけど、再生数自体は伸びていないものが大多数だったりします。

私の場合は編集技術も低く、面白い動画も作れない上に作成速度も遅いので、今後は地獄のような先行きだったりしますけど、とりあえず強く生きていこうと思います。

立ち絵が全部完成したら試作動画を幾つか作ってみて、師匠達に監修してもらいながら修行でもしましょうかねー。それで面白いものが作れるかどうかは解りませんけど。

って事で、想定外に長くなりましたが本日は以上ですね。

最後に恒例の累計出費&記事作成時間を発表して終わりにしましょう。

現在までの総制作時間&累計支出

総制作時間:約2117時間
累計支出:72,842円

タイトルとURLをコピーしました