html-explainer-video

HTML解説動画

HTMLシーン · MCP経由のFilの動画エディター · Playwright · ffmpeg。 フレームワークを使わないシーンエンジンは scripts/explainer.js にあります。

解説動画とは、映像を合わせたナレーションです。このスキルでは、まずナレーションを書き、動画の秒数というひとつの数値から、すべての映像をHTMLで描画します。画面上の各要素は、それを表す言葉に合わせて表示されます。その表示タイミングが、その言葉のタイミングだからです（T.clock はナレーションで「clock」と話す時点です）。モーショングラフィックスのように見えますが、ウェブページなので、見た目や形、カメラは作り直すのではなく、設定で変更できます。

使い分け。 動画ファイルを使わず、ウェブページ上でライブアプリのウィンドウを見せる場合は html-demo を使います。既存の投稿、動画、ページを、その素材の見た目を生かした9:16のリールにする場合は html-reel を使います。ナレーションのない短い作品には website-to-motion-design を使います。何かを説明する、約1分の完成した解説動画を作る場合は、このスキルを使います。

出典。 2026年10月31日から11月1日にかけて、Fil向けに制作された1分間のオンボーディング動画7本から抽出しました。それぞれにフック、メリット、番号付き見出しによる簡単なチュートリアル、そして呼びかけがあり、シーンを2倍の解像度、60 fpsで描画し、Filの動画エディターで組み立てました。これらはひとつのダークな見た目、ひとつの形（4:3）、ひとつのカメラ位置に固定され、Fil独自のデモ用コンポーネントを使っていました。ここでは、この3つすべてを入力として扱い、Filのコンポーネントには依存しません。demo/ にある動画は、このスキル自体を使って制作した解説動画です。ひとつのスクリプトを、4種類の見た目と4種類の形で、カメラをオフまたはオンにして使い、シーンは一切変更していません。以下のルールは、こうした動画の制作を通じて得られたものです。

仕組み

すべてのフレームはひとつの数値から求める純粋関数であり、すべてのタイミングは言葉に対応します。 シーンは、動画の秒数を表す t からすべてを設定します。HTMLExplainer.times(WORDS) はナレーションの各単語に名前を付けます（T.clock、T.clockEnd、同じ単語をもう一度話す場合は T.look2）。レンダラーは各フレームで一度 window.__frame(t) を呼び出してスクリーンショットを撮ります。時計を読み取る処理はありません。

// film.js: a scene. No colour, no font, no pixel of layout from the shape.
const T = times(window.WORDS);
const step3 = {
  id: 'step3', from: T.three - 0.12, tone: 3,
  draw(t, $, f) {
    show($('.x-head'), t, T.three);            // when; the look says how
    show($('#code'), t, T.clock);              // lands on the word "clock"
    ring($('#last'), t, T.word);               // a thin line, on "word"
    $('#code').textContent = `T.clock = ${T.clock.toFixed(2)}`;
  },
};
film({ words: window.WORDS, end: T.end + 2.4, scenes: [hook, step3, end] });

これをなくすと、すべてが崩れます。CSSタイムラインやタイマーで動くシーンは独自のペースで再生されるため、ナレーションを変えるたびにアニメーションを作り直す必要があり、カットのタイミングも毎回数フレームずつずれていきます。t から描画されるフレームは、実行のたびに同じ映像になるため、再レンダリングで変わるのは変更した部分だけです。

3つの入力

これらはどれもシーンに影響しません。利用者に確認するか、デフォルトを使ってください。

入力	設定方法	デフォルト	変更されるもの
見た目	<html data-look="…"> または ?look=、--x- 変数のブロック1つ（references/looks.md）	利用者のサイトから読み取ります。読み取れない場合は、スタイルを確認します	書体、色、角、縁、見出しの位置、ウィンドウの装飾、画像の処理、字幕、要素の動き方
形	shape: または ?shape=：4:3、16:9、1:1、9:16	公開先に合わせます。指定がなければ 4:3	ステージ（短辺は常に1080）と、すべての領域：--pic-x、--head-y…
カメラ	camera: または ?camera=on	オフ	オフ：スロットなし、固定コーナーなし、シーンがフレーム全体に広がります。オン：references/camera.md

show(el, t, at, leave) を使うと、シーンを変更せずに見た目に応じて動きを変えられます。シーンでタイミングを指定し、--x-motion（rise、fade、snap、wipe）で動き方を指定します。見た目の変数ブロックはどの要素にも設定できるため、動画内で3種類の見た目を並べて表示できます。

ワークフロー

作業を始める前に質問できるのは最大1つです。説明対象の情報が不足している場合に限ります。採用したデフォルト設定を伝えてください。

1. Explainer.md を作成する：内容、視聴者に持ち帰ってほしい唯一の考え、対象者、映像で述べる可能性のあるすべての事実とその出典、そして依頼内容を記載します。事実については、製品の公式サイト、ドキュメント、またはソースを確認してください。映像で述べてよいのは、このリストにある内容だけです。
2. 見た目を設定する（references/looks.md）：scripts/read-look.mjs <their site> --name brand で見た目を測定し、brand.css と brand.md を生成します。または、スタイル名を指定してもらい、そのブロックを作成します。実際のページと目視で比較してください。実際のロゴと画像を集め、表示するサイズにしておきます。
3. 台本を書く（references/format.md）：つかみ、メリット、簡単なチュートリアル、試してみる流れにします。1秒あたり約2.6語、つまり1分あたり140〜155語が目安です。耳で聞いてわかる文章にしてください。各セリフの下に、映像の動きと、どの単語に合わせるかを記載します。
4. 無料の時計で組み立てる。 scripts/words.py --draft script.txt --out words は、文字と句読点から台本の長さを計算します。無料で使えます。シーンは名前でタイミングが設定されるため、実際の音声に差し替えてもシーンは変わりません。
5. シーンを作成する：scripts/explainer.js と explainer.css を使い、各シーンを1つの <section class="x-scene"> にして、長さは約4〜8秒にします。最初のフレームがカバーです。変数と領域だけを使い、特定の見た目や形に固有の色やサイズを固定しないでください。作業しながら静止画を確認します：scripts/render.mjs film.html --stills 0,3,8,16 --out stills。少なくとも2種類の見た目で、3回以上修正してください。1種類の見た目でしか機能しないシーンは未完成です。
6. 確認する。 レンダリングするすべての見た目、形状、カメラ設定で scripts/check-film.mjs film.html を実行します。拡大された画像、柔らかい3D、同時に表示される2つの見出し、画面の端やカメラの下にある単語、実行ごとに異なるフレームを確認してください。
7. 料金を表示してから、音声を作成する。 Fil では、max_credits: 0 を設定した eleven-v4 のオーディオノードで料金を確認できます。本人の了承を得てから実行します。look: { max_words: 1 } を設定した字幕で単語ごとのタイミングを取得できます（1分あたり約⚡1）。保存した captions: "list" を指定する get_video は、scripts/words.py --voice voice.mp3 に渡します。先に進む前に、台本と音声の単語を照合してください。特に名前と数字を確認します。
8. 音声を配置する。 window.SFX に効果音の一覧があり、scripts/sfx.mjs film.html でそれぞれのテイク、同期ポイント、音量を確認できます（references/sound.md）。
9. プレビューする。 scripts/preview.mjs film.html --voice voice.mp3 --music bed.mp3 --sfx sfx.json --out preview.mp4：字幕と音声を含む映像全体を1倍速、30 fps、−14 LUFSで出力し、コンタクトシートも作成します。ここで評価してください。変更には1分かかります。
10. レンダリングする。 scripts/render.mjs film.html --scene all --fps 60 --scale 2 --out final でシーンごとに1つの MP4 を出力します。優先度を下げてバックグラウンドで実行してください。シーンごとに数分かかります。
11. MCP 経由で Fil に組み立てる（references/fil-editor.md）：シーンを順番に並べ、音声、見た目に合わせた字幕、音楽、効果音、チャプターを追加します。
12. エクスポートして確認する：タイムラインではなくファイルを確認します。その後、ブラインド評価者に採点してもらい、両者が指摘した箇所を修正します（references/checks.md）。

カメラを使う場合、手順7と11が変わり、撮影者は最後に録画します：references/camera.md。

ルールと、それぞれが防ぐ失敗

• すべての主張の根拠は Explainer.md です。 ソース映像にあるヘルパーは、「ボタン1つ」（実際は3回押す）、「1クリック」（実際は2回）、「自分のアドレス」（無料プランではランダムなものです）、「フレームを横に広げる」（形状チップ）と説明していました。どれももっともらしく聞こえましたが、すべて誤りでした。画面上とナレーション内の主張をすべて製品と照らし合わせ、取り繕わずに、何と矛盾しているのかを報告してください。
• 最初のフレームがカバーです。 グリッド、フィード、Fil の編集ノードは、どれも映像の最初のフレームを表示します。t = 0 の時点で、フックの見出しと最も効果的な画像はすでに表示されており、アニメーションでの登場はありません。空のフレームから始まるフックは、何もないところから始まります。
• フックは、画面収録では見せられないものにしてください。 まず結果を見せてから、その方法を示します。ソース映像では、画面いっぱいに広がる見せ場でした。ここでは、フレームそのものをレイヤーごとに分解して見せます。
• ほぼすべてのフレーズで、その言葉に合わせて何かが変化します。 「魅力的」という言葉が意味するのはそういうことでした。カメラワークは落ち着かせ、動きはイージングし、何かを追いかけるような動きは避けます。結果は、読み取れるだけの時間、表示しておきます。
• タイミングは必ず言葉から決め、名前で指定します。 どの映像でも、初稿のタイミングを読む速さから決めると、すべてのビートが早すぎたり遅すぎたりします。T.clock を使い、35.63 は使いません。
• シーンで色やフォントを指定しないでください。 固定値はルックに設定します。特定のルックだけが必要とする値があるなら、変数を追加します。そうしないと、2つ目のルックでハードコードしたものがすべて明らかになります。
• 2つのルックでは、色だけでなく構図も変えてください。 この映像のルックの初稿をブラインド評価した人たちは、レイアウトは同じでフォントだけが違う、ただのスキン変更だと判断しました。見出しの位置（--x-head-at）を動かし、ウィンドウを描き直し、画像の扱いも変えます。そうすると、評価も分かれました。
• ワイヤーフレームは使わないでください。 「あなたのサイト」を表す灰色のバーは未完成の映像に見え、両方の評価者にもそう受け取られました。最初のフレームから実際のページを見せ、説明している箇所を囲みます。
• 最後まで動きを保ち、アドレスは大きく見せてください。 重要な瞬間に、名前を7秒間表示し、その下に目立たないアドレスを置いても、間がもたず退屈になります。名前の後に続く言葉に合わせて、要素を表示します。
• シーンは座標ではなく領域を基準にレイアウトします。 --pic-x、--pic-w、コンテナーユニットを使えば、9:16でもカメラの角でもそのまま対応できます。ある形状で測った位置は、ほかの3つの形状では合いません。
• 3Dの下で1より大きく拡大しないでください。 Chromiumは、perspective、preserve-3d、3Dマトリックスの内側にある要素をレイアウトサイズでラスタライズし、ビットマップを引き伸ばします。そのため、カードに scale(1.7) を適用すると、ファイルがどれほど大きくても、デバイスのスケールがいくつでも、ぼやけます。表示するサイズでレイアウトし、Z方向に奥へ移動させてください。この問題は、フックで最初に目立ちます。
• 画像を実際のピクセル数以上に拡大しないでください。 2倍のレンダリングで画像を表示する場合、値は最大でも2.0です。小さく表示するか、実際のピクセル数が大きいファイルを使ってください。画像にCSSのシャープ化、アップスケール、ぼかしを適用してはいけません。
• ハイライトは、印を付ける対象にぴったり合わせます。 ring() は、outline と outline-offset で設定する1.5 pxの線を使い、周囲に4〜6 pxの均等な余白を確保します。帯状にしてはいけません。また、テキストを線に触れさせてはいけません。単語の背後に塗りを置く場合は、左右に約0.14 emの余白を付けて、単語に沿わせます。ウィンドウで切り取られないようにしてください。
• ロゴと画像は実物だけを使ってください。 本人のファイルからコピーします。企業のロゴを描いたり、似せて作ったりしてはいけません。また、loremや代用品も使わないでください。画像がない場合は、ウィンドウ、チャート、文字などをHTMLで描きます。
• 描画するUIには実際の文言を使ってください。 すべてのラベル、メニュー項目、数値を製品からコピーします。「処理中…」のような架空の言葉が1つでもあると、それを使った人は残りの内容も信じなくなります。映像用に書き加える必要があったものは、報告で明記してください。
• ポインターは実際の対象に合わせてください。 pointer() はセレクターを指定し、描画後の位置を測定します。クリックの0.3〜0.6秒前に到着させ、押す時間は0.15秒にします。ハードコードした位置は、次のルックでは外れます。
• 見出しを重ねないでください。 ある見出しの退出時刻に0.22秒を加えた時刻は、次の見出しの開始時刻と同じか、それより前にしてください。
• 効果音はおよそ1秒に1つです。 ボタンを押す瞬間、目に見える要素の登場、フックのビートに合わせ、計測した同期ポイントで鳴らします。150 ms以内に2つを超えて鳴らさず、ナレーション中には静かな区間を設けます。数は絞り、質を高めてください。
• キャプションを編集するときは、単語数を変えないでください。 text を長くすると、次のキャプションのIDを取り込んで結合されます。まず captions: "list" を指定して get_video を読みます。結合される場合は、テキスト全体を設定して split_after を指定します。
• 大きな文字の下にあるキャプションを削除してはいけません。 オフセット400のキャプション範囲で非表示にします。削除すると、テレプロンプターが読む単語が消え、残りの番号も振り直されます。
• 依頼がない限り、人物を生成してはいけません。 カメラの代用品は、描画したシルエットにします。顔が必要な映像では、カメラ用の枠を用意し、本人が撮影します。
• 価格と承認を確認せずに費用を使ってはいけません。 毎回まず max_credits: 0 を設定します。音声は1分あたり約⚡7です。このスキルのその他のすべては無料で、レンダリング全体も編集全体も費用はかかりません。
• 何も投稿しないでください。 映像はエクスポートして確認したら完成です。公開するかどうかは本人が決めます。

元になった動画とこの動画の数値

項目	値
長さ	57〜60秒、1秒あたり約2.6語、146〜155語
ステージ	短辺1080：1440 × 1080、1920 × 1080、1080 × 1080、1080 × 1920。2×でレンダリング
フレーム	編集時は60 fps、下書きは1×で30 fps
パート	フック3〜6秒、メリット12〜20秒、クイックチュートリアル22〜30秒、試してみる6〜14秒
シーン	10〜12、各シーン約4〜8秒
終了	最後の語の終わりから約2.4秒後
見出し	4:3では62 px、16:9では76 px、9:16では78 px。2トーン：導入と主張
サウンド	1秒あたり約1つ。この動画では59秒間に64個、そのうち18個はタイピング中のキー音
音声	ElevenLabs v4のストック音声で146語の場合、⚡7
キャプション	1分あたり⚡1
コーナーカメラ	374 × 210、右端と下端から40 px（4:3、16:9）
ラウドネス	−14 LUFS

確認

• 最初のフレームはカバーです。見出しと最適な画像がすでに描画されています。
• レンダリングしたすべてのルック、形状、カメラ設定で、check-film.mjs の問題がすべて解消されています。
• 画面上と音声内のすべての主張がExplainer.mdのリストにあり、製品と照合されています。
• 2種類以上のルックでシーンを静止画として確認し、どちらのルックでも問題がありません。
• 音声の語句はスクリプトと一致しています。特に名前と数値はすべて一致しています。
• 書き出し動画では、動きが対応する語句に合っています（0.25×で数か所をスクラブして確認してください）。
• すべてのハイライトとフックをフルサイズで切り出して確認し、ぼやけや切れがありません。
• 書き出し動画から0.5秒ごとにフレームを確認し、テキストが切れておらず、大きな文字の下にキャプションがありません。
• 統合ラウドネスは−14 LUFS ± 1、トゥルーピークは−1 dBTP未満です。
• チャプターに各パートの名前が付いています。

ファイル

• scripts/explainer.js、scripts/explainer.css：エンジンと各パート。film()、times()、形状とカメラによる領域、show()、ring()、view()、pointer()、キャプション、プレビュー用の代替表示、コントロールを含みます。
• scripts/render.mjs：任意のルック、形状、カメラ設定で、シーンからMP4、動画全体、静止画、シートを作成します。
• scripts/check-film.mjs：拡大画像、柔らかい3D、2つの見出し、端、カメラのコーナー、再現可能なフレームを確認します。
• scripts/read-look.mjs：サイトのルックを測定し、変数のブロックと残りの作業を記したメモとして出力します。
• scripts/words.py：時計です。Filのキャプションリスト、またはスクリプトから自由形式の下書きを作成します。
• scripts/sfx.mjs：配置済みのキュー、音量調整済みのテイク、およびFilで追加するコマンドです。
• scripts/preview.mjs：キャプション、音声、音楽、サウンドを含む動画全体をローカルで作成します。
• references/format.md：4つのパート、スクリプト、シーンのパターン、製品ではなくアイデアを説明する方法をまとめています。
• references/looks.md：すべての変数、ルックの読み取り方や名前の付け方、ルックの作例をまとめています。
• references/camera.md：カメラをオンにする方法。スロット、キーフレームによるレイアウト、タイトル、テレプロンプター、テイクをまとめています。
• references/fil-editor.md：MCP経由でFilの動画エディター上で組み立てるためのすべてのコマンドをまとめています。
• references/sound.md：テイク、同期ポイントと音量、音楽、試聴についてまとめています。
• references/checks.md：確認項目、チェッカーでは検出できないこと、ブラインド評価者についてまとめています。
• sounds/：earshotのローンチキットからの24個の効果音と、測定済みの同期ポイント（MITライセンス）。
• demo/：このスキル自体のライブ動画。シーン、4つのルック、セリフと音声を含み、ルック、形状、カメラを切り替えられます。

Filなしの場合。 編集にはFilを使いますが、動画の作成にFilは必須ではありません。scripts/preview.mjs を使えば、任意の音声ファイルとその語句のタイミング（words.py --json）から、手元のマシンで完成したMP4を作成できます。