文字の出し方を4つ並べて、どれを使うか決めた

• 同じ文字を4通りの出し方で並べて比べた
• 見た目の派手さではなく、読み終わる速さで選ぶ
• 長い文は1文字ずつにしない

文字を動かす方法はいくらでもあるが、どれがよいか文章では分からない。同じ文字で4通り作って、並べて見た。

1. 下から持ち上げる

枠で切っておいて、文字を下から押し上げる。いちばん速く読み終わる。

見出しに向く。全部の文字が同時に出るので、読む側は1回の視線で終わる。迷ったらこれでよい。

2. 1文字ずつ出す

短い言葉には効くが、長い文に使うと最後まで読めない。

今回の11文字でも、全部出るまでに1秒近くかかった。20文字を超える文では、読む側が先頭を忘れる。キャッチコピーのような数文字に限ったほうがよい。

3. 打ち込む（タイプライター）

カーソルが点滅しながら1文字ずつ出る。「いま書いている」感じが出るので、作業の実況には合う。

ただし速度の調整が難しい。速すぎると1文字ずつにした意味がなく、遅いと退屈になる。今回は1.2秒で全部出るようにした。

4. マスクで払う

文字そのものは動かさず、見える範囲を左から右へ広げる。動きが静かなので、下に別の情報があるときに邪魔をしない。

補足やキャプションに向く。持ち上げより控えめで、しかし出てきたことは分かる。

使い分けの基準

どれにも共通する注意

CSSのanimationやtransitionは使えない。画面上では動いて見えるのに、書き出すと止まったままになる。

原因は、Remotionが1コマずつ時間を止めて描いているからだ。ブラウザのアニメーションは「時間が流れていること」を前提にしているので、止まった時間では進まない。

代わりに、いま何コマ目かを受け取って、その数から位置や濃さを計算する。慣れるまで面倒に感じるが、何秒目にどうなるかが数字で確定するので、やり直しは楽になる。

日本語で詰まった点

1文字ずつ出す書き方で、最初は英語の感覚で作ってうまくいかなかった。日本語は1文字が重い。

英語なら1文字は意味を持たないが、日本語の漢字は1文字で意味が立つ。1文字ずつ出すと、意味が途中で変わって見える瞬間がある。「試して」まで出た時点と「試して分かった」まで出た時点で、読み手の理解が変わってしまう。

対策として、句読点でまとめて出す形も試した。読みやすくはなったが、今度は動きが止まって見えた。結局、日本語で1文字ずつ出すのは短い言葉に限るという結論になった。

速さの決め方

最初は全部0.5秒で作って、速すぎた。

• 見出しは0.8秒くらいが読みやすかった
• 補足は0.6秒でも追える
• 1文字ずつは、1文字あたり0.08秒を超えると遅く感じる

数字で書けるので、気に入った値はそのまま次でも使える。これが手で付ける編集ソフトとの大きな違いだった。

4つを同時に出して比べた理由

順番に1つずつ見せる作り方もあったが、やめた。比べたいものは、同じ画面に置かないと比べられない。

動画は戻れないので、1つ目を見終わる頃には最初の印象が薄れている。4分割にして同時に走らせると、速さの違いがそのまま目に見えた。これは静止画やテキストでは出せない見せ方だった。

背景は動かさない

文字の出し方を比べる動画なので、背景の方眼は最初に一度引かれるだけにして、あとは止めた。

背景も動かすと、どちらの動きを見ているのか分からなくなる。伝えたいものが動いているときは、ほかを止める。当たり前のようだが、作っているうちに全部動かしたくなるので、意識して削った。

まとめ

派手な出し方ほど読むのに時間がかかる。動画の文字は読ませるためにあるので、まず読み終わる速さで選ぶ。そのうえで、場面に余裕があるときだけ凝ればよい。