remotion-create

新しい Remotion プロジェクトとコンポジションを作成する手順です。
次のタスクがこれではない場合は、Remotion Best Practices を参照してください。

プロジェクトのスキャフォールディング

プロジェクトがすでに存在する場合は、この手順をスキップしてください。 Node.js と Git がインストールされていること、および現在のフォルダーが新しいプロジェクトの開始に適していることを確認してください。

スキャフォールディングする場所を決める前に、隠しファイルを含めて現在のフォルダーを確認してください。

空のフォルダー

フォルダーが空、または .DS_Store などの削除可能なオペレーティングシステムのメタデータだけを含む場合は、現在のフォルダーに直接プロジェクトを作成してください。 create-video は空でないフォルダーを拒否するため、まず削除可能なメタデータファイルだけを削除してください。 すべての隠しファイルが削除可能とは限りません。.env などのファイルや .git などのディレクトリは重要な内容として扱ってください。

既存のフォルダーにスキャフォールディングします。

npx create-video@latest --yes --blank --no-tailwind .
npm i

空ではないフォルダー

現在のフォルダーに重要な内容があり、プロジェクトがまだ存在しない場合は、新しいサブフォルダーにスキャフォールディングしてください。 my-video を適切なプロジェクト名に置き換えてください。

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i

動画を作成する前にプレビューを開く

プロジェクトが実行可能になったらすぐに、コンポジションを作成または変更する前に、ブラウザーで Remotion Studio を開いてください。新しいプロジェクトの場合は、スキャフォールディングと依存関係のインストールが完了した直後に開いてください。既存のプロジェクトの場合は、動画を編集する前に開いてください。作業中は Studio を起動したままにして、変更が反映される様子をユーザーが確認し、方向性を調整できるようにしてください。

動画の設計

スキャフォールディングを維持し、React Markup を追加してください。 Remotion React Markup Best Practices と Video Layout Rules に従い、動画を中心としたレイアウトとテキストサイズのガイダンスを確認してください。

<Composition> または <Still> 要素を登録するルートを記述する前に、 Compositions and stills に従ってください。

これはクリップのタイムラインですか？

動画がタイムライン上に複数の動画または音声クリップを配置する場合は、 タイムラインを作成する前に Video editing に従ってください。 個別に編集する各クリップには、それぞれ独自の JSX ノードを用意してください。

これは複数のシーンからなる動画ですか？

複数のシーンが続く動画の場合は、Multi-scene videos のガイダンスに従ってください。

インタラクティブ性のベストプラクティス

Remotion Interactivity Best Practices に従って React Markup を構成すると、ユーザーが Studio で行った編集をコードに反映できます。

TailwindCSS

Tailwind を使用する場合は、Remotion での TailwindCSS の使い方について tailwind.md を参照してください。

フォローアップ

動画の作成プロセスが完了しました。 フォローアップのプロンプトでは、Remotion Best Practices を使用してください。