explainer-short は何をしますか？
短い縦型解説動画を作成します。下半分に話し手、上半分にモーショングラフィックス、中央に大きなキャプションチップを配置します。1クリップにつき1つのアイデア。テーマトークンで色、書体、角丸、モーションを制御するため、同じスクリプトでも温かみのある、モノクロ、ハイコントラスト、遊び心のあるスタイルに変更できます。
使用タイミング
- 8～30秒の縦型教材または製品解説動画
- 再利用可能なHTML/CanvasパイプラインでMP4を書き出す場合
- シーンコードを書き換えずにビジュアルテーマを切り替える場合
レイアウト
+---------------------------+
| モーション/カード (1080) |
| |
|---------------------------| <- キャプションチップ（継ぎ目）
| 話し手クロップ (960) |
| |
+---------------------------+
1080 x 1920
テーマシステム
テーマは template/themes/*.json（デモ用に sample/themes/ にも）にあります。アクティブなテーマはプロジェクトフォルダ内の theme.json です。
bash template/scripts/use-theme.sh warm # または mono | high-contrast | playful
# コピーしたプロジェクトから:
bash scripts/use-theme.sh mono
トークン（loadTheme 実行後のCSS変数）:
| トークン | 役割 |
|---|---|
--ink --mute | テキスト |
--bg --bg-hi --bg-lo | 背景ウォッシュ |
--surface --surface-2 | カード |
--accent --accent-2 --accent-3 | 強調 |
--chip-bg --chip-fg | キャプションチップ |
--radius-card --radius-chip --chip-size | 形状 |
--headline-weight | タイトルの太さ |
--font-sans --font-mono | 書体（OFLライセンスwoff2、fonts/に配置） |
プリセット: warm（デフォルト）、mono、high-contrast、playful。
JSONファイルを編集し、use-theme.sh を再実行し、ブラウザをリロードします。テーマ自体にビルド手順は不要です。
フォントの差し替え
- オープンライセンスのwoff2を
fonts/に配置し、ライセンスファイルも同梱します。 - テーマJSONで
fonts.sans/fonts.sans_file（およびmono）を設定します。 - フォントファミリー名が変わる場合は、
index.htmlの@font-faceで新しいファイルを参照します。 - 中間フレームの静止画で確認します。
バンドルされているデフォルト: Inter + JetBrains Mono（SIL OFL）。ライセンステキストは fonts/ に同梱されています。
クイックスタート（テーマデモ、話し手動画は不要）
npm install
node scripts/render_sample.mjs warm
node scripts/render_sample.mjs mono
# 出力: sample/out/<preset>/<preset>.mp4 + フレーム静止画
必要条件: Node 18+、システムにインストールされたChromeまたはChromium、ffmpeg。
本格的なプロジェクトパイプライン（自己完結型）
template/を新しいプロジェクトフォルダにコピーする（またはsample/内で作業する）。main.jsでシーンを記述し、window.render(t)を呼び出し、テーマのCSS変数を使用する。- オプションの話し手動画: テイクを配置し、
src/edit.jsonを記入し、python3 src/edit.py（numpy + soundfileが必要）を実行し、次にpython3 src/captions.pyを実行する。 - スキルルートで（
npm install後）:
PRESET=warm bash template/build.sh
# または、コピーしたプロジェクトの場合:
SKILL_ROOT=/path/to/explainer-short PRESET=mono bash build.sh
# またはレンダラーを直接呼び出す:
node scripts/render.mjs --dir path/to/project --preset warm --out path/to/project/out/video.mp4
out/voice.wavが存在する場合、python3 mix.pyで約 -14 LUFS / -1 dBTP にラウドネス正規化し、build.shが多重化する。
template/scripts/render.mjs はテンプレートと一緒にコピーされるため、プロジェクトはローカルコピーを保持できます。
デザインルール
- 1つのアイデア。 1つのオブジェクト、1つの約束。エンディングまでに回収する。
- 腕の長さで読めること。 大きな文字、高いコントラスト、画面に表示する単語は少なく。
- キャプションチップが声を表現する。 キューは短く。最後の単語で一瞬フリーズする。
- テーマを使い、ハードコードしない。 色、角丸、チップサイズはトークンから取得する。
- 味付けはニュートラルがデフォルト。 Warmがデフォルト。選択するのは作成者。
出荷前のレビュー
各軸を0-3点で評価。平均が2.3以上の場合のみ出荷する。独立したレビュアーがメインファイルを評価する。
| 軸 | 確認項目 |
|---|---|
| 凍結 | 最後のキャプションが約0.3～0.5秒間保持されている。単語の途中でカットされていない。 |
| ラウドネス | 約 -14 LUFS 統合（ffmpeg loudnormで測定） |
| 真のピーク | <= -1 dBTP |
| カバー | エンドフレームまたはサムネイルオフセットがクリアなタイトルカードになっている。 |
| テーマ | トークンが適用されている。ハードコードされたブランドカラーが残っていない。 |
| 明瞭性 | 初見の人が音声なしで要点を理解できる。 |
完全なルーブリック: references/review-rubric.md。セーフゾーン: references/cover.md。
ファイル
| パス | 役割 |
|---|---|
package.json | playwright-core を宣言 |
template/ | スタータープロジェクト（HTML、テーマ、フォント、build.sh） |
template/themes/ | プリセットJSON |
template/theme.js | loadTheme() -> :root にCSS変数を設定 |
sample/ | 自己完結型の12秒テーマデモ |
scripts/render.mjs | ヘッドレスフレームレンダリング + ffmpeg多重化 |
scripts/render_sample.mjs | サンプルプリセット用の便利ラッパー |
references/ | 構造、テーマ、レビュールーブリック、カバー、仕上げ |
docs/ | 検証済み実行からのプレビュー静止画 |
エージェントチェックリスト
- スキルルートで
npm installを実行済み - テーマプリセットを選択済み（またはwarmデフォルト）
-
theme.jsonがプリセットと一致している - シーンがCSS変数を使用し、ハードコードされたブランドカラーを使用していない
- サンプルまたはフルビルドでMP4が生成される
- ffprobeで1080x1920および期待される長さを確認できる
- 中間フレームの静止画がプリセットに対してブランドに適合している
- オーディオがある場合、ラウドネスが約-14 LUFS、真のピークが<= -1 dBTPである
- レビュールーブリックの平均が2.3以上
- プロジェクト内に個人やサードパーティのブランドが残っていない