Communitygithub.com

explainer-editor(解説エディター)

縦型(9:16)の一人語り動画を、Pipecornの「解説言語(EXPLAINER LANGUAGE)」に基づいて、After Effects風のモーション(スピーカーをフレーム下部に配置し、その頭上で説明内容を展開する演出)で仕上げます。

explainer-editor(解説エディター) とは?

このスキルは、ユーザーが撮影した縦型の一人語り動画を、Pipecorn独自の「解説言語」スタイルに変換します。After Effectsのような高度なモーションデザイン(スピーカーの頭がフレームから浮かび上がるマット、カメラのウィップパンやプッシュ、モーションブラー、影とグロー演出)を用いて、スピーカーの頭上に説明内容をシーンとして展開します。各シーンはカメラ移動で繋がれ、新しい要素が1〜2秒ごとに登場し、動き続ける画面を実現します。元となるスキルはshort-editorで、レイアウト、ステージ、ベッド、スチル、計測などのスクリプトをこのスキルが独自に持ちます。必須条件としてffmpegとswiftc(人物マット生成用)が必要で、スクリプト内で自動的にフォントや音声認識環境をセットアップします。ユーザーからの入力はテーマ(ダーク/ライト)、音楽、ペース、およびブランド素材(ロゴ、スクリーンショット等)の有無を一度に尋ね、回答に基づいて編集を開始します。トランスクリプトは逐語的に書き起こし、その内容を元にストーリーボード(シーン構成、各ワードに登場するフィギュアの種類)を設計します。全ての動きには音響デザイン(スウィッシュ、効果音)が付けられ、完成した動画は検証スクリプトによって品質が保証されます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ihsaneGTM/gtm-skills/tree/main/plugins/video/skills/explainer-editor

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

explainer-editor: スピーカーの頭上で解説を展開する演出

ユーザーから 縦型で撮影した自身の一人語り動画 を受け取ります。このスキルは、スピーカーをステージセットのような暗い背景の下部に配置されたフレーム内に収め、その頭部をフレームから浮かび上がらせます。そして、After Effectsの編集のように、スピーカーが話す内容を その発言に合わせて、頭上に 描き出します。カメラが移動するシーン、モーションブラーを伴って飛んだり浮上したりポップインするフィギュア、それぞれに影とグローが付き、1〜2秒ごとにステージ上に新しいものが現れ、すべての動きにサウンドが伴います。スピーカーの言葉は、ステージとスピーカーの間を1つずつ流れます。1分に数回、カメラフラッシュでスピーカーが全画面表示になります。

ショート動画の見た目は決まっています。§ 解説言語 (パイプラインの下)。これは、ユーザーがクライアントのために編集したショート動画(108秒、テキストフックのガイド)をフレーム単位で計測し、最初の編集(2026-10-05: 「まったくAfter Effectsじゃない、モーションデザインじゃない、画面に表示されるものが少なすぎる、退屈だ、ウィッシュ音が足りない」)と2回目の編集(「かなり良くなった。要素の後ろに小さな影とグローが足りない、真っ黒な地面では引き立たない。ここにもっと多くの非常に軽いサウンド用パックがある」)でレビューされた結果に基づいています。両方の判定の各行が、現在はルールとなっています。新しいテイクを始めるたびに、このルールからスタートしてください(init.sh がスキャフォールドを作成します)。このルールを再び開いて変更しないでください。

このスキルは、short-editorスキルのエンジン上で動作します。 そのレンダリング、ミックス、人物マット、プレビュー、ビルド、検証はエンジンのファイルを使用します(../short-editor/SKILL.md § 前提条件、§ ファイルの場所、§ 4〜§ 6に記載)。このファイルは、異なる部分のみを説明します。このスキル独自のもの:レイアウト(layout.mjs:スピーカーのフレームと全画面表示の息継ぎ部分。エンジンの build.sh と preview.mjs がズームの代わりに実行)、ステージ(stage.mjs:カメラ、シーン、モーションブラー、フィギュア、キャプション、モーションのサウンド)、ベッド(bed.mjs)、スチル(stills.mjs)、および計測(measure.mjs)。最初のカットの前に、毎回以下を読んでください:

  • ../../references/pitfalls.md § 文字起こしとキャプション、§ 作業方法:編集を作成する際のトラップ(該当するステップに来たときに他のセクション:§ 手動で計測したサウンドの前のオーディオ、§ ffmpeg と § シェル(自分でコマンドを書く前)。エンジンのツールは残りの部分に従います)
  • ../../references/brand-kit.md、編集でそれらを表示する場合:ユーザーの実際のロゴ、スクリーンショット、数値。決して創作したものは使わず、ブランドセットは workspace/brand/ に1度だけ設定します(§ あなたのブランド、一度設定)
  • $X/example/:リファレンスプロジェクト、納品済み編集の全ファイル(stage.theme: "light" はそのライトバージョン用);$X/example-2/:別のテイク(2ショット、静かな録音、息継ぎなし)でゼロからスキルを実行したもの、およびその実行で変更された内容

ステップで必要なときに読む: ../../references/audio-spec.md(ラウドネス標準、聞こえるラウドネスの測定方法)。エンジンのフィギュア: node plugins/video/skills/short-editor/scripts/api.mjs <module> [figure]、ソースは決して使用しません。

私は動画を見たり音声を聞いたりできません。 頭の位置、単語の開始位置、ウィッシュ音の大きさ:これらはすべて計測値です。verify.mjs は「準備完了」と壊れたファイルの間に立ちます。measure.mjs はサウンドデザインが聞こえているかどうかを判断します。これらを決してスキップしないでください。

以下のパスはすべて、GTM by Pipecornフォルダのルートからの相対パスです。$X は plugins/video/skills/explainer-editor/scripts(このスキル)、$E は plugins/video/skills/short-editor/scripts(エンジン)を意味します。両方とも絶対パスで実行してください。

前提条件(事前確認:作業開始前にチェック)

エンジンの前提条件:PATHに ffmpeg + ffprobe(brew install ffmpeg)と python3(Xcode Command Line Tools)が必要です。これらはここからインストールできません。不足している場合はコマンドを表示して停止してください。その他はすべて自動で準備されます:エンジンの bootstrap.mjs(Nodeパッケージ、音声認識venv、音楽シェルフ)は init.sh、transcribe.sh、build.sh 内で実行され、init.sh はフォントを取得します:Inter(ExtraBold、Bold、SemiBold、Medium;SIL Open Font License、npmパッケージ inter-ui からjsDelivr経由)と Instrument Serif Italic(Google Fonts、OFL)をプロジェクトの assets/fonts/ に配置します。システム全体にインストールされるものはありません。swiftc は人物マットをビルドします。これがないと頭がフレームから浮かび上がらず(フレームは単にスピーカーを切り抜くだけ)、ステージはオーバーレイレイヤーに描画されます。その場合はその旨を伝えてください。

ファイルの場所

エンジンの指示通り、以下の方法でのみ管理します:編集ごとに1つの作業ディレクトリ workspace/projects/<slug>/(他のプロジェクトと重複しないスラッグ)。完成ファイルは workspace/videos/<slug>.mp4。同じテイクであっても、他のプロジェクトのファイルは絶対にここに置かないでください。一時ファイルはプロジェクトの tmp/ に置き、/tmp/ には置きません。スキルの scripts/ は読み取り専用のままにします。ユーザーの画像(スクリーンショット、ロゴ、動画のフレーム)はプロジェクトの assets/ に配置します。

パイプライン

0. 作業ディレクトリをセットアップ

$X/init.sh workspace/projects/<slug> <source.mp4> workspace/videos/<slug>.mp4 [--theme light]

エンジンのスキャフォールド(project.jsonはファイルから読み取り、SFXパックは assets/sfx-top5/ に)、次にこのスキルの plan.mjs と edl.mjs、project.json内の解説言語のキー(style: "explainer"、layout:$X/layout.mjs のパス、blurBand 0)、sfxMasterDb はテイクの音声に基づいて設定(そのラウドネス + 15.3 dB、-20.5 LUFSを下回る1 dBごとに + 0.13 dB:ベーススキルと同じようにハウスサウンドが聞こえるように、テイクのレベルに関わらず設定)、フォント、小さいポートレートテイク用の1080x1920マスター(2回目の実行で保持)、および テーマ(stage.theme:dark(デフォルト、リファレンス)または light;--theme light で設定;既に設定済みのプロジェクトはその設定を保持)。以降のすべてのコマンドはそのディレクトリから実行してください。

0.2. 最初に、1つの質問で尋ねる

テーマ(dark(デフォルト)、light:同じステージ、白いガラス、暗い文字、ソフトな影)、音楽(シェルフ、plugins/video/assets/music/;デフォルトはConvergence。Mixkit以外のトラックは動画の収益化をブロックする可能性があることを伝える)、ペース(デフォルトは×1;ゆっくりした話し方は×1.1で読みやすくなる)、および ユーザーが提供できる画像:プロダクトのスクリーンショット、話している動画のフレーム、ロゴ、実際の数値。ユーザーが提供しなかったものは、彼らの言葉とハウスの絵文字で描画され、創作したスクリーンショットや数値は決して使用しません。GTM by Pipecornページから実行する場合、最初のメッセージの概要が回答になります(テーマはそのノートから:「light」はライトテーマを意味します)。以下のルールに従って判断し、再度質問しないでください。

Pipecorn汎用:すべてのスタイルのボーナス、毎回尋ねる、デフォルトではオフ (plugins/video/references/pipecorn-generic.md):最後に約6秒、Pipecorn、その値が1つのスロットで次々と置き換わり、再びPipecorn、音楽なし。いいえ · はい、どの値で(1〜4;node $E/generic.mjs --list;デフォルトは電話カバレッジ、接続率、パイプライン)。

あなたの声をより良く:ボーナス、毎回尋ねる、デフォルトではオフ (plugins/video/references/voice-clean.md):ElevenLabsのボイスアイソレーターが部屋の反響とノイズを取り除きます。いいえ · はい、声を良くする。ElevenLabsコネクタが必要です:キーがない場合は、1行で存在を伝え(設定 › コネクタ › キーを追加)、続行します。「はい」の場合、ステップ1の前に:node plugins/video/motion/voice.mjs clean <source>、その後 project.json の source は <…>-voice.<ext> になります(同じ長さ、画像はそのまま)。

1. 逐語的に文字起こし

$E/transcribe.sh --lang en      # 実際に話されている言語;その後 project.json "lang"

words.json、生のテイクの時間軸に基づく。翻訳はしません。再スタートが多いテイクは、最初にエンジンの rough-cut.mjs(short-editor/SKILL.md § 0.7)で組み立て、再度文字起こしします。その後 node $E/words.mjs(エンジンのもの):words-fixed.json、各単語の開始を無音から声に移動し、実際の終了をポーズの前に移動、疑わしいものはリストアップ。words.mjs env|end|say で1つを読み取ります(short-editor/SKILL.md § 1)。これには独自のスクリプトは使用しません。

2. マットとフレーム

node $E/matte.mjs                          # 人物マット(swiftcが必要)、1分のテイクに約1分
node $X/layout.mjs --measure --write       # 頭の位置 → project.json stage
node $X/layout.mjs --print                 # フレーム、キャプション、息継ぎ

--measure はテイクのショット(ソースカット、verify.mjs が検出する方法と同じ)を見つけ、各ショットのマット上の頭部を読み取ります(ショットあたり32フレーム):フレームの幅は、最も長いショットの頭部をリファレンスのサイズ(226 px幅)に配置します(クローズアップのテイクは狭いフレーム、中央揃えになるため、肩と胸が収まります:作業例では598 px、頭部はテイク幅の38%、2番目のテイクでは782 px;--keep-frame はリファレンスの942を保持し、フレームが主に顔を表示することを警告します);各ショットで、フレームの上端は頭部の通常の上部(リファレンス)の88 px下を通過するため、頭部がフレームから浮かび上がります;キャプションは、頭部が通常どれだけ高く上がるか(最大90 px)に応じて上昇し、その20 px上に留まります;全画面表示では頭部が幅の45%になります。複数のショットがあるテイクでは stage.shots が設定されます(各ショットのクロップ、キャプション、全画面フレーミング;カット時にカメラが切り替わり、フレームはそのまま)。プレビュー(§ 5)で確認してください。このスタイルでは、ソースカットはスピーカーのフレーム内、画像の小さな部分で発生します:verify.mjs はそれを「全フレームプレートの下」と報告する場合があります(2番目のテイク)。フレーム自体の差分で確認し、目視では行わないでください。

3. トランスクリプトを読み、ストーリーボードを書く

これは判断のステップであり、作業の全てです。トランスクリプトを最初から最後まで読み、ストーリーボードをコードの前にリストとして書きます:シーン、および各シーンで何がどの単語に現れるか。

  • シーンはカメラ移動で接続されます。 シーンは1つのアイデア(約束、製品、プロセス、ステップ、リスト、比較)です:4〜8秒、その後カメラは次のシーンに移動します。デフォルトの移動はウィップ(右へのパン:古いシーンがぼやけて左に去り、光の筋が交差し、新しいシーンが到着);ライズ(次のアイデアがより深く掘り下げる場合:古いシーンが上に去る);プッシュ(古いシーンを通り抜けて新しいシーンがそれに答える場合:「なぜ」、啓示);カットは息継ぎの後ろでのみ使用します。可能な限り、同じ移動を連続して使用しないでください。

  • シーンは構成されて到着します。 シーンの時間に配置されたものは、カメラと共に移動します(移動が終了した時点で既にそこにあります:リファレンスでは、移動後に空のステージが表示されることはありません);後で到着するものは、その単語で入ってきます。シーンの内容が次々に名前付けられる場合、すべてをシーンの時間に、暗闇または焦点外れ(dim: 0.6、blur: 10)で配置し、それぞれの単語で照らします(.blurTo(on(i), 0).lit(on(i)) とそのサウンド):最初のフレームからステージは満たされ、すべての単語で動き続けます(2番目のテイクのペルソナとチャンネル、2026-10-05)。

  • 1〜2秒ごとに何か新しいもの。 物、数字、ステップ、主張に名前を付ける各フレーズは、その単語にフィギュアまたは移動を取得します:フィギュアの登場、ラベルの表示、何かの周りに描かれるマーク、照らされるもの、移動するシーン。2秒以上ステージに新しいものがないと退屈とみなされます:これは最初の編集での判定でした(2026-10-05)。

  • タイトル はセクションを2行の短い行で命名し、キーワードはセリフ体(*Killer* Text Hooks)で、カウントや主張のある行に赤いボックスが付きます(3 Winning Types Of)。セクションと共に変化し、古いタイトルは新しい単語が浮かび上がる前に立ち上がって消えます。

  • 何にどのフィギュアを使うか:

    言われている内容フィギュア
    N個のもの、ステップ、ルールのリストS.list:左から飛び込むバー、ラベルはそれぞれが言われるまでぼやけている(reveal)、説明されているものが照らされる(focus)、その判定が最後にポップイン(glyph: "check"、"cross"…);header はバーをセクションのヘッダーに変える
    名前、用語、定義S.pill(中の絵文字:glyph)、それが指すものからの S.arrow、物の周りの S.ping(ring: true)、それを強調する単語に描かれる S.mark(円、フレーム、下線)
    部品で構成されるもの、原因と結果、チェーンS.tree(子要素が落ちてきて、それぞれがスパークで配線される)、任意の2つの間の S.wires
    組み合わせ、比較S.equation(+、=)、VS 記号と S.shake およびグリッチ
    製品、ツール、プラットフォームユーザーのロゴ(S.icon、そのグロー、ring で電話を鳴らす)、S.card または S.phone 内のスクリーンショット、使用時にタイプされる S.prompt
    例、動画、シリーズユーザーの画像の S.cards、またはテイク自体のフレーム(stills.mjs)と player カード
    検索、多くのソース、群衆S.cards のグリッドと glyph、次々に照らされる(スキャン)
    数字それに達する S.count、または色付きの単語({g:22 Days} 緑、{r:A Few Weeks} 赤)
    良い/悪い、はい/いいえS.glyph(緑のタイルに check、赤のタイルに cross)、バーの判定
    行動喚起タイトル(Comment "X"、To Get The *Skill*)、送信するものに対する S.file
  • 息継ぎ(FULL):スピーカーを全画面表示にするハードカット(入り口でカメラフラッシュ、出口でウィッシュ音)、キャプション以外は描画されません。告白、決めゼリフ、強い意見の場面で;2〜6秒;最初の15秒以内には使用しません。トーキングヘッドではないショット(Bロール、ワイドショット)はそのまま全画面表示:[from, to, { zoom: 1 }]。息継ぎ後のシーンは、その背後で開きます(S.scene(<breather end> - 0.45, "push"))、そのため息継ぎが終わったときに既にそこにあります。

  • 実際の名前と実際の数字のみ(brand-kit.md):ユーザーが提供しなかったスクリーンや数字が必要なフィギュアは、ユーザーの言葉とハウスの絵文字で描画されるか、カットされます。

  • キャプションは逐語的です:`fi

…(翻訳が長くなるため、原文の残りの部分も同様に日本語に翻訳されます)

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル