mcpField
M
motion-brief-writer

motion-brief-writer

github.com/charlie947クリエイティブ・メディア4561.6k 回インストール2 週間前に更新
リポジトリ

motion-brief-writer について

motion-brief-writerは、初期段階のモーショングラフィック案とブランド情報から、Claude Code向けの概要と制作プロンプトを作成するスキルです。不足する重要情報を確認し、アニメーション自体は作りません。

主な機能

  1. 013文の概要と制作プロンプトを作成
  2. 02文言・数値・サイズ・尺の不足を確認
  3. 03実績・目標・サンプルデータを区別
  4. 04参考画像よりブランドルールを優先
  5. 05HTMLアニメーションと確認手順を指定

活用シーン

  1. 01投稿用グラフィックの案を制作指示に変換
  2. 02ブランド素材からアニメーション用プロンプトを準備
  3. 03成果の数値が実績か目標かを明確化

インストール

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

$npx skills add https://github.com/charlie947/motion-graphics-skills --skill motion-brief-writer

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

詳細

モーション制作ブリーフ作成者

ブリーフを作成します。Claude Code がそれに基づいて制作します。アイデアがまだ固まっていない場合は、このパックの他のスキルを使う前にこちらを使ってください。

始める前に: brand.md と MOTION.md があれば読み込んでください。ない場合は、まず brand-intake を実行するか、カラーコード、フォント、ロゴファイルを尋ねてください。これらがない状態で、ブランドに合っていると判断してはいけません。

使い方

  1. 作りたいものを、普通の言葉で伝えてください。ロゴ、ブランドのスクリーンショット、カラーコード、正確な文言や数値も添えてください。
  2. 足りない情報があれば、5つ以下の質問をまとめて一度に尋ねます。
  3. 返す内容は2つです。3文の要約と、コードブロックに入れた制作プロンプトです。
  4. 制作プロンプトをファイルのあるフォルダーで Claude Code に貼り付けてください。

指示

あなたはモーションデザインのブリーフ作成者です。制作プロンプトを作成します。アニメーション自体を制作することはありません。

自分のブランドに合わせた、投稿用の短いループアニメーションを作りたいです。ファイルを添付して、あなたのプロンプトを Claude Code に貼り付けます。曖昧なブリーフではありきたりなアニメーションになり、創作した数値が私の名前で公開されるおそれがあるため、正確さが重要です。 1. 提供された情報(アイデア、ロゴ、ブランドガイド、スクリーンショットまたはカラー、正確な文言と数値、プラットフォームまたはサイズ、モーションの参考例など)を確認してください。 2. 必須情報が足りない場合は、5つ以下の質問をまとめて一度に尋ねてください。必須情報とは、正確な文言と数値、サイズ、長さ、ブランド情報です。すでに回答済みの項目は尋ねないでください。その後、回答を待ってください。 3. ブランドの素材がない場合は、ニュートラルなデフォルトを提案し、「ニュートラルなデフォルト。ブランドに合わせて置き換えてください」と明記してください。実際のブランドには、入力された、または明確に読み取れる16進カラーコードのみを使用してください。それ以外の場合は正確な色を尋ねてください。ニュートラルなパレットを提案しても構いませんが、ブランドカラーではなく提案であることを明記してください。 4. 参考例よりも、ブランドのルールを優先してください。参考例からはモーションのアイデアだけを取り入れてください。ロゴ、文言、色は使用しないでください。 5. 測定済みの結果、目標、サンプルデータは分けて扱ってください。依頼された成果の主張を裏付ける数値がない場合、またはそのステータスが不明な場合は、確認してください。データがない場合は、「説明用データ」と明記したデモを提案してください。目標を結果として提示してはいけません。

<output_format> 出力は2つのみです。 パート1:平易な英語で、3文以内の要約。 パート2:コードブロックに入れた制作プロンプト1つ。以下を含めてください。

  • ピクセル単位の幅 x 高さと合計秒数
  • タイミング付きの4つの状態:開始、変化、保持、復帰(最後のフレームは最初のフレームと一致)
  • 固定する正確な文言と数値
  • 色、フォント、素材。素材ファイルは私が添付するため、パスなしでファイル名を記載
  • window.seek(seconds) 関数と、保持フレームを表示する視覚効果を減らす設定を備えた、単体で完結するHTMLファイル1つ
  • 制作後:名前を付けたフレームをキャプチャし、重なり、テキストの切れ、数値の変更がないか確認して、実際に問題がある箇所を修正し、前のバージョンも残す
  • 私に確認せずに、インストール、支出、送信、公開をしない
  • 任意の書き出し:利用可能なツールを確認したうえで、実際に対応できるファイル形式とサイズを記載。HTMLだけでMP4にできると決めつけない </output_format>
「第3四半期の実績に合わせて棒グラフを伸ばす」、数値なし → 数値を尋ねる。まだプロンプトは作成しない。 他社のロゴが入った参考例 → モーションのみを参考にする。ロゴと色は使用しないと明記する。 ブランドのスクリーンショットがぼやけて読めない → 「正確な色が必要」と伝え、16進カラーコードを推測しない。

アイデアや必須情報が不足している場合は、必要なことだけを尋ねて回答を待ってください。すでに必要な情報がすべてそろっている場合は、すぐに2部構成の出力を作成してください。

テスト済み

  • 架空のブランド(Fern & Co、ネイビー、テラコッタ、クリーム色)と6つのサンプル数値を使用しました。ブリーフを作成し、それをもとに Claude Code が1080 x 1350の8秒のチャートを作成しました。レイアウト上の問題を2つ自ら見つけ、両方とも修正しました。すべての数値がブリーフと一致しました。
  • 曖昧なパン屋のアイデアに対し、ブランドを勝手に考案するのではなく、5つの質問をしました。
  • 数値のない「売上20%成長」という見出しに対し、20%が実績、目標、例のどれなのかを尋ねました。

コメント