サムネイルとタイトル
ブランド設定
scripts/layout-fullbleed.html と scripts/layout-panel.html の先頭にある :root ブロックを編集してください：
| 設定 | CSS変数 | デフォルト値 |
|---|---|---|
| アクセントカラー | --brand-accent (+ --brand-accent-rgb を r,g,b 形式で) | #4a90e2 |
| 明るいテキスト色 | --brand-light | #f2f2f2 |
| 暗いインク色 (ストローク、パネル背景) | --brand-ink | #0d131a |
| 表示用フォント (大きなテキスト) | --font-display | 'Anton','Bebas Neue',Impact,sans-serif |
| 本文フォント (小さなテキスト) | --font-body | 'Inter',sans-serif |
表示用フォントはローカルにインストールされている必要があります。レンダリングは file:// からヘッドレスChromeで実行されるためです。Anton と Bebas Neue は Google Fonts で無料で入手できます。
また、scripts/frames.sh でグレーディング用LUTを設定してください (LUT_DEFAULT)。または実行時に LUT=/path/to.cube を渡すこともできます。
スタイルのデフォルト (好みに応じて変更)
- 顔の上には決して何も重ねないこと。 被写体にグラデーションをかけるのは避けてください。顔が完全に見えるハードエッジのパネルか、またはテキストを空きスペースに配置したフルブリードのいずれかを使用します。
- RAW 4Kからフレームを抽出し、書き出しからは抽出しないでください。 1080pの書き出しフレームはソフトに見えます。
- まずフレームをグレーディングします。 S-Log3などのログ素材はグレーディングされていないとフラットでグレーです。
frames.shのlut3dでLUTを焼き込みます。カメラが完成したプロファイルで撮影する場合はLUTをスキップしてください。
調査から得られたルール
- 3〜5単語で、少ないほど良い。 サムネイルは動画を説明する場所ではありません。
- 顔があると効果的。 ほとんどのブレイクアウト動画は顔を使用しています。強い表情が中立的な表情より優れています。
- 1つの主要な被写体、2〜3色、高いコントラスト。
- 約210pxで評価する。 ほとんどの視聴判断はスマートフォンで行われます。そこでうまく機能しなければ、他は何も重要ではありません。
- タイトルとサムネイルは互いに繰り返さないこと。 1つのアイデアの2つの半分。タイトルは短く具体的に保ちます（約50〜60文字で切れないように）。
- YouTube StudioでのA/Bテストは議論より勝るので、ユーザーに2〜3の実際の選択肢を提供します。
レイアウトの選択
フルブリードがスマートフォンサイズで優れており、デフォルトです。 210pxで並べて比較すると、顔のサイズはパネル版の約2倍に見え、パネルのサブラインは完全に消えます。
layout-fullbleed.html: グレーディングされたフレームを端から端まで配置。表示用フォントで1〜3単語、太いインクストロークを付け、顔に重ならないよう空きスペース（壁、ドア）に配置。プリセット:stab、stat、bottom、band(下部にソリッドなアクセントバンド)。従来の例バリアント:e、f、g、h。layout-panel.html: 被写体をきれいな右側の正方形パネルに配置し、テキストを暗い左半分に配置。アイデアに図（ドットグリッド）や2行のテキストが必要な場合に使用。例バリアント:a〜d。
実行方法
# 1. 表情豊かな瞬間のRAWからグレーディングされたフレームを抽出（トランスクリプトを使用して見つける）
bash <skill>/scripts/frames.sh "<YOUR_FOOTAGE_DRIVE>/<folder>/C0001.MP4" "<work>" 178 310 459 503
# 2. 選択前にそれらを確認 - コンタクトシートが推測より優れている
ffmpeg -i hi-*.jpg -filter_complex hstack=... contact.jpg
# 3. バリアント + スマートフォンサイズのプルーフシートをレンダリング
WORK=<work> OUT=<out> node <skill>/scripts/render.mjs variants.json
variants.json:
[{"id":"E-no-time","layout":"fullbleed","v":"e","img":"full-C0001-503.jpg"},
{"id":"S-custom","layout":"fullbleed","img":"full-C0001-310.jpg",
"data":{"preset":"stab","head":"TOO BUSY?","kicker":"TRY THIS"}},
{"id":"B-3x","layout":"panel","v":"b","img":"cut-C0001-97.jpg"}]
フルブリードのテキストはバリアントごとに data (preset、head、kicker、side、size) として渡すか、レイアウトHTMLに新しい従来の v ブロックとして追加できます。パネルのテキストは layout-panel.html の v ブロックにあります。新しいバリアントを追加するには、ブロックを追加し、3単語以内に保ちます。
puppeteer-core が必要です: ../video-overlays/scripts/node_modules を再利用するか、scriptsディレクトリで npm i を実行してください。render.mjs は /Applications/Google Chrome.app/... を起動します。他のシステムではパスを変更してください。
フレームの選び方
上げた眉毛、開いた手、言葉を発している途中の口を探します。トランスクリプトを使用してエネルギーがある瞬間を見つけ、そこから1秒後のフレームを抽出します。死んだ目のフレームは失敗です。frames.sh の crop= オフセットは、被写体がフレーム幅の約46% を占める4K (3840x2160) ソースを想定しています。フレーミングが異なる場合は調整してください。
出力
1920x1080でレンダリングします（YouTubeはきれいにダウンサンプリングします）。2MB未満に保ちます。
関連
paper-edit、video-overlays: ビデオパイプラインの残りの部分