コンテンツ制作 · iart-ai/tiktok-video-skills

lower-thirds

ユーザーが「アニメーション付きのローワーサードを作りたい」「ローワーサードを追加したい」「ネームタグ/氏名テロップを作成したい」「放送スタイルのテロップを組みたい」「タイトル/氏名/肩書のキャプションにアニメーションをつけたい」「登壇者名のオーバーレイを作成したい」「名前リストからローワーサードをテンプレート展開したい」と求めた場合に使用します。イン/アウトアニメーション(スライド/ワイプ/マスクリビール)、イン/アウトのタイミングと表示時間(Dwell)、セーフエリアと放送業界の慣例、氏名と肩書のタイポグラフィ階層、ブランドスタイリング、および同一デザインでの複数人名の一括レンダリングをカバーします。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author iart-aiGitHub iart-ai/tiktok-video-skills ↗Stars 11License MIT(仓库根 LICENSE 为 "MIT License / Copyright (c) 2026 iart.ai";GitHub API spdx_id = MIT;.claude-plugin/plugin.json 亦声明 "license": "MIT")Commit 2a775336b5
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

構成要素を「2行のテキスト+グラフィックの下敷き」の3要素(name / role / bar)に分解し、厳密に2行までに制限する。

skills/lower-thirds/SKILL.md
Keep it to two lines. A name line + role line is the whole job — extra lines erode the hierarchy and crowd the safe area.
ここで行っていること:アニメーションを議論する前に要素の上限を確定させる。階層が2行に収まって初めて一目で判読可能になるためであり、これが「汎用タイトルカード」との境界線となる。

安っぽさを防ぐ第1原則:タイトルテロップのハードカットによるイン/アウトは絶対に禁止する。

skills/lower-thirds/SKILL.md
1. **Never hard-cut a title on or off.** A bare appear/disappear reads as a mistake. Even a 12-frame fade or slide makes it feel produced.
ここで行っていること:「アニメーションの有無」を最低限の基準として定め、エージェントが出入りを省略しないよう最低コストの実装手法(12フレームのフェード/スライド)を提示する。

第2原則:時差入場——bar → name → role の順で、各要素を3〜6フレームずつずらす。

skills/lower-thirds/SKILL.md
**Stagger, don't slam.** Animate the bar first, then the name, then the role, each offset by 3–6 frames.
ここで行っていること:「上質感」を実行可能なパラメータ(フレームオフセット量)に分解する。リファレンスのRemotionコンポーネントもまさにこの順序でspringアニメーションを編成している。

感覚ではなくフレームバジェットで3段階のタイミングを規定する:イン 12–18f、表示維持 90–150f、アウト 8–12f(アウトをより速く設定)。

skills/lower-thirds/SKILL.md
| Exit | 8–12f (0.27–0.4s) | Faster than enter |
ここで行っていること:テロップが一瞬で消えたり居座り続けたりするのを防ぐため、表示維持時間も設計仕様に組み込む(3〜5秒=心の中で2回黙読できる時間)。アウトをインより速くするのは意図的な非対称イージングである。

セーフエリアはアスペクト比ごとに個別に指定する。縦型 9:16 の要件は、帯を下端に貼り付けるのではなく全体的に持ち上げることである。

skills/lower-thirds/SKILL.md
| 9:16 (1080×1920) | Same left margin; **lift the band up** | Bottom ~18% (captions/UI), top ~12% |
ここで行っていること:クロスプラットフォームのUI(字幕や操作ボタン)が下部に被るため、同一デザインであっても縦型では上方にシフトさせる必要がある。「1つのデザインを複数画面比率へ展開する」際、最もミスが起きやすいポイントである。

階層構造はフォントサイズのコントラストで担保する:name は role の最低1.6倍とし、迷った場合は role を縮小するのではなく name を拡大する。

skills/lower-thirds/SKILL.md
**Size contrast** ≥ 1.6× (name vs role).
ここで行っていること:「情報階層」を数値比率として定量化し、唯一の安全な調整方向を示す。単色のブランドアクセントおよび左揃え(左アンカー)と組み合わせることで、ブランド一貫性を保つ最小限の構成を成立させる。

テンプレート化可能性がこのコードベースの根本的な存在理由である:name/role/theme を必ず props とし、roster(名簿)を1行ずつ --props でレンダリングして複数の独立したクリップを出力する。

skills/lower-thirds/SKILL.md
In a renderer, make the roster an input prop and render once per row (`--props`) to emit one branded clip per person
ここで行っていること:「1人1本の動画」をバッチ処理化する——同一のアニメーションとブランドを保ちつつテキストのみを差し替える。リファレンスには roster.json を処理する jq ベースのバッチスクリプトと、透過出力エンコードの推奨設定も記載されている。

検証は「3フェーズ+バッチ」向けに設計する:一括レンダリング前にまず1行分を検証し、アウトフレームで部分的な露出が見えていること(アニメーションが正常に動作している証明)を確認する。

skills/lower-thirds/SKILL.md
**Batch roster**: verify ONE row via stills *before* rendering all names — catch a layout/overflow bug once, not N times.
ここで行っていること:同一人物の名前の文字溢れなどの問題がN回レンダリングされてしまうのを防ぐため、「バッチ処理前にまず1行検証する」ことを運用規律として徹底する。判定基準は人間による静止画の目視確認とする。

2コア機能

013種類のイン/アウト動的表現:slide+fade(デフォルト)、wipe bar(放送スタイル)、mask reveal(clip-path によるプラグイン不要の一文字ずつのリビール)
02イン/表示維持/アウトの3フェーズにわたるフレームバジェットと非対称イージング(インは ease-out、アウトはより高速)
03アスペクト比別(16:9 / 9:16 / 1:1)のセーフエリア規約、タイトルセーフマージン、および左アンカー基準の伸長
04ブランド固定:font / accent / bar / radius / margin を単一の theme オブジェクトに集約し、1箇所の変更で動画全体の整合性を維持
05roster → 複数インスタンス(Series による連続配置)および1行ごとの --props バッチレンダリング、透過オーバーレイ出力(ProRes 4444 / PNG連番)
06Remotionのない実行環境向け依存関係ゼロの CSS/HTML 版(wipe-bar バリアントを含む)
07納品・検証ループ:enter / dwell / exit の3枚の静止画 + コンタクトシート結合画像 + 縦型仕様を検証する probe-mp4 アサーション

3外部依存関係

KindDependency / Endpoint
clinpx remotion still / render / compositions
cliscripts/contact-sheet.sh + scripts/probe-mp4.sh(仓库根共享验证工具箱,SKILL.md 明列)
clijq + ffmpeg/prores 编码(reference 的 roster 批量脚本与透明输出)
packageffmpeg / ffprobe(系统依赖)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: (SKILL.md に明記された検証ループ)`npx remotion still LowerThird out/f-{enter,dwell,exit}.p`
  • 网络端点: 外部ネットワークアクセスの宣言: `npx remotion …`: 初回実行時に npm 公式ルート経由でパッケージおよび CLI を取得(registry.npmjs.org、ドメインは npm 依存、ソースコード内へのハードコードなし)
  • 本地工作目录: ファイルの読み書きと成果物出力: エージェントが本スキルに従って構築する Remotion プロジェクトおよび out/lower-third.mp4、out/demo.gif
監査ノート: 3段階の自己証明:① 判定対象=skills/lower-thirds/(`find` により SKILL.md、README.md、references/lower-third-component.md の3つの .md のみ存在することを確認済み。スクリプトおよびアセットなし);② ディレクトリ自体の内部動作=ローカル書き込み(Remotionプロジェクト、out/*.mp4、静止画、sheet.png)+ローカルCLI(`npx remotion`;ffmpeg/ffprobe はリポジトリルート scripts/ を経由;リファレンスのバッチ処理では別途 jq/tr を使用)。skills/ 全域で `process.env` / `api[_-]?key` / `token` / `cookie` / `https?://` のヒット数はいずれも0件;③ 唯一のネットワーク接面は公式 npm ルートからのパッケージ取得(remotion / @remotion/*)であり、サイト内の青判定(Blue-tier)の先行事例(hyperframes、general-video、motion-background)と同一の基準。黄判定への引き上げなし:固定公開エンドポイントへの問い合わせなし、スクレイピングなし、公式CLIの update/check 挙動なし。橙判定への引き上げなし:認証情報や環境変数の読み取りなし、外部への素材送信なし(音声・画像のアップロードなし、すべてローカルファイル処理)。赤判定非該当:TLSダウングレードなし、サンドボックス無効化なし、対自動化回避なし、任意コード実行の接面なし。付記事項(判定変更なし)として injection_surface および verdict.risks に記載の2点:リファレンスのバッチスクリプトにおける派生ファイル名のサニタイズ処理が未実施である点、およびブランドフォント/アセットはユーザー提供となるためフォントライセンスの遵守責任はユーザー側にある点。

5二重目の独立検証

  • [ok] SKILL.md 的三条「防廉价规则」是否真在 reference 组件里被实现(防第一遍只读散文) — reference §1 明写 "Enter staggers the bar, name, then role; exit is computed from the end of the clip so the title leaves faster than it arrived.",组件导入 `Sequence, interpolate, spring, useCurrentFrame, useVideoConfig`,Theme 类型与 BRAND 对象齐备(font/bar/name/role/radius/marginPct)。规则 → 代码可逐条对应,非空头承诺。
  • [discrepancy] reference 批量脚本的文件名派生是否会越出输出目录(第一遍遗漏的面) — 原文:`slug=$(echo "$row" | jq -r '.name' | tr '[:upper:] ' '[:lower:]-')` 紧接 `npx remotion render LowerThird "out/${slug}.mp4" --props="$row"`。tr 只做大小写与空格到连字符的映射,不剥离 `/`、`..`、前导 `-` 等字符;若 roster 的 name 含路径分隔符,输出路径可越出 out/。这是数据→文件名的注入面,仅影响本地写入位置,不构成权限提升;SKILL.md 正文未把它写成安全事项。属对 pin commit 有效的真实出入(脚本可改进,非虚假声明)。
  • [ok] 「9:16 抬高档位」是否在代码里有对应实现(不只是表格建议) — reference 的 Quick reference 表给出「9:16 placement | `baseline 0.80→0.70` / the media query」,说明竖屏不是靠新组件,而是同一组件换基线/媒体查询;与 SKILL.md「lift the band up」一致。
  • [unlocatable] 「3–5s 停留」「≥1.6× 字号对比」这类经验值是否有出处 — SKILL.md 写 "Roughly 3–5s on screen (read it aloud twice)." 与 "**Size contrast** ≥ 1.6×",仓库内无测量脚本、无引用来源、无 A/B 数据;属经验判据,不作为已核事实,仅记为文档建议。
  • [ok] 跨包共享脚本与「Packaged helper」引用是否真实存在(防悬空引用) — SKILL.md 只点名 scripts/contact-sheet.sh 与 scripts/probe-mp4.sh;两者在仓库根真实存在且可执行(-rwxr-xr-x),三仓库逐字节相同(contact-sheet.sh md5 b7dcc28034c9bf8fda5d48683e54d8b5、probe-mp4.sh 167b7977c50f492014e1a6fef8c9ed12)。seek-shot.sh 未被本 skill 点名,不构成悬空引用。
  • [ok] 透明叠加输出建议是否是真实可用的编码路径 — reference 给的是 Remotion CLI 自身的参数(`--codec=prores --prores-profile=4444` 或 `--image-format=png`),属该工具既有能力,非虚构 flag;能否落地取决于用户环境的 prores 支持,但命令形式正确。

6結論

  • 「抑制の美」を実行可能な制約へと変換:2行上限、単色アクセント、始端と終端のみのアニメーション、左アンカー基準の伸長など、美的判断を具体的パラメータへ落とし込んでいる
  • アニメーションを監査可能なフレームバジェット(イン 12–18f、表示維持 90–150f、アウト 8–12f)と時差シーケンスに分解し、「全要素が一斉に飛び込んでくる」安っぽさを排除
  • テンプレート化が中核価値:name/role/theme をすべて props 化し、1つのデザインから名簿全体をレンダリング可能、かつバッチ前に1行検証することを明確に義務付け
  • デュアルスタック提供(Remotionコンポーネント + wipe-bar バリアントを含む依存ゼロの CSS/HTML)に加え、ポストプロダクションでの合成に直結する透過オーバーレイ(ProRes 4444 / PNG連番)パイプラインを提示
  • 縦型 9:16 に対する明確な処理ルール(下部約18%および上部約12%を避けるために帯を持ち上げる)を持ち、16:9 のレイアウトを単にクロップするだけの処理を排除
  • 最適な用途: 適しているケース:インタビュー/ポッドキャスト/ウェビナーのゲストネームタグ、登壇者リスト、放送スタイルのタイトルバー、「1つのデザインから複数の名前」をバッチ生成する用途(例:12名のパネラー向けに12本のクリップを一括出力)。また、後工程のコンポジット用に透過オーバーレイ素材を納品する必要があるプロジェクトにも最適。一括レンダリングの前に3枚の静止画で階層構造とセーフエリアを確認するワークフローを受け入れられるユーザーに向いています。
    不向きな用途: 適していないケース:① 複数行の情報(役職+会社名+SNSアカウント+QRコードなど)を必要とする長大なネームタグ(本スキルは厳格に2行までに制限しています);② リアルタイム切り替えやインタラクティブなネームタグが必要な環境(レンダリング済み動画を出力するため);③ 人間による静止画レビューを許容せず、100%自動化された品質検査を要求するパイプライン;④ 複雑なタイポグラフィ特殊効果(3Dフリップ、文字ごとのパス追従など)を必要とする高度なモーショングラフィックス包装(アニメーション手法は slide/wipe/mask の3種に意図的に抑えられています);⑤ リポジトリルートの scripts/ を含めず、単一のスキルディレクトリのみをコピーして利用する環境。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload lower-thirds.tar.gz
    sha256: 5b146268b6b14b5c…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 2a775336b5.