コンテンツ制作 · iart-ai/data-animation-skills

presentation-video

このスキルは、ユーザーが「アニメーション付きプレゼンテーションを作成したい」「ピッチデックを動画化したい」「スライド/デックを動画に変換したい」「プレゼンテーション動画を作りたい」「デック動画を構築したい」「スライドデックを動画としてナレーション付けしたい」「ナレーションに同期してスライドを自動進行させたい」と依頼した際に使用します。スライドを段階的なビルドリビール、スライド間トランジション、各スライドのナレーションに固定されたタイミングを備えたモーショングラフィックスとして再構築する作業をカバーします。

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

1仕組みと動作原理

核心となる主張は画面録画ではなく「再構築」:画面録画は静的な外観、マウスのブレ、不自然なカットを引き継ぐのに対し、再構築によってフレームの決定性、イージング可能なトランジション、あらゆる解像度での鮮明さ、音声駆動のデュレーションが得られます。

skills/presentation-video/SKILL.md
A screen-recording inherits the deck's static look, mouse jitter, and abrupt slide cuts. Rebuilding in code (Remotion) buys: per-frame-deterministic reveals, transitions that actually ease, text that stays crisp at any resolution, and slide durations driven by audio length.
動作モデルは「デックは脚本であり、動画は新たな生成物である」です。

ストーリー優先:最初に1文のバックボーン(背骨)を定め、1スライドにつき1つの事柄のみを扱い、スライドタイトルはラベルではなく論断にします。

skills/presentation-video/SKILL.md
- **One throughline (the spine).** State the deck's single takeaway in one sentence. Every slide must advance that sentence; if a slide doesn't, cut it or move it to an appendix.
自動再生される動画には助け舟を出す発表者がいないため、構造自体がロジックを担う必要があります。

唯一の鉄則:ナレーションがクロックを支配する——各スライドの長さ=そのスライドの音声実測値+わずかなハンドル(余白)。目分量での推測は禁止。

skills/presentation-video/SKILL.md
**Each slide lasts exactly as long as its narration audio, plus a small handle.** Measure every voiceover clip's real duration, convert to frames, and make that the slide's length.
reference では calculateMetadata 内で並列計測し、フレーム数に換算します(HANDLE=0.4s)。

各スライドの音声は自身のコンポーネント内に配置:映像と音声が同一の Sequence で位置決めされるため、物理的にズレが発生しません。

skills/presentation-video/references/slide-components.md
Because the audio lives inside the same component that draws the visuals, and both are placed by the sequencer at the same start frame, voice and picture physically cannot drift.
手動の微調整ではなく、構造的な保証によって音ズレを排除します。

トランジションのフレーム予算を計算する:TransitionSeries のトランジションは時間の追加ではなくオーバーラップであり、隣接スライドのフレームを消費します。

skills/presentation-video/references/sequencing.md
A `<TransitionSeries.Transition>` does **not** add time — it overlaps its neighbors, consuming frames from the end of the outgoing slide and the start of the incoming one.
ナレーションを最後まで再生し切る必要があるスライドでは、トランジションの長さを予算に補填する必要があります。

スライド内のビルドリビールはナレーションと同期させる:読み上げられた瞬間に要素が出現し、視聴者が3行先を読んでしまわないようにします。

skills/presentation-video/SKILL.md
The point of a build is pacing: show each element when the narration reaches it, so the viewer reads the line being spoken — not three lines ahead.
したがってリビールのリズムは固定グリッドではなく、ナレーションから導出されます。

可読性は厳格な境界線:本文は 1080p で ≥28–32px、タイトルは 56–80px、コントラスト比 ≥4.5:1、コンテンツは中央 90% に収める。

skills/presentation-video/SKILL.md
- **Type scale, not deck scale.** A deck viewed on a laptop ≠ a video viewed in a feed. Bump body to ≥ 28–32px at 1080p; titles 56–80px.
付随する規律:収まらない場合はスライドを分割し、フォントサイズを縮小することは決してしません。

検証ループ:まず compositions を読み取って合計時間を取得し、トランジション上ではなく「各スライドの静止表示区間」からサンプリングを行います。

skills/presentation-video/SKILL.md
- Use `npx remotion compositions` to read the deck's `durationInFrames`/`fps` and pick the end frame; sample a still **inside each slide's hold**, not on a transition, to judge the built state.
チェック項目には、中央 90% からのはみ出し、本文フォントの小ささ、コントラスト不足が含まれます。

トランジションにはロジック(したがって/しかし/それゆえ)を持たせる:控えめな fade は「並びに」に、大きな push はセクション区切りにのみ使用します。

skills/presentation-video/SKILL.md
- **Transitions carry logic, not just motion.** The cut between slides should answer "so what's next?" — therefore, but, which means, here's the proof.
トランジションを装飾から論理のマーカーへと格上げします。

2コア機能

01ナレーション駆動のデュレーション(calculateMetadata の並列計測 → フレーム数 + HANDLE)
02ストーリー構造ツール(spine / 1スライド1メッセージ / tension→resolution のピッチ5幕構成)
03スライドコンポーネントライブラリ(useEnter / TitleCard / BulletList / Slide / SectionDivider)
04TransitionSeries のオーケストレーション(隣接タイプに応じた fade または slide の選択、ディバイダーには大型トランジション)
05トランジションのフレーム予算計算(消費されたフレームを当該スライドに補填)
06可読性チェックリスト(フォントサイズ / コントラスト / セーフエリア / 数字の tabular-nums 適用)
07複数デックの一括レンダリング(1つのテンプレート × クライアント/地域ごとの JSON)
08失敗パターンリスト(デュレーションの推測、デック階層での音声配置、過度な強トランジション、1スライドへの詰め込みすぎ、フォント欠落)

3外部依存関係

KindDependency / Endpoint
packageremotion(AbsoluteFill/Sequence/Audio/spring/interpolate)
package@remotion/media-utils(getAudioDurationInSeconds 量测旁白)
package@remotion/transitions(TransitionSeries / linearTiming / fade / slide)
package@remotion/google-fonts(reference 建议的字体加载方式;选择它会在渲染期访问 Google Fonts)
clinpm / npx(安装并运行 Remotion 工程、读 compositions、渲染)
networkiart.ai(reference 尾部推广链接,具 utm 参数;仅读者点击才请求)

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

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: skill ディレクトリ内に同梱スクリプトなし。SKILL.md/reference がエージェントに対し `npm i remotion @remotion/tra` の実行を指示。
  • 网络端点: 外部ネットワークアクセスの宣言: 実行時に業務 API の呼び出しなし。ナレーション音声はローカルファイルであり、Remotion がローカルで読み取り計測。
  • 本地工作目录: ファイルの読み書きと成果物の出力: ユーザープロジェクト内に `out/f-title.png`/`out/f-mid.png`/`out/f-end.png`、`out/deck.mp4`、`o` を書き出し。
監査ノート: 。トリガー事由は分類基準「サードパーティのプラグイン、イメージ、リモートパッケージへの依存」です。skill ディレクトリ自体は純粋な Markdown(スクリプトなし、クレデンシャル読み取りなし、環境変数読み取りなし)ですが、成果物生成パスにおいてリモートパッケージ remotion + @remotion/media-utils + @remotion/transitions のインストールと実行が必須です。また、reference ではブランドフォント読み込みに @remotion/google-fonts の利用を明示的に推奨しており、そのパスを選択した場合はレンダリング時に Google Fonts へのリクエストが発生します。同リポジトリの `remotion-video` も同一基準でオレンジ判定されており、これと一致しています。**明確に該当しない項目**:クレデンシャル/Cookie/環境変数の読み取りなし(トークンスキャンで実質的な検知ゼロ)、外部の生成サービスへの素材アップロードなし(音声と映像は終始ローカル処理)、TLS ダウングレードなし、`--no-verify` なし、サンドボックス無効化なし、アンチオートメーション回避なし。トリガー条件:プロジェクトのセットアップ、動画のレンダリング、または Google Fonts を利用したフォント指定時のみ発生。

5二重目の独立検証

  • [ok] 音频量测与 HANDLE 数值是否两处一致 — SKILL.md 代码块 `const HANDLE = 0.4; // breathing room after the voice ends` 与 sequencing.md 的 `const HANDLE = 0.4; // seconds of breathing room after each voice line` 同值。
  • [ok] theme 数值是否与 reference 一致 — SKILL.md 示例 theme(bg #0B0B12 / fg #F5F5F7 / accent #6C5CE7 / titlePx 72 / bodyPx 30 / maxWidthPct 90)与 slide-components.md 的 theme.ts 逐项相同。
  • [ok] 转场帧预算的声明与实现 — SKILL.md「A transition borrows frames from both neighbors, so add its length back into the slide budget」与 sequencing.md 的记账规则(slide.durationInFrames += TRANSITION)同口径。
  • [discrepancy] @remotion/google-fonts 的声明层级 — @remotion/google-fonts 只出现在 sequencing.md 的 pitfalls(作为可选建议),SKILL.md 既未列入依赖面、也未提示渲染期可能访问 Google Fonts;照抄该建议会产生未声明的出网行为。
  • [ok] SKILL.md 内联组件与 reference 组件是否冲突 — SKILL.md 的 Bullet 用 spring(...durationInFrames: 12) + interpolate(p,[0,1],[18,0]),reference 用 useEnter() 封装同一动效;属精简版与封装版的关系,非矛盾。
  • [unlocatable] 旁白生成方式是否被声明 — SKILL.md workflow 第 2 步写「Generate/record narration per slide.(One audio file per slide (TTS or recorded).)」但未指名任何 TTS 服务或端点——属用户自备素材;「无 TTS 端点」这一结论无法在源码内定位到明确声明,故记 unlocatable(非档位依据)。

6結論

  • デュレーションを目分量ではなく音声の実測値から算出するため、ナレーションの途切れや不自然な空白を根本から防止
  • 音声と映像の同期を構造で保証(スライドコンポーネント内に音声を配置)し、手動調整に依存しない
  • ストーリー構造を一級市民として扱う(spine、1スライド1メッセージ、ロジックを担うトランジション)
  • トランジションのフレーム予算ルールにより、ナレーション時間が暗黙的に削られるのを防止
  • 可読性に明確な判定基準を設け、「文字を小さくするのではなくスライドを分ける」対応を徹底
  • 最適な用途: ピッチデック、ウェビナー、講座モジュールをナレーション付きの自動再生動画に変換するシナリオ:長さを厳密にナレーションに合わせる必要があり、1スライド1メッセージ、ブランドの一貫性保持、クライアント/地域別の大量出力が求められる用途。
    不向きな用途: ナレーション音声が存在しない場合(本スキルの全時間ロジックは音声に基づきます)、単一ページ形式のインフォグラフィック/グラフ動画のみが必要な場合(animated-infographic や chart-animation を使用)、または純粋な画面録画の要望。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload presentation-video.tar.gz
    sha256: c9a450ffb476b92f…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 8ce2709c39.