ローワーサード
映像フレームの下部に配置される、クリーンでブランド統一されたローワーサード（名前・役職キャプション）を構築します。アニメーションで入り、十分に表示されてから、ショットを邪魔せずに退出します。その巧みさは抑制にあります：鮮やかなリビール（出現）、明確なタイポグラフィ階層、正しいセーフエリア配置、そして一人のスピーカーではなく、複数のスピーカーを一つのテンプレートで駆動できることです。
使用するタイミング
- スピーカー/インタビューの名前タグ、パネルロスター、トーキングヘッドのキャプション
- 放送スタイルのタイトル、ニュースストラップ、ポッドキャスト/ウェビナーのネームプレート
- 一つのデザインを複数の名前・タイトルにテンプレート適用 → 多数のクリップ生成（これが真価）
構造
ローワーサードは、2行のテキストとグラフィックベースで構成され、フレーム下部に配置されます。
| 要素 | 役割 | タイポグラフィ処理 |
|---|---|---|
| 名前（プライマリ） | 誰 | 最大、最も太く、最も詰まったトラッキング |
| 役職/タイトル（セカンダリ） | 何/どこ | 名前サイズの約45～60％、細いウェイト、多くの場合ブランドアクセントカラー |
| バー/パネル/アクセント | あらゆる背景に対する可読性 | ベタまたは70～85％の不透明度；アクセントルールはブランドに合わせる |
2行に抑えてください。名前行＋役職行で十分です。余分な行は階層を損ない、セーフエリアを圧迫します。
安っぽく見せないための3つのルール
- タイトルを「ハードカット」（無アニメーションで出現/消失）させないこと。 単なる出現/消失はミスに見えます。12フレームのフェードやスライドだけでも、制作された印象を与えられます。
- 「スタッガー」（段階的表示）を行い、「一気に」表示しないこと。 最初にバー、次に名前、最後に役職、と3～6フレームずつずらしてアニメーションさせてください。すべてが同時に現れると平坦に感じられますが、短いカスケードはデザインされた印象を与えます。
- 2回読めるだけ十分に長く表示すること。 画面上に約3～5秒（声に出して2回読んでみてください）。短すぎると見逃され、長すぎると煩わしくなります。アニメーションは入りと出のみ、セグメントの途中では行いません。
入りと出のアニメーション
一つのモーション言語を選び、それを繰り返し使用してください。最も信頼性が高く、プレミアム感のあるリビール：
| リビール方法 | 印象 | 方法 |
|---|---|---|
| スライド＋フェード | クリーン、デフォルト | フェードしながら約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秒） | 入りより速く |
コード内では、すべての状態を現在のフレーム（または一時停止されたタイムライン）から駆動し、壁時計時間を使用しないでください。ビデオレンダラーは決定論的なフレームを要求します。入り/表示/出を単一の進行曲線で表現することで、同じコンポーネントがブラウザでのライブ表示とフレーム単位のレンダラーの両方で動作します。
セーフエリアと放送コンベンション
ローワーサードは、あらゆる画面とプラットフォームの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倍以上（名前 対 役職）。迷ったら、名前を大きくし、役職は小さくします。
- ウェイト＋色：名前は太字/ほぼ白；役職は細いウェイトとブランドアクセントカラー（一貫して使用する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行ごとに1回レンダリング（--props）して、人物ごとにブランド化された1つのクリップを出力します。同じアニメーション、同じブランド、変更されるのはテキストのみです。完全な実行可能コンポーネントとバッチスクリプトについては、references/lower-third-component.mdを参照してください。
出力チェックリスト
- 2行のみ：支配的な名前、セカンダリな役職（サイズ比1.6倍以上）
- 入りと出のアニメーション（ハードカットなし）；入りはバー→名前→役職の順にスタッガー；出はより速く
- 3～5秒間表示（2回読める）；モーションは最初と最後のみ、セグメントの途中では行わない
- 左寄せでタイトルセーフ内；9：16ではバンドを持ち上げ、下部18％のUIゾーンより上に配置
- あらゆるプレート上でテキストが読み取り可能（バー/スクリム/シャドウ）；1つのブランドアクセントを全体で使用
- 名前/役職/テーマはプロパティ — 1つのテンプレートがロスター全体をレンダリング
配信と検証（レンダリング静止画 → MP4）
パッケージ化されたヘルパー（
scripts/）：scripts/contact-sheet.shで静止画をタイル表示し、scripts/probe-mp4.shでエンコードを検証します。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版（マスクリビールとワイプバーのバリアント付き）。