Remotionで作る高速タイポグラフィモーションの作り方：Reactコードで“あっと驚く”動画オープナーを作る

Remotionで作る高速タイポグラフィモーションの作り方 Remotion

＜PR＞

Remotionで“見た瞬間に止まる”モーションを作る理由

今回作ったもの

今回は、Remotionで16:9の高速タイポグラフィモーションを作りました。

ただ文字をフェードインさせるだけではなく、白フラッシュ、高速カット、巨大タイポ、分割パネル、疑似グリッチ、画面揺れ、最後の急停止を組み合わせています。

目的は、実用的なテンプレを作ることではありません。

まずは、XやYouTubeで見た瞬間に「え、これRemotionで作ったの？」と思ってもらえるような、見せるためのモーションを作ることです。

完成イメージとしては、冒頭0.3秒で画面が白く光り、巨大な英単語が高速で切り替わり、背景が揺れながらズームし、最後にタイトルが強く着地するような映像です。

After Effectsのテンプレサイトでよく見るような、スポーツ、音楽、プロモーション動画向けの強いオープナーに近いカテゴリです。ただし、既存テンプレのデザインや動き、レイアウトをコピーしているわけではありません。参考にしたのは、あくまで「高速タイポ」「ショック系オープナー」「グリッチ」「強い導入」というカテゴリや用途です。

今回のポイントは、Remotionでこうした演出をReactコンポーネントとして作れることです。

なぜRemotionで作るのか

Remotionは、Reactで動画を作るためのフレームワークです。

通常の動画編集ソフトでは、タイムライン上でキーフレームを打って動きを作ります。一方Remotionでは、現在のフレーム番号を使って、文字の位置、透明度、拡大率、回転、色、揺れなどをコードで制御します。

たとえば、0フレーム目から10フレーム目までは白フラッシュ、10フレーム目から40フレーム目までは高速カット、60フレーム目以降はタイトルを急停止させる、というように、時間ごとの動きをコードで決められます。

これがテンプレ制作と相性が良い理由です。

一度コード化しておけば、次からは title、subtitle、themeColor、speed などのpropsを変えるだけで、別の作品として使い回せます。

今回のような派手なモーションは、最初は少し難しく見えるかもしれません。でも中身を分解すると、やっていることは意外とシンプルです。

  • フレーム番号を取得する
  • そのフレームに応じて数値を変える
  • 数値をCSSのtransformやopacityに渡す
  • 最後にCompositionとして登録して書き出す

この流れが分かると、Remotionで作れる動画の幅がかなり広がります。

今回のモーションの使い道

今回のモーションは、実用性よりもインパクト重視です。

使い道としては、次のようなものが考えられます。

  • YouTube動画の冒頭オープナー
  • AI動画作品のタイトル
  • 音楽系、スポーツ系、プロモーション系の導入
  • Remotionで作れる表現を見せるポートフォリオ
  • note販売前の反応確認用プロトタイプ

初投稿のように、まず認知を取りたい場面では、便利さよりも「画面が止まるか」が大事です。

そのため今回は、読みやすさだけを優先するのではなく、動きの大胆さ、速さ、緩急を優先しました。

既存テンプレを丸パクリしない考え方

プロ向けのAfter Effectsテンプレサイトを見ると、魅力的なタイトルアニメーションやオープナーがたくさんあります。

ただし、既存商品のデザイン、動き、レイアウトをそのまま真似するのは避けるべきです。

参考にしてよいのは、以下のような部分です。

  • どんなカテゴリの商品があるか
  • どんな用途で使われているか
  • 何を差し替えられるようにしているか
  • 何本セットの商品構成になっているか
  • プレビュー動画でどう見せているか
  • 販売ページでどんな導線を作っているか

今回のRemotion作品も、カテゴリとしては「高速タイポグラフィ」「ショック系オープナー」を参考にしています。

しかし、見た目、構図、動き、タイミングはRemotion向けにオリジナルで再構築しています。

ここはテンプレ販売を考えるうえでも重要です。参考にするのは市場の作り方であって、完成品そのものではありません。

Remotionで高速タイポグラフィを作る手順

全体構成を決める

今回のCompositionは、16:9の横長動画です。

設定は以下です。

<Composition
  id="WowKineticOpenerWide"
  component={WowKineticOpener}
  durationInFrames={120}
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{
    title: 'REMOTION HITS HARD',
    subtitle: 'Fast cuts, giant type, flash frames, and code-built motion.',
    accentText: 'CODE-BUILT MOTION / FIRST DROP',
    themeColor: '#ff2d55',
    backgroundColor: '#050509',
    durationFrames: 120,
    speed: 1,
  }}
/>

120フレーム、30fpsなので、動画の長さは4秒です。

4秒という短い尺の中で、次のように動きを分けています。

  • 0から10フレーム: 白フラッシュと巨大文字
  • 10から38フレーム: 高速カットと分割パネル
  • 38から76フレーム: ズーム、回転、破片のような短冊
  • 76から120フレーム: 急停止してタイトルを見せる

初心者がRemotionでモーションを作るときは、いきなりコードを書き始めるより、先に「何フレーム目で何を起こすか」を決めると作りやすくなります。

今回のプロンプトも、見た目だけでなく時間ごとの動きを指定しています。

Remotionで16:9の短尺モーションを作ってください。

目的は、X投稿の冒頭で目を止めることです。
実用性よりも「魅せる」ことを優先してください。

要件:
- 1920x1080
- 30fps
- 4秒
- 冒頭0.3秒で白フラッシュ
- 高速カット
- 巨大タイポグラフィ
- 分割パネル
- 疑似グリッチ
- 画面揺れ
- 最後は急停止してタイトルを残す
- useCurrentFrame / interpolate / spring / AbsoluteFill を使う
- title, subtitle, themeColor, speed をprops化する

このように「どんな雰囲気にしたいか」だけでなく、「いつ、何が、どう動くか」まで書くと、Remotion向けの指示としてかなり具体的になります。

useCurrentFrameで時間を扱う

Remotionの基本は、現在のフレーム番号を取得することです。

const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const f = frame * Math.max(speed, 0.2);

useCurrentFrame() は、今が何フレーム目かを返します。

useVideoConfig() は、fpsや画面サイズなど、Compositionの設定を取得できます。

ここでは speed というpropsも使っています。speed を変えると、同じモーションでも速くしたり遅くしたりできます。

const f = frame * Math.max(speed, 0.2);

このようにしておくと、販売テンプレ化するときに「速度を変えられるテンプレ」として見せやすくなります。

Remotionテンプレを作るなら、文字や色だけでなく、速度も差し替え可能にしておくと便利です。

interpolateでフラッシュ、ズーム、揺れを作る

Remotionで一番よく使う関数のひとつが interpolate() です。

これは、フレーム番号をもとに数値を変換するための関数です。

今回の白フラッシュは、次のように作っています。

const flashOpacity = interpolate(
  f,
  [0, 4, 10, 18],
  [1, 0.15, 0.85, 0],
  clamp
);

0フレーム目では透明度1、4フレーム目で少し弱まり、10フレーム目でもう一度光り、18フレーム目で消えます。

これにより、ただ一回光るだけではなく、冒頭に「バチッ」としたリズムが出ます。

背景のズームや回転も同じ考え方です。

const bgZoom = interpolate(f, [0, durationFrames], [1.15, 1.35], clamp);
const bgRotate = interpolate(f, [0, 72, durationFrames], [-4, 6, 0], clamp);

背景を少し拡大しながら回転させることで、画面全体に動きが出ます。

さらに、画面揺れは Math.sin() と Math.cos() を組み合わせています。

const cameraShake =
  interpolate(f, [0, 65, 92], [1, 1, 0], clamp) *
  Math.sin(f * 2.8) *
  13;

この揺れは、最後に向かってだんだん弱くなります。

つまり、前半は荒く揺れて、後半はピタッと止まる構成です。

これが「緩急」の正体です。

ただ速く動かすだけだと、見ている人は疲れます。速く動かしたあとに止めることで、最後のタイトルが強く見えます。

springで最後の急停止を作る

Remotionでは、spring() を使うと自然な勢いのある動きを作れます。

今回の最終タイトルは、spring() で着地させています。

const finalIn = spring({
  frame: f - 58,
  fps,
  config: {
    damping: 10,
    stiffness: 170,
    mass: 0.75,
  },
});

frame: f – 58 としているので、58フレーム目あたりから最終タイトルが出始めます。

この finalIn を使って、タイトルの拡大率や回転を変えています。

const impactScale = interpolate(
  finalIn,
  [0, 0.7, 1],
  [2.8, 0.92, 1]
);

最初は2.8倍の大きさで入り、少し小さくなり、最後に1倍へ戻ります。

この動きがあると、タイトルが画面に叩きつけられたように見えます。

初心者がよくやりがちなのは、すべての動きを interpolate() だけで直線的に作ってしまうことです。

もちろんそれでも動きますが、少し機械的に見えます。

タイトルの登場やパネルの着地など、気持ちよく止めたい部分には spring() を使うと、かなり映像らしくなります。

propsで文字と色を差し替えられるようにする

今回のコンポーネントは、以下のpropsを受け取ります。

export type WowKineticOpenerProps = {
  title: string;
  subtitle?: string;
  accentText?: string;
  themeColor?: string;
  backgroundColor?: string;
  speed?: number;
  durationFrames?: number;
};

最低限、title を変えれば別の作品として使えます。

themeColor を変えれば、赤系、青系、黄色系など、かなり印象を変えられます。

speed を変えれば、もっと激しい演出にも、少し落ち着いた演出にもできます。

Remotionでテンプレを作るときは、最初からすべてを完璧にprops化する必要はありません。

まずは以下だけでも十分です。

  • title
  • subtitle
  • accentText
  • themeColor
  • backgroundColor
  • speed

これだけ差し替えられれば、ブログ解説、X投稿、note販売、メンバーシップ配布へ広げやすくなります。

Studioで確認してCLIで書き出す

Remotion Studioで確認するには、次のコマンドを使います。

npm run studio

今回のCompositionは、以下のURLで確認できます。

http://localhost:3000/WowKineticOpenerWide
localhost

動画として書き出す場合は、次のコマンドです。

npm run render:wow:wide

直接Remotion CLIで書き出すなら、次のように指定します。

npx remotion render src/index.ts WowKineticOpenerWide out/wow-kinetic-opener-wide.mp4

Remotionでは、Studioで確認しながら調整し、最後にCLIで書き出す流れが基本です。

今回のような高速モーションは、静止画だけでは良し悪しが分かりません。必ず再生して、速さ、止まり方、読みやすさを確認します。

特に見るべきポイントは次の5つです。

  • 冒頭1秒で目が止まるか
  • タイトルが読めるか
  • フラッシュが強すぎないか
  • 最後の停止が気持ちいいか
  • XやYouTubeに載せたときに小さくても伝わるか

まとめ

Remotionを使うと、Reactコードでモーショングラフィックスを作れます。

今回のような高速タイポグラフィモーションも、分解すれば難しいことばかりではありません。

やっていることは、現在のフレームを取得し、interpolate() で数値を変え、spring() で気持ちよく着地させ、CSSのtransformやopacityへ渡しているだけです。

大事なのは、最初から実用性だけを考えすぎないことです。

初投稿やポートフォリオ用の作品なら、まずは「見た瞬間に止まるか」を優先しても良いと思います。

白フラッシュ、高速カット、巨大タイポ、画面揺れ、急停止。

こうした強い演出をRemotionでコード化できると、AI動画素材や画像生成AIで作った背景にも、作品としての見せ場を加えられます。

今後このテンプレを本制作に進めるなら、日本語タイトル対応、音ハメ、縦型版、色違いvariant、背景差し替え対応を追加していく予定です。

まずはRemotion Studioで動きを見ながら、title と themeColor を変えて試してみてください。

「Reactで動画を作る」という感覚がつかめると、Remotionはかなり面白くなります。

タイトルとURLをコピーしました