使い方ガイドへスキップ
Lower Thirds作者 iart-ai

Lower Thirds スキル。

透過する名前テロップや放送用オーバーレイをアニメーションとして描画します。

  • ローワーサード
  • タイポグラフィ
ソースレビュー · lower-thirdsSKILL.md
タスク 透過する名前テロップや放送用オーバーレイをアニメーションとして描画します。 成果物 指定の用途に合う透明 WebM または ProRes 4444 オーバーレイ。 始める前に 正確な名前と役職、番組のフォント、対象プレーヤーを提供してください。OBS や編集ソフト用の透過素材は通常の MP4 と要件が異なるため、描画前に形式を決めます。
記事用の要約 · ソース確認日 2026-11-02 · 生成された例ではありません

01 機能概要

透過する名前テロップや放送用オーバーレイをアニメーションとして描画します

読みやすい名前テロップを透明 WebM・ProRes で出力。編集可能なカードデータと、文字の収まり、時間、アルファの確認を備えます。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

lower-thirds は動く名前テロップなどのオーバーレイを、透明度を持つ動画ファイルにします。canvas 上で1フレームずつ描き、ライブ配信、ブラウザー、編集ソフトに合った形式で出力します。描いた図形の外側はすべて透明のままです。

登場と同じくらい、読ませる静止時間を重視する手順です。未知の映像に重ねても読めるよう文字に専用の下地を付け、長い名前を枠に収め、最初と最後は空フレームにします。複数カードはデザインを共有し、個別ファイルとして描画します。

想定される成果物

  • 指定の用途に合う透明 WebM または ProRes 4444 オーバーレイ。
  • カードデータとタイミングを持つ編集可能な HTML ソースページ。
  • 静止保持フレームのプレビューと登場・退場のコンタクトシート。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    正確なカード文字を読む

    名前、役職、句読点を維持します。描画前に形式を選べるよう、使用先を決めます。

  2. 02
    オーバーレイを設計する

    画面中央を空け、安全余白内に図形を置き、文字に下地を付けます。最長の項目を収め、読む時間は静止させます。

  3. 03
    出力を確認してデコードする

    付属の検査を実行し、明暗の背景でプレビューを見て、登場・退場シートを確認します。エンコード済みファイルの透明度を確かめます。

02 利用場面

使いどころ

正確な名前と役職、番組のフォント、対象プレーヤーを提供してください。OBS や編集ソフト用の透過素材は通常の MP4 と要件が異なるため、描画前に形式を決めます。

向いているケース

  • ライブ映像に名前を重ねる最終映像を予測できないため、異なる背景で評価する設計です。
  • 複数話者で同じスタイルを使うカード記録により、同じ配置と動きを各人物に対して個別描画できます。

確認すべき制限

  • H.264 には単色背景が必要透明度には alpha 対応形式を使い、通常 MP4 の出力には背景色を要求します。
  • 描画にローカル依存があるソースは Node、ブラウザーキャプチャーツール、Chrome または Chromium、FFmpeg を挙げています。
  • Web 再生は使用先次第Safari 向けは別経路です。1つの透過ファイルで全ブラウザー互換を保証しません。

用意する入力

  • 正確な文字各名前、役職、説明を表示どおりに提供します。
  • 使用先OBS、ブラウザー、編集ソフト、クロマキー手順を指定します。
  • 番組デザイン色、フォント、雰囲気、フレームサイズ、時間要件を提供します。

03 重要な判断

重要な判断

  1. 映像上でも読める

    下地が明るい映像上で白い文字が消えるのを防ぎます。

  2. 自然な編集境界

    空の開始・終了フレームが、突然の表示や消失を防ぎます。

  3. アルファを実証

    拡張子を信じるだけでなく、保持フレームをデコードします。

04 依頼例

目的を絞った依頼文を試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

ソースとセットアップを確認する

各名前、役職、説明を表示どおりに提供します。

アップストリームのソースファイル
https://github.com/iart-ai/lower-thirds-skills/blob/aa8ef7ed9fa59d0a79fc57701e493cfd8197b5d8/skills/lower-thirds/SKILL.md

以下の参照先から、提供元の手順を確認できます。利用前にリポジトリのセットアップ要件を確認してください。これはインストールコマンドではありません。

一つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
lower-thirds を使い、添付リストの名前と役職で3人のポッドキャストゲスト用に統一したオーバーレイを作成してください。深緑とクリームの配色で左下に配置し、中央は話者のために空けてください。OBS 向け透明 WebM と編集可能な HTML を納品してください。各名前は文字を読むための5秒間に静止し、最初と最後は空にしてください。最長の名前を確認し、明るい背景と暗い背景で見て、全カードを描画する前に登場と退場のフレームを確認してください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認してください。

  • 明るい映像と暗い映像のプレビューで各カードを読む。
  • 空の両端、安全余白、最長の文字を確認する。
  • 書き出した保持フレームをデコードし、実際の透明度を確認する。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
iart-ai
スキルファイル
SKILL.md
ライセンス
MIT
確認したスナップショット
2026-11-02 · aa8ef7ed9fa5
編集部によるソース要約
透過する名前テロップや放送用オーバーレイをアニメーションとして描画します。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

透明 MP4 は作れますか?

ソースは alpha に WebM または ProRes 4444 を使います。通常の H.264 MP4 には、クロマキー用の緑など単色背景が必要です。

複数の名前を一度に作れますか?

はい。各カードデータを共通デザインで別ファイルに描画します。ただし、すべての項目で文字の収まりを確認する必要があります。

自動検査だけで十分ですか?

いいえ。ソースは、ワイプ中の文字切れや読みやすさを自動検査では判断できないと明示しています。静止画と登場・退場シートを目視する必要があります。

OpenDesign

依頼内容とデザイン作業を一つの場所に。

ブリーフ、ソース資料、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/iart-ai/lower-thirds-skills/blob/aa8ef7ed9fa59d0a79fc57701e493cfd8197b5d8/skills/lower-thirds/SKILL.md