VideoScribe で日本語表示する方法【まるで書くような文字を作れます】

ホワイトボードアニメーションをわりと簡単に作れて、わりとコスパよく作れるサービス「VideoScribe」。なんですが、日本人として一番の難点は、日本語対応ではないということ。

ツール自体が日本語対応ではないくらいなら良いのですが、せっかくのアニメーションに対して「日本語」を表記することもできないんですよね。

ただ「VideoScribe」は SVG 画像をアップロードできるので、「Adobe Illustrator」を使って日本語表記の SVG 画像を作ってしまえば、まるで書くような漢字でも平仮名でも作ることができます。

ということで、この記事では「Adobe Illustrator」を使った方法を紹介するので、プランに申し込むか「無料体験」で作ってみてください。

「VideoScribe」で使える日本語を作る

「Adobe Illustrator」は、ロゴの作成やイラストの制作、地図やグラフなどを作る「プロ」も愛用するツール。なので、使ったことがない人からすると機能が充実しすぎるほど充実しています。

ですが、td「VideoScribe」用に日本語を作るのは機能を何個かしか使わないので、初心者でも簡単に作ることができます。ただコツがいるので、何度か作って覚えていけば良いと思います。

まずは文字を入れる

「Adobe Illustrator」を立ち上げたら、まずは「新規作成」から始めます。大きさは特に気にする必要がないので、500 × 500px とかで十分です。

「作成」ボタンを押して真っ白な下地が表示されたら、まずは文字を入れ作業を開始します。

文字を入れるには、左にあるtd「T」のボタンを押してから真っ白な下地のどこかをクリックします。すると、「山路を登りながら」と表示されるはずです。

Adobe Illustrator

その「山路を登りながら」を表示させたい文字に変更してださい

プロパティで文字を編集

文字を変更させたら、作業がしやすいように文字を少し変えていきましょう。

右側に編集カテゴリーがいくつかあるので、その中から「プロパティ」を選択。そうしたら、文字をアクティブな状態にしてから「大きさ」と「不透明度」を調整していきましょう

Adobe Illustrator

「T」が重なったようなところでは、デフォルトが 12pt になっているはずです。これを、好きな大きさまで数値を上げてみましょう。

「不透明度」は、この文字の上に文字を描いてく形になるので、分かりやすくするために少し透明にしておきます。デフォルトが 100% になっているので、50% とか 30% とか好きな数値に変えてください。

レイヤーを追加する

文字の設定が完了したら、次はその上にレイヤーを追加します。つまり、文字を書いた紙の上にもう1枚紙を置いて、なぞる作業をこれから行います

Adobe Illustrator

右下にあるをクリックすると新規のレイヤーが追加されるので、ひとまずポチッと押してください。

すると、「レイヤー2」が追加されるはずです。

MEMO
「レイヤー1」の「 」の右側が空欄になっていると思いますが、そこをクリックしてみてください。

すると、「 」が表示されます。こうすることで、上書きできないように保護しておくことができます。

ペンツールを使って文字を描く

「レイヤー2」をアクティブにしたら、(ペンツール)」をクリックします。そうしたら、「レイヤー1」の文字の上からなぞっていきます。

Adobe Illustrator

リョウ

ペンツールでなぞる場合には、書き順に気をつけてください。書いた順番にアニメーションも動くので、漢字では特に順番を気にしておきましょう。

基本的な流れとしては、点と点をつないで直線を増やしていきます。その際に、別の線を描き始める時には「enter」を押すと一旦途切れます

それを、何度か続けながら文字を描いていきます。ペンツールは直線しか描けませんが、後でその線を曲げられるので気にすることはありません。

デフォルトでは文字の太さが細いので、右のカテゴリー「線」を選択して、線幅を調整。線端角の形状を丸いものにすると、角のない柔らかい文字になります。

Adobe Illustrator

次に、文字の色は左下に設定場所があります。左の は全体を塗りつぶすことになるので、これを「」に

そして、右の枠の は黒などの色を選びます

文字を全て線で描けたら、次は「 (ペンツール)」を右クリックしてください。すると、他のツールが表示されます。

その中の「アンカーポイントツール」をクリックします。そうしたら、曲げたい線を真ん中あたりを摘むようにして動かすと、そのまんま線も曲がり始めます。

Adobe Illustrator

それを繰り返しながら、文字を形成していってください。

レイヤー1を削除

文字を作り終えたら、「レイヤー1」を削除します。

右下にがあるので、それをクリックして「レイヤー1」を削除してください。

Adobe Illustrator

リョウ

間違っても、「レイヤー2」を消さないように! ちゃんと「レイヤー1」がアクティブになっていることを確かめてから削除してくださいね。

作った文字を保存する

「レイヤー1」を削除したら、いよいよ作った文字を保存します。

まずは「ファイル」から「別名で保存」を選択します。

Adobe Illustrator

保存場所は好きなところで良いですが、ファイル形式は「SVG(svg)」を選んでから「保存」ボタンを押してください

Adobe Illustrator

そうしたら、次は SVG 画像をどのようにして保存するのか設定する画面が表示されるので、下記のようにして設定して保存しましょう。

Adobe Illustrator

SVG オプション
  • SVG プロファイル:SVG 1.1
  • フォント:SVG
  • CSS プロパティ:プレゼンテーション属性

上記だけは変更しておきたい部分となるので、それ以外は特に触らなくて大丈夫です。これらを設定して右下の「OK」を押せば、「VideoScribe」用の日本語作成は完了となります。

「VideoScribe」に日本語をアップロード

「Adobe Illustrator」で日本語作成できたら、さっそく「VideoScribe」を立ち上げて日本語を書くようなアニメーションになるのか確かめてみましょう。

作った文字をアップロードする

「VideoScribe」を立ち上げたら、右下のをクリックします。

Adobe Illustrator

そうしたら画像の一覧が表示されるんですが、そのポップアップの左下にある 」のマークを押したら先ほど保存した SVG 画像をアップロードすることができます

これで、「VideoScribe」で日本語を表示させる方法は完了となります。

さいごに

最初は少し手間がかかって、1フレーズ文字を作るだけでもかなり時間がかかるかもしれません。でも、慣れてくるとササッと作れるようになってきます。

日本語対応になっているホワイトボードアニメーションのツールもありますが、異常なほど高かったりするのでこの方がコスパは良いと思います。

日本語をどうしても表示したかったという人は、ぜひ参考にしてみてください。

動画でもちょっと解説してみました

動画の作り方ということもあり、文字だけでは分かりづらい部分もあるかと思うので、動画でも解説してみました。

VideoScribe

上記の内容と併せて参考にしてみてください。

VideoScribe 用に SVG 素材を配布するサイト「すくらいぶや」を始めました

追記:VideoScribe のオンライン講座を始めました

Venkyo

これまでに、VideoScribe に関するハウツー動画を Youtube に投稿してきましたが、質問が日に日に増えてきたこともありオンライン講座を始めました。

それに伴い、オンライン学習サイト「Venkyo(ベンキョー)」も立ち上げています。

まずは「VideoScribe 基礎コース」だけしかありませんが、「日本語表示コース」「応用コース」なども近々公開予定です。

ぜひ、ご利用ください!

オンライン学習サイト「Venkyo(ベンキョー)」は、こちら

オンライン学習サイト「Venkyo(ベンキョー)」を始めました