mcpField
B
brand-kit

brand-kit

github.com/scrollmarkデザイン・UI1649 回インストール2 日前に更新
リポジトリ

brand-kit について

video-studioで動画のルックプリセットを作成・再利用するスキルです。字幕とカードのスタイルをファイルに保存してストーリーボードに適用でき、会話履歴に頼らず承認済みのルックを保てます。

主な機能

  1. 01スタイルプリセットの一覧表示と確認
  2. 02ストーリーボードへのプリセット適用
  3. 03ストーリーボードのルックを保存
  4. 04役割ごとの字幕とカードのスタイル設定
  5. 05シーンで明示した上書きの保持

活用シーン

  1. 01複数の動画で字幕スタイルを再利用
  2. 02ストーリーボードのシーンに統一したカードのルックを適用
  3. 03完成動画のスタイルを後で使うために保存

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/scrollmark/social-skills --skill brand-kit

インストール後、Claude Code で/brand-kitを入力して読み込まれたか確認します。

詳細

ブランドキット

ルックを持つのはプロジェクトではなく、ユーザーです。ルックは、今後制作するすべての動画で再利用できるものなので、ひとつの生成スクリプトの中や、このセッションの記憶の中ではなく、ファイルに保存します。

必要なもの

プリセット機能は styles です。これを使うには、pip install 'video-studio-engine @ https://github.com/scrollmark/social-skills/archive/refs/heads/master.tar.gz'(基本インストール。追加機能なし)を実行し、その後 video-studio styles … として実行します。これはここには同梱されていません。styles ツリーとストーリーボード文書を読み書きするため、スキルフォルダーに置ける単独ファイルではないからです。

このインストールを行わない場合、--list、--show、--apply、--save は使えず、プリセットをストーリーボードに展開する機能もありません。ユーザーとブランドについて合意し、ファイルを手書きすることはできますが、適用は手作業で編集することになります。また、--apply と --save は、エンジンの形式に合ったストーリーボード JSON があることを前提としています。

現在提供されているもの:ルックプリセット

video-studio styles --list
video-studio styles --show tourism
video-studio styles --apply tourism --storyboard <project>/storyboard.json
video-studio styles --save theirs --from <project>/storyboard.json

プリセットは 1 つの Markdown ファイルです。フロントマター(name、description)、どんなときに使うかを説明する文章、値を格納した 1 つのフェンス付き JSON ブロックで構成されます。JSON が扱うのは厳密に 2 つです。captions(色、stroke、strokeWidth、fontSize、wordGap、wordsPerPage、uppercase、bottom、palette)と、label、stat、title、cta などの名前付き役割を bg、fg、fontFamily、italic、weight、fontSize、tracking、align、rect に割り当てる cards です。不明なキーは黙って破棄せず、報告されます。キーのスペルミスは何も描画されず、スタイル上の選択のように見えてしまうからです。

解決順序は、最初に一致したものが優先されます。<project>/styles/ → $VIDEO_STUDIO_STYLES → ユーザー自身の ~/.config/video-studio/styles/ → ツールチェーンに同梱されたプリセットです。ユーザーレベルのディレクトリが重要です。チェックアウト内に保存したプリセットは、チェックアウトを削除すると失われます。

カードにはフォントを指定できます。 fontFamily には、エディターが読み込むあらゆるフォントファミリーを指定できます。すべての Google フォントに加え、システムのフォントスタックも使用でき、italic と weight も指定できます。bg: "transparent" にすると、パネルを使わず、映像の上に文字を直接配置できます。ルックの違いを生む要素の大半はこれです。これがなかった頃は、プリセットの指定に関係なく、すべての動画のすべてのカードが Inter でした。実在するフォールバックを指定し("Playfair Display, Didot, Georgia, serif")、珍しいディスプレイフォントには明示的な fontSize を設定してください。自動サイズ調整は Inter の幅に合わせて調整されています。

色ではなく役割を指定してカードを作成します。 {"card": {"style": "label", "heading": "TOKYO"}} と記述すると、--apply が bg、fg、tracking、rect を補完します。シーンで明示的に設定した値は優先されるため、1 回限りの上書きをしてもブランドを捨てる必要はありません。

ユーザーが希望するルックを説明したら、保存しましょう。 --save は完成したストーリーボードからルックを取り出し、デフォルトではユーザー自身の設定ディレクトリにプリセットファイルとして保存します。この会話にしか存在しないルックは、明日には失われます。それこそが、この機能の目的です。保存先と、次回使うときの呼び方を伝えてください。

適用は展開の段階で行われ、レンダリング時に参照するものではありません。ストーリーボードには実際の値が保存されるため、読みやすい文書のまま保たれ、後からプリセットを編集しても、すでに承認済みの動画のスタイルがひそかに変わることはありません。

タイトルの一貫性

レイアウトを組む前に、テキスト要素をすべて分類します。画面上のテキストをすべて「タイトル」として扱わないでください。

  • 字幕はナレーションを補助するものです。音声タイミングファイルから取得し、captionStyle を通じて表示されます。プリセットの captions ブロックによって、動画間で字幕の見た目が統一されます。下部のセーフゾーン付近に配置し、アートワークがその領域を占める場合に限り、シーンごとに上書きします。
  • ラベルは、名前、順位、日付、統計情報、カテゴリタグ、ローワーサード、CTA などの編集上のオーバーレイです。カードのロールとして構成し、ブランドの管理下に置きます。ラベルは個性を表します。スライド、ポップ、バッジ、フレームなどの演出を加えられます。
  • 看板は、ポスター、掲示板、スコアボード、スマートフォンの通知など、物語世界の中に存在するテキスト要素です。カードとして合成します。判読可能なテキストの生成をジェネレーターに求めないでください。文字の形が勝手に作られてしまいます。

コントラストの方針は体系的に決めます。シーンごとの例外を設ける前に、ブランドレベルの色、ストローク、シャドウ、パネルを決めてください。ラベルのモーションは、スライド/フライインとスケール/ポップの組み合わせを標準とし、ブランドごとに登場演出の語彙を一つに統一します。シーンのエネルギーに応じて変えるのは方向、遅延、強度だけにしてください。1 本の動画内で無関係なラベルのスタイルを混在させないでください。演出を変える場合は、物語上の理由を持たせ、その時点以降は新しい演出を再利用します。

ブランドバンドルで追加できるもの — 提案段階、未実装

プリセットで設定できるのは、色、字幕、カードの形状です。アイデンティティのその他の要素には対応していません。提案するのは、~/.config/video-studio/brands/<name>/ にバンドルディレクトリを設け、同じ検索順序(<project>/brands/ → $VIDEO_STUDIO_BRANDS → ユーザー → 同梱)と、同じフロントマター+JSON 形式で読み込む方法です。

  • brand.md — 現在と同じルック JSON にバンドル名を加えます。色を指定する代わりに、「Northwind を使う」と伝えられるようになります。
  • logo/ — ワードマークとマークを SVG および透過 PNG で格納し、セーフエリアと最小サイズのルールも併記します。
  • fonts/ — 実際のフォントファイルを格納します。現在の fontFamily は、レンダリングホストにインストールされていない書体を指定している場合があります。
  • voice.md — ナレーションのアイデンティティを定義します。使用する声、ペース、このブランドでは使わない言葉を記載します。
  • cta.md — 締めくくりの文言を記載します。各種フォーマットで求められる 2、3 種類の長さを用意します。

これらは現時点ではどれも読み込まれません。 styles が読み込むのは captions と cards で、それ以外のキーはすべて不明としてフラグを立てます。そのため、ブランドバンドルを実現するには新しいコードが必要です。実装されるまでは、追加要素についてユーザーと合意し、プロジェクトに書き込み、自動的に次の動画へ引き継がれるのは字幕、カードの色、カードの形状だけだと明確に伝えてください。

アンチパターン

  • 動画ごとにパレットを決め直すこと。 あるセッション中に手作業で作成した 3 本のスポット動画で、同じ種類のラベルなのに高さがそれぞれ異なってしまいました。こうしたばらつきを防ぐのがプリセットファイルです。
  • ブランドバンドルが機能するかのように説明すること。 ロゴ、フォント、音声、CTA の文言は提案にすぎません。ルックだけが保存された状態で「ブランドに保存しました」と言うと、次のセッションでその約束が破られます。
  • チャット内にしか存在しないブランド。 ファイルに書き込み、保存先のパスを明示していなければ、保存されたことにはなりません。
  • フォントを同梱せず、名前だけを指定すること。 レンダリングホストにない fontFamily は、警告なく代替フォントに置き換わります。そして、その代替フォントが最終成果物になります。

コメント