add-transitions について
Remotionのコンポジションにシーン転換を計画して追加するスキルです。効果、タイミング、全体の長さ、プレビュー確認を案内し、APIの詳細は公式remotion-markupスキルを参照します。
主な機能
- 01シーンのカット位置確認
- 02フェード、スライド、ワイプ、フリップの選択
- 03転換タイミングの案内
- 04コンポジション長の調整
- 05Studioでのプレビュー確認
活用シーン
- 01ハードカットのシーンへの転換追加
- 02シーンの雰囲気に合う効果の選択
- 03音楽やナレーションに合わせた転換
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/add-transitionsを入力して読み込まれたか確認します。
詳細
トランジションを追加 — シーントランジションウィザード
Remotion のコンポジションで、シーン間にプロフェッショナルなトランジションを追加できるようユーザーをサポートします。このスキルでは、Q&A とクリエイティブな判断（どのカットにどのトランジションが合うか）を扱います。API については、公式の remotion-markup スキルに従ってください。TransitionSeries、プレゼンテーション、タイミング、オーバーレイ、長さの計算については transitions.md を、ライトリークのオーバーレイについては light-leaks.md を参照してください。トランジションのコードを記憶だけで書かないでください。
ワークフロー
1. プレビューが実行中か確認する
Studio はすでに開いているはずです（npx remotion studio、またはアプリ内ブラウザーを使って npx remotion studio --no-open を実行し、表示された URL を開きます）。開いていない場合は、トランジションを追加するたびにユーザーが確認できるよう、今すぐ起動してください。
2. 現在のシーンを確認する
現在のコンポジションを確認し、カットポイントを特定します。
grep -rlE "Sequence|TransitionSeries|Track" src/ --include="*.tsx" --include="*.ts"
シーンを一覧にして、どこにトランジションを入れたいかユーザーに尋ねます。シーンがまだ <Sequence from> によるハードカットで連なっている場合は、公式の transitions.md に示されているように、シーンごとに 1 つの <TransitionSeries.Sequence> を使う <TransitionSeries> に移行します（npx remotion add @remotion/transitions で @remotion/transitions をインストールします）。
3. トランジションの種類を選ぶ
各カットの雰囲気を尋ね、次のように提案します。
| トランジション | 効果 | 最適な用途 |
|---|---|---|
fade | シーン間をクロスディゾルブします | 汎用的で控えめ。イントロ、アウトロ、時間経過 |
slide | シーンが指定方向からスライドして表示されます | 活気がありモダン。リスト、手順、ソーシャルメディアのカルーセル |
wipe | 新しいシーンが古いシーンをワイプして切り替わります | ドラマチックな演出や reveal。ビフォーアフター |
flip | 3D カードフリップです | 遊び心があり目を引く。製品のバリエーション、サプライズ |
clockWipe | 時計の針のように表示されます | クリエイティブでユニーク。カウントダウン、「その日の後刻」 |
| ライトリーク（オーバーレイ） | ハードカットの上に暖色の光が閃きます | 動画を短くせずに映画的な躍動感を加えます。音楽のドロップ、モンタージュ |
スライドの方向： from-left、from-right、from-top、from-bottom。スライドは視覚的な流れ（読み進める方向、または画面上で何かが動く方向）に沿わせてください。
ライトリークはシーン間のトランジションではありません。カットポイントに配置する <TransitionSeries.Overlay> であり、カットポイントの上に描画され、タイムラインを短くしません。公式の light-leaks.md に示されている方法で作成してください。
4. タイミングを選ぶ
| タイミング | 印象 | 使用する場面 |
|---|---|---|
線形（linearTiming） | 一定速度で機械的 | ワイプ、クロックワイプ、機械的な印象にしたいスライド |
スプリング（springTiming、damping: 200） | 滑らかなイーズイン／イーズアウト、バウンスなし | ほとんどのフェードやスライド。自然な印象 |
| 減衰を小さくしたスプリング（例：10～20） | 行き過ぎてから収束する、目に見えるバウンス | 遊び心のあるコンテンツに限り、控えめに使用 |
推奨： ほとんどのトランジションでは、damping: 200 のスプリングタイミングを 15～25 フレームで使用します（30 fps で 0.5～0.8 秒）。ショート動画では 8～15 フレームにします。
5. 適用し、長さを修正する
公式の transitions.md に示されているとおりに TransitionSeries を記述し、Studio でユーザーが編集できるよう、各シーケンスに name を設定します。
重要： トランジションは隣接するシーンを重ねるため、トランジションの長さの合計分だけ全体の長さが短くなります（オーバーレイは長さに影響しません）。公式の transitions.md に示されているように、各タイミングオブジェクトに対して getDurationInFrames({ fps }) を使って計算し、<Composition> の長さまたはその calculateMetadata を更新します。
6. よくあるパターン
- すべてフェード（映画的）： どこでも同じフェードを使い、すっきりとプロフェッショナルな印象にします
- スライドカルーセル（ソーシャルメディア）： スワイプするように、すべてのシーンを右からスライドインさせます
- ミックス（ダイナミック）： イントロとアウトロにはフェード、本文のシーンにはスライド、見せ場にはワイプを使い、最も盛り上がる箇所にライトリークのオーバーレイを加えます。各カットの勢いに合わせてください。
- ビート同期： ミュージックビデオでは、各カットをビートに合わせ、トランジションを短くします
7. プレビューで確認する
Studioで各カットをスクラブするようユーザーに依頼します。次の点に注意してください。
- トランジションの速度 — 速すぎると唐突に感じられ、遅すぎると間延びして感じられます
- 方向 — スライドは視覚的な流れに沿うようにします
- 一貫性 — さまざまなトランジションを使いすぎないようにします（種類は最大2～3個）
- ナレーション — トランジションが話し言葉の途中に来ないようにします
ちょうどよく感じられるまで、durationInFramesとdampingを調整します。ユーザーから依頼されない限り、レンダリングはしないでください。