Communitygithub.com

jeremyhan520/promo-film-looks

Remotion でプロモーションフィルム(宣伝・形象・VCR)向けの2つの完成済みビジュアルスタイルテンプレート(アップル風・華章版)。学校や大学、各種機関向け。

promo-film-looks とは?

このスキルは、Remotionでプロモーションフィルム(宣伝・形象・VCR)を制作するための、すぐに使える2つのビジュアルスタイルテンプレート(アップル風・華章版)を提供します。ゼロからプロジェクトを始める代わりに、動作確認済みのエンジンテンプレート(シーンキット、ショット単位のルック、トランジション、写真フレーム、ほぼ全画面のカードレール、見出し数字の強調、テキストマスクのオープニング)をベースに作業を開始できます。レンダリング、QA、マスターファイル生成、差し替えセグメント作成のためのスクリプトも含まれており、設計原則も文書化されています。このスキルは、学校や大学、研究所、企業向けのプロモーションフィルムをRemotionで制作したい場合や、「アップル風(旧:磨砂版)」、「華章版」、「磨砂風」、「毛ガラス」、「黒金」、「アップル風」、フロストガラス調やダークゴールドの高級感のあるルックが求められた場合に特に有用です。また、既存プロモーションの新しいエディションやリスタイル、特定のセグメントの差し替えにも対応します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jeremyhan520/promo-film-looks/tree/HEAD/promo-film-looks

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

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

プロモーションフィルムのルック:アップル風(ガラス)と華章版(オーラム・ノクターン)

機関向けプロモーションフィルム向けの、完成済みスタイルテンプレート2つ。白紙のRemotionプロジェクトから始める代わりに、動作確認済みのエンジンからスタートできます。

  • アップル風(ガラス):アップル風フロストガラス。ショットごとに白 / 空色 / 青の背景、黄色のアクセント、优设标题黑のタイトル、角丸の枠なし写真、ガラスの背後にライブデータグラフィック。references/glass.md を参照。
  • 華章版(オーラム、オーラム・ノクターン):漆黒の背景、シャンパンゴールドのタイポグラフィと金箔のタイトル。金縁のフォトフレーム、ライトリーク、少数のレンズフレアを追加。references/aurum.md を参照。

1つのコードベースで両方のルックをレンダリング。ルックは入力プロップ(--props=glass.json または --props=aurum.json)で指定するため、同じタイムラインとシーンを2つのエディションとして出荷できます。

ルックの選び方

デフォルトはアップル風:明るくクリーンで国際的、入学・リクルートフィルムに最適。華章版はより暗く格式的。周年記念、祝賀会、アワード、プレミアムブランドフィルム、またはユーザーが華やか / 黒金 / ラグジュアリーを求める場合に提案。フィルム全体をレンダリングする前に、数枚の静止画を見せてください。

ブランドカラーが青でない場合も、ガラスエンジンを維持し、トークンを再色付け(looks.tsx の glassVars、theme.ts の GLASS)してください。新しいルックをゼロから作らないでください。

新しいフィルムを始める

python <skill-dir>/scripts/scaffold.py <new-project-dir>

その後、プロジェクト内で:

npm install
npx tsc --noEmit -p .
PROPS=glass.json bash qa.sh demo 30 150 268 320 460 520

デモ用タイムライン(src/scenes/Demo.tsx)には、各シグネチャコンポーネントごとに1ショットが含まれています。何かを変更する前に、両方のルックでその静止画をレンダリングし、フォントとブラウザがこのマシンで動作することを確認してください。

セットアップノート:

  • フォントはスキルに再配布されていません。assets/fonts/README.md に各ファイル、その出典、ライセンスが記載されています。スキャフォールドは assets/fonts/ にあるものをコピーします。不足しているフォントはレンダリングを壊さずにフォールバックします。
  • ブラウザ:remotion.config.ts は、ローカルのEdgeが存在する場合にそれを指します。Chrome Headless Shellがネットワークによってはダウンロードできない場合があるためです。
  • シェル:スクリプトはbashであり、PROPS=… bash qa.sh はbash構文です。WindowsではGit Bashで実行してください。PowerShellからは、Git Bashを明示的に呼び出してください。例:& "C:\Program Files\Git\bin\bash.exe" -c "PROPS=glass.json bash qa.sh demo 30 150" (ベア bash はWSLを起動する可能性があります)。

テンプレートの構成内容:

ファイル役割フィルムごとに編集?
src/config.ts長さ、SHOTS(ショットごとのトーン、タイトル面、チップ)、CHAPTERS(モチーフ、ゴーストワード)、FORMULAS、BRANDはい
src/scenes/*.tsxフィルムそのもの:キットコンポーネントから構築された、チャプターごとに1ファイルはい
src/kit.tsxScene、Ground、Night、Card、Print、DocPage、Caption、Rise、En、Rule、Heading、ChapterCard、useCount、StatHit、MaskTitle、CardRail、FeatureCardまれに
src/looks.tsx両方のルックの背景、トランジション、フォトフレームとライトまれに
src/glassfx.tsxガラスの詳細レイヤー:モチーフ、ディスク、チップ、ゴーストワード、ボケ、エッジコメットまれに
src/theme.tsトークン C、フォント F、FOIL、イージング EZ、r()、mix()まれに
src/Film.tsxマスタータイムライン、GLASS_CSS、VO/SFXフックアップはい(配線)

シーンはルックに依存しないようにする必要があります。色は C.* トークンのみ、タイポグラフィは F.* のみ、写真は Print、パネルは Card または C.card/C.fill を介して使用。シーン内で16進数の色をハードコードしないでください。同じシーンが白地に青、インク地に白、金地にミッドナイトでレンダリングされる必要があります。

ワークフロー

  1. ボイスオーバーからのタイミング。
    • VO(例:Whisperの単語タイムスタンプ)を調整し、チャンク時間を書き留めます。
    • すべての Scene は、絶対的なVO秒数に配置されます。隣接するシーンは約0.35秒重なります。
    • 要素時間(t0、at)も絶対秒数です:ナレーターがその言葉を発する瞬間。話された言葉に合わせてテキストが到着することで、フィルムがアニメーションではなく編集されたように感じられます。
  2. ショットテーブル。 config.ts の SHOTS に行を追加します。
    • 隣接するショットが異なるようにトーンを交互に配置します。
    • タイトル(head)は、コンテンツが空白を残す側に配置します。
    • フルブリードまたはブレンドモードのショットは flat とマークします。
  3. キットコンポーネントからシーンを構築します。すでに機能しているパターンはリファレンスにあります。例:
    • 密集した数値のためのほぼ全画面のカードレール
    • 一度に全体が表示される見出し数字
    • テキストマスクのオープニング
  4. QA静止画(qa.sh)を、出荷するすべてのルックで、各ショットの最も忙しい瞬間に実行します。自分で確認してください。チェックリストは references/pipeline.md を参照。
  5. マスターは master.sh で作成:−16 LUFS、h264 crf 17、AAC 320k。その後、verify.sh の数値を報告します。
  6. 納品後の修正。 変更されたスパンのみを segment.sh で再レンダリングします。マスターからオーディオを取得してラウドネスを一致させ、両方のスプライスフレームがマスターと等しいことをチェックします。

設計原則

この2つのルックを支える原則。各原則には理由が続きます。理由はルール自体よりも重要です。

  • 字幕と音楽の余地を残す。 ボイスオーバー+SFXを納品し、埋め込み字幕やBGMは要求がない限り含めない。機関は通常、後で統一された字幕と音楽を追加するため、下部バンド(y > 950あたり)は重要なコンテンツを避けて空けておく。
  • フレーム上部をクリーンに保つ。 装飾的な英語のランニングヘッド、チャプターキッカー、HUDラインは、中国の視聴者には雑然として映る。ガラスではキッカーはすでにオフになっており、BRAND はデフォルトで空。タイトルの下にある英語の補助ラインは問題ない。
  • スライドデッキ風を避ける。 ベアのフロストレイアウトはPowerPointのように見える。すべてのガラスショットは、コンテンツの背後にスローレイヤー(モチーフ、ディスク、ゴーストワード、手前のボケ、およびコンテンツプレーンのゆっくりとした3D回転)を持つ。隣接するショットは背景を交互に変える。これらのレイヤーを「きれいに」削除しない。
  • 装飾はコンテンツとして読まれてはならない。 フォーミュラチップは、数字のない純粋な表記であり、約60%の不透明度で影なし。「R² = 0.98」のようなチップは、機関に関する主張として読まれる。
  • 読みやすさが優雅さに優先する。 カードが密集した図(研究図表、結果)を保持する場合、ほぼフレーム全体を与える(CardRail)。小さなカードを並べると読めない。
  • 見出しの数字は全体として表示する。 0から100%への長いカウントアップはローディングバーのように見える。見出し数字には StatHit を使用し、通常の数字にのみ useCount を使用する。
  • 人物と文書:
    • 頭部をトリミングしない。すべてのポートレートのトリミングを静止画で確認し、Print で focus を設定して修正する。
    • フィルム内で同じ写真を繰り返さない。
    • 証明書や論文誌のページは完全に水平に配置する(DocPage に傾きはなく、ページの実際のアスペクト比にサイズ設定)。
  • アイコンは文字通りでなければならない。 抽象的なグリフよりも、交通手段なら正面から見た車のような、認識可能なオブジェクトを優先する。
  • 機関のコンテンツはデータである。 人物、写真、名前、数字は提供された通りに正確に使用し、決して創作しない。ソース写真に手直し(背景、色)が必要な場合、隣接するものに合わせてから、レンダリング前に静止画を見せる。

レポート

確認した内容を数値とともに報告:フレーム数、デコード時間、長さ、LUFS、ピーク、どの静止画を見たか。実行しなかったこと(例:「全体を通して視聴していない」「音声を聞いていない」)を明確に述べる。成果物の名前は <機構>宣传片_<バージョン>_无字幕无BGM_1080p25.mp4 とする。差し替えセグメントは <バージョン>_替换片段/ フォルダに配置し、開始タイムコードで名前を付ける(詳細は references/pipeline.md)。

リファレンス

  • references/glass.md:完全なアップル風仕様。トークン、ショットごとのルック、フロストサーフェス、トランジション、詳細レイヤー、シグネチャームーブ、落とし穴をカバー。
  • references/aurum.md:完全な華章版仕様。ステージレイヤー、金箔タイプ、フレーム、ライトリーク、フレア、コントラストの注意点をカバー。
  • references/pipeline.md:VOタイミング、SFXキュー表、QAチェックリスト、マスタリング、検証、差し替えセグメント、編集、納品時の命名。

関連スキル