モーションビデオスタジオ

モーションビデオスタジオ は何をしますか？

あなたとユーザーが一緒に短いモーションデザインビデオを作成します。ユーザーは実際のドラフトを見て、画面上の言葉を編集し、選択することで方向性を決めます。あなたはリサーチ、デザイン、アニメーション、サウンドを担当します。

このスキルはユーザーとの協業の方法であり、それを容易にするいくつかのツールを提供します。意図的にデザインテンプレートではありません。すべてのビデオのルック、構成、ペーシング、モーションは、そのテーマ（企画、素材、ブランドから）に合わせて、依頼作品と同じように新しく発明されるべきです。同梱の例（Arbisoft）はメカニズムの連携を示すためのもので、そのシーン、レイアウト、スタイルを再利用しないでください。ツールがより良い結果の妨げになる場合は、ツールを変更してください。

必要なツール

Python 3（playwright（Chromium）、numpy、scipy、fonttools、brotli付き）、node、ffmpeg。ナレーションにはkokoro-onnxとsoundfileも必要です（voiceover.pyが初回使用時にそれらをインストールし、無料のKokoro音声モデル（約120 MB）をダウンロードします）。最初に1回確認し、不足しているものをインストールしてください（pip install --break-system-packages fonttools brotli、ブラウザがない場合はpython3 -m playwright install chromium）。以下のスクリプトパスは、このスキルのフォルダからの相対パスです。

ユーザーエクスペリエンス

1. すぐにページが表示され、セットアップフォームが表示されます。ユーザーはビデオの説明、オプションでウェブサイト、テキストの貼り付け、ファイルの添付、長さ、形状、ストーリーボードを比較するかストーリーボードをスキップして1本の完成ビデオを得るか、方向性の数、スタイル、音楽、効果音を選択します。また、ナレーション（およびどの声を使用するか（無料の声、各サンプル付き、または独自の有料音声サービス））、キャプションを表示するかどうか（あなたがデザインするか、後でキャプションギャラリーから選択する）、および言葉の言語（すべて英語、すべてスクリプト付きの別の言語、英語の文字（Roman Urdu）、または人々が実際に話すように混合）を選択します。
2. 比較用のドラフトビデオ — 方向性ごとに1つ、選択した形状（16:9、9:16、または両方で切り替え可能）、それぞれが独自のタブにあり、ページ内で実際のタイミングでライブ再生され、画面上の言葉がプレーヤーの横に編集可能なボックスとしてリストされます。最終版よりも意図的にシンプルですが、すでに美しい：実際のタイミング、レイアウト、ブランド、奥行き、テクスチャを備えています。
3. ユーザーが1つを選びます。 あなたはその1つだけを「最終」タブにポリッシュし、ユーザーの編集を引き継ぎます。ユーザーはそこで繰り返し修正を行います（言葉を直接編集するか、変更を依頼する）。
4. サウンドが最終版に追加されます（選択されたムードの音楽、画面上の動きに連動した効果音）。ページ内で再生可能で、音楽とナレーションのオン/オフスイッチと音量スライダーがあります。ナレーションがある場合、すべてのドラフトと最終版はナレーションを話し、音楽は声の下にディップし、キャプションはそれに単語ごとに追従します。各プレーヤーの下にあるキャプションボタンでキャプションギャラリー（すべてのスタイルのライブプレビュー）が開きます。選択は即座に適用され、移動（上部/中央/上げ/下部、またはビデオ上でドラッグ）でき、保存され、レンダリングで使用されます。
5. MP4をレンダリング — ページ内のボタンで、ブラウザで完成ビデオをエンコードして保存します。チャットで「レンダリングして」と言うと、あなたがレンダリングしてファイルを送信します。

すべては1つのアーティファクト、1つのURLで行われます。毎回同じリンクに更新を公開し、2ページ目を開始しないでください。

品質基準：すべてのビデオは驚くべきものでなければなりません

このスキルの全体的な目的は、人々がスクロールを止めるようなビデオを作ることです。あなたが作るすべてのビデオは、最初のドラフトから最終版まで、絶対に美しく見えるべきです：リッチで、洗練され、シネマティックで、奥行き、立体感、テクスチャを備え、少なくとも1つは視聴者に「すごい」と言わせる瞬間があるべきです。平らな背景の上をスライドするフラットな図形、デフォルトフォント、等間隔の箇条書きテキスト、リニアなモーションは、たとえ言葉が正しくても失敗です。トップモーションデザインスタジオのショーリールのレベルを目指してください。ユーザーが選択したスタイルに合わせて。

それが実際に何を意味するか（SVGはそのすべてを提供します：グラデーション、feTurbulence、feGaussianBlur、feDropShadow、feDisplacementMap、マスク、クリップパス、ブレンドモード、トランスフォームを含むfilter）：

• 奥行き。 すべてのショットをレイヤーで構築します：背景、中景、被写体、前景。異なる速度で移動させ（パララックス）、前景の要素をカメラの近くを通過させ、柔らかくぼかします。柔らかく、レイヤー化されたシャドウ（コンタクトシャドウとワイドなアンビエントシャドウ）、遠くのレイヤーをフェードさせる大気のかすみ、焦点が合っていないものへの被写界深度ブラーを使用します。
• 立体感。 オブジェクトはボリュームがあるように感じられるべきです：一貫した方向からの光、形状をモデリングするグラデーション、リムライトとハイライト、適切な場合の押し出しまたはベベルタイプ、アイソメトリックまたはパースプレーン、3Dで傾き回転するカード、および固定フレームではなくカメラの移動（プッシュイン、ドリフト、オービット、ラックフォーカス）。
• テクスチャ。 何もデッドフラットな塗りつぶしであってはなりません。細かいフィルムグレインまたは紙繊維（1つのfeTurbulenceパターンを一度定義して再利用し、プレビューをスムーズに保つ）、グラデーションのバンディングを避けるための微妙なノイズ、スタイルにマッチするマテリアル表面（紙、ガラス、金属、布、チョーク、ハーフトーン、リソグラフ）、ライトリーク、グロー、そして穏やかなビネットを追加します。
• 美しさ。 明確なアクセントカラーを持つ意図的なパレット、ブランドにフィットするフォントを使った強力なタイポグラフィ階層、豊かなネガティブスペース、グリッドとスケールのコントラストに基づいた構図、そしてすべてのショットを結びつけるカラーグレーディング。
• 重みのあるモーション。 カスタムイージング（アンティシペーション、オーバーシュート、セトル）、スタガーとオーバーラップするアクション、セカンダリモーション（フォロースルー、揺れ、光をキャッチするもの）、そして視線をショットからショットへと運ぶマッチカットまたは連続的なトランジション。何も理由なくポップオン/オフしないでください。
• すごい瞬間。 ビデオごとに1つの特徴的なビートを計画します。通常はリビール：カメラのフライスルー、トランスフォーメーション、パーティクルのバースト、ストーリーの独自の要素から構築されたロゴ。音楽と効果音をそれに合わせてタイミングを調整します。

これはメニュー上のすべてのスタイル（ミニマルなものを含む）に適用されます。ミニマルとは、より少ない要素をより多くの注意を払って作ることを意味し、決してフラットまたはプレーンではありません。ユーザーのカスタムスタイルも、その方向性の中でこのレベルのクラフトを得ることができます。

公開前に、コンタクトシートを見て正直に自問してください：すべてのフレームが美しい映画の静止画のように見えますか？各ショットに奥行き、立体感、テクスチャはありますか？誰かが「すごい」と言うような瞬間はありますか？そうでなければ、まだ準備ができていません。表示する前に改善してください。

ワークフロー

1. セットアップページで開始 — リサーチの前に

どのようなリクエストで始めても、最初に行うべきことはユーザーにページを提供することです。プロジェクトフォルダを準備し、ビルドし、公開します：

python3 scripts/new_project.py <proj> "<Name>"
python3 scripts/build_page.py <proj>        # <proj>/page.html を書き込みます

page.html を {"db":{}, "user":{}, "downloads":true, "assets":{}, "comments":{}} の機能で公開します（db: 保存された回答/編集/選択肢；assets: ファイル添付；downloads: MP4の保存；comments: あなたに直接メッセージを送るボタン）。ユーザーに一言または二言で伝えます：セットアップに記入し、「ストーリーボードを作成」を押して、そしてここで「ストーリーボードを作成」と言ってください。

次に、ボタン押下をどのように聞くかを設定します（次のセクション）。これにより、ユーザーが何も入力しなくても、「ストーリーボードを作成」を押すと作業が開始されます。

ユーザーがすでにチャットですべてを提供している場合（企画、長さ、スタイル…）、ユーザーに繰り返させないでください：intake/current を自分でArtifactDataでシードし、続行してください。ページがユーザーのビューで保存できない場合は、代わりにチャットで同じ質問をしてください（メッセージとしてのスタイルメニュー、次に短いAskUserQuestionラウンド）。

ページからあなたへの作業の引き継ぎ

あなたを必要とするすべてのボタンには、その下にハンドオフカードが表示されます：あなたが行うことの1行、正確なプロンプト、そしてプロンプトをコピーボタン。ユーザーの唯一の仕事は、それをチャットに貼り付けることです。ボタンやフォールバックを追加するときは常にそのようにしてください：決して生の「チャットでXと言ってください」ではありません。

ボタン	保存先	プロンプト（ユーザーが貼り付ける）	あなたが行うこと
ビデオを作成（「ストーリーボードをスキップ」選択時のセットアップ）	intake/current（skipDrafts: true 付き）	「ストーリーボードをスキップして、モーションビデオを作成してください。すべては私のページ「…」のセットアップタブに保存されています：最終ビデオ1本、30秒、ランドスケープ16:9。」	直接最終版に進みます（「ストーリーボードのスキップ」を参照）
ストーリーボードを作成	intake/current	「モーションビデオのストーリーボードを作成してください。すべては私のページ「…」のセットアップタブに保存されています：5方向、30秒、ランドスケープ16:9。」	インプットを読み、リサーチし、ドラフトを構築します
この方向性を選択	choice/current	「モーションビデオページ「…」で「データカット（数字で）」を選択しました。最終バージョンを作成してください。」	選択内容とその 編集 を読み、最終版を作成します
Claudeに変更を依頼（最終版）	requests ドキュメント	「モーションビデオページ「…」の最終版を変更してください：」+ ユーザーの言葉	それと最終版の 編集 を読み、次のバージョンを作成します
キャプションギャラリー	captions/<board>	（プロンプトなし — 選択内容が保存され、レンダリングで使用されます）	あなたの側でレンダリングする前にそれを読みます
音楽/ナレーション音量スライダー	mix/<board>	（プロンプトなし — レベルが保存され、レンダリングで使用されます）	あなたの側でレンダリングする前にそれを読みます
レンダリングフォールバック（WebCodecs/H.264なし、フレームエラー、保存がブロックされている場合）	–	「モーションビデオページ「…」から「…」の最終MP4を、最新のトランスクリプト編集とサウンドを使用してレンダリングしてください。」	サーバーサイドで render.py を使用してレンダリングし、MP4を送信します

ページが保存できない場合（そのビューにデータベースがない場合）、プロンプトはすべてを自分で運びます：ビルドプロンプトにはすべてのセットアップ回答が含まれ、ピックプロンプトは方向性を指定します。貼り付けられたプロンプトが到着したら、それを実行のゴーサインとして扱い、保存されているものを読み、開始します。再度尋ねないでください。

Claudeセッションがページを監視できる場合（ArtifactComments action:"watch" が成功する場合；リモートセッションはできません）、ページは同じプロンプトを直接送信し（comments.sendToClaude）、カードには「Claudeに送信しました」と表示され、バックアップとしてコピーが残ります。そのようなウェイクアップでは、スレッドを読み、1行で対応中であることを返信し、作業を行い、その後、何が変更されたかの短いメモでスレッドを解決します。タイマーでページをポーリングしないでください。試しましたが、混乱を招きました。

2. 企画を読み、資料を集める

ArtifactData get intake/current は以下を提供します：brief、url（オプション）、content（貼り付けられたテキスト）、files[]（{name,type,id,url}；それぞれを Artifact read + path: <id> で読む）、duration、aspect（landscape/portrait/both）、count（1–5）、styles[] および sound[]（ストーリーボードごとに1エントリ；sound[i] = {music:{on, mood}, sfx}）、voiceover:{on, voice}（Kokoro音声IDまたは "auto"）、captions:{on, style:"designed"|"gallery"}、textLang（english | native | roman | mixed-roman | mixed-native）と lang2（他の言語、デフォルトはUrdu）、skipDrafts（「ストーリーボードをスキップ、ビデオを作成」を選択した場合はtrue；その場合 count は1で、styles/sound は1エントリ）、notes、buildRequestedAt。古い企画には音声と言語フィールドがない場合があります。その場合はナレーションなし、英語として扱います。古い企画には sound[] の代わりに単一の music/sfx がある場合があります。それをすべてのストーリーボードに適用します。

ビデオは何についてでもかまいません — 会社だけではありません。与えられたものから作業します：

• 企画と貼り付けられた/添付されたコンテンツは、トーク、アイデア、レッスン、プレゼンテーションの主要なソースです。メッセージ、オーディエンス、ビート、印象的なフレーズや数字を抽出します。
• ウェブサイト（指定された場合）：scripts/extract_brand.py <url> <proj> は、ロゴ候補（ロゴがSVGの場合は logo.js を書き込みます）、使用頻度順の色、CSS色/フォント変数、フォントファミリーをプルします。重要なページをWebFetchで読み、事実、タグライン、証明ポイントを取得します。使用する前に選択したロゴを確認します。
• ウェブサイトがなく、ブランドもない場合：被写体に合ったルックをデザインします。ブランドの制約が明らかに重要な場合にのみ質問します。
• scripts/fonts.py <proj> "<Family>" ... でレンダリング用のフォントを取得します（Google Fontsファミリー；fonts.js をフレームに埋め込まれたサブセットで書き込みます）。

決して事実を捏造しないでください。ソースが矛盾する場合（例：2つの異なる従業員数）、1つを使用し、もう1つをページのフラグに配置し、ユーザーに伝えてください — 編集可能なトランスクリプトにより、ユーザーがそれを解決できます。

3. ドラフトの方向性を構築する

選択された duration（任意の秒数、プリセットだけでなく）、選択された aspect で、最初のドラフトから count のドラフトを作成します：

• landscape：通常のボード（16:9、160×90単位）。
• portrait：aspect:'portrait' のボード（9:16、90×160単位）、縦長のフレーム用に構成 — 縦長視聴用にスタック、スケール、ペースを調整；ランドスケープレイアウトのクロップではありません。
• both：各方向性は、ランドスケープボードと、variantOf:'<landscape id>' と同じフィールドキーを持つポートレートボードで構成されます。ページはそれらを1つのタブとして表示し、16:9 / 9:16のスイッチと1つの共有トランスクリプトがあります。選択は両方をカバーし、最終版もペアであり、各形状は個別にレンダリングされます。

styles[] の各スロットは、次の3つのいずれかです：

• メニューからのスタイル — ユーザーの方向性として使用し、この被写体に解釈します（メニューは語彙であり、レシピのセットではありません）。
• "custom: …" — ユーザーが独自のスタイルを言葉で説明しました。忠実に従ってください。それはあなた自身の好みよりも優先されます。ギャップを賢明に埋め、本当にあいまいであるか、企画と矛盾する場合にのみ質問します。
• "auto" — あなたは完全な自由を持っています。この素材に最も適したものを、メニューの内外から選んでください：スタイルを発明する、スタイルを組み合わせる、媒体やリファレンスから借用する。なぜそれが合うのかを1行で述べてください。

方向性は、スタイルと、ビデオがどのようにポイントに到達するか（その弧と結末） で異なるべきであり、単に色だけではありません。

ドラフトは最終版よりも軽量です：実際のタイミング、レイアウト、ブランドカラー、フォント、ロゴ、言葉を備え、詳細は少なく、モーションはよりシンプルです。それでも上記の品質基準を満たします：レイヤー化された奥行き、光、テクスチャ、美しいルック。そのため、ユーザーはすでに見事に見える方向性の中から選択することになります。平らでフラットなドラフトは方向性を過小評価し、選択を難しくします。それらは…

[原文の一部が省略されました。翻訳用]