lower-thirds

ローワーサード

すっきりとブランドイメージに沿ったローワーサードを作成します。画面下部の帯に表示する名前と役職のキャプションを、アニメーションで表示し、読み取れるだけの時間保持してから、映像を邪魔せずに退出させます。大切なのは節度です。鮮明な表示、明確な文字の階層、安全領域への適切な配置、そして登壇者全員に使えるテンプレートを作りましょう。

使用する場面

• 登壇者やインタビュー対象者の名前タグ、パネル登壇者一覧、トーク映像のキャプション。
• 放送番組風のタイトル、ニュースの帯テロップ、ポッドキャストやウェビナーのネームプレート。
• 1つのデザインを名前と役職のリストに適用し、多数のクリップを作成する場合（テンプレート化の効果が発揮されます）。

構成

ローワーサードは、2行のテキストと背景のグラフィックで構成され、画面下部の帯に配置されます。

要素	役割	文字の処理
名前（メイン）	誰か	最も大きく、最も太く、字間を最も詰める
役職／肩書き（サブ）	何者か／どこに所属するか	名前の約45〜60％のサイズ、より細いウェイト、多くの場合ブランドのアクセントカラーを使用
バー／パネル／アクセント	どんな背景でも読みやすくする	不透明度100％または70〜85％。アクセントラインでブランドイメージをつなぐ

2行に収めてください。名前の行と役職の行だけで役割は果たせます。行を増やすと階層が崩れ、安全領域が窮屈になります。

安っぽく見えるタイトルを防ぐ3つのルール

1. タイトルを突然表示したり、突然消したりしない。 何の演出もなく現れたり消えたりすると、ミスのように見えます。12フレームのフェードやスライドでも、映像に仕上がり感が生まれます。
2. 一斉に出さず、タイミングをずらす。 まずバー、次に名前、最後に役職をアニメーションさせ、それぞれ3〜6フレームずらします。すべてが同時に現れると平坦に感じますが、短い順次表示ならデザインされた印象になります。
3. 2回読めるだけの時間を確保する。 画面に表示する時間は、およそ3〜5秒です（声に出して2回読んでみてください）。短すぎると見逃され、長すぎるとうっとうしく感じられます。途中ではなく、セグメントの切り替わりに合わせて表示と退出を行います。

入退出アニメーション

動きの表現を1つ選び、繰り返し使います。安定感があり、上質に見える表示方法は次のとおりです。

表示方法	印象	方法
スライド＋フェード	すっきりとした標準形	フェードしながら約24〜40px移動させ、表示時はイーズアウトを使う
バーのワイプ	放送番組風	バーを拡大／スイープさせて表示し（scaleX／クリップ）、その後ろでテキストをフェード表示する
マスク表示	上質	動く長方形でテキストをクリップし、文字が「ワイプ表示」されるようにする

表示と退出では、異なるイージングを使います。表示時はキレのあるease-out（cubic-bezier(.22,1,.36,1)）、退出時はより速いease-inを使います。タイトルが邪魔にならないよう、退出の所要時間は表示時より短くします（約⅔の長さ）。

/* Mask reveal: text wipes on left→right, no plugin needed */
.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倍以上にします。迷ったら、役職ではなく名前を大きくします。
• ウェイトと色：名前は太字またはほぼ白にし、役職は細めのウェイトにして、ブランドアクセントカラー（1色を一貫して使用）を使います。
• 読みやすさのためのコントラスト：テキストはどのような映像の上にも表示されます。明るい映像でも暗い映像でも読めるよう、単色または半透明のバー、控えめなスクリーン、または柔らかなテキストシャドウを使います。
• ブランドの統一：フォント、アクセントカラー、バーのスタイル、角丸を1つのテーマオブジェクトにまとめ、シリーズ内のすべてのタイトルを統一します。

1つのデザインをリスト全体に適用する

これをコードで作成する理由は、テキストやデータを変更して再エクスポートすればよく、アニメーションを作り直す必要がないためです。名前・役職・テーマはハードコードせず、propsにして、名簿を各インスタンスに割り当てます。

const ROSTER = [
  { name: "Ada Lovelace",  role: "Founder, Analytical Engines" },
  { name: "Grace Hopper",  role: "Rear Admiral, US Navy" },
  { name: "Alan Turing",   role: "Mathematician" },
];
// One <LowerThird> design; map the list → many instances (sequence them in a renderer)
{ROSTER.map((p, i) => <LowerThird key={p.name} {...p} theme={BRAND} startFrame={i * 150} />)}

レンダラーでは、名簿を入力のpropとして受け取り、各行に対して一度ずつレンダリング（--props）し、人物ごとにブランドを適用したクリップを1つずつ出力します。アニメーションとブランドは共通で、変わるのはテキストだけです。実行可能なコンポーネントとバッチスクリプトの全体は、references/lower-third-component.mdを参照してください。

出力チェックリスト

• 2行のみ：目立つ名前と、それに続く役職（サイズ比は1.6倍以上）。
• アニメーションで表示・終了させます（いきなり切り替えない）。バー→名前→役職の順にずらして表示し、終了はより速くします。
• 3～5秒間表示します（2回読める長さ）。動きはセグメントの開始時と終了時のみとし、途中では動かしません。
• タイトルセーフ内で左寄せにします。9:16では、下端から18%のUIゾーンより上に配置します。
• どのような映像の上でもテキストが読めるようにします（バー／スクリーン／シャドウ）。全体を通してブランドアクセントカラーを1色に統一します。
• 名前・役職・テーマはpropにし、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、name/role/themeをpropsとして指定）として実装します。表示・保持・終了はすべてuseCurrentFrame()で制御し、Date.now() / Math.random() / タイマーは使用しません。納品物はout/*.mp4とプロジェクト（名簿の各行を再レンダリング可能なもの）です。デフォルトは9:16の縦向き（1080×1920）です。

検証の流れ — 静止画をレンダリング → 確認 → エンコード。 3つの段階をサンプリングし、エンコード前（または名簿全体をまとめてレンダリングする前）に、表示のずれやセーフエリアの問題を見つけます。

# Stills at enter / dwell / exit — WITH SHIPPED PROPS (a real roster row, not defaults)
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"}'

# Inspect each PNG — focus the DWELL frame (fully on screen):
#  - hierarchy holds: name dominant (>=1.6x role), role in brand accent; both fully revealed, not mid-wipe
#  - brand lock: font, accent color, bar/scrim correct; legible over the plate
#  - 9:16 safe area: band LIFTED above the bottom ~20-35% UI zone, clear of top ~12% and the right action rail; left-anchored inside title-safe
#  - enter/exit frames show partial reveal (animation actually runs), not a hard cut

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 proof clip

名簿の一括処理：すべての名前をレンダリングする前に、静止画で1行を検証します。レイアウトやはみ出しの問題をN回繰り返すのではなく、1回で見つけます。npx remotion compositionsでdurationInFrames / fpsを確認し、表示保持と終了のフレーム数を決めます。

完了前に確認すること：

1. 表示・保持・終了の各段階で静止画が正しくレンダリングされ、フォントやブランド素材が欠けていないこと。
2. 保持フレームで、名前が役職より目立ち、ブランドアクセントとバーが正しく、すべて（部分的ではなく）表示されていること。
3. 確認したすべてのフレームで、バンドが9:16のセーフエリア内にあり、下部のUIゾーンより上で、上部と右側のレールを避けていること。
4. フレーム駆動のみであること（Date.now() / Math.random() / タイマーを使用しない）。表示・終了時に動きがあり、いきなり切り替わらないこと。
5. defaultPropsではなく、実際の名簿の行が正しくレンダリングされること。MP4をエンコードし、GIFは任意で出力します。

参考ファイル

• references/lower-third-component.md — 実行可能なローワーサード一式。フレームのみで制御する、ずらして表示するspringアニメーション、読みやすさを保つ表示保持、高速な終了を備えたRemotionコンポーネント、ブランドを統一する型付きテーマオブジェクト、リストから複数インスタンスを生成するシーケンスパターン、行ごとのバッチレンダリングスクリプトに加え、同じデザインを実装した依存関係不要のCSS/HTML版（マスクでの表示とワイプバーのバリエーション）も含まれています。