dolly: 製品ビデオとモーショングラフィックスをコードで実現

このビデオはRemotionプロジェクトです。Reactコンポーネントをフレームごとにレンダリングします。このファイルの隣にあるstarter/には、動作する2つのビデオが含まれています。Videoは実際の録画から作成されたTermaryのローンチビデオの41秒カット、Promoはテンプレートのみから作成された25秒のモーショングラフィックスカットです。どちらも8つのスタイルと4つのフォーマットでレンダリング可能です。これらをユーザーのものに変換し、うまく機能する要素はそのまま残します。

計画 → 映像（録画するか、ユーザーのものをスキャン） → シーンを構築 → フレームを確認 → レンダリング

あなたはビデオを視聴できないため、コンタクトシートをレンダリングしてPNGを読み取ることで確認します。変更後は毎回これを行ってください。ほとんどの悪い動きはシートで確認できます。

必要なものだけを読んでください。 パスはこのスキルのフォルダからの相対パスです。

場合	読むもの
Macで製品を録画する場合（操作対象者が操作）：アプリ、ウェブサイト、iOSシミュレーター	`references/record-mac.md`
ユーザーが録画する必要がある場合：Windows、実機、操作できないデバイスやアカウント	`references/record-elsewhere.md`
ユーザーが自分で録画したものを提供する場合	`references/your-footage.md`
録画から構築されたシーン：3Dキットとカメラの動き	`references/camera.md`
製品ローンチではないビデオ：イベント、採用、チェンジログ、データストーリーなど	`references/agendas.md`
コンポーネントの選択：テンプレート、テキスト、グラフィックス、描画、背景、トランジション	`starter/src/library/CATALOG.md`
レンダリングがおかしい場合、または新しいコンポーネントを作成する場合	`references/gotchas.md`

1. 開始

<このスキルのフォルダ>/new.sh my-video     # Nodeを確認、スターターをコピー、すべてをインストール
cd my-video && npx remotion studio         # オプション：ユーザーはlocalhost:3000でスクラブ可能

new.shは、Nodeが不足している場合はHomebrewでインストールし、npm installを実行し（サウンドエフェクトも生成）、Remotionがレンダリングに使用するヘッドレスChromeをダウンロードし、observeeがインストールされているかどうかを表示します。Windowsの場合は、winget install OpenJS.NodeJS.LTSを実行した後、Git Bashで実行します。既存のRemotion 4.0.320+プロジェクトの場合は、src/kit.tsx、src/look.tsx、src/parts.tsx、src/sequence.tsx、src/backdrop.tsx、src/library/をコピーします。

ファイル	内容
`src/brand.ts`	製品：名前、URL、ロゴ（`public/`内）、アクセントカラーとアラートカラー、スタイル、独自フォントがある場合はそのフォント
`src/look.tsx`	8つのスタイルと4つのフォーマット、および`useLook()`（すべてのパーツがこれらを読み取る）
`src/Video.tsx`、`src/Promo.tsx`	ビデオ：順序と長さを持つシーン、およびサウンドキュー
`src/scenes/`	テイクベースのシーン。`takes.ts`はテイク内の位置を示す
`src/library/`	コンポーネントライブラリ、アイテムごとに1フォルダ。`CATALOG.md`はプロップとともにリストする
`src/sequence.tsx`、`src/backdrop.tsx`	`Scenes`はトランジションでシーンを結合、`Backdrop`はスタイルのページを描画
`src/parts.tsx`	ショットの上に配置されるもの：`Caption`、`Tap`、`Callout`、`Speed`、`Pop`
`src/kit.tsx`	3Dキットとカメラの動き（`references/camera.md`）
`public/takes/`	録画。ユーザー自身のものに置き換える
`scripts/`	`take.sh`はテイクを録画、`scan.mjs`（`npm run scan`）は録画を読み取り、`sfx.mjs`と`music.mjs`はサウンドを作成、`voice.mjs`はナレーション、`library.mjs`はカタログを再構築、`check.mjs`（`npm run check`）はレンダリングを測定、`web.mjs`（`npm run web`）はアップロード用コピーを作成

Remotionは個人および3人以下の企業では無料です。それ以上の企業は会社ライセンス（remotion.pro）が必要です。該当する場合は一度ユーザーに伝えてください。

2. 計画

まず製品のウェブサイトを読み、次にこれらをユーザーと調整します。推測できないことだけを尋ねます。

再生場所：フォーマットと長さを決定します。必要なすべてのフォーマットをレンダリングし、メインのフォーマットでデザインして残りを確認します。

フォーマット	コンポジション	サイズ	対象	長さ
landscape	`Video`	1920×1080	YouTube、X、LinkedIn、ウェブサイト、プレゼンテーション	ローンチ 45～90秒
vertical	`Vertical`	1080×1920	Reels、TikTok、YouTube Shorts、Stories	15～35秒
square	`Square`	1080×1080	X、LinkedIn、Instagramのフィード	15～45秒
portrait	`Portrait`	1080×1350	InstagramとLinkedInのフィード（4:5）	15～45秒

フィードはミュートで再生されます。言葉がストーリーを伝え、最初の2秒で独自に引き込む必要があります。

スタイル。 すべてのスタイルで1フレームをレンダリングし（npm run styles、別のフレームやフォーマットの場合は--props='{"frame":420,"format":"vertical"}'を追加）、ユーザーに表示し、brand.styleを設定します。ブランドから提案します：ダークな開発者ツール → midnightまたはterminal、コンシューマーアプリ → softまたはbold、プレミアムまたは落ち着いた製品 → editorialまたはswiss、ティーザー → cinema、クリエイティブまたはクラフト的な製品 → paper。

スタイル	見た目
`editorial`	明るい紙、イタリックのアクセントフレーズ付きセリフ見出し、ハードカット。落ち着いていて高級感：Termaryビデオ
`midnight`	ほぼ黒でアクセントが光り、タイトなサンセリフ、フォーカスにぼやける言葉、ズームトランジション
`bold`	ページとしてのアクセント、巨大な太字タイプ、ブロックから打ち抜かれたアクセントフレーズ、弾むようなポップ、スライド
`swiss`	オフホワイト、カラムグリッド上の黒字、アクセントは控えめに使用、正方形カード、ハードワイプ
`soft`	アクセントのパステルカラー、丸みを帯びたタイプ、ピル上のアクセントフレーズ、弾むようなポップ、丸いリビール
`terminal`	すべて等幅、カーソル付きでタイプされる見出し、スキャンライン、グリッチカット
`cinema`	予告編：ほぼ黒、大きな静かなセリフ、フィルムグレイン、黒を介したスローフェード
`paper`	コードで描画：柔らかいラベンダーページ上の紙カード、ボールドアクセント付きの軽いセリフ、カードフリップ

視聴者が覚えるべき一言、それを証明する製品の実際の瞬間、エンドカードのお願い（URL、ダウンロード、ウェイトリスト）。
映像の出所。 UIのある製品は実際の映像が最適です。あなたが録画するか、ユーザーが録画するか、ユーザーがすでに持っています（上の表に読むべきものが記載されています）。製品にアクセスできない場合、またはティーザーや説明ビデオの場合は、ライブラリから構築します。

次に、シーンを順番に書きます：痛み（フック、ロゴは決して入れない）、製品（ビートに合わせてロゴ）、証拠（実際の瞬間、または機能、指標、before/after）、お願い（エンドカード）。その他のアジェンダは、独自の中間部で形状を維持します（references/agendas.md）。画面上には同時に最大7単語、1単語あたり1秒＋0.3秒保持します。ブリーフをVideo.tsxの先頭にコメントとして記述します。

3. 映像

どのように来たとしても、同じことが映像を使いやすくします：ホールド（各アクションの前後で4～5秒の状態：そこからショットがカットされます）、実際の製品（デモモodeの定型結果は決して使わない、プライベートデータは使わない）、およびそこから読み取った時間。npm run scanは任意の録画を読み取ります：ホールド、変更、サウンド、フレームシート付き。これにより、誰も説明したことのない映像から計画を立てることができます。これらの時間がショットが再生されるatの値です。

4. シーンを構築

シーンはフレームを埋めるコンポーネントです。Video.tsx（またはPromo.tsx）のSCENESは、長さとともにシーンをリストします。スタイルのトランジションがシーンを結合し、シーンは独自のトランジションを指定できます（transition: 'iris'、それへのトランジション）。フレーム全体を動かす各トランジション（スライド、ホイップ、ズーム）の下で、ウーッという音が再生されます。

ライブラリ（src/library/）には、すべての既製のパーツが1フォルダずつ含まれています：テンプレート（シーン全体）、テキストエフェクト、グラフィックス、描画、ナレーションパーツ、背景、トランジション。構築する前にsrc/library/CATALOG.mdを読んでください：各アイテムの概要、そのまま動作する使用法、およびプロップ。ライブラリからインポートします（import {Stat, Statement} from './library'）。すべてのアイテムはuseLook()を介してスタイルを読み取り、start（シーンの開始からのフレーム）と、必要に応じてexitを受け取ります。npm run galleryは各アイテムのサンプルをコード付きでレンダリングします（--props='{"only":"graphics","style":"bold","format":"vertical"}'で絞り込み）。

テンプレートはシーン全体であるため、直接SCENESに入ります：

{name: 'Features', seconds: 4.5, component: () => (
  <Features title="Everything in" accent="one window." items={[{icon: Columns3, title: 'Split panes', text: '…'}]} />
)},

録画からのシーンは、Captionの下でウィンドウ、ペイン、または電話を3Dで浮かべ、カメラがその上を移動します：references/camera.md。

ライブラリをうまく使う。

Metric、Stat、Quoteは、許可を得た実際の数字と実際の引用のみを使用します。
描画はブランドカラーに色合いを調整します：クラフト的で人間味のある雰囲気のために、そしてpaperで。
ナレーション： npm run voice -- script.txt nameは、MacまたはWindowsの組み込み音声（または録音済みWAV）を使用してスクリプトをpublic/voice/name/とsrc/voice/name.tsに読み上げます。Voiceoverがそれを再生し、voiceTiming/voiceEndがシーンをそれに合わせてタイミング調整し、CaptionsとWaveformがそれに従います。フィードはミュートで再生されます：ナレーション付きビデオでもキャプションが必要です。組み込み音声は下書き用です。公開ビデオの場合は、人を録音するか、ユーザーが権利を持つ音声を使用します。
カタログがWebGLシェーダーと呼ぶトランジションはアクセントのみです。最終レンダリングのすべてのフレームをその周辺で確認します。
ビデオが発明したものを還元する。 別のビデオで使用できるレイアウト、チップ、または動きは、プロジェクトのライブラリのアイテム（コンポーネント、<name>.demo.tsxのサンプル、item.jsonを含むフォルダ、次にnpm run library）になり、ユーザーにdolly自身のライブラリにも追加するよう提案します。

1つのプロジェクトに複数のブランド（クライアント用のバリエーション、または製品ごとに1つのビデオ）：<LookProvider style="soft" brand={{name, url, logo, accent}}>が内部のすべてに設定され、useBrand()がブランドを読み取ります。

すべてのフォーマット。 シーンはuseLook()からフレームを読み取ります：look.safe（プラットフォームが独自のボタンで覆うインセット：テキストを内部に保つ）、look.band（上部のキャプションバンド）、look.aim（focusOnに渡す）、look.size（見出しサイズ）、look.tall、およびbyShape(look, {wide, tall, square})でレイアウトを選択します。

5. センス

どのスタイルでも高級感を出すためのポイント：

製品独自の外観。 そのアクセント、フォント（brand.fonts）、ロゴ、それに合ったスタイル。
すべてのショットに見出し、 上部のバンドに、アクセントフレーズをスタイルに合わせて設定。
実際のものを、近くで切り取る。 ウィンドウ全体、フローティングカードとしての単一ペイン、Macの隣の電話。シーンはしばしば2つまたは3つのカットで構成され、キャプションはカットとともに変化します。プッシュインが向かう周囲をタイトにクロップします。
入力を表示する。 何かがタップされた場所にTap、重要なものの周りにCalloutまたはSpotlight、テンプレート上のCursor、映像が高速再生されているときはいつでもSpeedチップ。
すべてのターンにサウンド、そしてほとんど他には何も。 ストーリーが転換する各瞬間にpublic/sfx/ting.wavを、それが読み取れるフレームに（次のバーラインではなく）；タップ時にclick.wav；フレーム全体の移動下でのみwhoosh.wav（ビデオは移動するトランジション（スライド、ホイップ、ズーム、フリップ）の下で1つ再生、最大8秒に1回）、ビデオあたり約2つ。エフェクトは10秒あたり約5つに抑え、他のカットは音楽に任せます：ユーザーのライセンス済みトラック、またはnpm run music -- <seconds>。
生成デザインの兆候を避ける： グラデーションテキスト、紫から青へのグラデーション、暗い背景にシアン、すべて同じカード、すべての単語にエフェクト、1つのビデオに5つのトランジション。アイデアごとに1つのエフェクト、ビデオごとに1つのトランジションスタイル（プラス1つのアクセント）、スタイルのデフォルトを最初に使用。

動きのルール。 すべてのショットをこれらに対して確認します。

オブジェクトではなくカメラを動かす。 ショットごとに1つのカメラパス。奥行きが視差を与える。
ショットごとに1つの動き、理由がある：明らかにする、追従する、または重要なものに向かって押し込む。
読みやすいようにフラットに。 読むテキストがある間、カメラに直面し、ゆっくり動く。
すべてをイージングする。 ease.outで到着、ease.inで去る（より速く）、ホールド間はease.inOut。スタイルが弾む場合、またはロゴでのみバウンス。
決して止まらない。 すべてのショットにゆっくりとしたドリフトを与える（useShotの第2引数）。
読むのに十分な長さホールドしてからカット。 迷ったら、より長くホールドし、次のシーンを短くする。
ビートに合わせてカット（120 BPMで0.5秒）、カット全体で動きの方向を維持する：シーンは次のシーンが到着する方法で去る。
抑制。 製品が主役：10秒あたり最大1つの派手な動きまたはエフェクト。

トップローンチビデオが達成する数値（フレームごとに測定）：画像は0.1秒以内に動き、最初の単語は0.4秒までに読める；製品は全体の1/4までに画面に表示される；長いショット内でも約0.7秒ごとに何かが変化する；読まれているテキストは1フレームあたり約3ピクセル未満で動く；主要な主張に1～1.6秒のデザインされたホールド1つ、他の静止は0.8秒以上なし；最大の瞬間は実行時間の約80％、その後約2秒の落ち着いたエンドカード。

references/gotchas.mdにはトラップがあります：3Dを平坦にするもの、フレームごとのレンダリングを壊すもの、バンドルされたffmpegの制限。

6. 確認

npx remotion still Sheet out/sheet.png                                          # ビデオ、1フレーム/秒
npx remotion still Sheet out/focus.png --props='{"scene":"NeedsYou","every":6}' # 1シーン、5フレーム/秒
npx remotion still Sheet out/v.png --props='{"format":"vertical","guides":true}' # 別のフォーマット、セーフエリア描画
npx remotion still Vertical out/f140.png --frame=140                            # 1フレーム、フルサイズ
npm run styles && npm run formats                                               # すべてのスタイル/フォーマットで1フレーム

すべてのPNGを読み取ります。以下を確認します：

最初の2秒は、音声やコンテキストなしで意味をなすこと；
読み取り可能なものはすべてカメラに対して正方形で、ホールドされていること（連続したいくつかのほぼ同一のセル）；
テキストはすべてのフォーマットで破線のセーフエリア内にあり、被写体は点線の間にあること；
重要なものがフレーム端で切り取られたり、近くのレイヤーの後ろに隠れたり、キャプションの下にあったりしないこと；
空白またはミラーリングされたフレームがないこと（内部または後ろのカメラ）；
隣接するセル…

dolly：Remotion でローンチ動画、全フォーマット対応