アダプティブ React & Remotion モーショングラフィックススキル

このスキルは、React と Remotion を使用した、スタジオ品質のモーショングラフィックスのデザイン、コンテキストを考慮したアートディレクション、流動的なナラティブ構造、およびヘッドレス MP4 レンダリングをガイドします。

コア哲学: 「形式はコンテキストに従う。」すべての動画に固定テンプレートや固定アクト数を強制しないでください。まずブランド、尺、アスペクト比、ターゲットオーディエンスを評価し、その後、理想的な構造アーキタイプと最新のデザイン言語を自律的に選択して、オーダーメイドの React コンポジションを構築します。

1. 事前アセットインクワイアリ & 評価 (ステップ 0)

コードを作成したりレンダリングを実行する前に、アセットインクワイアリ & コンテキスト診断 を実行します。

🎯 必須アセットインクワイアリルール (에셋 보유 여부 질의 필수 규칙)

ユーザーがプロンプト内で画像ファイル、ロゴ、デザイントークンを明示的に提供していない限り、ユーザーの既存アセットについて積極的に質問する必要があります:

질의 표준 템플릿 (アセット照会テンプレート): 「혹시 영상に 활용할 ブランドロゴ（SVG/PNG）、製品スクリーンショット、実写写真、公式カラー（HEX）、スローガン/コピー などのアセットはお持ちですか？

アセットをお持ちの場合: ファイルパスをお知らせいただくか、プロジェクト内の public/ フォルダに配置していただければ、動画に正確にマッピングします。

アセットがない場合、または直接作成をご希望の場合（「おまかせ」）: 私がブランド/組織の公式 CI ベクターを直接復元し、シネマティックビジュアルとカスタム UI コンポーネントを自社設計して完成させます。」

3トラックアセット実行ルーティング:

トラック A (ユーザー提供アセット) :
- 最初にローカルワークスペース / public/ フォルダを確認します。
- staticFile('...') を使用して SVG ベクターパス、高解像度画像、スクリーンショットを取り込みます。
- Ken Burns マイクロパンニング (references/asset-orchestration.md) と 3D パースペクティブモックアップを適用します。
トラック B (ゼロアセット / 自律生成) :
- ユーザーが「ない」「おまかせ」と言った場合、またはアセットを提供しなかった場合: 決して停止したりブロックされたりしないでください。
- 公式コーポレートアイデンティティ (CI) ベクターマークを自律的に再構築します (references/brand-identity-and-ci.md)。
- ドメインに忠実なビジュアルメタファー、スタイル付きカード、ベクターバッジ、幾何学モチーフを合成します。
トラック C (ハイブリッドオーケストレーション) :
- ユーザーがロゴまたはURLのみを提供した場合: カラートークンを抽出し、製品UI、ダッシュボード、およびその周りのナラティブワールドを自律的に構築します。

プロジェクトコンテキスト診断 (4つの側面)

1. ターゲットプラットフォーム & アスペクト比:
   • 16:9 ランドスケープ (1920×1080)  -> YouTube、ヒーローランディングページ、キーノートショーリール
   • 9:16 バーティカル (1080×1920)   -> TikTok、Instagram リール、YouTube ショート
   • 1:1 スクエア (1440×1440)      -> Twitter/X フィード、Instagram 投稿、タクタイル UI ループ
   • 4:5 ポートレート (1080×1350)    -> ソーシャルマーケティングフィード

2. 尺 & ペーシング:
   • 超短尺 (3～7秒)   -> キネティックロゴバンパー、ループするシグネチャーモチーフ、マイクロインタラクション
   • 短尺 (8～15秒)   -> 高保持率ソーシャルリール、バイラルプロダクトフィーチャー、エレベーターピッチ
   • 中尺 (15～30秒)  -> フルブランドアイデンティティフィルム、包括的なプロダクトローンチ
   • 長尺 (30～60秒)   -> マルチチャプタープロダクト解説、会社記念、ショーリール

3. エンティティ アイデンティティ & トーン:
   • エンタープライズ / 航空 / 自動車 -> 気品、広がり、空気力学、高級感
   • 急成長テック / SaaS / AI      -> 鮮明、触感、超高速、チタンダーク
   • 学術 / 大学 / 文化  -> 歴史的、権威的、エディトリアルセリフ、知的
   • コンシューマー / クリエイティブ / ライフスタイル   -> 鮮やか、触感、弾力性、タイポグラフィックな遊び

4. ナラティブ アーク & メッセージ階層:
   • フック (0～20%) -> 実証/フィーチャー (20～70%) -> ブランドペイオフ & CTA (70～100%)

2. アダプティブ構造アーキタイプ

尺と目的に自然に適合するナラティブ構造を選択します。アジャイルループや2ビートパンチが優れている場合に、固定の4アクト型を強制しないでください。

アーキタイプ	典型的な尺	リズム & シーン構造	最適な用途
A. キネティックバンパー / マイクロループ	`3～6秒` (6～12ビート)	単一焦点の勢い: 瞬間的なビジュアルフック → 継続的なシームレスなモーフ → ヒーローロゴロックアップ (ループシームデルタ < 0.05)。	ロゴリビール、シグネチャーUIループ、アプリの読み込み状態
B. バーティカルソーシャルリール / ショート	`8～15秒` (16～30ビート)	3秒ルール: 0～1秒大胆なサムストップフック → 2～10秒高速キネティック実証 (3回のずらした高速カット) → 11～15秒パンチの効いたコールトゥアクション (CTA)。	Instagram リール、TikTok、YouTube ショート
C. ナラティブブランドフィルム	`15～30秒` (30～60ビート)	4アクト交響的アーク: 出発/フック (0～20%) → 本質/ネットワーク (20～55%) → 成層圏への上昇 (55～80%) → 象徴的なペイオフ (80～100%)。	主要ブランドフィルム (例: Korean Air、Apple レベルのローンチ)
D. マルチチャプター解説	`30～60秒` (60～120ビート)	章立てされた旅: ペインポイントフック → アーキテクチャ解説 → 詳細フィーチャーデモ → 社会的証明 & エコシステム → 最終ブランドロックアップ。	SaaS 解説、組織概要、投資家向けデッキ
E. 連続シェイプモーフ	任意の尺	途切れないアイデンティティ: 1つのプライマリコンテナが決してカットされたり画面から消えたりしない。継続的に寸法、半径、内部コンテンツをモーフィングする。	タクタイル UI ショーケース、プロダクトモーフループ

3. モダンデザイン言語スペクトラム

エンティティのパーソナリティに一致するビジュアル言語を自律的に選択します:

[1. スイス ネオブルータリスト]    超規律的なグリッド、太字のグロテスクサンセリフ (Geist、Inter)、高コントラストの紙/インク、無駄なし。
[2. ラグジュアリー ダークチタン]   Apple/Stripe の美学、深い黒曜石 (#0B0C10)、1px ヘアライン境界、メタリックな輝き、温かみのあるゴールド/バーミリオン。
[3. エディトリアル セリフ & フィルム] 学術的 & 文化的気品、太字のモダンセリフ (Instrument Serif、Editorial New)、温かみのある紙、文字間隔。
[4. オプティカル ハーフトーン & ドット] スタジオグラフィッククラフト、レスポンシブダイナミックドットマトリックス、ハーフトーンウェーブトランジション、レトロモダンな雰囲気。
[5. タクタイル フィジカル UI]    SaaS & ツールの熟練、物理的なプレススプリング、ゴムバンドドラッグ、リキッドタブ、物理カーソル。
[6. シネマティック エアロダイナミック]  航空、自動車、モビリティ。壮大な飛行経路、テレメトリーHUD、水平線の照明、広大なスケール。
[7. ビビッド ポップ & ジオメトリ] クリエイティブアプリ、コンシューマーツール。大胆なフラットカラーブロック、弾力性のあるシェイプトランジション、パンチの効いたタイポグラフィ。

(各スタイルのコードレシピ、パレット、タイポグラフィペアリングについては references/design-styles.md を参照してください)。

4. Remotion プロジェクトアーキテクチャ

すべてのプロジェクトは、検証済みの、マジックナンバーレス Remotion 構造を使用します:

my-motion-project/
├── package.json             # remotion、@remotion/cli、react、react-dom
├── remotion.config.ts       # システム Chrome/Edge GPU D3D11 アクセラレーション
├── tsconfig.json            # ES2022、NodeNext、jsx: react-jsx
└── src/
    ├── index.ts             # registerRoot(Root) エントリポイント
    ├── Root.tsx             # <Composition> レジストリ (寸法、fps、尺)
    ├── compositions/        # マスターコンポジションタイムライン
    ├── scenes/              # モジュール式 <Sequence> シーン
    ├── components/          # 再利用可能な UI、ブランドロゴ、カーソル、モックアップ
    └── constants/           # パレット、120 BPM タイミングヘルパー、タイポグラフィ

`remotion.config.ts` (システム Chrome 統合)

import { Config } from '@remotion/cli/config';
import fs from 'node:fs';

const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
const edgePath = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe';

if (fs.existsSync(chromePath)) {
  Config.setBrowserExecutable(chromePath);
} else if (fs.existsSync(edgePath)) {
  Config.setBrowserExecutable(edgePath);
}

Config.setVideoImageFormat('jpeg');
Config.setChromiumOpenGlRenderer('angle');
Config.setConcurrency(4);

5. 実行 & レンダリング CLI

# 1. インタラクティブ スタジオプレビュー (スクラブ可能なタイムライン & リアルタイム HMR)
npm run preview   # または: npx remotion preview src/index.ts

# 2. 60fps マスター MP4 をレンダリング
npm run build     # または: npx remotion render src/index.ts <CompId> out.mp4

# 3. 高解像度キーフレーム静止画をキャプチャ
npx remotion still src/index.ts <CompId> still_frame.png --frame=60

6. リファレンスドキュメントインデックス

モーショングラフィックの特定の側面を作成するときは、これらの詳細なガイドを参照してください:

structural-archetypes.md: 5つの構造設計図 (マイクロループ、ソーシャルリール、ブランドフィルム、マルチチャプター解説、連続モーフ)。
design-styles.md: 7つのモダンデザインスタイル (スイスネオブルータリスト、ダークチタン、エディトリアルセリフ、オプティカルハーフトーン、タクタイルUI、シネマティックモビリティ、ビビッドポップ) とパレットおよびタイポグラフィ。
brand-identity-and-ci.md: 自律ベクターCI再構築、ロゴリビールメカニクス、カラールール、ブランドモチーフ。
storytelling-and-narrative.md: ナラティブアーク、ビジュアルメタファー、共有オブジェクトトランジション、ペーシング。
asset-orchestration.md: Ken Burns パン/ズーム、パースペクティブモックアップ、SVG ベクターバッジ、ビジュアル階層。
remotion-patterns.md: スプリングメカニクス、interpolate()、カメラコンテナ、スタッガーカスケード、<Sequence> オーケストレーション。
ui-motion-recipes.md: カーソル、ライブカウンター、スライダー、モーダル、通知カード、グラフ。
remotion-qa-and-verification.md: 3ステップ QA ループ、10ポイントポスターチェックリスト、ヘッドレス GPU レンダリング。
timing.md: 120 BPM 音楽ビートグリッド、フレーム計算、スタッガーオフセット、ホールド制限。
motion-math.md: ハーモニックスプリング、シード付きPRNG、対数カメラズーム。
gotchas.md: Chromium レンダリングの落とし穴、preserve-3d、オーバーフローマスク、テキストぼやけ回避。

ll7098ll/motion-graphics

motion-graphics とは？

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

ドキュメント

アダプティブ React & Remotion モーショングラフィックススキル

1. 事前アセットインクワイアリ & 評価 (ステップ 0)

🎯 必須アセットインクワイアリルール (에셋 보유 여부 질의 필수 규칙)

3トラックアセット実行ルーティング:

プロジェクトコンテキスト診断 (4つの側面)

2. アダプティブ構造アーキタイプ

3. モダンデザイン言語スペクトラム

4. Remotion プロジェクトアーキテクチャ

`remotion.config.ts` (システム Chrome 統合)

5. 実行 & レンダリング CLI

6. リファレンスドキュメントインデックス

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

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

ドキュメント

アダプティブ React & Remotion モーション グラフィックス スキル

1. 事前アセット インクワイアリ & 評価 (ステップ 0)

🎯 必須アセット インクワイアリ ルール (에셋 보유 여부 질의 필수 규칙)

3トラック アセット実行ルーティング:

プロジェクト コンテキスト診断 (4つの側面)

2. アダプティブ構造アーキタイプ

3. モダンデザイン言語スペクトラム

4. Remotion プロジェクト アーキテクチャ

remotion.config.ts (システム Chrome 統合)

5. 実行 & レンダリング CLI

6. リファレンス ドキュメント インデックス

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

アダプティブ React & Remotion モーショングラフィックススキル

1. 事前アセットインクワイアリ & 評価 (ステップ 0)

🎯 必須アセットインクワイアリルール (에셋 보유 여부 질의 필수 규칙)

3トラックアセット実行ルーティング:

プロジェクトコンテキスト診断 (4つの側面)

4. Remotion プロジェクトアーキテクチャ

`remotion.config.ts` (システム Chrome 統合)

6. リファレンスドキュメントインデックス