ロウワーサード

フレームの下部帯に配置される名前/役職キャプション（ロウワーサード）を、クリーンでブランドに沿った形で構築します。アニメーションで出現し、読める時間だけ保持され、ショットを邪魔せずに退出します。その技術は抑制にあります：鮮明な出現、強力なタイプヒエラルキー、正しいセーフエリア配置、そして1つのテンプレートで複数のスピーカーを駆動することです。

使用するタイミング

スピーカー/インタビューの名前タグ、パネル名簿、トーキングヘッドのキャプション。
放送スタイルのタイトル、ニュースストラップ、ポッドキャスト/ウェビナーのネームプレート。
名前/タイトルのリスト全体に1つのデザインをテンプレート化 → 多数のクリップ（これが真価）。

構造

ロウワーサードは、2行のテキストとグラフィックベースから構成され、フレーム下部に配置されます：

要素	役割	タイプ処理
名前（プライマリ）	誰	最大、最も太い、最も狭いトラッキング
役職/タイトル（セカンダリ）	何/どこ	名前サイズの約45～60%、より細いウェイト、しばしばブランドアクセントカラー
バー / パネル / アクセント	任意の背景に対して読みやすく	不透明度70～85%のソリッド；アクセントルールはブランドに結びつける

2行に抑えてください。名前行＋役職行がすべてです。それ以上の行はヒエラルキーを損ない、セーフエリアを圧迫します。

安っぽいタイトルを防ぐ3つのルール

タイトルをオンまたはオフにハードカットしない。 裸の出現/消失はミスに見えます。12フレームのフェードやスライドだけでも、制作されたように感じられます。
スタッガー（ずらす）、スラム（同時に叩き込む）しない。 最初にバー、次に名前、最後に役職を、それぞれ3〜6フレームずつずらしてアニメーションします。すべてが同時に到着すると平坦に見えますが、短いカスケードはデザインされたように感じられます。
2回読める時間保持する。 画面上で約3〜5秒（2回声に出して読んでみてください）。短すぎると見逃され、長すぎるとうるさくなります。イン/アウトのアニメーションはセグメントの途中ではなく、端でのみ行います。

入場と退場のアニメーション

1つの動きの言語を選び、再利用します。最も信頼性が高く、プレミアムに読める出現方法：

出現方法	印象	方法
スライド＋フェード	クリーン、デフォルト	約24～40px移動しながらフェード；イーズアウトで入場
ワイプバー	放送	バーがスケール/スイープイン（`scaleX`/クリップ）、テキストは背後にフェード
マスクリビール	プレミアム	テキストを移動する四角形でクリップし、文字が「ワイプオン」するように見せる

非対称なイージングを使用：入場はスナッピーな ease-out（cubic-bezier(.22,1,.36,1)）、退場はより速い ease-in。退場は入場より速く（約2/3の時間）、タイトルが早く画面から消えるようにします。

/* マスクリビール：テキストが左→右にワイプオン、プラグイン不要 */
.lt-name { clip-path: inset(0 100% 0 0); animation: wipe .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

入場/退場のタイミングと保持時間

3つのフェーズで考えます。フレーム数で予算を組み、感覚で決めない（30fpsの場合）：

フェーズ	予算	備考
入場	12～18f (0.4～0.6秒)	スタッガー：バー → 名前 → 役職
保持	90～150f (3～5秒)	読み取り可能な保持時間；行の長さに応じて調整
退場	8～12f (0.27～0.4秒)	入場より速く

コードでは、すべての状態を壁時計時間ではなく、現在のフレーム（または一時停止したタイムライン）から駆動します。ビデオレンダラーは決定的なフレームを要求します。入場/保持/退場を1つの進行曲線として表現することで、同じコンポーネントがブラウザでもフレーム単位のレンダラーでも動作します。

セーフエリアと放送の慣習

ロウワーサードは、あらゆる画面とプラットフォームUIで機能する必要があります。タイトルセーフエリア（内側約90％/マージン5％）内で構成し、プラットフォームのクロームを尊重します：

フレーム	アンカー	避けるべき領域
16:9 (1920×1080)	左端は約5％マージン；ベースラインは約80～85％下	外側5％（タイトルセーフ）、アクションセーフの外側10％
9:16 (1080×1920)	同じ左マージン；バンドを上に上げる	下部約18％（キャプション/UI）、上部約12％
1:1 (1080×1080)	下部バンド、中央左	外側5％

左にアンカーし、右方向に成長させることで、異なる長さの名前が固定され、不自然に再中央揃えされることがありません。役職行は名前と同じ左マージン内に収めます。9:16の場合、タイトルを最下部に配置しないでください。プラットフォームのキャプションやボタンがそこにあります。

タイプヒエラルキーとブランドスタイリング

ヒエラルキーがデザインのすべてです。名前が紛れもなく支配的になるようにします：

サイズコントラスト ≥ 1.6倍（名前 vs 役職）。迷ったら、名前を大きくし、役職は大きくしないでください。
ウェイト＋カラー：名前は太字/ほぼ白；役職はより細いウェイトでブランドアクセントカラー（1つのアクセントを一貫して使用）。
可読性のためのコントラスト：テキストは未知の映像の上に配置されます。ソリッド/半透明のバー、微妙なスクリム、またはソフトなテキストシャドウを使用して、明るいプレートと暗いプレートの両方で読み取れるようにします。
ブランドロック：フォント、アクセントカラー、バースタイル、コーナー半径を1つのテーマオブジェクトに固定し、シリーズ全体のすべてのタイトルが一致するようにします。

1つのデザインをリスト全体にテンプレート化

これをコードで構築する理由：テキスト/データを変更し、再エクスポートするだけで、再アニメーションは不要です。名前/役割/テーマをプロパティにし、決してハードコードせず、名簿をインスタンスにマッピングします。

const ROSTER = [
  { name: "Ada Lovelace",  role: "Founder, Analytical Engines" },
  { name: "Grace Hopper",  role: "Rear Admiral, US Navy" },
  { name: "Alan Turing",   role: "Mathematician" },
];
// 1つの <LowerThird> デザイン；リストをマップ → 多数のインスタンス（レンダラーでシーケンス化）
{ROSTER.map((p, i) => <LowerThird key={p.name} {...p} theme={BRAND} startFrame={i * 150} />)}

レンダラーでは、名簿を入力プロパティにし、行ごとに1回レンダリング（--props）して、1人につき1つのブランド化されたクリップを出力します。同じアニメーション、同じブランド、テキストのみが変更されます。完全な実行可能コンポーネントとバッチスクリプトについては、references/lower-third-component.md を参照してください。

出力チェックリスト

2行のみ：支配的な名前、二次的な役職（≥1.6倍のサイズコントラスト）。
アニメーションで入場および退場（ハードカットなし）；入場はスタッガー（バー→名前→役職）；退場はより速く。
3～5秒保持（2回読める）；モーションは端のみで、セグメントの途中では決して行わない。
左アンカーでタイトルセーフ内；9:16ではバンドを下部18％のUIゾーンより上に持ち上げる。
テキストは任意のプレート上で判読可能（バー/スクリム/シャドウ）；全体で1つのブランドアクセント。
名前/役割/テーマはプロパティ — 1つのテンプレートが名簿全体をレンダリングする。

納品と検証（レンダリングスチル → MP4）

パッケージ化されたヘルパー (scripts/)：scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png でスチルをタイル表示し、scripts/probe-mp4.sh out.mp4 [WxH] [fps] でエンコードを確認します。詳細は scripts/README.md を参照。

ロウワーサードは、Remotionコンポジション（<Composition> + zod schema + defaultProps、名前/役割/テーマをプロパティとして）として出荷されます。入場/保持/退場はすべて useCurrentFrame() で駆動され、Date.now() / Math.random() / タイマーは使用しません。納品物 = out/*.mp4 + プロジェクト（名簿の各行ごとに再レンダリング）。9:16 垂直（1080×1920）がデフォルトです。

検証ループ — スチルレンダリング → 検査 → エンコード。 3つのフェーズをサンプリングして、エンコード（または名簿全体のバッチ処理）の前にスタッガーやセーフエリアのバグを発見します。

# 入場 / 保持 / 退場のスチル — 出荷用プロパティ（デフォルトではなく、実際の名簿行）を使用
npx remotion still LowerThird out/f-enter.png --frame=10  --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion still LowerThird out/f-dwell.png --frame=75  --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion still LowerThird out/f-exit.png  --frame=N   --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'

# 各PNGを検査 — 特にDWELLフレーム（完全に画面表示）に注目：
#  - ヒエラルキーが成立している：名前が支配的（>=1.6倍役職）、役職はブランドアクセント；両方とも完全に表示され、ワイプ途中ではない
#  - ブランドロック：フォント、アクセントカラー、バー/スクリムが正しい；プレート上で判読可能
#  - 9:16 セーフエリア：バンドが下部の約20～35%のUIゾーンよりも上に持ち上げられ、上部約12%と右側のアクションレールから離れている；タイトルセーフ内で左アンカー
#  - 入場/退場のフレームは部分的な出現（アニメーションが実際に実行されている）を示し、ハードカットではない

npx remotion render LowerThird out/lower-third.mp4 --props='{"name":"Ada Lovelace","role":"Founder, Analytical Engines"}'
npx remotion render LowerThird out/demo.gif --codec=gif                # README用のプルーフクリップ

名簿のバッチ処理：すべての名前をレンダリングする前に、1行をスチルで検証します — レイアウト/オーバーフローバグをN回ではなく1回で発見します。npx remotion compositions で durationInFrames/fps を取得し、保持フレームと退場フレームを選択します。

終了前に：

スチルが入場、保持、退場でクリーンにレンダリングされること — フォント/ブランドアセットの欠落がないこと。
保持フレームで：名前が役職より支配的で、ブランドアクセント＋バーが正しく、完全に（部分的ではなく）表示されていること。
バンドが9:16のセーフエリア内にあること — 下部のUIゾーンより上に持ち上げられ、上部と右側のレールから離れていること。すべてのチェックフレームで確認。
フレーム駆動のみ — Date.now() / Math.random() / タイマーなし；入場/退場はモーションを示し、ハードカットがないこと。
実際の名簿行（defaultProps ではない）が正しくレンダリングされること；MP4エンコード済み、GIFはオプション。

参考ファイル

references/lower-third-component.md — 完全な実行可能なロウワーサード：スタッガーしたスプリング入場、読み取り可能な保持、フレームのみで駆動されるより速い退場を持つRemotionコンポーネント；ブランドロック用の型付きテーマオブジェクト；リスト→多数インスタンスのシーケンスパターン；行ごとのバッチレンダリングスクリプト；さらに、同じデザインをマスクリビールとワイプバーバリアントで実装した、依存関係のないCSS/HTMLバージョン。

lower-thirds (ロウワーサード)