bang-motion

Bang Motion — PPT ではないモーショングラフィックスのウェブ

v1.19.0 · Bang Tutorial 作 · MIT. 変更履歴は CHANGELOG.md、 インストール方法は README.md をご覧ください。

このスキルは、あらゆる AI コーディングエージェント向けです（Agent Skills のオープンフォーマット）。 動画のように動くモーショングラフィックスを作るためのルールとレシピが含まれています。プレゼンテーションとは異なります。コードを書く前に従ってください。

前提条件 — ブラウザーのみ

成果物（index.html）に必要なのは、最新のブラウザーと CDN（GSAP、フォント）用のインターネット接続だけです。 Python と Node は任意で、作業用ツールとしてのみ使用します。 scripts/serve.py（キャッシュなしサーバー。ローカルモジュールを使用する場合のみ必要）、puppeteer（スナップショット／自動検証用。scripts/export-frames.mjs → MP4）。 どちらもない場合は、（1）1 ファイルで作成し、ダブルクリックで開けるようにします。（2）?debug=1（スクラブパネル）と、重要な秒数ごとの手動スクリーンショットで視覚的に検証します。（3）MP4 は画面録画（OBS／ブラウザータブの録画）で作成します。画面録画ではフレーム落ちが起こる可能性があり、フレーム単位のレンダリングには Node が必要であることを説明してください。視聴するために npm install が必要な成果物は絶対に作成しないでください。

ffmpeg も任意です。 まず確認してください（ffmpeg -version）。利用できない場合：

必要な作業	ffmpeg を使用する場合	ffmpeg を使用しない場合
VO の同期（文／段落の区切り）	silencedetect	scripts/vo-pauses.html — ブラウザーで開いて音声を選択し、SEG／PARA をコピーします。まったく同じ結果が得られます（Web Audio、インストール不要）
音声の長さ／形式	ffprobe	vo-pauses.html の DUR の値。ブラウザーで wav/mp3/m4a/ogg を直接再生できます
MP4 のエクスポート	export-frames.mjs の PNG を結合	MP4 は作成できません — ワンコマンドでのインストール（winget install Gyan.FFmpeg／brew install ffmpeg）または画面録画を提案します
参考動画の確認（フレームの抽出）	fps= + tile=	重要な秒数のスクリーンショットをユーザーに送ってもらうか、動画をブラウザーで開いて指定した秒数の画面を撮影します

ffmpeg がなくても、解説動画のワークフローは VO の同期まで完了できます。インストールが必要なのは MP4 のみです。

プレーヤー — なし、自動再生、ループ

成果物のデフォルトは、画面上にパネルやプレーヤーを一切表示せず、開くとすぐに再生し、終了時に最初から繰り返す設定です（onComplete → play(0)。音声がある場合は音声も繰り返します）。非表示の操作：R で再生し直し、Space で一時停止。スクラブパネル／時計は ?debug=1（レビュー用ツール）の場合のみ表示し、?clean=1 ではエクスポート用に自動再生を停止します。音声がある場合は、まず play() をそのまま試します。ブラウザーにブロックされた場合は、フレーム 0 で停止し、最初のクリックで再生を開始します。「タップして開始」というテキストは表示しません。これは両方のスターターに組み込まれています。

構造上の禁止事項 — 機械的に検証できるPPTテスト

ほかのモデル（そして疲れているときのあなたも）は、以下のルールを読んでいても、このパターンに陥ります。提出する前に、感覚ではなくコードを確認してください。

1. grep -c "class=\"scene\"\|<section" index.html — autoAlpha／opacity で表示・非表示を切り替える <section> によるシーンが3つ以上ある場合 → それはスライドデッキです。シーンは、sectionをフェードさせて切り替えるのではなく、世界／カメラの動き（カメラが移動する、別の角度へウィップする、押し抜ける、背景が切り替わる）によって切り替える必要があります。有効な例外は、舞台カートゥーン （references/kartun-panggung.md）です。舞台間を96 pxのカット／スライドで切り替えるのは許可されます。各舞台が完全に動いている（動作する物体が10個以上）ものであり、フェードする静止画ではないためです。

2. 一貫したビジュアルの軸が保たれていること：1つの被写体（連続した動作）、またはカメラがたどる1つのコラージュ／紙／白の世界（カートゥーン、写真、カタログ、スケッチ）。共通の世界観なしにフルブリード写真が次々と切り替わる → PPTです。1シーンにつき画像1枚＋文1つで、シーンごとに切り替わる → カメラが動いてもスライドショーのままです。各シーンには、フレーズごとに段階的に登場する要素が3〜5個必要です（explainer.md「1シーン＝3〜5要素」）。

3. 各シーンのテキストノードを数えます。アイブロウ／キッカー＋タイトル＋本文／クレジットで3階層 → PPTです。最大2つまで：大きな数字／文1つ＋世界観を示すラベル1つ。3行以内の短い文書／スタンプ／日付ブロックはテキスト階層ではなく、オブジェクトとして数えます。

4. 写真を1.0→1.05に拡大するKen Burns効果だけが動き → PPTです。毎秒の動きは、スタイルブリーフで選んだ背景の動きの言語から生み出す必要があります。選択肢は techniques.md §7c を参照してください（テクスチャのある背景上でカメラが呼吸するように動く、グラデーションが移動する、ブロブが浮遊する、グレインが動く、セグメントごとの光のスイープ、大きな形がゆっくり回転する、パーティクルが上昇する、グリッドが呼吸する、ゴーストテキストがずれる、Ken Burns＋パララックスなど）。横方向に流れる棒／線／切片（「lane」「range」「streak」、水平方向のパーティクル雨）は、名前を変えただけで直近2つのプロジェクトですでに使われています。これはデフォルトではありません。テーマが本当に速度／流れを扱う場合に限り使用し、2つのプロジェクトで連続して使ってはいけません。

5. すべてのカットでトランジションがフェード＋スケールバンプ＋ライトリークのみ → PPTテンプレートです。別の角度へのウィップ、計器へのカット（地図／スピードメーター／プロフィール）、押し抜けを使ってください。

6. エクスプレイナーは、スタイルに合ったスターターから始めます：starter-explainer-kartun、-jurnalisme、-katalog、-sketsa（コラージュモード：カメラが静止アセットをたどる）、starter-explainer（連続動作：世界が流れる）、または starter-explainer-panggung（舞台カートゥーン：1シーンにつき1つの舞台、関節リグ、カメラは舞台の中だけで動く）。コラージュ型と舞台型ではリグが異なります。assets/starter-opener.html（テキストオープナー）から始めてはいけません。ゼロから作るのも不可です。

7. ミニチュアはスライドです。 カメラのズームが1.08未満で、家が親指ほどの大きさになり、何もない土地が画面の半分を占める → すべてが動いていてもPPTです。探索する大きな地図1つではなく、世界がフレームサイズの舞台に分割されています（kartun-panggung.md の法則1）。

8. テンプレート構成（オープナー／プロモ）。 構成表とコードを確認します。最初のシーンが拡大したテキストで始まり、左へ抜ける。機能を示すタイル／カードが3つ横並び。入力ボックス／検索バーに文字が入力される。フック → 機能 → 機能 → 約束 → ロゴ → CTA の順序。コンセプト上の必然性なしに2つ以上当てはまる → 表面の見た目が新しくてもテンプレートです。references/opener-konsep.md から構成を選び直してください。

1項目でも失格なら、ユーザーに見せる前に作り直してください。

対象となる制作物の種類

このスキルは、一般的なウェブ向けモーショングラフィックスを対象としています。解説動画はその一種にすぎません。構成が異なるため専用のドキュメントがありますが、中心的な種類というわけではありません。

スターターはカテゴリに合わせて命名されています。オープナー、プロモーション、バンパー、イントロ、キネティックタイポグラフィには starter-opener.html、解説動画には starter-explainer-*.html を使い、モードやスタイルを示す接尾辞を付けます（-kartun、-jurnalisme、-katalog、-sketsa ＝コラージュ、接尾辞なし ＝ 連続アクション、-panggung ＝ 舞台型カートゥーン）。舞台型カートゥーンは解説動画のモード（スタイル6）であり、独立したカテゴリではありません。目的はあくまでナレーションで説明することで、異なるのは制作方法だけです。

種類	一般的な長さ	特徴	レシピ
オープナー／製品プロモーション	25～40秒	メニューから選んだ1つのコンセプト（構成は製品から生まれ、定型の順序に従わない）、特別な瞬間を1つ、ブランドで締める	references/opener-konsep.md ＋ 以下のワークフロー ＋ references/techniques.md
バンパー／アイデント／ロゴスティング	3～8秒	ロゴのビルドオン、象徴的な動きを1つ、視聴者が気づく前に終了	techniques.md（ロゴのビルドオン、ライトリーク）
チャンネルのイントロ／アウトロ	5～12秒	チャンネル名 ＋ 各エピソードで繰り返す同じ象徴的な動き	以下のワークフロー
キネティックタイポグラフィ／歌詞	15～60秒	テキストが主題。単語や文字ごとに分割し、音声に合わせたリズム	techniques.md（分割 ＋ 指向性ブラー、単語ごとの3Dパン）
タイトル／ローワーサード／セグメントバンパー	2～6秒	映像上に重ねる小さな要素。きれいに出入りし、背景は透明	techniques.md
解説動画／説明動画	30～90秒	出典のある事実、登場するエンティティ、視点の切り替え、5つのスタイル	references/explainer.md ＋ スタイル別スターター

解説動画とキャラクター：ショットを決める前に読む

キャラクターが登場するフラットな教育用カートゥーン解説動画（6番目のスタイル、舞台型カートゥーン）や、スライドショー／ミニチュアのように感じられる修正の場合は、references/kartun-panggung.md を読んでください。シーンごとに舞台を1つ、ズームは1.08～1.95、舞台内では連続して動かし、舞台間ではカットまたは96 pxのスライド、手動トランスフォームによる関節リグ、キャプションなし、明るいフラットなパレットを使用します。文、ビジュアルのビート、フレーミング、舞台の切り替えを区別してください。After Effectsで直接制作する場合は、references/ae-bridge-higgsfield.md を読んでください。この解説動画向けのガイドは、以下のオープナーのルールを補足するものであり、フォント、シーン数、エフェクトの例は普遍的なレシピではありません。

第1の法則 — これは動画であり、スライドではありません

最もよくある問題は、モデルがシーンをスライドのように構成することです。タイトル ＋ サブタイトル ＋ 本文 ＋ バッジの列。これではすぐに「PPT」と見なされ、却下されます。

厳守するルール：

• オープナーは、各シーンにつき短い文を1つ、主要なオブジェクトは最大1つです。 キッカー（「01 — 機能」）、サブタイトル、説明の段落、機能チップ／バッジ、技術的なメタデータ（パッケージ名、長いURL）は使いません。使用中の製品UIの一部であるチップ、ボタン、ラベルは対象外です。
• 新しい情報には、新しいビジュアルの反応を付けます。 解説動画では、同じ世界の中で関連性があるなら、状態やアクションを変えます。文が切り替わっても、ショットを必ず変える必要はありません。
• 箇条書きはビジュアルに置き換えます。自動的に3つのタイルにするわけではありません。 references/opener-konsep.md の機能メニューから方法を選びます（機能を1つ実演する、単語を切り替える、オブジェクトを変形させる、カードをシャッフルする、タイルのグリッドにするなど）。連続する2つのオープナーで同じ方法は使いません。
• シーンには動きを持たせます。 オブジェクトがアクションを担うなら、カメラを固定してもかまいません。カメラは、何かを追う、または見せるために動かします。静止した背景の上にテキストをフェード／スライドさせるだけにしたり、すべてのセグメントでパン／ズームを繰り返したりしないでください。
• 「ズームイン・ズームアウト」とはショットサイズのことであり、カメラの呼吸ではありません。 動画が静的に感じられる場合や、ユーザーがズームを求めている場合は、内容のリズムに合わせて、語りの中心となる要素にカメラを近づけ（ミディアムクローズアップ／クローズアップ）、その後ワイドに引きます。数パーセント程度の呼吸は、ほとんど気づかれません（techniques.md §3b）。

シーンをデザインする前に references/anti-ppt.md を読んでください。実際によくある違反例とその修正方法が記載されています。

法則 #2 — 決定論的であること、さもなくば意味がありません

システム時刻を読み取る行は一つもありません。すべてのビジュアルは tl.time()（GSAP のタイムライン時間）の純粋関数です。スペクトラム、カウントアップする数字、 パーティクル、カメラシェイク（Math.random() ではなく高周波の正弦波）、 「流れる」オブジェクトの位置（フレームごとの速度の累積ではなく、距離のトゥイーン）。その結果、 After Effects のタイムラインのように正確にスクラブでき、フレームごとに MP4 にレンダリングしても、毎回同一の画像が生成されます。

法則 #3 — スタイルはテーマから生まれるものであり、スターターでも参照元でもありません

よくある失敗：別の製品のオープナーが、以前の製品のオープナーとまったく同じ外観になります。暗い背景、青いアクセント、 グロー、星雲、同じフォントなどです。 これはモデルがスターターからスタイルを引き継ぐためです。アニメーションが優れていても、失敗に変わりはありません。オープナーは製品の顔であり、2 つの製品の顔が同じであってはなりません。

1. スタイルの概要を先に、コードは後で。 スターターに手を加える前に、 以下の項目を記し、シーンの概要と一緒にユーザーに提示してください。
   • テーマ／製品＋視聴者に残したい感情を表す形容詞を3つ。
   • コンセプトと構成の指紋（オープナー／プロモーション）：references/opener-konsep.md からコンセプト候補を3つ挙げ、製品に基づく理由とともに1つ選び、次に コンセプト · シーン数 · 各シーンの主役オブジェクト · オープニング · クロージング。
   • カラーパレット：ブランド／テーマ（ロゴ、アプリアイコン、ウェブサイト、 パッケージ）から主色を1色、背景色を1色、アクセントカラーを1色選び、 それぞれのHEX値と出典を記します。ブランド由来ではない色には「派生：理由」と記します。
   • その感情に合った個性のあるディスプレイフォント（Poppins／Inter／Roboto／Montserrat／Arial以外）＋組み合わせるフォント。例外：主張 → 方法 → 結果のコンセプトでは、製品自体のUIフォントを使います （references/opener-konsep.md）。
   • テキストの強調：単語のハイライトなし、またはハイライトの形を1つ（指定）——単語のハイライトは任意であり、すべてのオープナーで使うものではありません。
   • セグメントごとの背景スタイル：すべてに「スタイルの方向性」表から1つの方向性を使うか、切り替え計画（どのセグメントで何に切り替えるか、理由、きっかけ）を記します。
   • 動きのシグネチャー：アイデンティティとして繰り返す動きを1種類（オブジェクトのワイプ、単語ごとの3Dロール、紙が舞う、線が描かれる、色のブロックが端にぶつかるなど）。
   • 背景の動き：techniques.md §7c のメニューから1つ選びます——動きのシグネチャーとは異なるものにし、「物体が通り過ぎる」動きを自動的に選ばないでください。
   • 背景の表面：§7d のメニュー（グラデーション／光／テクスチャ／粒状グラデーション、2層以上）から選びます——単色のフラットな背景は不可です。
   • オブジェクトのレンダリングスタイル：techniques.md §7e のメニューから1つの系統（フラット、クレイ、光沢、ガラス、アイソメトリック、リアル、ネオンラインなど）を選びます。
   • 写真アセット（コンセプトで人／場所／製品の写真を使う場合）：ユーザーの写真、MCP Higgsfieldで生成、またはライセンス済みストックのいずれかをユーザーに確認し、各幕のショットリストも提示します（references/opener-konsep.md の「オープナー内の写真」）。
   • トランジション：エフェクトが必要な境界と、カットだけでよい境界を決めます。必ず2種類使う、あるいは必ず3Dにするのではなく、状況に応じて§4cのメニューから選びます。
   • 特別な瞬間を1つ（最もコストの高いエフェクトを使う場所。1回のみ）。
2. スターターはアーキテクチャであり、スタイルではありません。 assets/starter-opener.html のグレー、システムフォント、WebGL背景はPLACEHOLDERです。どれかが最終結果に残っていれば、スタイルがまだ適用されていません。WebGL背景（星雲、塵、グリッド、ブルーム）は8種類ある背景スタイルの1つにすぎません。スタイルの方向性が異なる場合は無効にしてください。
3. 参照するのはリズムであり、見た目ではありません。 参考動画から取り入れるのは、ショットごとの長さ、トランジションの種類、注目の階層、エネルギー、動きのスタイルです。取り入れてはいけないのは、配色、フォント、テクスチャ、レイアウト、装飾の形、文言、シーンの順番、独自の瞬間（特徴的なオープニング／クロージング、一度きりの仕掛け）です。「これみたいに作って」は「これくらいエネルギッシュに」という意味であり、「この色で」という意味ではありません。「スタイルXを使って」は、Xの見た目と動きのスタイルを指し、Xのシーンを指すのではありません。references/opener-konsep.md のシーン構成例も同様に扱います。原則であり、台本ではありません（構成の法則 #7）。 参考の見た目をそのまま模倣することは、ユーザーが提示した場合でも違反です。その旨を一文で伝え、テーマから生まれた別案を提示してください。
4. 以前のプロジェクトとは、見た目も構成も変える。 異なる2つの製品は、次の4項目のうち最低3項目を変える必要があります：配色、フォント、背景のスタイル、動きのシグネチャー。単語のハイライトを使う場合、その形も含みます（あるプロジェクトで使ったピル＋星を別のプロジェクトで再利用してはいけません）。構成も変えます。コンセプトを変えるか、構成の指紋にある5項目のうち3項目以上を変えます（references/opener-konsep.md）。以前と同じシーン構成に新しい色を載せても、テンプレートのままです。 「参考」にするために過去のプロジェクトフォルダーを開かないでください。引き継いでよいのは、このスキルのルールだけです。
5. 背景を暗い色に固定しません。 このルールがなければ、スターターとサンプルが暗いため、オープナーはすべて星雲のある暗い背景になりがちです。背景はテーマに合わせます。明るいグラデーション、柔らかな色、色のブロック、紙、写真、暗い背景などがあり、「スタイルの方向性」表には10種類の選択肢があり、その大半は暗くありません。このスキルのサンプル（明るい紙、星雲）はあくまで例であり、固定テンプレートではありません。 背景を静止させてはいけません。 常に背景を動かしてください（§7c）。背景色は必要に応じていつでも切り替えて構いません。セグメントのムード／トピックが変わる場合（製品の紹介、問題 → 解決策、主張 → CTA）、カラフルなブランドで色のリズムが必要な場合、または画面上のアクションが背景を変える場合（トグルをオンにする、物体がレンズを覆う、アイコンが拡大してフレームを埋める）が該当します。守るべき点は2つだけです。切り替えには目に見えるきっかけ（ワイプ、物体、UIアクション、色面へのプッシュ、ビートに合わせたカット）を付け、「スライドを切り替えた」ように感じる、理由のないクロスフェードにしないこと。そして、検討されていないというだけの理由で背景を単色のまま静止させないことです。計画はスタイルの概要に記します。
6. 表現は自由です。 ここで定める法則が制限するのは、構成（スライドではありません）、コントラスト（テキストの読みやすさ）、新しさ（別のプロジェクトの繰り返しを避けること）であり、表現ではありません。テーマに合うなら、豊かなグラデーション、光、3D、奥行き、テクスチャ、大胆な色を推奨します。禁止されるのは、最も手軽なデフォルトを選んで繰り返すことだけです。平坦なブロックが画面を横切る動き、線が横切る動き、フラットな背景、別のプロジェクトの見た目は避けてください。どちらの選択肢も法則を満たすなら、より大胆なほうを選びます。
7. すべての作業で共通してよいもの： PPTのような演出を避ける法則、カメラリグ、決定性、非対称な入退場のリズム、テキストの最小サイズ。

スタイルの方向性（1つ選びます。意図的に2つを組み合わせてもかまいません）

方向性	背景	タイポグラフィ	特徴的な動き	適した用途
ダークシネマティック	ほぼ黒のグラデーション、WebGLのパーティクル／星雲、オブジェクトのみにブルーム	太くクリーンなグロテスク体	突き抜けるような移動、レンズ前を光が走る	クリエイティブツール、ゲーム、テクノロジー
ポスター風カラー・ブロック	シーンごとに切り替わる大きな単色の面、グラデーションなし	極太のディスプレイ書体、画面の端で切れる巨大な文字	ブロックのワイプ、画面の端にぶつかるテキスト	消費者向けアプリ、音楽、イベント
明るいエディトリアル	白／クリーム色、広い余白、細い線	ディスプレイ用セリフ体＋小さなグロテスク体	なめらかなスライド、線を描く動き、落ち着いたカメラ	生産性、金融、SaaS
紙と印刷	紙の質感、コラージュの切り抜き、スタンプ、テープ	手書き文字＋セリフ体	物が飛んできて着地する、傾いた角度	教育、コミュニティ、料理
レトロ／アナログ	色あせた色、粒子、走査線、VHSフレーム	70～90年代風の幾何学的な書体	制御されたグリッチ、粗いズーム、フリーズ	ノスタルジー、音楽、エンターテインメント
ブルータリスト・モノ	白黒、無骨なグリッド、罫線付きのボックス	モノスペース体＋コンデンス体	ハードカット、ブロックの移動、点滅するカーソル	開発者向けツール、技術系
明るいパステル	重なり合うパステル、大きな丸い形	太い丸ゴシック体	弾むような動き、花が開くような形	子ども、健康、ライフスタイル
ダークラグジュアリー	黒＋ゴールド／ブロンズ、柔らかな影、きらめき	字間を広く取った背の高いセリフ体	スローな動き、光が走る、奥行き	ファッション、自動車、不動産
写真を使ったフラットポップ	明るいニュートラルカラーと、ユーザーのブランドカラーを使った単色の面を交互に配置。フラットな形や、ユーザーのロゴの幾何学形状を応用したステッカー＋柔らかな3Dイラスト	太く丸みのある幾何学的なサンセリフ体＋画面の端で切れる巨大な文字	下から現れるポップな人物写真の切り抜き、弾むステッカー、ビートに合わせてスイープ／スナップする色面	消費者向けアプリ、フィンテック、Eコマース、若者向けブランド
グレイニーグラデーション	ダークカラー／深みのある色をベースに、2～3色の鮮やかなグラデーション形状が内側から発光。フレーム全体に細かな粒子	小さくクリーンなグロテスク体、または最小限の太いディスプレイ書体	形状のレイヤーがゆっくり開く／回転する。形状の穴をカメラが通り抜ける。光の球が進行を導く	テクノロジー、AI、音楽、フィンテック、クリエイティブなローンチ

連続する2つのオープナーで同じ表の行を使うのは要注意です。 別の行を選ぶか、これまで使っていない方法で2つの行を組み合わせてください。

法則 #4 — テキストを際立たせ、背景は引き立て役に

同じリグでも、タイポグラフィとコントラストだけで、2つのオープナーの出来は大きく変わります。悪い例：すべてのタイトルが中央に置かれた全大文字の太さ800で、毎回同じ入り方をし、文字より明るい白い光の中に表示されます。良い例：太さ500のセンテンスケースで、キーワードを強調します（例：ピル＋星——これは特定のプロジェクトのシグネチャーであり、ルールではありません。単語自体の強調は任意です）。句読点は必要な場合のみ使用し、サイズ・方向・位置に変化をつけ、テキストの下は落ち着いた背景にし、セグメントに合わせて背景を切り替えます。コード付きの完全なレシピは、techniques.md のセクション1と1bを参照してください。要点は次のとおりです。

• センテンスケース、太さ500～600。太字の全大文字は、強調する1つのシーンだけに使用します。
• タイトル、主張、短いフレーズは、基本的に句点なしにします。特に4語以下のフレーズと1行の文が該当します。句読点は、意味やリズムを変える場合のみ使用します。実際の疑問には ?、短い2文を意図的に連続させるスタイルにはピリオドを使用し、! はごくまれに使います。句読点のスタイルはスタイルブリーフで一度決め、一貫させます。使用する場合は独立した要素とし、最後に表示します。
• 単語の強調（ピル、下線、マーカー、ボックス、色、取り消し線）は任意で、スタイルブリーフで決めます。強調がなくても、単語ごとに暗い状態から明るい状態へ変える、サイズや太さを変える、間を置く、または単語の横にオブジェクト（アイコン、UI）を置くことで、文にメリハリをつけられます。使用する場合：動画ごとに形は1種類にし、すべての文で使う必要はありません。他のプロジェクトとは異なるものにし、装飾はブランドの形状をもとにしたものに限ります。
• 連続する2つのシーンで、サイズ、入る方向、テキストの位置をすべて同じにしてはいけません。
• テキストのポケット（フレーム全体ではありません）では、背景を暗く（輝度≤ 25 %）するか、明るく（≥ 80 %）し、中間的に「雑然」とした状態にはしません。ポケットの外側の背景は、むしろ豊かにします：グラデーション、光、テクスチャ（§7d）を使用し、単色のフラットな背景は不可です。背景要素（パーティクル、形状、テクスチャ、線）の色はパレットの暗い側から選び、テキストのポケットでは不透明度≤ .35、明るく見える要素は≤ 40個にします。
• セグメントごとにムードが切り替わる場合は、暗と明を交互にすることを検討します。機械的なルールではありません。

ワークフロー

0. 種類を確認します（「作業の種類」テーブル）。Explainer → references/explainer.md を開き、そこにある「ステップ0」に従います。スタイル（5つの選択肢＋おすすめ）、アスペクト比、尺、音声、尺の制限を含む質問を1つだけします。それ以外の種類 → 続行します。ブリーフから本当に判断できないこと（アスペクト比、尺、音楽／VO の有無）だけを、1つの質問で尋ねます。 0b. スタイルブリーフを作成します（法則 #3）。ランダウンと一緒に提示します。承認されたスタイルブリーフがない状態で、コードに手を付けてはいけません。

1. 参考資料とブランドのソースを取り込みます。 参考用のスクリーンショット／動画クリップがあれば依頼し、ショットごとにマッピングします（尺、動き、トランジションの種類、視線誘導の順序）。取り入れるのはリズムだけであり、見た目はまねません（法則 #3）。色、ロゴ（元のベクターパス。描き直さないでください）、フォント、機能に関する主張は、制作対象の製品の公式ソースから取得します。参考資料、別のプロジェクト、創作から取得してはいけません。

2. 選んだコンセプトをもとにランダウンを作成します — 秒 | シーン | セリフ | ビジュアル のテーブル。シーンの数と種類はコンセプト（references/opener-konsep.md）に従い、hook → feature → feature → promise → logo → CTA のパターンには従いません。全体の尺は25～40秒です。コードを書く前に、このランダウンについてユーザーの承認を得てください。ランダウンの変更は安価ですが、コードの変更は高くつきます。

3. アーキテクチャをスキャフォールドします。 Opener／promo／bumper／typography：assets/starter-opener.html（stage 1920×1080、カメラリグ #world、状態を持つ Three.js シーン、timeline helper）をコピーし、すぐに色、フォント、背景言語のトークンをスタイルブリーフに合わせて置き換えます。starter は意図的にグレーになっています。Explainer：スタイルに合った starter をコピーします — starter-explainer-kartun/-jurnalisme/-katalog/-sketsa.html（コラージュモード：cutout／写真の上でカメラが into／settle／look／home と動き、単語ごとの say／unsay、注釈の描画、シーン間の push-through）または starter-explainer.html（連続アクション：世界が流れ、hero、世界のオブジェクト、マップ表示、whip）。すべてプレーヤーなしで自動再生＋ループします。複数ファイルの構成と各判断の説明は references/architecture.md にあります。

4. レシピに従ってシーンを1つずつ構築します。references/techniques.md を参照してください（文字ごとの分割＋方向性のあるモーションブラー、単語ごとの3Dパン、トランジションメニュー、UIモックアップ）。レシピは道具であり、買い物リストではありません。コンセプトで必要なものだけを使ってください。

5. 「コードが動く」だけでなく、ビジュアルを検証します。 動画を視聴することはできず、FRAME だけを見ることができます。scripts/snap.mjs（puppeteer、file:// で開く、サーバー不要）を使って重要な6～20フレーム（各シーンの開始時、テキスト表示時、トランジション）を撮影し、コンタクトシートにまとめて、監督のように評価します。テキストが切れていないか？ 重なっていないか？ カメラが止まる前にテキストが表示されていないか？ まだスライドのように感じないか？ 修正して、もう一度撮影します。確認のために全フレームをレンダリングしてはいけません。画像が何千枚にもなり、検証にはなりません。ユーザーが依頼した場合のみ、MP4 書き出しのために全体をレンダリングします（ステップ6）。Node がない場合：?debug=1 を開き、手動でスクラブしてスクリーンショットを撮ります。

6. ダブルクリックで開ける単一の index.html として納品します。 最終出力では、サーバー／Node を必要としないようにします。CSS と JS はファイル内に INLINE で記述します（ローカルの <script type="module" src="…"> は file:// で開くと CORS によりブロックされますが、インラインの module はブロックされません）。ライブラリは CDN から、アセット（アイコン／画像）は同じフォルダー内の相対パスで読み込みます。no-cache サーバー（scripts/serve.py）は編集中の作業用ツールであり、視聴に必要な条件ではありません。画面上にプレーヤーを表示しないでください（「Player」を参照）。スクラブには ?debug=1 を使うよう案内します。MP4 書き出しはユーザーが依頼した場合のみ行います：scripts/export-frames.mjs が各フレーム（60 fps）を PNG にレンダリングし、ffmpeg で結合します。この方法ではフレーム落ちがありませんが、コストが高いため、通常の手順ではなく、確認用のツールでもありません。

7. Explainer のみ：VO 台本＋録音の依頼 — 最後のメッセージには、VO 台本の全文を必ず含め、ユーザーに録音／生成して音声を再送するよう依頼します。同期のために使用します。台本の形式、録音の手順、retime の詳細は references/explainer.md →「納品」を参照してください。

Checklist sebelum menyerahkan

• スタイルブリーフ（テーマ、ブランドパレット、個性のあるディスプレイフォント、背景の言語を一つ、動きのシグネチャー、特別な瞬間）をコードを書く前に作成し、承認を得る
• スターターのプレースホルダー（グレー、システムフォント、スタイルの方向性が異なる場合の星雲）が残っておらず、参考デザインの見た目（パレット、フォント、テクスチャ、レイアウト、文言）をコピーしていない
• 以前のオープナー／プロモーションとの差別化として、パレット、フォント、背景の言語、動きのシグネチャーのうち最低3つを変える
• オープナー／プロモーション：コンセプト案を3つ作成し、1つを選ぶ。構成の特徴を記述し、以前のオープナーとは異なるものにする。定番コンポーネント（ズームするテキスト → 左へ退出、3つのタイル、入力をタイプ表示、押し抜け、ライトリーク、中央のロゴ＋CTA）は最大2つまでとし、それぞれをコンセプト上必要なものにする（references/opener-konsep.md）。コンセプト例をコピーしない（冒頭／締めくくりを例と変える、変形して使う ✦ の演出は1つ以下、パレットと形状はユーザーのブランドから採用）
• アプリ／SaaS：ユーザーの製品コンポーネントを使って組み立て、操作し、結果を生み出す、少なくとも1つの生きたUIシーンを含める。ズームした静止スクリーンショットは不可（references/opener-konsep.md のUIアニメーション）。デモが静的に感じられる場合、重要なクリックの後にカメラを動かす（寄る → クリック → 引く／パンする）。すべてのクリックで行う必要はない（techniques.md §8）
• 生きたテキスト（法則 #4）：センテンスケース、ウェイト500～600、明確な強調、自動で句点を付けない（句読点は意味やリズムを変える場合のみ）。シーンごとにサイズ／方向／位置を変える。全大文字＋太字は1シーンだけにする。スタイルブリーフで選ばれた場合のみ単語を強調する（すべての文で自動的に行わない。他プロジェクト由来のピル＋星を使わない）
• 背景はテキストに従属させる（法則 #4）：テキストの背後の輝度は ≤ 25 % または ≥ 80 %。テキスト周辺の背景要素は暗く抑える。グレースケールで確認し、文字と同じ明るさの背景がないこと
• トランジションは必要な境界で選ぶ。すべての境界に自動的に効果を付けたり、すべての効果をなくしたりしない。ワイプするオブジェクトにはシーン内で意味を持たせる。速度、振幅、間隔を確認する
• 背景の表面は§7dのメニューから選ぶ：2層以上（ベース＋光／テクスチャ／ブロブ）とし、色はパレットから選ぶ。単色のフラットな背景や純粋な黒／白は不可
• オブジェクトのレンダリングスタイルは1つの系統にまとめる（§7e）。切り替える場合は演出上の見せ場にする
• 写真を使うオープナー：写真のソースについてユーザーの合意を得る（ユーザーの写真／MCPで生成／ライセンス付き素材）。生成する場合は架空の顔を使う。ロゴ／ブランドテキストはコードで追加し、写真をアニメーション化する（ポップ、パララックス、コンテナなど）。ケン・バーンズ効果だけにしない
• グレイニーグラデーション／粒子を使う場合：エンコード後のMP4でも粒子が見え、グラデーションにバンディングがないこと
• 動画を使う場合：clip() 経由でクリップを設定する（autoplay／loop は使わない）。アニメーション対象の要素で囲み、ソースについてユーザーの合意を得る。納品時に assets/ フォルダーについて説明し、クリップを含む秒数を撮影する（snap.mjs）
• 背景の動きは§7cのメニューから選び、以前のプロジェクトとは異なるものにする。速度／流れがテーマであり、以前のプロジェクトで使っていない場合を除き、横切る棒／線は使わない
• すべてのシーンで背景を動かす（静止背景にしない）。背景色は必要に応じて変更してよいが、見えるきっかけを設ける
• 「構造上の禁止事項」6項目をすべて満たす（セクション単位でフェードしない、視覚的な一貫性がある、テキスト階層は2段階以下、毎秒動きがある、トランジションに変化がある、正しいスターターを使う）
• 画面上にプレイヤーを表示しない。自動再生。ループ。スクラブには ?debug=1 を使う
• オープナー：バッジを積み重ねず、中心となるアイデアを1つに絞る。解説動画：1つの出来事に、複数のビートや相互に関係するオブジェクトを含めてもよい
• カメラ、カット、オブジェクトの動きは文脈に応じて選ぶ。すべてのセグメントでカメラを動かす必要はない。カメラが動くときは世界全体も動かす
• 動きのない長いホールドを作らない。大きなオブジェクトアクションがないシーンでは、ショットのサイズを要素に合わせて変える（ワイド ↔ ミディアムクローズアップ ↔ クローズアップ）か、ゆっくりプッシュする。カメラのわずかな揺れだけでは不可。画面上のラベルはリグの外に置き、ズームで切れないようにする
• 入退場するすべてのテキストに方向性のあるモーションブラーを付ける
• 背景はテーマから生み出す（自動的に暗くしない。明るくする場合はグラデーション、柔らかな色、色面、紙などを使える）。奥行きを持たせる（単色のフラットな背景にしない）。主題より目立たせない。背景の切り替えはスタイルブリーフでセグメントごとに決め、切り替える場合はワイプ／カットの背後で行う
• グローはオブジェクト（タイル、バー、装飾アイコン）に使う。テキストの見出しはクリーンにする（完全な白＋薄いドロップシャドウ）。ユーザーから別途指定がある場合を除く
• ディスプレイフォント ≠ UIモックアップのフォント。モックアップには製品本来のフォントを使う（主張 → 方法 → 結果のコンセプトでは、すべてのテキストに製品のUIフォントを使う）
• レンダリング経路で Date.now() ／ Math.random() を一切使わない
• 重要な秒数を撮影し（snap.mjs ／ ?debug=1）、目視で確認する。全編をレンダリングしない。MP4は依頼された場合のみ
• 音声がある場合：自動再生がブロックされたらページは最初のフレームで待機し、最初のジェスチャーで音声とともに再生を開始する。音声なしで再生を開始しない。ランチャーファイル（.cmd／.bat）は使わない
• コラージュ形式の解説動画：要素の入退場だけでなく、カメラに振り付けを付ける（クローズアップ → パン → ズームアウト）。explainer.md「解説動画のカメラ」を参照。ステージ形式のカートゥーン：ズーム < 1,08 のフレームを作らない。カメラはステージ内だけで動かす。ステージ間はカットまたは96/72 pxのスライドにする
• ステージ形式のカートゥーン：関節は手動のプロキシ変換で回転させる（関節に transformOrigin ／GSAPの rotation を使わない。translate を持つグループに x/y のトゥイーンを使わない）。各ステージに動くオブジェクトを10個以上含める。キャプションは使わない。ラスターヘッドにはまばたきと表情のバリエーションを用意する
• AEブリッジ経由でビルドする場合：親子付け前にCAMをゼロにする。すべてのワールドレイヤーをCAMの子にする。レイヤーは奥から手前の順に作成する。身体パーツのキーフレームは親空間で設定する。各ステージのコンタクトシートとマスターを確認する。最後のメッセージにCtrl+S＋テストコンポジションの削除＋aerenderコマンドを含める（references/ae-bridge-higgsfield.md）
• 解説動画：最後のメッセージにVO台本全文と、録音／自分で生成した音声を再送して同期するよう依頼する文言を含める。vo-script.md をプロジェクトフォルダーに保存する
• 解説動画：コードを書く前に、ユーザーがすでに指定した項目を除き、スタイル、アスペクト比、尺、音声について1つの質問で確認する。尺はブリーフ／VOに合わせる。シーン数は文脈に合わせ、尺 ÷ 6 で決めない
• デフォルトのアスペクト比は16:9／画面に合わせる。9:16は依頼された場合のみ。依頼がない限り字幕／キャプションは付けない。参考レイアウト（パネル、字幕）はコピーせず、原則だけを取り入れる
• アクション／速度がテーマの解説動画：最初から最後まで同じ被写体を登場させ、背景を流し続ける。数値は世界の中で生き生きと表示する（被写体がその手前を通過する）。explainer.md「第5のスタイル：連続アクション」を参照
• 視点を切り替える。同じ視点のシーンを3つ連続させない。各事実に適した表現手段を用意する（速度計、地図、高度プロファイル、地図上のレース、内観、正面図）。explainer.md「視点は必ず切り替える」を参照。カメラに呼吸を持たせる
• 1080のステージで30 px未満のテキストを使わない（本文 ≥ 44、ラベル ≥ 34、クレジット ≥ 30）。スマートフォンで視聴する。ゴーストテキストと注釈はバリエーションを付け、常にアウトライン／点線の円にしない
• 解説動画：言及するすべての人／企業／場所／製品の写真を、そのシーンに表示する（explainer.md →「言及されるエンティティ」を参照）
• index.html を file:// 経由で直接開ける（ダブルクリック）。サーバー不要。CSS／JSはインラインにし、ローカルモジュールの src を使わない
• フレームごとに変化する数値（時計、カウンター）には font-variant-numeric:tabular-nums と min-width を使い、コンテナの幅が変わらないようにする

よくある落とし穴

詳細と修正方法については、references/techniques.md の「落とし穴」を参照してください。 Bloom のしきい値が低い → 画面が白くなる、Nebula の加算合成 → Bloom を通して重なっていく、 より詳細度の高い CSS セレクターが初期状態の opacity:0 に優先する → 要素が アニメーションより先に表示される、JavaScript モジュールがブラウザーにキャッシュされる → 編集が「反映されない」（サーバーで Cache-Control: no-store を使用）、 平らな 3D オブジェクトを Y 軸で一回転させる → 一本の線になる（完全に回転させず、揺らしてください）、 SVG のフィルターボックスが既定でぼかしの末尾を切り取る（x/y/width/height を広げてください）。

After Effects — Higgsfield bridge を直接使用

After Effects が起動していて、Higgsfield MCP bridge ae_* が接続されており、ユーザーが AE でアニメーションや解説動画を作るよう求めている場合は、bridge コマンドを使って直接作成してください。references/ae-bridge-higgsfield.md を参照してください。1 つの小さな Lottie でコンポジションの骨組みを作成し、ステージごとに null CAM を配置します（親子付けする前にアンカーと位置をゼロにします）。イラストは SVG コードから 2× PNG に変換します（scripts/ae/bridge/aset-svg.py + svg2png.cjs）。キャラクターは関節付きの AE ネイティブシェイプレイヤーとして作成します（scripts/ae/bridge/rig-tokoh.py、キャラクターごとに約 90 オペレーション）。身体パーツのキーフレームは親座標空間で設定し、コンタクトシートで確認します（r2.dev がブロックされている場合はリレーを使用）。ステージのカートゥーンの法則は引き続き全面的に適用されます。Bridge では保存もレンダリングもできず、レイヤーの順序を並べ替えられません。その点を伝え、背面から前面の順にレイヤーを作成してください。10 ステージの作成は約 1 時間、クレジットは 0 です。

パッケージの内容

ファイル	読むタイミング
references/kartun-panggung.md	ステージアニメーション：シーンごとにステージを1つ、カメラは1.08以上、カット／スライドは96 px、関節リグ＋手動トランスフォーム、ラスターの頭部＋ローカル表情、キャプションなし、フラットパレット
assets/starter-explainer-panggung.html	ステージアニメーションの解説動画：ステージシステム＋ステージごとのカメラ、関節 J()、character()（ベクターまたはラスターの頭部）、96 px のウーッシュ、2つのステージの例
scripts/kepala-ekspresi.py	生成した頭部 → 喜び／不安／驚きのバリエーション＋まばたき、ローカルで作成（瞳孔と口を検出）
references/ae-bridge-higgsfield.md	ブリッジ：Higgsfield MCP を介して AE で直接ステージアニメーションを構築 — ブリッジの制限、落とし穴（null 960,540；キーフレーム付き CAM に親子付け；並べ替えで破損）、ステージごとの CAM アーキテクチャ、ネイティブリグ、リレー用コンタクトシート、引き継ぎ
scripts/ae/bridge/aset-svg.py, svg2png.cjs, rig-tokoh.py	ブリッジ：コードからイラスト素材を作成 → SVG＋マニフェスト → 2× PNG（puppeteer）；関節付きキャラクター1体向けの約90個の ae_batch 操作を生成
references/anti-ppt.md	シーンをデザインする前に
references/opener-konsep.md	ランオブショーの前のオープナー／プロモ：コンセプト候補3つ、19種類のコンセプトメニュー（オブジェクトのリレー、ブランドシステムの展示、主張 → 方法 → 結果、動く UI エコシステム、写真を使ったフラットポップ、グラデーションの形を突き抜ける演出、主張を挟み込む製品ツアーなど、すべてブランドのサービス／素材／製品に基づく）、レイアウト・色・リズムのガイド、アプリ／SaaS 向け UI アニメーションのガイド、オープナーにおける写真のガイド（ユーザー入力／MCP 経由で生成）、機能メニュー、導入、締めくくり、オブジェクトがつなぐカットなしのトランジション、構成の指紋 — テンプレートの枠組みを防止
references/explainer.md	解説動画が求められている場合（アニメーション＋VO、写真を使ったビジュアルジャーナリズム、白いカタログ、ヴィンテージスケッチ、または連続アクション；デフォルトは16:9、9:16は指定された場合のみ）
references/architecture.md	スキャフォールドを作成するとき／構造の理由を知りたいとき
references/techniques.md	シーンとエフェクトを構築するとき（ショットサイズ §3b、グレインのあるグラデーション §7d、オブジェクトのレンダリングスタイルメニュー §7e、フッテージレイヤーとしての動画 §9b を含む）
references/roadmap.md	このスキルをさらに発展させるとき
assets/starter-opener.html	オープナー／プロモの出発点 — アーキテクチャ＋ツール（テキスト用の入り口8つ、トランジションは任意）；シーン順の例は意図的に含めず、枠組みは opener-konsep.md に記載
assets/starter-explainer.html	連続アクションスタイルの解説動画（ベクター）：フローモード（ストリップ＋ヒーロー＋ワールドオブジェクト）＋マップビュー＋ウィップ＋コラージュモードの例
assets/starter-explainer-kartun.html	コラージュアニメーションの解説動画：クリーム色の紙＋グレイン＋汚れ、切り抜きイラスト、Bricolage＋Caveat、カラーピル
assets/starter-explainer-jurnalisme.html	ビジュアルジャーナリズムの解説動画：黒＋グレイン、実際の写真＋出典タグ、Barlow Condensed＋Plex Mono、黄色／赤のハイライター、切れた注釈
assets/starter-explainer-katalog.html	白いカタログの解説動画：薄いグリッド、写真の切り抜き、Archivo Black＋Caveat＋Inter、黄色のハイライター
assets/starter-explainer-sketsa.html	ヴィンテージスケッチの解説動画：セピア色の紙（CSS テクスチャ）、乗算の彫刻切り抜き、Playfair＋Garamond＋Cinzel、さび色と金色
scripts/serve.py	キャッシュなしの開発サーバー（任意、Python が必要；ローカルモジュールを使う場合のみ）
scripts/snap.mjs	検証：重要な秒数を撮影 → コンタクトシート（任意、Node＋puppeteer が必要）
scripts/vo-pauses.html	ブラウザーで VO の無音区間を検出（ffmpeg silencedetect の代替、インストール不要）
scripts/export-frames.mjs	エクスポート：全フレームをレンダリング → MP4、要求された場合のみ（任意、Node＋puppeteer＋ffmpeg が必要）