単調さを消す動きの演出

数字、タイトル、遷移に小さな動きを足し、単調さを消す短尺デモ。

1本目を見せたとき、最初にもらった感想は「悪くはないけど、単調じゃない？」でした。

悔しいですが、図星でした。

全シーンが同じ入り方（見出しが弾む→ピルが出る→フェードで次へ）だったのです。部品が揃っていても、動かし方が一本調子だと飽きる。

このレッスンは、そのとき実際に効いた7つの処方箋です。最後に、動きの「性格」を決めるspringという仕組みの読み方も覚えます。これを知ると「もっときびきび」「もっとしっとり」が数字で指示できるようになります。

処方1：数字はカウントアップさせる

「282レッスン」と書いてある画面より、0から282へ駆け上がる数字のほうが、視線を3秒つかまえます。

仕組みは単純で、コマ番号に応じて表示する数を増やしているだけです。

const count = Math.round(
  interpolate(frame, [12, 64], [0, 282])
);
// 12コマ目から64コマ目（約1.7秒）かけて 0 → 282

interpolate は「コマ12のとき0、コマ64のとき282、その間はなめらかに補間」という意味です。指示はこうなります。

統計カードの数字は、登場から1.5秒かけて0から実数まで
カウントアップ。桁がガタつかないよう等幅数字で。

「等幅数字」を忘れると、1→11→111 と桁が増えるたびに数字が左右に揺れます。地味ですがプロとの差が出る箇所です。

タイトル全体がふわっと出るのと、1文字ずつ時間差で弾みながら出るのとでは、冒頭1秒の引きが違います。

仕組みは、文字列を1文字ずつに分解し、i番目の文字の開始を「3×i コマ」遅らせるだけです。

タイトルは1文字ずつ、3コマずらしで弾みながら登場させて。
2行目は色を変えて、1行目より遅れて始めて。

ずらし幅の目安は2〜4コマです。1コマだと同時に見え、6コマを超えるとまだるっこしくなります。

フェード切替は無難ですが、連続すると眠くなります。代わりに使うのがサークルワイプです。次のシーンのアクセント色の円が画面を覆い、中心から開いていく。

シーン切替はフェードではなくサークルワイプに。
次のシーンのアクセント色の円が、中心から0.5秒で開く。
切替のたびに色が変わるようにして。

ワイプの色がシーンごとに変わるので、ワイプ自体が「章が変わった」の合図になります。切替時間は0.5秒前後が目安です。1秒かけると、切替のたびに動画が止まって見えます。

プロの映像は、静止しているように見えるシーンでも、どこかが微かに動いています。

これらは全部、sinカーブ（ゆっくり往復する波）か、ごく緩い直線変化で書けます。

全部品に「常時微動」を入れて。
背景ドットは斜めにドリフト、ピルは上下2pxで漂い、
ウィンドウ内の画像はシーン中ゆっくり6%ズーム。
どれも「言われないと気づかない」強さで。

最後の1行が肝心です。微動は気づかれたら負けです。気づかれない動きの総和が「画面が生きている」感覚を作ります。

マスコットを毎シーン同じ場所に同じポーズで置くと、ただのスタンプになります。シーンごとに位置・向き・ポーズを変えるだけで、画面に物語が生まれます。

私の場合、1本目は手描きのおばけでしたが、2本目で自社の3Dマスコット（Woo）に差し替えました。差し替えの手順は3ステップです。

マスコットを添付の透過PNG4枚に差し替えて。
タイトルでは手を振るポーズ、項目シーンでは読む/作業/座るを
内容に合わせてローテーション。
左右交互レイアウトに合わせて立ち位置と向きも反転して。

すでにブランドのキャラクターを持っているなら、必ずそれを使ってください。動画が一気に「自社のもの」になります。

前のレッスンで触れた左右交互レイアウトと進捗ドットも、実は動きの処方です。位置の変化はそれ自体がアニメーションであり、進捗ドットは「動画が前に進んでいる」ことを常時知らせる装置です。

仕上げに、ひとつだけコードの読み方を覚えます。Remotionの動きの大半は spring（バネ） で書かれています。

const pop = spring({ frame, fps, config: { damping: 11 } });

急所は damping（減衰）の数字、ただひとつです。

つまりこう指示できます。

ピルの登場をもっときびきびさせたい。dampingを13から10に。
字幕バーは逆に落ち着かせたい。dampingを200のままで速度だけ上げて。

「弾むか、しっとりか」をdampingで言い分けられれば、動きの指示はもう自由自在です。

処方を入れる前（1本目）のタイトル画面を載せます。

冒頭の処方2の画像（改善後）と見比べてください。

部品は同じでも、動きの設計で印象が変わります。素材を変えずに、時間の使い方だけで品質は一段上がります。

3行で振り返ります。

次のレッスンは音です。実は、ここまでの動画はまだ無音。音が入ると、体感品質がもう一段跳ねます。

レッスン2の動画に処方を入れます。