R RenderComp

セットアップガイド

ZIPから最初のレンダリングまで、約5分

RenderComp のテンプレートを動かす手順です。プログラミング経験がなくても大丈夫です。

  1. Node.js をインストール

    初回のみ

    Node.js はテンプレートを動かすための無料ソフトです。インストール済みの場合はこのステップは不要です。

    macOS

    nodejs.org から「LTS」版のインストーラをダウンロードして実行。設定はそのまま「続ける」でOKです。

    Windows

    nodejs.org から「LTS」版のインストーラ(.msi)をダウンロードして実行。設定はそのまま「Next」でOKです。

    nodejs.org →

    確認: ターミナル(Mac)または PowerShell(Windows)を開いて実行し、v18 以上が表示されれば準備完了です。

    node -v
  2. ZIP を解凍する

    ダウンロードページ(またはメール)から入手した RenderComp の ZIP をダブルクリックで解凍します。フォルダはデスクトップなど、分かりやすい場所に置いてください。

  3. フォルダでターミナルを開く

    macOS

    ターミナルを開き(⌘+スペース →「ターミナル」と入力)、cd  と入力(後ろに半角スペース)→ 解凍したフォルダをウィンドウにドラッグ → Enter。

    Windows

    エクスプローラーで解凍したフォルダを開き、アドレスバーに powershell と入力して Enter。

  4. インストールして起動する

    続けて次の2つのコマンドを実行します。初回のインストールは数分かかります。

    npm install
    npm run dev

    ブラウザで Remotion Studio が開きます。開かない場合は、ターミナルに表示された http://localhost:3000 のリンクを開いてください。

  5. 選んで、変えて、レンダリング

    • 左サイドバーがテンプレート一覧です。クリックするとプレビューが再生されます。
    • テキストや色は、右側のプロパティパネル、またはテンプレートの .tsx ファイルで変更できます。
    • Studio の「Render」ボタンで MP4 に書き出したら完成です。

    初回のレンダリングだけは、描画エンジンを一度ダウンロードするため数分かかることがあります。2回目以降はずっと速くなります。

うまくいかないときは

「npm: command not found」(npm が見つからない)と出る

Node.js が未インストールか、インストール前に開いたターミナルを使っています。ステップ1で LTS 版をインストールし、ターミナルを一度閉じて開き直してから再実行してください。

npm install が途中で失敗する

ネットワーク接続を確認して、もう一度 npm install を実行してください。権限エラー(EACCES)が出る場合は、フォルダをデスクトップや書類フォルダなど自分のユーザー領域に移動してから再実行します。sudo は使わないでください。

Windows で「スクリプトの実行が無効になっている」と出る

アドレスバーに powershell の代わりに cmd と入力してコマンドプロンプトを開き、同じコマンドを実行してください。

ブラウザが開かない・localhost:3000 につながらない

ターミナルに実際のURLが表示されています(別のアプリが3000番を使っていると別の番号になります)。そのURLをブラウザで開いてください。

node -v のバージョンが古い(v18未満)

nodejs.org から最新の LTS 版を入れ直し、ターミナルを開き直してください。

AIに聞く(最短ルート)

ターミナルのエラーメッセージをコピーし、下のボタンでヘルププロンプトをコピーして、ChatGPT や Claude などお使いのAIに両方貼り付けてください。多くの場合、一度の返答で解決します。

解決しない場合はサポートへ。

サポートを開く

ガイドつきでじっくり学びたい方へ — ビデオ学習プログラム「RenderComp Academy」を準備中です。 先行案内を見る →