explainer-high-energy

ハイエナジー解説

ショーリールのように勢いよく見せる、12〜20秒の作品です。0.5秒ごとにビートに合わせて何かが現れますが、ランダムにカットをつないだようには感じません。すべてのトランジションで、形が視線を導くからです。火花が線になり、その線が画面を覆って次の背景へ変わり、終止符が切り離されて、次のシーンの軸となるボールになります。

時間の値から任意のフレームを描画するHTMLページを1つ作成し、モーションブラーと合成したサウンドトラックを加えてMP4にレンダリングします。

ステップ1：概要を確認する（1回のメッセージで質問して、あとは進める）

すべてを1回のメッセージで質問し、その後は自分で進めます。必須なのは製品情報だけです。空欄があれば自分で決め、何を選んだかを伝えてください。

1. 製品：名前と、どんな製品かを数文で説明してください。ウェブサイトのURLがあれば、なおよいです。
2. 視聴者に覚えてもらいたいこと：ひとつだけ（例：「アイデアを入力すると、すぐにアプリが完成する」）。
3. ブランド：色、フォント、ロゴファイル、または「ウェブサイトを使う」。指定がなければ、下記のデフォルトパレットを使用します。
4. フォーマット：16:9（1920×1080）または9:16（1080×1920）。デフォルトは16:9です。
5. 長さ：このスタイルのデフォルトは下記のとおりです。
6. 音楽：独自のトラック（ファイルパス）を使うか、こちらで合成します。デフォルトでは合成します。
7. 演出の方向性（任意）：希望するシーン、タグライン、行動喚起、避けたい内容など。

URLが提供された場合は、制作を始める前に読み込み（ウェブ取得）、製品の実際の表現、機能、色、フォント名を確認してください。UIラベルやタグラインには、実際に使われている表現を使用してください。

事実を決して捏造しないでください。 顧客数、収益、評価、推薦文、引用を作り出してはいけません。数字を使えるのは、ユーザーまたはウェブサイトが明示している場合だけです。それ以外の場合は、相対的なバー、進捗表示、プレースホルダーのスケルトン行を使用してください。UI内の例（プロンプト、ファイル名、プロジェクト名、レシートの価格など）は、もっともらしい内容で構いません。一方、製品自体に関する主張（統計、ユーザー数、評価、「無料」などの特典）は避けてください。行動喚起には、ユーザーまたはウェブサイトが提示したURLや特典だけを使用してください。どちらもない場合は、最後に製品名とタグラインを表示してください。

ロゴ。 ロゴを使うのは、ユーザーがファイルを提供した場合、またはユーザー自身の製品で、ロゴを使うよう依頼された場合に限ります。それ以外の場合は、ブランドフォントで製品名をテキストとして表示してください。サードパーティのロゴ（連携先）は、提供された場合に限って使用してください。提供されていない場合は、名前を入れた無地の角丸タイルを使います。

このスタイルのデフォルトの長さ：15秒（128 BPM、8小節）。範囲は12〜20秒です。

ステップ2：シーンを計画してから制作する

構成（1.5〜3秒のシーンを6〜8個、120〜140 BPMのグリッドに合わせる）

以下のシーンタイプから選び、製品に合わせて構成します。まずビートシートを作成してください（シーン、ビートグリッド上の開始時刻、引き継ぐ要素、次に引き継ぐ要素、サウンド）。

1. スパークオープン（暗転）。ほぼ黒のキャンバスに、かすかなグリッドを表示します。小さなアクセントマークが現れて脈打ち、画面を横切る細い水平線へと伸びます。小さなモノスペースのラベル（product / launch — 2026）を添え、線を一度揺らしてから、縦方向に広げて画面全体をアクセントカラーで塗りつぶします。その塗りつぶしが次の背景になります。
2. ブランドスラム。太いグロテスク体の製品名をすべて大文字で大きく表示し、連続する1/16拍ごとにマスクで文字を見せます。上には小さなモノスペースのキッカー（INTRODUCING — 2026）、下にはイタリックのセリフ体で製品を表す言葉を2〜4語添えます。ウェイトは細字からブラックへ変化させてもかまいません。句点または文字のドットが離れて大きくなり、次のシーンの始まりの形になります。
3. キネティックトリプレット。価値提案を短い単語またはフレーズ3つで表現し、各項目を2拍ずつ表示します（手書き文字の場合は読み取れるように3拍使います）。それぞれ異なる処理と背景を使い、拍に合わせて明確に切り替えます（このシーン内では切り替え自体がリズムになるため、カット数には含めません）。クリーム色に暗色、黒にアクセントカラーを重ねて画面いっぱいに単語をアウトラインパターンで繰り返す、ビューファインダーのコーナーブラケット内に電気的なブルーを背景として白文字を置き、小さく1920 × 1080のラベルを添える、最後に手書き文字の単語を描きながら表示する、といった方法があります。各単語は素早いぼかしやスライドで登場し、少し行き過ぎてから止まります。
4. シグネチャービジュアル。製品を象徴する「どうやって作ったの？」と思わせる瞬間を1つ用意します。たとえば、中心から波紋が広がる3Dの立方体フィールド（独自の透視投影を使ってキャンバス上に描画し、高さに応じてパレットの色を付けます）、リング状に凝縮して外側へ弾けるジェネレーティブなパーティクルフロー、形を変える液体状のブロブなどです。製品のコンセプトに合うものを選びます（ビルディングブロックなら立方体、データやAIならパーティクル、柔軟性なら液体）。再生中、カメラをゆっくり傾けるか、周回させます。
5. 製品のマイクロモーメント。製品の実際の操作を1つ、少し3Dに傾けたフローティングUIカードとして表示し、その後ろに薄く表示したカードを2枚重ねます。カーソルがトグルを素早く切り替え、メインボタンを押し、アクセントカラーの進捗バーがパーセンテージとともに伸びていきます。ボタンがDone ✓に変わり、右上にトーストがスライドインします。製品で実際に使われているラベルを使用してください。
6. 実績の証明（実際の数値がある場合のみ）。大きな数値カウントアップ（数字が回転しながらぼやける+312%のような表示）、ドーナツリング、段階的に伸びる棒グラフとアクセントカラーの棒、棒の上に描かれる折れ線とツールチップを表示します。実際の数値がない場合は、このシーンを省略するか、製品の実際の機能を一覧にして勢いよく表示します。
7. リキッド／モーフブリッジ。前のシーンの形が点に縮み、その点が暗い背景にリング状のパルスとして現れ、それがロゴのドットになります。
8. エンドカード（2秒間表示）。ロゴまたは名前にアクセントドットを添え、イタリックのセリフ体でタグラインを表示します。文字間を広く取ったモノスペースの1行を、1文字ずつタイプ表示します（実際のURLまたは指定されたコールトゥアクションがあればそれを使用します。例：PRODUCT.COM。なければ、概要から短い文を選びます）。細い罫線を添えます。

すべての製品にすべてのシーンが必要なわけではありません。弱いシーンを8つ入れるより、力強いシーンを6つ入れるほうが効果的です。1シーンにつきアイデアは1つにしてください。

高級感を生み出すルール

• トランジションはカットではなく、オブジェクトです。 各シーンは、形状を介して次のシーンへ受け渡します（画面を覆うフラッド、伸びるバーによるワイプ、次の背景へと大きくなるドット、カメラを通り抜けるようにズームする単語など）。シーン間のハードカットは、ダウンビートに合わせる場合のみ許可し、最大2回までです。
• すべてをグリッドに合わせます。 大きな変化はビートに、タイポグラフィは1/8または1/16音符に合わせます。インパクトには少しオーバーシュートさせ（z ≈ 0.6–0.7）、その後落ち着かせます。
• すべてのシーンにHUDフレームを表示します： 細いコーナーブラケット、右上のSCENE 02 / 07、左下の小さなモノスペースのカテゴリーラベル（KINETIC TYPE、PRODUCT、DATA）、そして赤いドット付きのタイムコードを右下に配置します。小さめ（1080pで12–14 px）、不透明度は約50%にします。カメラのビューファインダーのように見せます。
• テクスチャ： すべての単色背景に柔らかなラジアルビネットを加え、ごく控えめなフィルムグレインを適用します（シード付きのグレインタイルをいくつか事前生成しておき、読み込み時に切り替えます）。モーションブラーは実際に加えます。
• 書体： 強い文字のスラムには太めのグロテスク体（例：Inter Tight 900またはArchivo Black）、人間味のある一文にはイタリックのセリフ体（Instrument Serif italic）、HUDとキャプションにはモノスペース体（JetBrains MonoまたはGeist Mono）を使います。ブランド独自のフォントがある場合はブランド名に使い、HUDにはモノスペース体を使います。
• デフォルトの配色： インク#0B0B10、アクセント#FF4F1A、クリーム#EDEBE4、エレクトリックブルー#2F47FF、白。アクセントはブランドのメインカラーに、ブルーはブランドの2番目のカラーに置き換えます。1色のみのブランドの場合、2番目の色にはその色の深い色合いを使います。
• 禁止事項： ストックテンプレート風の見た目、あらゆる要素へのグロー、絵文字、1つのシーンで3色を超える色の使用（黒と白は除く）、ひと目で読めないほど小さなテキスト、動きのないシーン。

サウンド

128 BPM（またはユーザー指定のトラック）にします。パンチのある構成にします。毎ビートにキック、2拍目と4拍目にクラップ、シーンのルート音に合わせたサブベース、ブランドのスラムとエンドカードに向けたフィルター付きライザー、各フラッドにインパクト音（低いブーム＋ノイズバースト）、入力される各単語に短い音程付きのブリップ、トランジションのたびにウーシュ音（バンドパス処理したノイズスイープ）、エンドカードに柔らかな余韻を加えます。ヒット音より音楽を小さくミックスします。

ページの構築方法

自己完結型の HTML ファイルを 1 つ作成します（CSS と JS はインライン、画像はユーザーから提供されたもののみ使用）。DOM と CSS の変換、SVG、または全画面キャンバスなど、目的に合った方法で描画します。

ページの仕様

• window.VIDEO = {w, h, duration} と window.seek(t) を用意します。seek(t) は時間の純粋関数で、時刻 t（秒）におけるすべての要素を設定します。CSS トランジションやアニメーション、setTimeout、前のフレームから引き継ぐ状態は使いません。どのフレームも、どの順番でも単独で正しく描画できる必要があります。seek 内でのレイアウト計測（例：offsetLeft、measureText）は問題ありません。結果が決定論的であることが条件です。
• 乱数（粒子、ノイズ、音声内のノイズなど）は、Math.random ではなく、シード付きジェネレーターから生成します。
• 履歴が必要なもの（動く物体に遅れて追従するカメラ、シミュレーションなど）は、読み込み時に一度だけ事前計算します。0 から duration まで 1/240 秒間隔で進め、値を保存します。seek では補間しながら値を読み取ります。ループの場合は、ループ開始時の状態からシミュレーションを開始します（スタイルごとの継ぎ目のルールを参照）。
• ループ： seek(t) では t % duration を使用します。継ぎ目をまたぐエフェクト（着地時のスクワッシュ、サウンドの余韻など）は、両端で描画またはミックスします。
• URL に ?render がある場合：コントロールやプレビューの拡大縮小は行わず、ステージを左上に w × h のサイズで表示します。ない場合：ウィンドウに収まるよう CSS でステージを拡大縮小し、プレビューコントロールを表示します。
• フォントは埋め込みます。 woff2 ファイル（Google Fonts またはブランドのフォント）をダウンロードし、base64 の @font-face としてインライン化します。これにより、レンダリング時に気づかないままフォールバックすることを防げます。ウェイトを変化させる場合は、[email protected] のような範囲を持つ可変フォントを使います。
• レイヤー： シーンのレイヤーは背景を透明にし、背後にある 1 つのステージ背景でベースカラーを指定します。これにより、後のレイヤーが誤って前のレイヤーを隠すのを防げます。絶対配置のテキストには white-space: nowrap を指定します。
• 速度： 大きな CSS の filter: blur() や、大きくぼかしたグラデーションはスクリーンショットの生成が非常に遅くなります。グラデーションやグローは読み込み時に一度だけキャンバス（または画像）に描画し、それを動かします。

ヘルパー：以下を貼り付けて、その上にすべてを構築します

// damped spring step response 0 -> 1. w = speed (8 slow, 14 normal, 22 snappy), z = damping (1 = no overshoot)
function spring(t, w = 14, z = 0.82) {
  if (t <= 0) return 0;
  if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
  const wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// a value that changes target many times, springing to each: track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// precise eased keyframes (best for camera moves): kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);   // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a));      // 0..1 progress of t through [a, b]
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);

• タイピング：表示する文字列は full.slice(0, n(t)) で、キャレットは t に基づいて点滅させます。カウントアップ：lerp(a, b, ease(seg(t, …))) で書式を整えます。
• カメラは、kf または track で制御する transform: translate() scale() rotate() を持つラッパー要素です。

サウンド

• window.buildAudio(ctx) は、渡された AudioContext または OfflineAudioContext を使い、時刻 0 からサウンドトラック全体（音楽 + 効果音）をスケジュールします。映像と同じタイムラインの値を使います。オシレーター、フィルタリングしたノイズ（シード付きバッファから生成）、エンベロープで音を合成します。ユーザーから音楽ファイルが提供された場合は、fetch と decodeAudioData で読み込み、テンポを計測してビートグリッドを設定し、その上に効果音のみを追加します。
• プレビュー再生： 最初の再生時にサウンドトラックを一度バッファにレンダリングし、その後はシークした任意の位置から再生できるようにします。クロックで seek を制御します。

let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
  ac ??= new AudioContext();
  if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
  src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
  src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })();   // the scrubber sets offset (pause, set, play)

• スクリプトの先頭にコメントとしてビートシートを記述します。各行に、時刻、発生する内容、使用するサウンドを記載します。

ステップ 3：確認、レンダリング、納品

作業フォルダーで一度だけセットアップします：npm i playwright を実行し、Chromium がまだインストールされていない場合は npx playwright install chromium を実行します。ffmpeg が PATH にある必要があります。このファイルの末尾にあるスクリプトを render.mjs として保存します。

1. 静止画。 node render.mjs demo.html check.png --stills 0.5,1.2,… を実行します。ビートシートの各行につき 1 つの時刻を指定します（シートは読みやすいサイズで、1 行に 3 つ並びます）。画像を確認し、切れている箇所、重なり、読みにくさ、ブランドイメージとの不一致、構図の悪さ、空白を修正します。もう一度確認します。
2. ドラフト。 node render.mjs demo.html draft.mp4 30 1 4 を実行します（高速：30 fps、モーションブラーなし、並列ワーカー 4 つ。最後の数値はマシンのコア数に設定します）。これはレビュー用コピーです。HTML とともにユーザーに送り、最終版の前に変更点を確認してもらいます。
3. 最終版。 node render.mjs demo.html demo.mp4 60 8 8 を実行します。モーションブラーにより、レンダリング時間はサブフレーム数に比例して増加します。60 秒の最終版はノートパソコンで 20～60 分かかることがあるため、開始前にその旨を伝えます。demo.mp4（音声は約 −16 LUFS に正規化）と demo_silent.mp4 が出力されます。
4. 納品するものは、HTML（ライブでスクラブできます）、MP4 ファイル、短いメモです。メモにはビートシート、プレースホルダーになっているもの、2 つ目のバージョンで変更する内容を記載します。別の方向性を 1 文で提案します。

// render.mjs: turn a seek(t) page into an MP4 with motion blur and its own audio.
//   node render.mjs page.html out.mp4 [fps=60] [subframes=4] [workers=4]
//   node render.mjs page.html sheet.png --stills 0.5,1.2,3   (full-size contact sheet for checking)
// Optional: window.buildAudio(ctx) schedules the soundtrack on any (Offline)AudioContext.
import { chromium } from 'playwright';
import { spawn } from 'node:child_process';
import { writeFileSync, mkdirSync, rmSync } from 'node:fs';
import path from 'node:path';
import { pathToFileURL } from 'node:url';

const [, , html, out, a3 = '60', a4 = '4', a5 = '4'] = process.argv;
if (!html || !out) { console.log('usage: node render.mjs page.html out.mp4 [fps] [subframes] [workers]'); process.exit(1); }
const run = (args) => new Promise((res, rej) => { const p = spawn('ffmpeg', args, { stdio: 'inherit' }); p.on('close', c => c ? rej(new Error('ffmpeg ' + c)) : res()); });
const url = pathToFileURL(path.resolve(html)).href + '?render';
const proxy = process.env.HTTPS_PROXY || process.env.https_proxy;
const browser = await chromium.launch({ args: ['--allow-file-access-from-files'], ...(proxy ? { proxy: { server: proxy } } : {}) });

// Read the size first, then open every page at exactly that size (pages that measure themselves on load stay correct).
const probe = await browser.newPage();
await probe.goto(url);
await probe.waitForFunction(() => window.VIDEO && typeof window.seek === 'function');
const V = await probe.evaluate(() => window.VIDEO);
await probe.close();

async function openPage() {
  const page = await browser.newPage({ viewport: { width: V.w, height: V.h }, deviceScaleFactor: 1 });
  await page.goto(url);
  await page.waitForFunction(() => window.VIDEO && typeof window.seek === 'function');
  // load every declared font, even ones only used by scenes hidden at t=0
  const bad = await page.evaluate(async () => {
    await Promise.all([...document.fonts].map(f => f.load().catch(() => {})));
    await document.fonts.ready;
    return [...document.fonts].filter(f => f.status !== 'loaded').map(f => f.family);
  });
  if (bad.length) console.warn('WARNING: fonts did not load (fallback in use):', [...new Set(bad)].join(', '), '- embed them as base64.');
  return page;
}
const shot = async (page, t) => { await page.evaluate(t => window.seek(t), t); return page.screenshot({ type: 'jpeg', quality: 95 }); };

if (a3 === '--stills') {
  const page = await openPage();
  const times = a4.split(',').map(Number), dir = out + '.frames';
  mkdirSync(dir, { recursive: true });
  for (let i = 0; i < times.length; i++) writeFileSync(`${dir}/${String(i).padStart(3, '0')}.jpg`, await shot(page, times[i]));
  await browser.close();
  const cols = Math.min(3, times.length), rows = Math.ceil(times.length / cols);
  await run(['-v', 'error', '-y', '-framerate', '1', '-i', `${dir}/%03d.jpg`, '-vf', `scale=${Math.min(960, V.w)}:-1,tile=${cols}x${rows}:padding=6:color=gray`, '-frames:v', '1', out]);
  rmSync(dir, { recursive: true });
  console.log('stills ->', out); process.exit(0);
}

const fps = +a3, sub = Math.max(1, +a4), workers = Math.max(1, +a5), N = Math.round(V.duration * fps);
const base = out.replace(/\.mp4$/, ''), silent = base + '_silent.mp4';
const vf = sub > 1 ? ['-vf', `tmix=frames=${sub},select='eq(mod(n\\,${sub})\\,${sub - 1})',setpts=N/(${fps}*TB)`] : [];
const t0 = Date.now(); let doneFrames = 0;
const per = Math.ceil(N / workers), segs = [];
await Promise.all(Array.from({ length: workers }, async (_, w) => {
  const a = w * per, b = Math.min(N, a + per); if (a >= b) return;
  const seg = `${base}_seg${w}.mp4`; segs[w] = seg;
  const page = await openPage();
  const ff = spawn('ffmpeg', ['-v', 'error', '-y', '-f', 'image2pipe', '-framerate', String(fps * sub), '-i', '-', ...vf,
    '-r', String(fps), '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-crf', '16', '-preset', 'medium', seg], { stdio: ['pipe', 'inherit', 'inherit'] });
  const closed = new Promise(r => ff.on('close', r));
  for (let f = a; f < b; f++) {
    for (let s = 0; s < sub; s++) {             // 180-degree shutter: sub-frames spread over half a frame
      const buf = await shot(page, (f + (sub > 1 ? (s / sub) * 0.5 : 0)) / fps);
      if (!ff.stdin.write(buf)) await new Promise(r => ff.stdin.once('drain', r));
    }
    if (++doneFrames % 30 === 0) process.stdout.write(`\r${doneFrames}/${N} frames  ${((Date.now() - t0) / 1000).toFixed(0)}s`);
  }
  ff.stdin.end(); await closed; await page.close();
}));
const list = base + '_segs.txt';
writeFileSync(list, segs.filter(Boolean).map(s => `file '${path.resolve(s)}'`).join('\n'));
await run(['-v', 'error', '-y', '-f', 'concat', '-safe', '0', '-i', list, '-c', 'copy', silent]);
segs.filter(Boolean).forEach(s => rmSync(s)); rmSync(list);
console.log(`\nvideo -> ${silent}  (${((Date.now() - t0) / 1000).toFixed(0)}s)`);

const page = await openPage();
const hasAudio = await page.evaluate(() => typeof window.buildAudio === 'function');
if (hasAudio) {
  const b64 = await page.evaluate(async (dur) => {
    const sr = 48000, ctx = new OfflineAudioContext(2, Math.ceil(sr * dur), sr);
    await window.buildAudio(ctx);
    const b = await ctx.startRendering(), L = b.getChannelData(0), R = b.getChannelData(b.numberOfChannels > 1 ? 1 : 0);
    const i16 = new Int16Array(L.length * 2);
    for (let i = 0; i < L.length; i++) { i16[2 * i] = Math.max(-1, Math.min(1, L[i])) * 32767; i16[2 * i + 1] = Math.max(-1, Math.min(1, R[i])) * 32767; }
    const u8 = new Uint8Array(i16.buffer); let s = '';
    for (let i = 0; i < u8.length; i += 0x8000) s += String.fromCharCode.apply(null, u8.subarray(i, i + 0x8000));
    return btoa(s);
  }, V.duration);
  const pcm = base + '.pcm'; writeFileSync(pcm, Buffer.from(b64, 'base64'));
  await run(['-v', 'error', '-y', '-i', silent, '-f', 's16le', '-ar', '48000', '-ac', '2', '-i', pcm,
    '-af', 'loudnorm=I=-16:TP=-1.5:LRA=11', '-c:v', 'copy', '-c:a', 'aac', '-b:a', '192k', '-shortest', out]);
  rmSync(pcm); console.log('with audio ->', out);
}
await browser.close();