iamjeffia/estudio-ia

ナレーション付きモーション：シーンは話によって構築される

日付：2026-10-22 · 種類：ガイド · ステータス：有効

**要約：**ナレーションに合わせたアニメーションのルール：話される前に何も現れない、字幕は読む時間を確保、各アイデアには現実の要素または視覚的なメタファーを配置、画面はフレーズが終わった後にのみ切り替わる。あらゆるモーションツールで有効（エンジンの選択はestudio-video）。基準となる数値はregras.mdを参照。

開始前に、video-referencias（参照動画の視聴と実際のアセット）に従ってください。製品またはソフトウェアのナレーション動画は、animacao-saasの標準ルールにこれらのルールを追加し、各トランスフォーメーションのタイミングをビートの代わりに話が決定します。

インプット：単語あたりの時間

すべては承認済みで単語ごとに書き起こされたナレーションから始まります（words.json：単語、開始、終了）。ナレーションを後で高速化する場合は、高速化済みのファイルで書き起こしを行い、その上でアニメーションを作成してください。

リズムの前にストーリーボード

チュートリアルや解説では、少ないほど良い：各要素には目的があり、適切なタイミングで登場し、消えるか次の要素になります。アニメーションはより長く滑らかに、一度に一つの主要なアイデアを画面に表示し、常に何か動きがあり、効果音は必要な場合のみ追加します。出発点：

• フレーズごとに1コンポジション、4～6秒；
• 1.5～2秒ごとに新しい要素、それを名付ける単語のタイミングで；
• 字幕以外には最大3つまで（メイン1つ＋サポート2つ）；
• 切り替えの半分は、要素が次の要素に変化するものであり、カットではない。

キネティックなReelsのオープニングはもっと速くても構いません（0.5秒ごとに新しい要素）。プロジェクト内でどのセクションにどのリズムを適用するかを宣言してください。エントリー、イグジット、カメラの所要時間はregras.mdを参照。

ルール1 — 話される前に何も現れない

各要素は、それを正当化する単語が発せられる瞬間に登場します（最大約0.15秒前まで。数秒前に登場してはいけません）。シーンは空の状態か、字幕のみで始まり、徐々に構築されていきます。

誤り	正しい例
製品カードがシーン開始時から見えている	アイコンは声が名前を発した時に独自のアニメーションで生成され、フルネームが発せられるとヘッダーに飛び、カードが組み立てられる
アクティブになるのを待っている静止したバー	バーは「最初の部分」という単語とともに出現し、続けて最初のバーが満たされる
言及される前にフェードインした3つのステップ	各ステップは話されたときに登場する
「こんな風に動作します」という時点で既に開かれているスマートフォン	話題の写真はそれが話されたときに登場し、スマートフォンは「アプリで検索」のタイミングで登場する

**適用方法：**アニメーションの前に、単語 → 時間 → 登場する要素 の表を作成してください。レビュー時には、コンタクトシート上で、話されていないのに登場している要素がないか確認します。

**例外：**シーンの主役（アクションが行われるスマートフォンなど）は、声がそれについて既に話している場合、最初から画面に表示されていても構いません。

ルール2 — 読む時間を確保する字幕

• フレーズは4～9語、手動で改行した最大2行。1～2語だけの断片が止まらず切り替わるものは、読まれる前に消えてしまうので避ける。
• **最低読み取り時間：**各フレーズは、最後の単語が登場した後、少なくとも約0.6秒間表示される。次のフレーズは前のフレーズが消えるのを待つ；話に対して最大約0.5秒遅れることはあっても、先に出ることはない。
• **自動改行なし：**フォントサイズを縮めて収める。これにより、スマートフォンの背後に隠れた3行目が生まれるのを防ぐ。
• **単語ごとのマスク：**各単語は切り抜かれたボックス内から上に現れる（100％から0へ、軽いぼかしを伴う）。浮遊して自由にぼかしや移動する単語は、素人っぽく見える。
• ナレーションから字幕を生成：uv run scripts/video/make_captions.py

ルール3 — マーカーテキストなし、繰り返しなしでのハイライト

• マーカーテキストは避ける（単語の後ろの色付き帯）：単語ごとのマスクで切り取られ、繰り返しになりやすい。
• **標準：**キーワードを動画のハイライトカラーに変更し、フォントウェイトを上げる。フレーズあたり最大1つ。
• **ハイライトが重要な場合はバリエーションを持たせる：**行内の公式ロゴ、単語から生まれる要素（ロゴの文字）、カウンター、カード上のハイライトリング。同じ手法を連続したシーンで繰り返さない。
• 大きなハイライトテキストには常に装飾を施す：グラデーション、グロー、テクスチャ、輪郭、または映像で埋められた単語。

ルール4 — 各アイデアに対する現実の要素とメタファー

• 現実の場所 → 実際のスクリーンショット。「地域のビジネス」は実際の地図が必要：ChromeからウィンドウなしでGoogle Mapsをキャプチャ（--headless --window-size=1900,1600 --force-device-scale-factor=2 --virtual-time-budget=20000、URLは.../maps/place/<都市>/@lat,lng,13.5z）。その上に、実際のビジネスマーカーを、同じ中心とズームレベルでメルカトル投影により配置する（事前にすべてのポイントをプロットして確認）。「あなたの会社」は唯一ハイライトカラーのピン。
• 一般的なアナロジー → そのイラスト。「診療所の列よりも遅い」は、サービスの公式シンボル、列の写真（後ろ姿、判読可能な文字なし）、そして「推定待ち時間：4時間」と表示されたLED番号札が必要。一般的な番号ではジョークが伝わらない。
• **ロゴ、アイコン、SVG：**常にブランドの公式サイトから。第三者のロゴは話題を特定するために使用し、パートナーとして表示してはいけない。
• 概念を図示し、列挙しない。「ボトルネック」は、詰まったフロー：顧客が到着して一つのステップに蓄積され、カウンターが上昇し、読み込みが停止し、「スタック」というラベルが付く。
• **感情表現に使い回しの動画を使わない。**他の目的で撮影された人物の動画を使用してはいけない。話に応じて変化するSVG絵文字（無表情 → 怒り → 赤くなり湯気が出る）の方が効果的。実際の人物が必要な場合は、新しい素材を撮影する。
• 話された各フレーズには、文字通りの視覚的翻訳が必要。フレーズに対応する要素がない場合、字幕だけで十分でなければならない。

ルール5 — シーン切り替え、話、ビート

• **画面の切り替えは話の後でのみ。**新しいシーンは、前のフレーズの最後の単語が終わった後に開始する（単語の終了 ＋ 短い間）。トランジションがカットの前に画面を覆う場合は、その時間を考慮する。その後、最も近いビートに合わせて調整する（最大約0.2秒の誤差）。
• トラックの計測：uv run scripts/som/batida.py でビートと強拍をマーク（--help を参照；レンダリングとトラックを照合することも可能）。目標：ほとんどのカットをビートに合わせる。
• シーンのオープニングはバスドラムに合わせる；トラックの停止はスクリプトの転換点に合わせる（音楽を前後させる）。
• ドライなナレーション、話の下で音楽を下げ、動画全体を通して流す。映画的な音楽のオープニングがある場合、話はその後に来るべきで、決してかぶせてはいけない。音楽、効果音、ミックスの選択：スキルsom-do-video。

ルール6 — 仕上げ

• **主役の背後には何も置かない：**字幕は専用の帯（縦型動画では上部）、その下に主役を配置。
• **トランジションによって途中で切れるエフェクトは禁止：**ハイライトは、フレーズの終了前に終了する時間がある場合にのみ開始する。
• スムーズなトランジション：新しいシーンは上から、ぼかしとわずかに大きいスケールから現れる。古いシーンは不透明のまま、ぼかして縮小するだけ；二つの半透明シーンは灰色のベールを生む。
• テキストのみの暗いシーンは、最初の単語の前に最大約1秒間の余裕を持たせてもよい；明るいシーンは、要素がまだ話されていない場合を除き、約0.3秒以上空けて開始してはいけない。

ルール7 — 効果的な仕上げテクニック

テクニック	使用タイミング	方法
アクションを追うカメラ	タイピング、タップ、メッセージ：視線を詳細に向ける必要がある場合	アクションポイントにズームイン（スケール約1.3～1.5）し、元に戻す；字幕はカメラの外に配置
波動を伴うハンドカーソル	表示されるすべてのクリックまたはタップ	指先をターゲットに置き、押して離すと二つの波動；タップ音
ドットトランジション	2～3回の大きな転換（インパクトシーン、ブランド、CTA）；すべてのシーンではない	動画の色の小さなドットのメッシュが画面を覆い、中央でカットし、次のシーンを表示
写真＋レーダーピン	地図または場所	白い枠と名前の付いた丸い写真；メインピンに回転するレーダー
単語の積み重ね	連続して話されるメリット	話された単語が中央に入り、前の単語は薄くなって上に移動
スマートフォン上部のアイランド	通知またはメッセージの到着	バネのように拡張する黒いピル型
線画ロゴ	ブランドの公開	線が描かれ、その後塗りつぶされる
パステルグローの明るい背景	明るいシーン	シーンごとに1色
回転するカウンター	数字が言及されたとき	登場時にその値まで上昇
ピル型要素の波	「エンドツーエンド」、段階的なプロセス	波線が描かれ、話された各ステップごとにピルを受け取る
カメラが追う要素のパス	複数の画面にわたる旅	点が「世界」（画面より大きい）内の実際の画面間を移動；各画面は点が到着したときに点灯；最後にカメラが引いて全体を表示

After EffectsでMotion Kit AEを使用する場合は、ゼロから式を書くのではなく、キットの既製オペレーション（バネ、エントリー、イグジット、ライブカメラ）を優先してください。HyperFramesまたはRemotionでは、すべてが時間の関数（t）になり、実時間のクロックは使用せず、すべてのレンダリングで同じフレームが出力されるようにします。

レンダリング前のチェックリスト

• 単語 → 要素の表を作成済み；単語より前に要素が存在しない。
• 字幕：フレーズは4～9語、最大2行、最低読み取り時間を確保、主役の背後に何もない。
• マーカーテキストなし；ハイライトにバリエーションがある。
• 言及された各アナロジー、場所、ブランドには、実際の画像または明確なイラストがある。
• フレーズ終了前の画面切り替えなし；ビートに合わせた切り替えを確認済み。
• クリックはハンドカーソルで表示；カメラは小さなアクションにズームイン；ドットトランジションは最大3回。
• 元のコンテキスト外で使い回された動画はない。
• コンタクトシートと拡大切り抜きをレビューし、ネタバレ、隠れたテキスト、切れたエフェクト、空の画面がないか確認（レンダリングに対して uv run scripts/video/detectar_saltos.py を実行）。
• 参照動画および同じタイプの過去最高の動画と左右に比較：全体的に優れているか？そうでなければ、まだ完成していない。