見出し画像

【初心者版手順付き】RemotionをPCに導入して、画像＋日本語テキストから動画を作ってみた

えがし｜AI活用術を日本一わかりやすく

私は広告代理店のウェブデザイナーとして働いています。

動画生成や動画制作の仕事をしていると、毎回感じることがあります。

動画は、作り始める前の準備がかなり重いです。

画像を用意する。
テキストを考える。
構成を決める。
タイミングを調整する。
書き出す。
修正する。

この流れを毎回ゼロからやると、かなり時間がかかります。

自分もこれまで、FireflyやCanvaを使いながら、なるべくテンプレート化して時間短縮できないかを探していました。

ただ、動画を量産したいときや、画像と日本語テキストを決まった型に流し込んで作りたいときは、もう少し自動化できないかと思っていました。

そんな中で、AIを使って動画が作れるという話を聞くようになりました。

最初は、テキストを入れたら動画そのものが自動生成されるようなものを想像していました。

でも調べていく中で、少し違う方向の手段として Remotion を見つけました。

Remotionは、画像やテキスト、レイアウト、動きなどをコードで組み立てて、動画として書き出せる仕組みです。

今回は動画生成の時短を目標に、PCに導入して、動画を作ることを試してみました。

この記事では、Remotionを導入した流れ、実際につまずいたところ、最終的な動画までを残しておきます。


今回やりたいこと

今回やりたいことは、RemotionをPCに導入して、画像と日本語テキストを使った動画を作れる状態にすることです。

完成イメージとしては、以下です。

  • 画像を読み込む

  • 日本語テキストを加える

  • 最終的にMP4などで書き出す

自分が目指しているのは、毎回ゼロから動画を作ることではありません。

画像とテキストを用意したら、ある程度同じ型で動画を組み立てられる状態にしたいです。

たとえば、SNS投稿用の短い動画。
商品紹介動画。
店頭サイネージ用の動画。
記事や投稿の要点をまとめる動画。

こういうものを、なるべくテンプレート化して作れるようにしたいと考えています。

まずRemotionは「動画そのものをAI生成するツール」ではない

最初に整理しておきたいのは、Remotionの役割です。

Remotionは、いわゆる「AIが勝手に動画を生成してくれるツール」とは少し違います。

Remotion公式では、RemotionはReactを使って動画をプログラム的に作るフレームワークと説明されています。

つまり、RunwayやPikaのように、テキストから映像そのものを生成する方向とは違います。

自分なりに言うと、Remotionはこういうものです。

画像、テキスト、レイアウト、動き、時間を指定して、動画として組み立てる仕組み

なので、向いているのはこういう使い方です。

  • 画像とテキストを決まった型に流し込む

  • 日本語テキスト入りの動画を作る

  • 同じ構成の動画を量産する

  • SNS用やサイネージ用のテンプレート動画を作る

  • Codexなどでコードを修正しながら動画テンプレートを作る

逆に、映画のような映像そのものをAIで作りたい場合は、別の動画生成AIを探した方がよさそうです。

ここを最初に分けておかないと、期待値がズレます。

導入前に必要だったもの

Remotionを使うには、PC側に開発環境が必要です。

自分のように普段コードを書かない人にとっては、ここが少しハードルでした。

最低限必要になるのは、以下です。

・Node.js
・npm
・ターミナル
・Remotionプロジェクト
・ブラウザで開くRemotion Studio

Remotion公式ドキュメントでも、新しく始める手順としてNode.jsのインストールや、プロジェクト作成・Studio起動の流れが案内されています。

ここで最初に感じたのは、動画制作ツールというより、Web開発の環境に近いということです。

Canvaのようにブラウザで開いてすぐ編集する感覚ではありません。

PC上にプロジェクトを作って、ターミナルから起動して、ブラウザでStudioを見る流れになります。

Remotionの導入手順

実際の導入は、ざっくり以下の流れです。

1. Node.jsをインストールする
2. 作業用フォルダを作る
3. Remotionプロジェクトを作成する
4. 必要なパッケージをインストールする
5. Remotion Studioを起動する
6. ブラウザでプレビューを確認する
7. 動画を書き出す

1. Node.jsを入れる

  1. Node.js公式サイトを開く

  2. Latest LTS をダウンロード

  3. インストーラーを起動

  4. 基本的に全部「Next」でOK

  5. インストール完了後、PCを再起動

確認します。

Windowsなら、スタートメニューで PowerShell を開いて、以下を入力します。

node -v

例えばこう出ればOKです。

v24.16.0

次にこれも確認します。

npm -v

数字が出ればOKです。

2. Remotionプロジェクトを作る

デスクトップなど、わかりやすい場所で作ります。

PowerShellで以下を入力します。

cd Desktop

次にRemotionプロジェクトを作ります。

npx create-video@latest my-image-video

Remotion公式の create-video は、新しいRemotionプロジェクトを作るためのコマンドです。引数なしなら対話形式で設定できます。

聞かれたら、最初はこう選んでください。
Template＞＞＞Blank
Tailwind CSS＞＞＞Yes
Install skills＞＞＞Yes

3. プロジェクトの中に入る

cd my-image-video

中に入れたか確認します。

dir

以下のようなものが見えればOKです。

package.json
src
public
remotion.config.ts

4. Remotionのプレビューを起動する

npm run dev

ブラウザでRemotion Studioが開けば成功です。

公式手順でも、プロジェクトフォルダに入って依存関係を入れたあと、npm run dev でプレビューを起動する流れになっています。

ここが一番のつまづきポイントで、ブラウザでRemotion Studioが開けないことがありました。

その時は

C:\Users\user\Desktop\my-image-video

そのまま以下を打ってください。

npm i

インストールが終わるまで待ちます。

その後、もう一度これです。

npm run dev

だいたいこういう表示が出ます。

Server ready - Local: http://localhost:3000

ブラウザが自動で開かない場合は、自分でブラウザを開いて、アドレス欄にこれを入れてください。

http://localhost:3000


これで開けるようになりました。

5. 画像を置く

プロジェクト内にある public フォルダを使います。

Remotionでは、画像や動画などの素材は基本的に public フォルダに入れて、staticFile() で読み込みます。公式も、画像などのアセットは public/ フォルダに置き、staticFile() で読み込むと説明しています。

使いたい画像をここに置きます。

public/input/main.jpg

画像名は最初は必ずこれにしてください。

main.jpg

日本語ファイル名やスペース入りファイル名は、最初は避けてください。

6. 動画用ファイルを作る

VS Codeでプロジェクトを開きます。

PowerShellで以下を入力します。

code .

src フォルダの中に、次のファイルを作ります。

src/ImageVideo.tsx

中身をこれにします。

import {
  AbsoluteFill,
  Img,
  staticFile,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
} from 'remotion';

export const ImageVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const {durationInFrames} = useVideoConfig();

  const zoom = interpolate(frame, [0, durationInFrames], [1, 1.08]);

  const fade = interpolate(
    frame,
    [0, 15, durationInFrames - 15, durationInFrames],
    [0, 1, 1, 0],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp',
    }
  );

  return (
    <AbsoluteFill style={{backgroundColor: '#111', overflow: 'hidden'}}>
      <Img
        src={staticFile('input/main.jpg')}
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          transform: `scale(${zoom})`,
          opacity: fade,
        }}
      />

      <div
        style={{
          position: 'absolute',
          left: 80,
          right: 80,
          bottom: 80,
          padding: '28px 36px',
          background: 'rgba(0, 0, 0, 0.68)',
          color: 'white',
          fontSize: 54,
          fontWeight: 800,
          lineHeight: 1.25,
          letterSpacing: '-0.03em',
        }}
      >
        画像から動画を作成
      </div>
    </AbsoluteFill>
  );
};

7. Root.tsxに動画を登録する

次に src/Root.tsx を開きます。

中身を探して、Compositionを追加します。

以下のような形にします。

import {Composition} from 'remotion';
import {ImageVideo} from './ImageVideo';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="ImageVideo"
        component={ImageVideo}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

8. プレビューで確認する

すでに npm run dev が動いていれば、ブラウザのRemotion Studioに ImageVideo が出ます。

出ていなければ、PowerShellで再度起動します。

npm run dev

9. MP4を書き出す

PowerShellで以下を入力します。

npx remotion render ImageVideo out/image-video.mp4

Remotion公式のCLIでは、npx remotion render で動画または音声を書き出し、出力先を指定できます。

成功すると、以下に動画ができます。

out/image-video.mp4

これで完成です。
試しに生成した動画はこちらです。

Remotionを触ってみて感じたこと

Remotionを触ってみて思ったのは、これは「動画生成AI」というより、動画の組み立てを自動化するための仕組みに近いということです。

たとえば、画像と日本語テキストを用意して、決まったテンプレートに流し込む。

背景、見出し、字幕、ロゴ、CTAの位置を固定する。

テキストだけ差し替えて、同じ構成の動画を複数作る。

こういう用途にはかなり向いていそうです。

逆に、

プロンプトを入れたら、映像そのものをAIが作る

というものを期待している場合は、Remotionだけでは少し違います。

その場合は、動画そのものを生成するAIツールを探す方が合っていると思います。

初心者向けに一言でいうと

Remotionは、AIが動画を勝手に作ってくれるツールというより、
画像＋日本語テキスト＋テンプレートから動画を自動で組み立てる仕組み
として考えるとわかりやすいです。

動画の内容そのものをAIで生成したい人には、別のAI動画生成ツールの方が向いているかもしれません。

でも、画像やテキストを決まった型に入れて動画化したい人には、Remotionはかなり使えそうです。

自分の場合は、FireflyやCanvaで作っていた素材やデザイン作業を、さらにテンプレート化して時間短縮できないかを探していました。

その意味では、Remotionはかなり可能性があると感じました。

今回のメモ

今回やってみてわかったことをまとめます。

□ RemotionはReactで動画を作るフレームワーク
□ AI動画生成そのものではなく、動画を組み立てる仕組みに近い
□ 画像＋日本語テキスト＋テンプレート化と相性がよさそう
□ 導入にはNode.jsやnpmが必要
□ Studioは npm start または npx remotion studio で起動する
□ ブラウザで開けないときは、まずターミナルを見る
□ localhostのURLを手動で開くと確認できる場合がある
□ Renderボタンや npx remotion render で動画を書き出せる
□ 動画そのものをAI生成したい人は、別の手段も検討した方がよい

今回は、Remotionを導入して、Studioを開き、動画を確認するところまで試しました。
ここまでおよそ30分でできたため、慣れれば数分でできると思われます。

どう時短するかは、以下の記事の方法がわかりやすいです。


いいなと思ったら応援しよう！