VideoScribeに日本語フォントの文字を挿入する方法




VideoScribeに日本語フォントに非対応?

気軽にホワイトボードアニメーションを作れる VideoScribe

まるで操作性がパワーポイントのようでわかりやすく、動画編集ソフトよりも圧倒的に敷居が低く、初心者にもオススメのソフトです。

 

ただし、そんなVideoScribeにも欠点が!!

それは、

日本語フォントに未対応

ということ。

現状では

  1. 英語
  2. スペイン語

の2カ国語しか対応していません。

日本語のテキストは英語やスペイン語と同じように表示できないんですね。

 

一応、日本語のフォントを追加してテキストとして入力しようとするところまではできます。

ただし、実際に日本語を試しに打ってみると、このようなエラーが出ちゃうんですね。

Unable to display text

ただし、

「ええええええ、じゃあVideoScribeでは日本語絶対に挿入できねえのかあああああ」

と諦めるのはまだ早いです。

VideoScribeでもし、本当に、日本語のテキストを挿入したかったら、

日本語の文字を「画像として」ホワイトボードに挿入すればいいのです。

どういう画像がいいのか?

それじゃあどういう画像ファイルで挿入すればいいのでしょうか?

ご存知の通り、画像ファイルは主に

  1. JPG
  2. GIF
  3. PNG

という3種類あります。

ぶっちゃけ、どのファイルでも日本語文字の画像を制作できますが、おすすめなのが「PNG」。

なぜなら、画質を落とさずに背景を透明にできるから、ですね。

日本語の文字をまずはPNGの画像ファイルで作成することを目指しましょう。

 

それでは、なぜ、背景が透明にすべきなのか?

それは、背景が透明ならばVideoScribeのホワイトボード上にある他の要素と被っても問題が生じないからです。
Image from Gyazo
他と文字画像が重なっても、文字の背景が透明なので、自然にテキストの表現をできます。

もし、背景に色が入っていると、要素同士が重なった時に違和感が出てしまいますからね。

 

VideoScribe向け日本語文字画像の作り方

「なるほど、PNGで日本語の文字の画像を作って挿入すればいいのね・・・・」

でもでも、

「一個一個の文字をすべて画像にするなんてだるいよ・・・・」

と思うかもしれません。

 

そうです。

 

正直、だるいです。

だるいかだるくないかで言ったら圧倒的にだるいんです。

 

Illustratorの「選択範囲を書き出し」を使おう

しかし、「ある方法」を使うと、少し負担が軽減されるのです。

それは、イラストレーターの「選択範囲を書き出し」です。

Illustrator上で選択状態にあるオブジェクトを、すぐに画像ファイルとして書き出せる機能なんですね。

 

具体的にいうと、その方法を紹介しましょう。

まずイラストレーターのキャンバス上で文字をテキストツールで挿入。

選択ツールで選択状態にしてから、右クリック。

 

Image from Gyazo

メニューから「選択範囲を書き出し」を選び、「アセット書き出し」とすればすぐに文字の画像ファイル化できます。

この時、

  • ファイルの保存先
  • 名前の前に付ける「プレフィックス」

を決めておくといいでしょう。

Image from Gyazo

プレフィックスを決めると、のちのち画像ファイルのリネームをしなくてすみますから。

 

下書きファースト

しかし、です。

文字をイラストレーターのキャンバス上に書いて、いちいち、ちまちま、文字を画像にしていくのは面倒くさいですよね。

僕がオススメするのは、

ホワイトボードの下書きをイラストレーター上で作成してしまう方法。

下書き時に配置したテキスト要素を、VideoScribeで動画制作する前に一気に文字画像として書き出していくのです。

 

この方法ならば、

  • 文字を書く
  • 画像として書き出す

という作業を別々に、まとめて一気にできるので、同じ作業を集中的におえられ、作業効率が良くなります。

 

僕はVideoScribeで制作を始める前に、イラストレーターのアートボードを20枚ほど用意したイラレのファイルをまずは作成します。
Image from Gyazo
その上で、ホワイトボードアニメーションのVideoScribeのカメラに映し出さ様子を画像や文字などをそれぞれのシーンごとに置いていきます。

いわゆる絵コンテってやつですね。

 

そして、それぞれのシーンに置かれた文字を「選択範囲を書き出す」を使って画像にしていくのです。

それらの画像をVideoScribeで読み込んで、ホワイトボード上に設置していけばいいのです。

これならば日本語の文字が多い、ホワイトボードアニメーションでも比較的負担が少なく制作できるでしょう。

 

自然なドローイングに近づける方法

ただし、この方法ではあくまでも日本語の文字を画像として挿入しています。

そのためあってか、普通にペンを持った手で文字を描くアニメーションを適用すると、違和感が残ります。

Image from Gyazo

 

手なしクレヨンが最適

どうやら、画像を表示する時のアニメーションと、文字を表示する時はアニメーションは少し異なっているようです。

 

そこでおすすめなのが、

手がないクレヨンを使うアニメーション。

Image from Gyazo
ペンでもなくクレヨンにすると、まるで色を塗っているかのようなアニメーションの出来上がり。

文字の画像を表示するには最適なアニメーション方法です。

しかも、VideoScribeにはクレヨンが7色もあるので、場合によって色を使い分けること可能。

 

横に長すぎる文字に注意

そして、文字は横に長すぎない方がいいです。

なぜなら、アニメーション時に「左上の角」が欠けている表示になってしまうからです。
Image from Gyazo

実はこれ、VideoScribeのソフトの画像の表示仕様のためです。

VideoScribeでは表示方法に「Draw」を選んだ場合、画像の四隅を最後に表示する仕様になっています。

もし、四隅付近に文字情報が入っていると、文字が欠けてしまって違和感が残ります。

したがって、左上角をかけさせないために、

  • 長い文章は2行で別々に表示
  • テキストの一番左にあえてスペースを入れる

などをして、文字の欠けない配慮が必要です。

 

ムーブイン・フェードインを活用

という感じで、文字の画像の表示は案外難しいので、ドローイングだけでなく、時々

  • ムーブイン
  • フェードイン

による表示を活用するのでもありです。

Image from Gyazo
これなら文字画像の角がが欠ける心配もありませんし、自然なアニメーションに仕上がりますからね。
Image from Gyazo

英数字はテキスト入力

このように、VideoScribeでは日本語の文字を表示するのに少しばかり手間がかかります。

したがって、

なるべく英語で書けるものは英語で書くと楽です。

Image from Gyazo

あとは、数字ですね。数字も数字としてテキストで入力しましょう。
Image from Gyazo
英数字はわざわざ画像化する必要はありません。

 

おそらくVideoScribeが日本語対応する日はこないでしょう

このように、日本語の文字はVideoScribeでは画像として挿入せざるを得なくなっています。

自然にテキスト挿入できる英数字と比べると、日本語アニメーションの質が下がってしまいますね。

今後、VideoScribeが日本語に対応するかどうか正直わかりません。

 

僕は、恐らくそれは不可能だと思っています。

なぜなら、日本語のテキストアニメーションを完璧に再現するために手間がかかるからです。

例えば、漢字のテキストだったら、漢字の書き順に忠実でなければ不自然なアニメーションが出来ちゃいますし、常用漢字だけで2000文字あるので、アルファベット26文字と比べるとその手間は計り知れません。

 

しかも、このVideoScribeを作っているのは日本人ではなく、イギリスの「Sparklol」という会社。

圧倒的に英語圏なので、まず、この超厄介な日本語のアニメーション制作に手は出さないでしょう。

今後、VideoScribeが日本語に対応する奇跡を待つより、日本語を画像として挿入する技をマスターしたほうが色々早そうです。

今から積極的にVideoScribeを用いて、ホワイトボードアニメーションを作っていきましょう。

 

それでは!

Ken



AEの作業を効率化!
After Effectsのショートカットポスター

Adobe動画制作ソフトAfter Effectsで便利なショートカットキーを把握できるショートカットキーポスターをどうぞ。




コメントを残す

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