ブランドの統一は、明確な小さな素材セットから始まります。このガイドはオープンソース Claude Motion ツールキットと Remotion の素材規則を使います。準備は HyperFrames の編集にも役立ちますが、React の import や staticFile は Remotion の仕組みであり、本サイトのエディター用コマンドではありません。
エージェントが使える素材一覧を作る
承認済みロゴ、あれば明暗の背景用バリエーション、正確なフォントファイル、短い配色一覧、公開可能な画面画像を集めます。ファイル名、用途、出所、利用許可をプロジェクト横の文書に記録し、現在の製品名と承認済みの行動案内も加えます。仮素材は明示します。実装前に実際に見つかったファイルを列挙させれば、もっともらしい動画でロゴが勝手に変わったり、存在しない製品画面が作られたりする問題を防げます。
安定したローカルパスを使う
Remotion では public/assets/logo.png や public/assets/dashboard.png のように共通素材を public に置き、public からの相対パスを staticFile に渡します。短い名前を使い、大文字・小文字を統一します。環境が変わると文字の大小の違いで読めないことがあります。期限付き画像URLより、利用権を確認したローカル素材を優先します。読み込みを簡単にするためにURLへアクセストークンを入れたり、非公開の顧客画面を公開ホストへ上げたりしないでください。
動かす前に透過とトリミングを確認する
ロゴを明るい背景と暗い背景の両方で開きます。白い四角は描画不具合ではなく画像の一部かもしれません。透明な余白でロゴ本体が小さく見えることもあります。縦横比と承認済み余白を保ち、写真は枠を埋めるか全体を収めるか決めます。前者では重要箇所が切れる場合があります。動きを付ける前に各素材の静止画を求め、細い線はデスクトップで拡大するだけでなく、想定するスマートフォンの表示サイズで確認します。
実際のフォントを読み込み各文字体系を確認する
Remotion は @remotion/fonts によるローカルフォント読み込みを説明しています。指定ファミリーと実際のウェイトを使い、文字測定や描画の前に読み込み完了を待ちます。用途が許可範囲に入るか確認し、ライセンスを保存します。欧文フォントに中日韓の字形がない場合は適切な代替を指定し、見た目も確認します。全言語が同じになるとは限りません。最長見出し、句読点、数字、アクセント文字を試し、翻訳で改行が変わったら、読めないほど縮小する前に配置を調整します。
具体的にブランドを指示し、書き出しを確認する
下のプロンプトを使い、ブランドに関する要件を具体的に伝えます。承認後は実際の MP4 でフォント置換、ロゴの切れ、色変化、画像欠落を確認します。素材、一覧、フォント情報、完成品を一緒に残します。本サイトの編集可能なダウンロードはローカル制作に使えますが、汎用ブランドアップロードや自動ブランドセット読込機能があるとは限りません。
提供ロゴを描き直さず使用してください。承認済みのクリーム背景とチャコール文字を使い、緑は主な行動だけに使います。提供フォントを読み込み、画面画像の比率と内容を保ちます。動かす前にロゴ、最長見出し、画面画像を含む静止画を提示してください次のステップ
実物のファイルと明確な規則を渡し、書き出した動画で確認しましょう。正確な素材一覧は、単に「ブランドらしく」という指示より確実です。
制作ワークスペースを見る出典と参考資料
出典は公式資料や制作者の公開ページです。提供状況は変わるため、契約やインストールの前にリンク先を確認してください。
- Importing assetsRemotion
- Using fontsRemotion
- Visual review loopwhaleyxbt
- Claude Motion Skills public CLIClaude Motion Skills