lower-thirds

ローワーサード

ローワーサードとは、映像に重ねて画面下部に表示する、話している人物の名前と役割を示すグラフィックです。納品物はアルファチャンネル付きのファイルです。描画していない部分はすべて透過のままになります。

templates/lower-third.html を作業フォルダーにコピーしてデザインを書き込み、scripts/render.mjs で確認してからファイルをレンダリングします。スクリプトは作業フォルダーから実行してください（node <this skill>/scripts/render.mjs …）。出力先も作業フォルダーになります。一度で仕上げてください。依頼文に答えがあることや、妥当なデフォルトで補えることは質問せず、納品時に選択したデフォルトを列挙してください。

1. 依頼内容を確認する

• 表示する文言を正確に確認する：名前、役割、番組名、ハンドル名、聖書の箇所、曲名。ユーザーの綴りと句読点をそのまま使ってください（行を大文字にするのはスタイル上の処理であり、文言はユーザーのものを使います）。タイトルや姓を勝手に作らないでください。2行目が指定されていない場合は、ユーザーの言葉で内容（配信のテーマなど）を表すか、省略してください。
• カードの数：人物または項目ごとに CARDS のエントリーを1つ作り、同じデザインでそれぞれ別ファイルにレンダリングします。カードに title と sub 以外の情報が必要な場合は、フィールドを追加してください。
• 使用先：OBS または配信の場合は WebM のみ。ウェブページの場合は WebM と Safari 用の HEVC コピー（references/delivery.md）。Premiere Pro、DaVinci Resolve、Final Cut の場合は ProRes 4444 .mov。両方が指定されている場合は両方。スマートフォン用の編集アプリ、またはアルファチャンネルに対応していないツールの場合は、クロマキー用のグリーン背景にした MP4。使用先が指定されていない場合は WebM と .mov。
• 見た目：番組、ブランドカラー、雰囲気（ニュース、ポッドキャスト、ゲーム、ドキュメンタリー、教会、企業など）。デザインはテンプレートではなく、これらの要素をもとに決めます。
• 指定がない場合のデフォルト：1920×1080、30 fps、約8秒（1秒未満で表示し、5～6秒静止表示して、0.5秒で消します）。左下に配置し、音声はなし。

2. 番組に合わせてデザインする

テンプレートの drawGraphic は構造の実例であり、見た目の見本ではありません。依頼内容に合わせて書き直してください。どのデザインにも共通する要件は次のとおりです。

• どんな映像の上でも読みやすくする。 背景を把握できないため、テキストの背後にはパネル、バー、帯、濃い影などを置いてください。明るい映像に細い明色のテキストを直接重ねると、見えなくなります。
• タイトルセーフの範囲内に収める。 すべてのピクセルを各端から少なくとも5%内側に配置してください（テンプレートの SAFE は6%です）。ローワーサードは画面下部3分の1に、コーナーバグは隅に配置し、話者のために画面中央は空けてください。
• 小さくする。 名前表示の帯が覆うのは画面の数パーセント程度です。1080pで名前の高さは約50～80 px、役割の高さはその半分ほどにしてください。
• 読み取る間は静止させる。 動きは表示と消去の演出に使います。表示中は動かさないか、視線を引かない程度のごくわずかな動きにしてください（ゆっくりした光沢の移動は最大1回まで）。
• 最初と最後は何も表示しない。 編集時に突然表示されたり、途中で切れたりしないよう、最初と最後のフレームには何も含めないでください。LEAD と TAIL は維持してください。
• 文言を切らない。 長い名前がはみ出すのではなく、枠内に収まるよう fit() を使って縮小してください。ワイプやクリップは、表示される要素のうち最も幅の広いものに合わせてサイズを決めます。CARDS の中で最も長い項目を確認してください。
• フォント：使用するウェイトとイタリック体を含め、フォントファミリーごとに Google Fonts の <link> を1つ用意してください。また、描画に使うすべての書体を FONTS に列挙してください（'700 Inter'、'italic 400 Libre Baskerville' など）。これにより、フォールバックフォントでの描画を防げます。Cormorant、EB Garamond、Playfair Display など、多くのセリフ体はオールドスタイル数字を描画し、ベースラインより下に突き出ます。Canvas ではライニング数字に切り替えられないため、カードに数字（「詩篇 1:3」「エピソード 12」など）がある場合は、ライニング数字を使う書体（例：Lora）を選び、静止画で確認してください。

画面に複数の要素（司会者用の帯、ゲスト用の帯、セグメント全体で表示するコーナーバグなど）がある場合は、それぞれ別のタイミングで1ページにまとめる方法と、編集者が個別に配置できるようグラフィックごとにページを分ける方法があります。どちらにしたか明記してください。

3. 確認する

node render.mjs page.html --check                                    # fonts, transparency, empty first/last frame, title-safe, timing
node render.mjs page.html shot --stills 3s                           # the hold, full frame, over a checkerboard, dark and light footage
node render.mjs page.html in.jpg --sheet 0.1 --in                    # the build-in, frame by frame, cropped to the graphic
node render.mjs page.html out.jpg --sheet 0.1 --out                  # the build-out (both read window.PHASES)

--check に合格する必要がありますが、ワイプで切れているテキストや読みにくいテキストまでは確認できません。そこは目で確認してください。静止画では、暗い背景でも明るい背景でもすべての単語が読め、文字間隔も均等です。シートでは、何も飛び出さず、パネルの表示された部分より前や外側にテキストが表示されることもなく、停止中に文字が途中で切れることもありません。また、表示の仕上がりは登場時と同じくらいきれいです。CARDS の項目をすべて確認してください（--card N は 0 から数えます。--card 1 は 2 番目です）。問題がなくなるまで修正して再確認してください。

4. レンダリングして納品する

node render.mjs page.html maya-chen.webm                    # VP9 with alpha
node render.mjs page.html maya-chen.mov                     # ProRes 4444 with alpha (large)
node render.mjs page.html daniel-ortiz.webm --card 1        # the next card
node render.mjs page.html maya-chen-4k.webm --scale 2       # 3840x2160
node render.mjs page.html maya-chen-green.mp4 --ground '#00ff00'

スクリプトは、--ground を指定しない MP4 を拒否します（H.264 はアルファチャンネルに対応していません）。また、停止中のフレームをデコードして、WebM と .mov ファイルに実際にアルファチャンネルが含まれていることを確認します。ファイルとページ（名前を変更して再レンダリングできます）を渡し、references/delivery.md にある、相手のツールでの使い方を 2、3 行で説明してください（Web ページの場合は、そこに記載されている Safari 用ファイルも必要です）。相手が依頼していない内容として何を選んだかも伝えてください。

必要なもの：Node 18 以降、作業フォルダーまたはその親フォルダーでの npm i playwright-core、ffmpeg、Chrome（または npx playwright install chromium）。