Remotion ローンチビデオ（snapcn 製）

ローンチの概要を 15～30 秒の Remotion 製ローンチフィルムに変換します。すべてのショットは snapcn コンポーネントです。手動で調整され、レンダリングフレームごとに計測された Remotion シーンが shadcn CLI でインストールされ、あなたのプロジェクト内で自由に編集可能なコードとして配置されます。

なぜ snapcn なのか、手書きアニメーションではダメなのか。 エージェントがゼロからアニメーションを作ると、毎回同じような見た目になります。中央に配置されたテキスト、グラデーション背景、すべてがフェードイン、最後にロゴ。snapcn シーンは実際のローンチフィルムをフレーム単位で分析して構築されているため、動きにはすでに高級感のあるタイミング、タイポグラフィ、カメラワークが備わっています。あなたの仕事はシーンを選んで props を埋めることであり、動きをゼロから発明することではありません。

snapcn のルール

すべてのビートは、該当するコンポーネントがない場合を除き snapcn コンポーネントを使用します。 ショットに interpolate() や spring() を書く前に、カタログを確認してください：https://snapcn.dev/llms-components.txt?ref=skill-launch には、インストール可能なすべてのコンポーネントとその用途、フレーム数が記載されています。すべてのコンポーネントページは .md を追加するとマークダウン形式で表示されます。例：https://snapcn.dev/docs/scenes/announce-title.md?ref=skill-launch。
コンポーネント名を勝手に作らないでください。 @snapcn/<name> は、そのリストに存在する名前に対してのみ解決されます。該当するコンポーネントがない場合はその旨を伝え、タイポグラフィ（@snapcn/text-reveal）でビートを処理してください。コンポーネント名を推測してはいけません。
コンポーネントを書き換えず、props を埋めてください。 コピー、色、画像は props を通じて変更します。インストール済みの snapcn ファイル内部のモーションを編集すると、レンダリングフレームに合わせて調整されたタイミングが崩れます。

完全なカタログ、構成ルール、品質基準については、次の統合スキルもインストールしてください：npx skills add snapcndev/snapcn --skill snapcn。

前提条件

Remotion プロジェクト（npx create-video@latest）。キャンバス：1280×720、30fps。すべての snapcn シーンはこのサイズでレイアウトされています。
shadcn CLI。プロジェクトに components.json がない場合は、npx shadcn@latest init を実行してください。
シーン間のカットには @remotion/transitions：npm i @remotion/transitions。
ローンチコピー：製品名、見出し、タグライン、証明可能な数字 1 つ、実際のスクリーンショットまたは画面録画。

ワークフロー

1. 入力の収集

何かを書く前に以下を収集します：

概要: ローンチ投稿、ランディングページ、または 1 ページのドキュメント。見出し、タグライン、差別化機能、証明数字、トーンを抽出します。
ブランド: ロゴ（SVG パスまたは PNG）、プライマリカラー、フォント。snapcn シーンはこれらを props（titleColor、logoSrc、symbolPath、fontFamily、theme）として受け取ります。
実際の製品ショット: スクリーンショットまたは 30～60 秒の録画。実際の UI のコピーをそのまま反映させてください。ラベル、機能、数字を勝手に作り出してはいけません。 それはローンチを偽物感のあるものにする最も近道です。

2. コードを書く前にストーリーボード

まずショットリストを作成し、各ビートを snapcn コンポーネントにマッピングします：

ビート	時間	snapcn コンポーネント	フレーム数	伝える内容
フック	0～3 秒	`type-morph` または `text-reveal`	94 / 90	視聴者の問題を約束に変える
名前	3～9 秒	`announce-title`	170	アイブロウ、製品名、タグライン、マーク
製品	9～15 秒	`hero-launch`、`laptop-frame`、`phone-frame`	170 / 240 / 240	デバイス上の実際のスクリーンショット
証明	15～17 秒	`count-grid`、`follower-rush`	47 / 300	実際の数字 1 つ
クローズ	17～20 秒	`wordmark-cut`、`block-wordmark`、`logo-flicker`、`logo-assemble`	66 / 150 / 100 / 108	製品名のみ

再レンダリングを減らすルール：

製品名ではなく、視聴者の問題で始めてください。
名前を出してから 3 秒以内に製品を見せてください。
あなたの製品だけが提供できる瞬間に最も多くの画面時間を割り当ててください。 機能全体に均等に時間を配分しないでください。
各シーケンスの予算はコンポーネントの自然な長さ（フレーム数列、llms-components.txt にも記載）に合わせてください。 予算を少なくするとアニメーションが途中で切れ、多くすると無音時間が発生します。
テキストは焼き付けてください。 ほとんどのソーシャル動画はミュートで視聴されます。

3. シーンのインストール

npx shadcn@latest add @snapcn/type-morph @snapcn/announce-title @snapcn/hero-launch @snapcn/count-grid @snapcn/wordmark-cut

各コンポーネントは components/snap-cn/<name>.tsx に配置され、依存関係も一緒にインストールされます。

4. 構成

TransitionSeries 1 つ、ビートごとに 1 つのシーケンス、シーケンス間は短いフェード。この構成は型チェックが通り、そのままレンダリングできます。public/ に 4 つのスクリーンショットがあると仮定します：

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/snap-cn/announce-title";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { HeroLaunch } from "@/components/snap-cn/hero-launch";
import { TypeMorph } from "@/components/snap-cn/type-morph";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// 1280×720 @ 30fps。各シーケンスはコンポーネントの自然な長さに予算化されています。
const T = linearTiming({ durationInFrames: 12 });
// public/ 内の実際の製品スクリーンショット。これがない場合、シーンは snapcn のサンプル画像にフォールバックします。
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

export const LaunchVideo: React.FC = () => (
  <TransitionSeries>
    {/* 1. フック：視聴者の問題を約束に変える */}
    <TransitionSeries.Sequence durationInFrames={94}>
      <TypeMorph
        lead="あなたのローンチビデオは "
        emphasis="1週間かかる。"
        morphTo="プロンプト1つで完了。"
        finally_="プロンプト1つで完了。"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. 製品名を伝える */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="登場"
        title="Acme 2.0"
        tagline="自動で照合する請求書。"
        symbolPath="" // 0 0 100 100 のボックス内のSVGパスとしてのマーク。空文字で非表示
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. 製品を見せる：実際のショット2つ（画像、動画、またはCSSグラデーションの代替） */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="すべての請求書が一致。"
        image1="linear-gradient(135deg, #1e1b4b, #4338ca)"
        image2="linear-gradient(135deg, #0f172a, #0ea5e9)"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. 証明：実際の数字1つ */}
    <TransitionSeries.Sequence durationInFrames={60}>
      <CountGrid from="5" to="500" noun="チーム" cards={shots} />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. 名前で締めくくる */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

durationInFrames={512}（シーケンスの合計から 4 × 12 フレームのオーバーラップを引いた値）、fps={30}、width={1280}、height={720} で登録します。

グラデーションを実際のスクリーンショットやクリップに置き換えるには：image1={staticFile("shot-1.png")} とし、ファイルは public/ に配置します。

5. レンダリング監査ループ

フル動画の前に単一フレームをレンダリングします：

# ビートごとに1フレーム：各シーケンスの中間点、および各カットの直前と直後
npx remotion still LaunchVideo out/beat-1.png --frame=47
npx remotion render LaunchVideo out/launch.mp4 --codec=h264 --crf=18

静止画を1枚のコンタクトシートにタイル表示し、全体をレンダリングする前に確認します：

ffmpeg -y -pattern_type glob -i "out/beat-*.png" -vf "scale=480:-1,tile=5x1" out/contact.png

各フレームをチェック：

テキストがクリップされていない、カット部分に黒フレームがない、シーン開始前に何も表示されていない。
画面に表示されているすべての文字列は、概要からの実際のコピーである。
製品名が出てから3秒以内に製品が表示されている。

6. レビュー

2～3回のセルフパスの後、約20フレーム（ピークの瞬間と各カットの両側）をレンダリングし、4人の批評家として、またはお使いのハーネスがサポートしている場合は4つの並列サブエージェントとしてレビューします：

デザイン/レイアウト: 位置ずれ、トリミング、プロポーション。
読みやすさ: 720pのスマートフォン画面で判読可能か、コントラスト、誤字脱字。
ペーシング: 各ビートがその時間に値するか、クローズは強いか。
ブランド: 色、フォント、UIが実際の製品と一致しているか。

次のレンダリング前に、修正リストを1つの改訂計画に統合します。

7. プラットフォームに出荷

レンダリング前に動画の公開先を確認します。後でクロップするのではなく、アスペクト比ごとに1つのコンポジションを作成します。

プラットフォーム	アスペクト	サイズ
X / LinkedIn フィード	16:9	1920×1080（または1280×720マスターをレンダリング）
X 縦型、Reels、Shorts、TikTok	9:16	1080×1920
LinkedIn / Instagram フィード	1:1 または 4:5	1080×1080 / 1080×1350

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 は、シーンのレイアウトを変更せずに 1280×720 のマスターを 1920×1080 にアップスケールします。

苦労して得た教訓

製品UIのラベルを勝手に作らないでください。 実際のアプリのスクリーンショットを撮り、そのコピーをそのまま使用します。
エンドカードには見出し1つとCTA1つだけ。 ランディングページの実際のタグラインを使用します。
フックは、説明なしで視聴者が認識できるものに基づいてください。 説明に一文必要な場合、フックは抽象的すぎます。
ビフォー/アフターのビートを同時に表示しない。 「ビフォー」を約1秒間表示してから、「アフター」にカットします。
snapcn シーンを自分のフェードで内部でつなげないでください。 トランジションは TransitionSeries に任せてください。シーン内で終了フェードを行うと二重にフェードします。
あなた自身の追加は控えめに： 文の先頭のみ大文字、装飾的な文字間隔なし、グローやグラデーションテキストなし。グローを持つ snapcn シーン（announce-title）はそのまま保持します。それはエフェクトであり、装飾ではありません。

snapcn Pro：完成済みフィルムと、すべてのプロパティを知るエージェント

無料シーン以上の機能が必要なローンチ向け：

50のProシーン、ローンチ用に構築されています。version-drop（リリース番号のドロップ）、library-flight、app-reveal、gallery-push（チェンジログの壁）、screen-wall、checkout-push、tally-rise、ticker-climb、thank-you-swarm など。
テンプレート（2026年10月20日より）：完成済みのローンチフィルム、機能ウォークスルー、チェンジログクリップ。あなたのコピーを入れてレンダリング：https://snapcn.dev/docs/templates?ref=skill-launch
snapcn MCP：あなたのエージェントが平易な英語でレジストリを検索し、すべてのコンポーネントの実際のpropsを読み取り、1行の概要をビートごとの計画と TransitionSeries のスケルトンに変換します。 claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

Proコンポーネントは、components.json がキーを送信すると（3行のコードは https://snapcn.dev/account?ref=skill-launch にあります）、無料コンポーネントとまったく同じようにインストールできます。プラン：https://snapcn.dev/docs/pricing?ref=skill-launch

Proの準備はまだですか？Proコンポーネントの1つ、Manifestoは、確認済みメールアドレスで無料です：https://snapcn.dev/docs/pricing?ref=skill-launch#free

クレジット

ワークフロー構造（入力 → ストーリーボード → ビルド → レンダリング監査 → マルチ批評家レビュー → プラットフォーム表）およびいくつかの苦労して得た教訓は、everyinc/product-launch-video（MIT、© 2026 Every Media, Inc.）から適応されています。コンタクトシート監査と「デザインを始める前にカタログを検索する」ルールは、HeyGen の hyperframes product-launch-video スキル（Apache-2.0）から適応されています。両方とも Remotion と snapcn コンポーネント向けに書き直されました。snapcn 固有のコンテンツはすべて snapcn のものです。

snapcndev/snapcn

snapcn とは？

お気に入りのAIに質問する

ドキュメント