場面のつなぎを自分で書いたら、尺の計算を間違えた
重なっている時間ぶん全体が短くなります。手で計算すると必ずどこかでずれるので、任せることにしました。

この記事の結論
- つなぎは、2つの場面が重なっている時間のこと
- 重なるぶん、全体の長さは短くなる
- 手で計算すると、場面を1つ足すたびに全部ずれる
- つなぎは、2つの場面が重なっている時間のこと
- 重なるぶん、全体の長さは短くなる
- 手で計算すると、場面を1つ足すたびに全部ずれる
場面の切り替わりを作った。最初は自分で書いて、尺の計算で詰まった。
何が難しいのか
場面を順に並べるだけなら簡単だ。1つ目が0〜45、2つ目が45〜90。
ところが「重ねながら切り替える」と、45フレーム目から15フレームぶん2つが同時に映る。2つ目の開始は45ではなく30になる。3つ目、4つ目と進むほど、ずれが積み上がる。
自分で書いて間違えた
最初は開始位置を手で書いた。4場面なら、0・30・60・90。全体の長さは135。
ここで場面を1つ増やすと、後ろ全部の数字を書き直すことになる。1か所でも直し忘れると、そこだけ映像が飛ぶか、黒い画面が入る。実際に1つ忘れて、原因を探すのに時間を使った。
任せたら考えることが減った
つなぎ用の仕組みを使うと、重なるぶんを自動で引いてくれる。
書くのは「各場面の長さ」と「つなぎの長さ」だけでよい。開始位置という概念が消える。場面を途中に1つ挿しても、後ろは何も直さなくてよい。
全体の長さの出し方
長さは引き算で出る。
45 × 4 - (15 + 15 + 15) = 135場面の合計から、つなぎの合計を引く。これを知らずに180と書いていたので、最後に45フレームぶんの黒い画面が残っていた。プレビューの最後まで見ないと気づかない種類の間違いだ。
3種類を比べて
| 種類 | 向く場面 |
|---|---|
| 重ねて消す | 場面の関係が薄いとき。いちばん無難 |
| 押し出す | 順番や進行があるとき |
| めくる | 対比を見せるとき |
迷ったら重ねて消す。押し出すは方向に意味が出るので、戻る場面で右から押し出すと違和感が残る。
つなぎの長さ
15フレーム、つまり0.5秒にした。
- 短すぎると、切り替わったことに気づかない
- 長すぎると、どちらの場面も読めない時間が増える
- 文字が載っている場面では、短めのほうがよい
文字を読ませる動画では、つなぎは短いほどよかった。重なっている間は、どちらの文字も読めないからだ。
間違いに気づけた理由
黒い画面が最後に残っていたことに気づいたのは、書き出したファイルを最後まで見たからだった。
作業中はプレビューで気になる場面だけを行き来するので、終わりまで通して見ることが少ない。書き出したあとに一度は通しで見るのを手順に入れた。10秒の動画なら10秒で済む確認で、これをしないと公開後に気づくことになる。
場面の数を先に決める
作りながら場面を足していくと、つなぎの種類もばらばらになった。
先に「4場面」と決めてから中身を考えると、1場面に入れる情報量が自然に決まる。入れたいものが5つあるなら、どれかを捨てるか、場面を5つにするかを最初に決める。あとから足すと、全体の長さも見直すことになる。
つなぎを入れない選択
4場面のうち、1つはあえて何も入れずに切り替える作り方も試した。
ぱっと切り替わるほうが速くて小気味よい場面もある。つなぎは「入れると良くなる」ものではなく、必要なときだけ入れるものだった。全部につなぎを入れると、動画全体がもったりする。
動きの付け方で印象が変わる
押し出すときだけ、速さの変化を変えている。等速で押し出すと機械的だが、最初に速く動いて終わりで減速すると、物が滑ってきて止まったように見える。
重ねて消すほうは等速のままにした。濃さが変わるだけの動きに、速さの変化を付けても伝わらない。
あわせて読む
- Remotionを入れて、最初の動画を書き出すまでにやったこと — Reactで動画を書くRemotionを入れました。手順は2つですが、記事に書かれていない前提がいくつかありました。
- 控えの取り方を決めた話 — 取っているつもりで取れていなかったので、見直しました。
- 引き継いだコードを、どこから読むか — 人が書いたものを触る前に、読む順番を決めました。
まとめ
つなぎで難しいのは見た目ではなく、時間の計算のほうだった。自分で書くと場面を足すたびに全部直すことになる。仕組みに任せて、考えるのを「各場面の長さ」と「つなぎの長さ」の2つに減らしたら、作り直しが楽になった。
関連記事
RELATED
引き継いだコードを、どこから読むか
人が書いたものを触る前に、読む順番を決めました。
Remotionを入れて、最初の動画を書き出すまでにやったこと
Reactで動画を書くRemotionを入れました。手順は2つですが、記事に書かれていない前提がいくつかありました。
半年で身についた作業の順番
コードを書く作業の進め方が、固まってきました。