product-filmとは？
product-filmは、コードでショーリール品質のプロダクトフィルムを作成するためのClaude Codeスキルです。Remotionを使って、ランディングページ用ループ、ローンチ動画、プロモーション映像、デモリールを制作できます。
汎用的なビジュアルスタイルを適用する代わりに、このスキルはプロダクトのリポジトリを調査します。デザインルール、トークン、コンポーネント、ロゴ、公開中のサイト、プロダクトが訴求できる内容を確認します。そして、それらの素材を使い、まるでプロダクトチームが直接制作したかのような見た目と音のフィルムを作成します。
ワークフローは共同作業型です。Claudeは、掲載場所、長さ、音楽、機能、テキスト、トランジション、任意のビジュアル要素について質問します。回答から決まったブランド方針をvideos/BRAND.mdに記録し、ビートシートを作成し、スタイルフレームを提示し、アニメーションを構築し、レビュー用素材を生成して、検証済みの成果物をレンダリングします。
主な機能
- デザインシステムの調査：ルールファイル、デザイントークン、コンポーネント、ロゴ、公開中のプロダクト、承認済みの訴求内容を確認します。
- プロダクトに合わせたインタビュー：汎用的なプレースホルダーではなく、実際の機能やコンポーネントに基づいて選択肢を提示します。
- 永続的なブランドキット：決定事項を
videos/BRAND.mdに保存します。この内容がスキルのデフォルト設定より優先されます。 - ストーリーとスタイルの計画：ビートシートを作成し、構築を完了する前に3つのスタイルフレームで確認します。
- 音楽を考慮した編集：ビートグリッドを計測し、小節単位で音楽をカットし、ピークに効果音を配置します。
- Remotionベースのアニメーション：すべてのフレームが時間の純粋関数になる1つのコンポジションを構築します。
- 構造化されたレビュー：引き継ぎ時の静止画、コンタクトシート、ハーフ解像度のドラフトを生成します。
- 検証済みの納品：モーションブラー付きの240 fpsマスターをレンダリングし、デコードしたファイルの色、長さ、シームレスなループを確認します。
- 複数の出力：音声なしのランディングページ用ループ、音楽付きバージョン、WebMファイル、ポスターを生成します。
要件
スキルをインストールする前に、環境が次の要件を満たしていることを確認してください。
- Claude Code。このスキルはローカルのツールチェーンを実行するため、Claudeのチャットアプリケーションでは動作しません。
- Node.jsとBun。
- Pythonユーティリティを実行するためのuv。
- 合法的に使用する権利を持つ音楽。
このスキルはプロジェクトにRemotionを追加します。Remotionは個人および小規模チームは無料で利用できますが、大規模な企業には企業ライセンスが必要です。利用規約はremotion.dev/licenseで確認してください。
Pythonスクリプトは、必要に応じてimageio-ffmpeg経由でNumPyと完全版のFFmpegを取得するため、これらの依存関係がシステム全体にインストールされることはありません。
スキルのインストール
方法1：Claude Codeプラグインマーケットプレイスからインストール
Claude Codeでproduct-filmマーケットプレイスを追加し、プラグインをインストールします。
/plugin marketplace add Rieranthony/product-film-skill
/plugin install product-film@product-film-skillClaude Code環境でスキルを利用できるようにしたい場合、これが最も直接的なインストール方法です。
方法2：スキルを手動でインストール
リポジトリをクローンし、個人用のClaude Codeスキルディレクトリにスキルをコピーすることもできます。
git clone https://github.com/Rieranthony/product-film-skill
mkdir -p ~/.claude/skills
cp -R product-film-skill/plugins/product-film/skills/product-film ~/.claude/skills/コピーしたフォルダーには、制作全体で使用するワークフローの手順、リファレンス、テンプレート、アニメーションユーティリティ、音声ツール、レビュースクリプト、レンダリングスクリプトが含まれます。
方法3：チームでスキルを共有
スキルを共有リポジトリの一部にするには、次の場所にそのフォルダーをコミットします。
.claude/skills/product-film/これにより、Claude Codeを使用するチームメンバーがプロジェクトとともにスキルを利用できます。
最初のプロダクトフィルムを作成する
ステップ1：プロダクトのリポジトリを開く
紹介したいプロダクトのリポジトリからClaude Codeを実行します。スキルはコンポーネント、デザイントークン、ルール、ロゴ、プロダクトのコンテンツなど、ローカルプロジェクトの素材に依存するため、これは重要です。
ステップ2：フィルムを依頼する
目標の長さ、掲載先、音楽を含めて、Claude Codeにフィルムの作成を依頼します。READMEには次の例が記載されています。
このプロダクトのランディングページ用動画を、指定した曲で45秒作成してください。
最初の依頼でクリエイティブの詳細をすべて決める必要はありません。スキルは本格的な制作を始める前に、追加のインタビューを行います。
ステップ3：調査を完了する
Claudeはデザインルール、トークン、コンポーネント、ロゴ、使用可能な訴求内容を簡単に確認します。この調査段階によって、フィルムにプロダクト固有のビジュアルと編集方針の基盤が生まれます。
関連するプロジェクトファイルをリポジトリから参照できる状態にしておいてください。結果の品質と正確さは、Claudeが実際のプロダクト素材を調査できるかどうかに左右されます。
ステップ4：クリエイティブインタビューに回答する
このスキルでは、フィルムをどこで再生するか、長さ、使用する音楽、表示する機能について質問します。さらに、次のような任意の要素も提案します。
- ロゴアニメーション、または既存のマスコット。
- 単語ごとに大きく表示するパンチライン、キャプション、または画面上に文字を表示しない演出。
- マジックムーブのトランジション、カメラ移動、またはビートに同期したカット。
- カーソル操作、パートナーロゴ、実証シーン、ブランドテクスチャ。
これらの選択は任意です。プロダクトと想定する視聴コンテキストを支える要素だけを選択してください。
ステップ5：ブランドキットとストーリーを確認する
Claudeは調査結果とインタビューの回答を次のファイルに書き込みます。
videos/BRAND.mdこのファイルは、スキルのデフォルトのクリエイティブ選択よりも優先されます。スキルは、完全な動画を制作する前にビートシートを用意し、3つのスタイルフレームを提示します。
スタイルフレームのレビューを使って、アニメーション作業を進める前に、タイポグラフィ、カラー、構成、コンポーネントの表現、全体的なブランド適合性を確認してください。
ステップ6：スキルに音楽を処理させる
音楽ワークフローはビートグリッドを計測し、選択した曲を音楽上の小節単位でトリミングし、効果音をピークに合わせます。これにより、任意のタイミングに頼るのではなく、シーンの切り替えや重要なビジュアルの瞬間に音楽的な構造を持たせられます。
ステップ7：動画を制作してレビューする
スキルは1つのRemotionコンポジションを作成し、すべてのフレームを時間の純粋関数としてモデル化します。インタビュー中に選択したトランジション方式でシーンをつなぎます。
レビュー中、Claudeは引き継ぎポイントのスチル画像、コンタクトシート、半解像度のドラフトを生成します。これらの出力を確認し、修正を依頼して、最終レンダー前に方向性を承認できます。
ステップ8：納品物をレンダーして検証する
最終処理では、モーションブラー付きの240 fpsマスターを作成します。その後、次のような指定された納品形式を生成します。
- プロダクトページに適した、音声なしのループ。
- 音楽を含むバージョン。
- WebMバージョン。
- ポスター画像。
生成されたファイルはデコードされ、色、長さ、シームレスなループが検証されます。
プロジェクト構成を理解する
このスキルは、ワークフローのドキュメント、専門リファレンス、テンプレート、再利用可能なアニメーションユーティリティ、制作スクリプトで構成されています。
plugins/product-film/skills/product-film/
├── SKILL.md
├── reference/
├── templates/
│ ├── BRAND.md
│ ├── film-prompt.md
│ └── kit/
└── scripts/
├── beats.py
├── audio-edit.py
├── stills.ts
├── render.ts
└── verify.pySKILL.mdには、ワークフロー、制作上のデフォルト設定、既知の落とし穴が記載されています。reference/には、調査、インタビュー、クリエイティブ要素、ストーリーテリング、アニメーションエンジン、音楽、レビュー、レンダリングに関する情報が収録されています。templates/BRAND.mdには、プロダクト用の記入式デザインキットが用意されています。templates/film-prompt.mdには、再利用可能な動画ブリーフが用意されています。templates/kit/には、タイミンググリッド、スプリング、カメラ、カーソル、マジックムーブ、パンチライン、ディザリング、デバッグオーバーレイのツールが含まれています。beats.pyはNumPyを使って曲からビートグリッドを導出します。audio-edit.pyは音楽上の小節単位で曲をカットします。stills.tsはレビュー用のスチル画像を生成します。render.tsは最終レンダーと納品物を作成します。verify.pyは出力ファイルをデコードして検証します。
高度なヒント
BRAND.mdをクリエイティブの正解として扱う
videos/BRAND.mdはスキルのデフォルト設定を上書きするため、内容を慎重に確認してください。プロダクトのビジュアルルール、ボイス＆トーン、承認済みの訴求、インタビュー中に決定したクリエイティブの選択が反映されていることを確認します。
用途に合わせて形式を選ぶ
動画をどこで再生するかをClaudeに伝えてください。ランディングページ用のループには、ローンチ動画やデモリールとは異なる要件があります。用途によって、最終体験を音声なしにするか、音楽中心にするか、テキストを多用するか、文字なしでも理解できるようにするかも決まります。
実際のプロダクト素材を使う
実際のトークン、コンポーネント、ロゴ、機能、訴求に基づいてスキルを動かしてください。これはこのプロジェクトの目的の中心です。プロダクトそのものが制作したように見える動画を作るためです。
レビューのチェックポイントで判断する
3つのスタイルフレームを使って、早い段階で方向性を評価してください。その後、コストの大きい最終レンダーを承認する前に、引き継ぎ用スチル、コンタクトシート、半解像度のドラフトを確認します。これらのチェックポイントは、まだ現実的に修正できる段階で、ビジュアルやタイミングの問題を見つけるために設けられています。
任意の要素を意図的に選ぶ
ロゴアニメーション、マスコット、パンチライン、キャプション、カメラ移動、カーソル操作、パートナーロゴ、実証シーン、テクスチャはすべて任意です。チェックリストのように扱わないでください。選択したプロダクト機能を最も明確に伝えられる要素を選びます。
制作前に音楽の権利を確認する
このツールは曲を分析・編集できますが、その音楽を使用する許可を与えるものではありません。公開するランディングページ、ローンチ動画、プロモーション、デモリールに曲を含める前に、必要な権利を保有していることを確認してください。
Remotionのライセンスを確認する
product-filmスキル自体のテキストとコードはMITライセンスで提供されています。Remotionには別途ライセンス条件があるため、大規模な企業は本番環境で使用する前に、必要な企業ライセンスを取得していることを確認してください。
まとめ
product-filmは、Claude Codeを体系的なプロダクト動画制作ワークフローへと変えます。リポジトリの調査、プロダクトに特化したインタビュー、永続的なブランドキット、ビートを考慮した音楽編集、Remotionによるアニメーション、段階的なレビュー、検証済みのレンダリングを組み合わせています。実際のデザインシステムから始め、各チェックポイントで作業をレビューすることで、プロダクトのアイデンティティと一貫した洗練された動画アセットを作成できます。