使い方ガイドへスキップ
Video Shotcraft作者 Vincentwei1021

Video Shotcraft スキル。

実際のプロダクトインターフェースを、構成され検証可能な動画タイムラインに変えます。

  • プロダクト動画
  • Remotion
  • モーションデザイン
ソースレビュー · Video ShotcraftSKILL.md
タスク プロダクト動画 成果物 • Remotionの動画プロジェクトと、レンダリング済みのプロダクト動画 • プロダクト由来のデザイン仕様、ショットのマッピング、ストーリーボード • キャプチャ素材を含む、確認可能なタイムラインと、任意の編集可能プロジェクトのエクスポート 始める前に Remotion/Node環境、ブラウザキャプチャ、ffmpegが必要です。一部のコンポーネントにはThree.js関連パッケージが必要で、任意の音楽分析や剪映(Jianying)エクスポートでは別途依存関係が加わります。Remotionに適用されるライセンスは、各自で確認してください。
編集部による要約 · ソース確認日 2026-10-07 · 生成された例ではありません

01 機能概要

Video Shotcraft

ショットレシピ、プロダクトのビジュアルトークン、決定論的なRemotion実装、サウンド、最終的なフレーム単位のレビューを組み合わせた、実キャプチャ型のプロダクト動画パイプラインです。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

Video Shotcraftは、プロダクト動画のための制作ライブラリ兼ワークフローです。主な被写体は実際のWebまたはデスクトップのインターフェースで、ページのスクリーンショット、要素の切り抜き、座標がカメラワークや機能デモの素材になります。短い説明からエージェントにすべての動きを考案させるのではなく、このスキルはショットレシピカード、リファレンス実装、再利用可能なコンポーネント、オーディオ素材、Ink Pressテンプレートを提供します。

フル動画には、既存テンプレートの適用、自律制作、ガイド付き共同制作という3つの独立したモードがあります。モードの選択で変わるのは承認プロセスであり、プロダクトを理解する必要性は変わりません。ビジュアルトークンはプロダクト自体から取得し、ショットカードはモーションの構造を提供します。最終レンダリング、フレームレビュー、サウンド処理は想定された制作工程に含まれており、ストーリーボードを作成しただけでは、いずれも完了したことになりません。

想定される成果物

  • Remotionの動画プロジェクトと、レンダリング済みのプロダクト動画
  • プロダクト由来のデザイン仕様、ショットのマッピング、ストーリーボード
  • キャプチャ素材を含む、確認可能なタイムラインと、任意の編集可能プロジェクトのエクスポート
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    確認とモードの選択

    業務コードを変更せずにプロダクトを読み取ります。既存テンプレートが合うか、クリエイティブの判断を委任するか、主要な判断にガイド付きの承認が必要かを決めます。

  2. 02
    プロダクトとサウンドの方向性を定める

    プロダクトから書体、余白、素材感を抽出し、安全にデモできる状態を特定します。ビートに同期した動画にする場合は、ストーリーボード作成前に、ユーザーが選んだ音楽を分析します。既存UIは記憶から再現せず、実際のキャプチャを計画します。

  3. 03
    機能をショットに割り当てる

    ショットレシピを選び、その正確なリファレンス実装を読み込みます。タイミング、間(ま)、キャプション、サウンドを計画します。ガイド付きモードでは、最終的なページ・要素のキャプチャの前に、ストーリーボード全体の承認を得ます。どのモードでも、キャプチャ前に機微なデータを削除または置き換えます。

  4. 04
    レンダリングと確認

    静止フレームと完全なレンダリング結果を確認し、タイミングとデータの安全性をチェックして、文書化された独立した最終レビューを受けます。音楽を使う場合は、BGMなしの別レンダリングも残します。

02 利用場面

使いどころ

Remotion/Node環境、ブラウザキャプチャ、ffmpegが必要です。一部のコンポーネントにはThree.js関連パッケージが必要で、任意の音楽分析や剪映(Jianying)エクスポートでは別途依存関係が加わります。Remotionに適用されるライセンスは、各自で確認してください。

向いているケース

  • ソフトウェア製品の紹介動画映画的なスタイルで作り込んだ架空のインターフェースではなく、見覚えのある実際の画面を見せることで説得力が生まれる機能ストーリーに適しています。
  • 特定のモーション表現プロモーション動画全体が不要な場合は、単一のショットカードだけで、独立したモーション作業に対応できます。

確認すべき制約

  • ランタイムと素材の権利Remotion、および提供される音楽、映像、フォントには、それぞれ独自の条件があります。スキルを利用できることは、すべての依存関係の商用利用要件が満たされることを意味しません。
  • キャプチャによるデータ露出顧客情報、社内情報、個人情報、認証情報は、キャプチャ前に削除する必要があります。機微な内容が写っているフレームは、見た目が良くても受け入れられません。

用意するもの

  • プロダクトと機能の順序ローカルプロジェクト、アクセス可能なページ、または承認済みのキャプチャと、動画で説明したい実際の機能を用意してください。
  • モードと制約テンプレート適用、自律制作、ガイド付き共同制作のいずれかを選びます。尺、アスペクト比、必須のショット、譲れないブランド上の制約を指定してください。
  • サウンドと安全なデータ使用許諾済みの音楽を使う場合は提供し、画面に表示してよいデモデータを明示してください。画面収録を始める前に、置き換えるデータを確認します。

03 重要な判断

重要な判断

  1. コード付きのモーションレシピ

    レシピの実際の実装は、イージングやマスキングなど、ショット名だけを頼りにエージェントが即興で作ると失われやすい細部を保持します。

  2. プロダクトのアイデンティティを保つ

    モーションの構造を書体や素材感から切り離すことで、確立された表現を、無関係なプロモーション用スタイルをプロダクトに押し付けることなく応用できます。

04 依頼例

焦点を絞ったブリーフで試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

セットアップを確認する

ショットカード、デモ、コンポーネント、テンプレートファイルを含むリポジトリ全体を使用します。ソースに記載のレンダリングコマンドは、一般的なインストールコマンドではありません。

アップストリームのソースファイル
https://github.com/Vincentwei1021/video-shotcraft/blob/5ddbf521038b0a7accfb6dc1e0a9eb29c67277ab/SKILL.md

Remotion/Node環境、ブラウザキャプチャ、ffmpegが必要です。一部のコンポーネントにはThree.js関連パッケージが必要で、任意の音楽分析や剪映(Jianying)エクスポートでは別途依存関係が加わります。Remotionに適用されるライセンスは、各自で確認してください。

まず1つの成果物から始める

スキルを実行する前に、このブリーフの範囲、元素材、制約を状況に合わせて調整してください。

サンプルブリーフ
提供されたプロジェクトに対して、ガイド付き共同制作モードでVideo Shotcraftを使用してください。検索、保存済みコレクション、エクスポートを説明する短い動画を、実際のUIキャプチャとデモ用データのみで作成します。プロダクト既存の書体と配色は維持してください。制作前に、機能とショットのマッピングおよび完全なストーリーボードを提案し、その後レンダリングして結果をレビューしてください。動画の公開や、元のキャプチャのアップロードは行わないでください。

結果を確認する

実際の出力を、以下の観察可能な基準に照らして確認してください。

  • レンダリングされたUIフレームが、承認済みのプロダクト状態と一致し、機微なデータを含んでいない。
  • 選択した各ショットが、具体的な機能または物語上の目的に対応している。
  • 納品されたレンダリング結果が、個々の静止フレームだけでなく、連続したシーケンス全体として確認されている。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。このリストは、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェアの依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定済みのソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される場合があります。

ソースの所有者
Vincentwei1021
スキルファイル
SKILL.md
ライセンス
Apache-2.0
確認したスナップショット
2026-10-07 · 5ddbf521038b
編集部によるソース要約
ショットレシピ、プロダクトのビジュアルトークン、決定論的なRemotion実装、サウンド、最終的なフレーム単位のレビューを組み合わせた、実キャプチャ型のプロダクト動画パイプラインです。

リンク先のソースに基づき、OpenDesignが作成したオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

Ink Pressのルックを必ず使う必要がありますか?

いいえ。テンプレートはモードの1つです。自律制作とガイド付き共同制作では新しい方向性を構築でき、テンプレートを適用する場合でも、対象プロダクトのビジュアルアイデンティティを用いるべきです。

アニメーションを1つだけ依頼できますか?

はい。ソースは、焦点を絞ったモーション作業に、単一のショットカードとそのリファレンス実装を使うことに対応しています。

編集可能な動画プロジェクトのエクスポートは自動で行われますか?

ソースには、任意の剪映(Jianying)エクスポートの手順が記載されています。独自の依存関係とプラットフォームの確認が必要なため、メインのレンダリングとは別に依頼し、検証してください。

OpenDesign

次のデザインの反復に向けて余地を作りましょう。

ブリーフ、元素材、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/Vincentwei1021/video-shotcraft/blob/5ddbf521038b0a7accfb6dc1e0a9eb29c67277ab/SKILL.md