motion-designer

motion-designer：ローンチ動画

アプリが使われている様子を描く短編動画を演出し、制作します。アプリ本来のインターフェースを、コードとスクリーンショットから再構築するか、Web フロントエンドからキャプチャし、1 台のカメラで撮影するデバイスの中に配置します。すべての動きは音楽のビートに合わせます。この動画は、すべてのフレームが時間の純粋関数 seek(t) で決まるページです。そのため、フレーム単位で正確にレンダリングでき、つなぎ目なくループし、フレームごとに確認できます。

• モバイル：iPhone（templates/mobile）。デスクトップ：メニューバー、Dock、ポインターを備え、ふたが閉じるノート PC ディスプレイ上のアプリウィンドウ（templates/desktop）。同じウィンドウ内の Web アプリでは browserBar(url) を使用します。ストーリー：フック、製品の登場、パネル形式の機能紹介（実際のアプリ画面カードの横にアクセントワードを含む見出しを配置）、ブランドの個性、コールトゥアクション付きのエンドカード（templates/story、型）。
• すべてのファイルはこのスキルのフォルダー ${CLAUDE_SKILL_DIR} にあります：scripts/、templates/、reference/。リファレンスファイルでは、このフォルダーを ${…} 内の変数 CLAUDE_SKILL_DIR と表記しています。${CLAUDE_SKILL_DIR} と読み替えてください。
• 1 つのスキルに 4 つのパートがあります。動画本体はこのファイルです。動画の制作に必要な場合、またはユーザーが個別に求めた場合は、該当するパートを読んでください：音楽（サウンドブリーフ、動画用に制作したオリジナルトラックを使用前に試聴する場合、またはユーザー提供のトラックを使用する場合、テンポ、バーとドロップ、小節とフレームに正確に合わせたカット、アクションの効果音）、ナレーション（タイムライン上のセリフ、Chatterbox または Kokoro、ミックス）、セットアップ（ツールに必要なもの。インストールはユーザーの同意を得てから）。
• 最初に bash ${CLAUDE_SKILL_DIR}/scripts/doctor.sh を実行してください。不足しているものが報告された場合は、セットアップに従ってください。不足しているものとその理由を伝え、何かをインストールする前に許可を求めてから、scripts/install.sh でインストールしてください。

成果物

プロジェクト内の動画フォルダー（既定では docs/launch-film/。Git の対象外にする必要がある場合は tmp/launch-film/）に、以下を格納します。

パス	内容
brief.md	承認済みのブリーフ（手順 0 を参照）
src/	動画本体：index.html、film.css、core.js、device.js、scenes.js、main.js、assets.js
out/<name>.mp4	音楽付きのレンダリング動画（out/ は Git の対象外）
out/<name>-loop.mp4、out/<name>-poster.png	自動再生用のミュートされたループ動画と、ヒーローフレーム
out/<name>-voiceover.mp4	依頼された場合：ナレーションをミックスした同じ映像と、.srt 字幕
dist/<name>.html	単体で動作するファイル 1 つ（フォント、画像、音楽を埋め込み）
out/<name>-post.txt	動画と一緒に投稿する 2、3 文：アプリが何をするのか、誰向けなのかを、アプリ独自の言葉で説明し、リンクを添える
README.md	時刻入りのビートマップ、スタイル、プレビュー・確認・レンダリング・再構築の方法、ソースと権利

ワークフロー

ユーザーが最初から最後まで進めるよう求めた場合を除き、手順 0 の後と手順 2 の後にユーザーの許可を得るまで停止してください。その後は、権利に記載がある場合を除き、質問せずに作業を進めてください。 0. 簡潔なブリーフを作成し、プランモードで進めます。 ユーザーがすぐに制作するよう求めている場合、または完全なブリーフを提示している場合を除き、プランモード（EnterPlanMode）に切り替えます。ユーザー、アプリのマニフェスト、README、またはフォルダーから製品名を確認します（ユーザーが異議を唱えた場合、または確かな情報がない場合は質問します）。製品の機能と、映像にする価値のあるフローを確認したうえで、この製品だけを対象としたブリーフを作成し、ExitPlanMode で提示します（ブリーフ）。映像の種類もここで選びます（種類）。

1. 素材。 入手できるものを確認します。アプリのコード（画面、トークン、フォント、アイコン、コピー）、Simulator またはデスクトップ版のビルド、ブランド素材、現在のスクリーンショットや録画などです。見つからないものだけを質問します。音楽（ユーザー自身の楽曲。ない場合は音楽を参考にオリジナル曲を作成するか、ユーザーの許可を得て音楽ソースにあるライセンス済みライブラリを探します）、フォーマットと長さ、必ず含める機能、避けるべき主張などです。映像で見せる予定の機能が実在し、説明どおりに動作することを必ず確認します。コードを読み、実際に試してください。
2. コンセプト。 アプリに合うスタイルを2つか3つ提案します。ビートごとに1つの視覚的変化を入れ、各結果の後に間を置き、ドロップで最大の見せ場を迎えるストーリーをビートごとに記述します。また、ビートマップ表（ビート、時間、内容）、必要な画面と素材、選択したスタイルのテンプレートからレンダリングした4枚の静止画（オープニング、製品の重要な瞬間、ドロップ、最終フレーム）を用意します。前提条件も列挙します。SNS 用の短尺版（15～25秒）では、冒頭の2秒ですでにアプリの最も強力なアクションを見せ、ワードマークは最後まで出さない構成にできます。App Store のアプリプレビューを求められた場合は、まずガイドライン 2.3.4 を説明します（権利）。
3. 制作。
   • bash ${CLAUDE_SKILL_DIR}/scripts/new_film.sh <film-dir> mobile|desktop|story を実行します。Chrome で src/index.html を開き、プレビューとスクラブを行います。
   • scenes.js の1行目で、film({ BPM, BEATS, holds }) を使ってタイミングを設定します。
   • アプリのルックを取り込みます。SF Symbols には swift ${CLAUDE_SKILL_DIR}/scripts/symbols.swift <film-dir>/assets/sym plus@semibold … を実行し、続いて python3 ${CLAUDE_SKILL_DIR}/scripts/assets.py <film-dir>/src/assets.js --font "Family=font.ttf" --img icon=AppIcon.png --sym <film-dir>/assets/sym を実行します。film.css では、アプリのフォントファミリーを先に設定し、スタイルのトークンを :root に設定します。
   • 実際のアプリをもとに、アプリ画面またはウィンドウのポイント単位で、scenes.js の各画面を再構築します。各時点をストーリーのビート B(n) として記述します。Web 技術を使ったデスクトップアプリでは、実際の UI をキャプチャします（キャプチャ）。事前にモーションとスマートフォンまたはデスクトップを読んでください。
4. サウンド（音楽）：プランのサウンドブリーフに従います。楽曲がない場合は作成します（テイクを計画し、試聴し、合うものをレンダリングします）。beats.py とそのシートで試聴し、盛り上がりやブレイクが映像の展開と合う小節を選び、<film-dir>/audio/edit.m4a に編集して、film({...}) に BPM と BEATS を設定します。ストーリー映像、フィーチャーカード、またはタイポグラフィを主役にした映像では、アクションに効果音を付け（cues()、sfx.py）、ミックスと一緒にレンダリングします。
5. QA ループ（QA。品質を高めるための重要な工程です）：
   • node ${CLAUDE_SKILL_DIR}/scripts/check.mjs <film-dir>/src/index.html を実行します。コードに時計、タイマー、乱数、CSS アニメーションがないこと、ページエラーがないこと、ループが閉じていること（最後のフレームの次が最初のフレームになること）、どの順序でシークしてもフレームが同一であることを確認します。
   • 全体を0.5秒ごと、すべてのトランジションを0.05秒ごと、テキスト画面をフルサイズで一覧シートにします。node ${CLAUDE_SKILL_DIR}/scripts/render.mjs sheet <page> <out.png> <from> <to> <step> を実行してください。各シートを確認し、不具合カタログに記載された問題を修正します。合格するまで繰り返します。
6. レンダリング。 node ${CLAUDE_SKILL_DIR}/scripts/render.mjs video <page> <film-dir>/out/<name>.mp4 --audio <film-dir>/audio/edit.m4a --scale 2 を実行します（1フレームあたり約0.4秒かかるため、バックグラウンドで実行してください）。続いて、ループ、ポスター、必要に応じて小さいサイズのコピーも作成します（QAの「納品物」を参照）。ffprobe でフレーム数、サイズ、長さを確認し、同じ時点の静止画とフレームを比較します。
7. ナレーション（求められた場合。詳細はナレーション）：音声エンジンをユーザーに選んでもらい、レンダリング済みの映像にミックス音声を多重化します。
8. 単一ファイル。 python3 ${CLAUDE_SKILL_DIR}/scripts/build_single.py <film-dir>/src/index.html <film-dir>/dist/<name>.html を実行し、続いて check.mjs <page> --dist <film-dir>/dist/<name>.html を実行して、同じ映像が表示されることを確認します。
9. 報告。 ユーザーの言語で、映像の内容をビートごとに説明し、確認した内容と方法、ファイルと投稿文、未解決の事項（音楽のライセンス、ロゴ、音声、未検証の主張）を伝えます。動画を送付します。

厳守事項

• 決定的であること。 すべてのプロパティは、イージング、閉形式のスプリング、track()を使ってtから計算します。CSSのトランジションやアニメーション、タイマー、Math.random、Date、フレーム間で保持される状態は使いません。スピナー、波形、キャレット、タイピングはtの関数にします。
• デバイスは常に画面内にあること。 モバイル：画面が開いたら、アプリはiPhoneの中に表示します。クローズアップでは上下を切り取っても、側面、Dynamic Island、またはステータスバーは残します。デスクトップ：アプリはウィンドウ内に表示し、ウィンドウの信号ボタンまたはキャプションボタンをフレーム内に入れます。まずキャンバス上、次にデスクトップ上、最後にノートパソコン上で見せます。アプリのUIを画面いっぱいに表示することはありません。
• 機能は実際のもの、データは架空のもの。 アプリが実際に行うことと、その方法だけを見せます。オプトイン機能はデフォルトとしてではなく、利用している様子を見せます。実際にはそうでないオンデバイス処理を暗示してはいけません。名前、金額、ファイル、人名はすべて架空のものにします。
• スマートフォンでも読みやすいこと。 次のアクションに進む前に、各結果を1～2秒間表示します。重要なテキストはステージ上で約20 px以上にします。映像を縮小するのではなく、カメラを寄せます。ラベルの省略、マスクやフレームの端で切れるテキスト、動きに重なるテキスト、1フレームだけの点滅、レイヤーの突然の出現は避けます。
• 動きはアプリ自体から生み出すこと。 トランジションは形状や操作から生み出します。行がウィンドウに開く、ボタンがシートに広がる、カードが持ち上がってプレビューになる、パレットが閉じて開いたものに移る、といった動きです。シーン間のクロスフェード、ぼかしながらの表示、明るさによる出現、ガラスやグロー、3Dフリップ、パーティクル、ランダムなポインターの軌跡、ストック画像は使いません。
• ローカルのみ。 ユーザーが同意しない限り、映像では外部ライブラリ、フォント、画像、CDNを使いません。すべてをassets.jsにまとめ、単一ファイルにインライン化します。
• ユーザーのソースアセットやアプリコードを上書きしないこと。 派生ファイルは映像フォルダーに保存します。

視聴者からの要望

• 常に、スマートフォンまたはデスクトップアプリであることがわかるようにする。
• 十分にゆっくり進めて、内容を追えるようにする：1拍につき1つの操作を行い、結果ごとに一時停止し、一時停止中にカメラをゆっくり寄せる。
• 壊れているように見える箇所を作らない：「Savi」や「Uncategori…」と表示されるラベルは、収まるまでフレームを調整するかスクロールします。バッジのサイズはDOMで測定したテキストに合わせます。
• 音楽を流しつつ、音楽の合間にも声が聞こえるようにし、声を音楽よりはっきり前面に出す。

参考資料

• brief：プランモードのブリーフ：製品名、読む内容、形、これがこの製品らしい理由（例）
• types：製品映像、ストーリー、機能カード、タイポグラフィ主体、スティング：それぞれが適する場面と作り方
• styles：トークン、動き、各スタイルのシグネチャームーブを含む7つのルックと、選び方
• motion：エンジン、グリッド、用語、タイミング、うまくいったトランジション、注意点
• phone：iPhone、画面の構築、カメラ、ホーム画面、エンディング
• desktop：ウィンドウ、ノートパソコンとデスクトップ、カメラ、ポインター、キーボード、プラットフォーム
• capture：Tauri、Electron、ウェブアプリの実際のフロントエンドの撮影
• qa：チェック、レビュー手順、失敗例、納品物、レンダリングの検証
• rights：主張、データ、音楽、ブランド、音声、App Storeのプレビュー