remotion

remotion skill の概要

remotion は何のためのものか

remotion skill は、Stitch の画面データを Remotion で洗練されたウォークスルー動画に変えるための skill です。ざっくりした編集案を一度出すだけのプロンプトよりも、Remotion for Video Editing 向けに、インストールして繰り返し使えるワークフローを求める人に向いています。

どんな人に向いているか

すでに画面入りの Stitch プロジェクトがあり、UI の流れ、機能の順番、またはプロダクトツアーを説明する動画が必要なら、この remotion skill を使ってください。画面の順序、尺、字幕が重要なプロダクトデモ、オンボーディング動画、デザインレビュー、社内リリース動画に適しています。

何が違うのか

大きな価値は、Stitch の取得結果と Remotion のコンポジションをつなぐ点にあります。スクリーンショットを手作業で書き出してトランジションを組み立てるのではなく、この skill は構造化された画面入力を前提にし、そこからトランジション、ズーム、テキストオーバーレイ付きのタイムラインを構築します。そのため remotion は、一貫性、再レンダリングしやすさ、コードでの編集を重視する場面で特に有効です。

remotion skill の使い方

remotion をインストールしてワークフローを確認する

npx skills add google-labs-code/stitch-skills --skill remotion で remotion skill をインストールしてください。次に、SKILL.md を最初に読み、その後で README.md、examples/screens.json、examples/WalkthroughComposition.tsx、resources/composition-checklist.md、resources/screen-slide-template.tsx を確認します。これらのファイルを見れば、想定される入力形式、レンダリングの流れ、再利用できるコンポーネントのパターンが分かります。

remotion に適切な入力を与える

精度の高い remotion の依頼には、Stitch プロジェクト名または ID、動画の目的、想定視聴者、分かっている場合は画面順、そしてナレーションやオーバーレイ文言の要件を含めるべきです。たとえば、「Stitch プロジェクト Calculator App のホーム、履歴、設定画面を使い、短いタイトル、フェードトランジション、プロダクトデモ調のトーンで 45 秒の remotion ウォークスルーを作成して」のように指定します。これは「画面から動画を作って」のような指示より、はるかに有効です。

実際のビルドフローに沿って進める

この repo の remotion ガイドは、取得、マニフェスト作成、コンポジション、レンダリングを前提に組まれています。まず Stitch プロジェクトを特定して画面をダウンロードし、次にそれらを screens.json 形式のマニフェストに落とし込んで、各画面の長さとトランジション種別を定義し、そのマニフェストを Remotion のコンポジションに接続します。自分のプロジェクトに合わせて調整する場合は、アセットの扱いは scripts/download-stitch-asset.sh、壊れたパスや不自然な尺を防ぐ品質チェックは resources/composition-checklist.md を確認してください。

レンダリング前に確認すべきこと

画像パスが正しく解決されるか、画面サイズが記録されているか、合計尺が意図したテンポと一致しているかを検証してください。Remotion の出力品質は入力構造に強く左右されます。短い画面は表示時間も短く、情報量の多い画面はゆっくり見せ、字幕は各ステップで何が変わったのかを説明できるだけ具体的であるべきです。画面が視覚的に込み合っているなら、トランジションは落ち着いたものを選び、説明はオーバーレイに任せるほうがよいです。

remotion skill の FAQ

remotion は Stitch プロジェクト専用ですか？

この remotion skill は Stitch から Remotion へのワークフローを中心にしているため、画面のソースとしては Stitch が想定されています。Stitch プロジェクトがなく、静止画像しかない場合は、通常の Remotion プロンプトのほうがシンプルなこともあります。ただし、同じマニフェストとコンポジションのパターンを採用したいなら、この skill でも対応しやすいです。

remotion のインストールで何が得られますか？

remotion のインストールで得られるのは、完成済みのエディタではなく、構造化された動画パイプラインを案内する skill です。元になる画面、動作する Remotion 環境、尺・トランジション・オーバーレイ文言を決めるための十分な情報は引き続き必要です。この install は、同じワークフローを繰り返し使う前提があるときに最も価値があります。

remotion は初心者向きですか？

はい。ただし、明確な入力を与え、ファイルベースのワークフローに沿って作業できることが前提です。Remotion の API をすべて事前に理解している必要はありませんが、サンプルのコンポジションを確認し、尺、パス、字幕を調整する準備は必要です。初心者は、screens.json のサンプルパターンから始めると成功しやすくなります。

この skill を使わないほうがいいのはどんなときですか？

単一の静的モックアップだけが欲しい場合、元データ構造なしで短い SNS 向けクリップを急いで作りたい場合、またはタイムラインを細かく触れない完全自動編集を求める場合は、remotion は向いていません。この skill が最も強いのは、再現性のある Remotion の使い方を重視し、画面ウォークスルーをコードベースで編集したいときです。

remotion skill を改善する方法

画面ごとの意図をもっと明確にする

最も大きな品質向上は、画面単位の意図を明確にすることから生まれます。各画面が何を伝えるべきかを、タイトルだけでなく説明してください。たとえば、「Home Screen: show the main calculator and basic operators」は「Home Screen」だけよりずっと有用です。意図が具体的になるほど、remotion のオーバーレイ文言とテンポも良くなります。

実際の尺を反映したマニフェストにする

すべての画面を同じ扱いにするのではなく、複雑さと重要度に応じて表示時間を割り当ててください。機能が多い画面は 5〜6 秒必要かもしれませんし、単純な確認画面なら 2〜3 秒で十分なこともあります。可読性を左右するのは見た目の派手さよりも尺なので、これは remotion 出力を改善する最短ルートです。

トランジションとオーバーレイを繰り返し調整する

よくある失敗は、ズームの多用、すべてのテキストオーバーレイが似たような一般論になること、そしてトランジションがプロダクトの見せ場を邪魔することです。最初のレンダーが忙しすぎると感じたら、トランジションをシンプルにし、文言を短くし、画面にすでに表示されている内容を繰り返すオーバーレイは削除してください。そのうえで、一度に 1 つだけ変更して再レンダリングすれば、どの調整が効いたのか判断しやすくなります。

リポジトリのサンプルを再利用する

最初の出力が悪くはないがまだ磨き込みが足りないなら、examples/WalkthroughComposition.tsx と resources/screen-slide-template.tsx と比較してください。これらのファイルは、画面中心のコンポジション、控えめなアニメーション、構造化されたメタデータという、意図された remotion のスタイルを示しています。このパターンを流用するほうが、ワークフローをゼロから書き直すよりたいてい速いです。