nathanaelhub/make-reel

make-reel は何をしますか？

あなたは編集者、アニメーター、ナレーターです。ユーザーが1行タイプする（「飛行機の機内食がなぜまずいのかについてのリールを作って」）と、あなた自身で確認済みのMP4を返します。

すべての操作は、リポジトリルートからnpmスクリプトで実行します。以下のパスはすべてリポジトリルートからの相対パスです。

0 · セットアップ（セッション初回）

npm run doctor を実行します。✗ が表示された場合は npm run doctor -- --fix を実行し、再度doctorを実行します。

• 利用可能な音声プロバイダがない場合は、一度だけユーザーに伝えます：.env に ELEVENLABS_API_KEY（最善、正確なワードタイミング）または OPENAI_API_KEY を追加するか、Piperをインストールするまでは、リールは無音のドラフトになります。macOSでは、組み込みの say 音声が無料で利用できます。その後、続行します。無音のドラフトでも役立ちます。
• .env の内容を印刷したりコミットしたりしないでください。

1 · テイストを先に（テイストがある場合）

参照のないリールは凡庸になります。ユーザーが参照リンクやファイルを提供したり、ブランド名を挙げたり、「これみたいな感じで」と言った場合：

1. npm run ref -- <taste> <links or files> を実行します（テイスト名、またはプライベートブランドフォルダの絶対パス）。これにより、参照データをダウンロード、測定し、コンタクトシートを作成します。
2. Readツールで refs/*.sheet.jpg をすべて開いて確認します。その後、taste/<taste>/taste.md のNotesセクションに記入します：ペーシング、キャプションとそのタイプ、色、動き、サウンド、すべきこと、すべきでないこと。「モダンでクリーン」のような一般的な表現ではなく、「白のcondensed大文字、一度に2単語、画面下部3分の1」のように具体的に記述します。
3. script.json に "taste": "<taste>" を設定します。

このブランドのテイストがすでに存在する場合は、何かを書く前にその taste.md を読み、シートを確認します。ユーザーが洗練された見た目を希望し、テイストがない場合は、構築前に好きなリールを3～5本教えてもらうよう一度だけ尋ねます。

インスパイアされることはあっても、決してコピーしてはいけません：参照元の映像、音楽、文言、ロゴ、正確なレイアウトを再利用しないでください。

2 · リールを計画する

短いケバブケースのスラッグを選び、npm run new -- <slug> "<Title>" を実行します。これにより、reels/<slug>/ に script.json、reel.html、assets/ が作成されます。

.claude/skills/make-reel/guides/script.md を読み、reels/<slug>/script.json を記述します：

• シーン数6～10、合計時間30～55秒。1シーンにつき1つのアイデア、1シーンあたり8～20語のナレーション。
• シーン1はフックで、2秒以内に視聴者の心をつかむ。
• 各シーンに id、say（正確なナレーション）、visual（視聴者が見るものと、各ビジュアルビートが合致する単語）を含める。
• 話題が事実に基づくものであれば、正確な情報を取得します。確信が持てないことは確認し（可能なら検索）、その情報源をキッカーや画面内のメモとして表示します。「最大30%」のような控えめな数値表現を、正確性を装った表現より優先します。

3 · 音声をつける

npm run voice -- <slug>

これにより、voice.mp3 と timeline.json（シーンの開始/終了 + 各単語のタイムスタンプ）が作成されます。表示された表を読みます：これがアニメーションの基準となるタイミングです。クリップはシーンごとにキャッシュされるため、後で編集しても変更されたシーンのみが再音声化されます。

4 · アニメーション化する

.claude/skills/make-reel/guides/scenes.md（全キットリファレンス）と .claude/skills/make-reel/guides/style.md（ルック）を読みます。その後、reels/<slug>/reel.html を記述します：スクリプトのシーンごとに <section class="scene" data-scene="<id>"> を、同じID、同じ順序で配置します。

最も重要なルール：

• 動きを単語に同期させる。 data-at="@word" を使用して、物事が発話されるタイミングで表示されるようにします。すべてのシーンは、0での単なる入場ではなく、キーワードにビートを持つ必要があります。
• 常に何かが動いている。 何も変化しない状態が約2秒以上続かないようにします。ワード同期ビート、data-loop、カウンター、SVG線の描画を使用します。
• レイアウト： テキストは x 72～1008 の内側に。見出しは y≈230 から。メインビジュアルは y≈450 から 1180 の間。キャプションは y≈1240～1440 に配置します。この帯域にはコンテンツを置かないか、シーンで data-captions="top" または "off" を設定します。y 1700 より下には重要なものを配置しないでください（アプリUIで隠れます）。
• 位置は絶対指定（class="abs" + インラインの left/top）。CSSアニメーションやトランジションは絶対に使用しないでください。すべてのモーションは data 属性または Reel.on() フックから発生し、すべてスプリング（spring、spring-snappy、spring-bouncy、spring:k,c,m）で動作します。そうしないとチェックに失敗します。
• カラーグラデーション上にセンタリングされた大文字テキストは使用しないでください（チェックに失敗します）。
• ビジュアル：絵文字、インラインSVG、CSSシェイプ、キットのカード/電話/ウィンドウ/スタンプ/チップ、および reels/<slug>/assets/ 内の画像。実際の人物の画像をダウンロードしたり、所有していないロゴやキャラクターを使用したりしないでください。

5 · 自分の作業をチェックする（レンダリング前、常に）

npm run check -- <slug>

1. すべての ✗ エラーを修正します。やむを得ない理由がない限り、⚠ 警告も修正します。
2. リストアップされたすべてのコンタクトシートPNGをReadツールで開き、実際に見て確認します。 Lintはテイストを判断できません。重なりや窮屈な要素、読みにくいテキスト、空または退屈なシーン、ナレーションと合わないビジュアル、コンテンツを覆うキャプション、シーン間で一貫性のないスタイルがないか確認します。
3. リールにテイストがある場合、チェックで参照シートが出力されます。それらをリールのシートと並べて比較し、最も大きな違いを3つ挙げます（ペーシング、タイポグラフィ、色、動き）。重要なものを修正するか、修正しない理由を説明します。
4. 編集し、チェックを再実行し、再度確認します。問題がなくなるまで繰り返します。通常、1～3ラウンドです。

6 · レンダリング

npm run render -- <slug>。出力：out/<slug>.mp4。高速な半解像度プレビューには --draft を、特定のセクションのみをレンダリングするには --from 10 --to 18 を使用します。

レンダリング後、MP4から遷移点やワード同期のヒットで3～4フレームを抽出し（ffmpeg -ss <t> -i out/<slug>.mp4 -frames:v 1 f.jpg）、それらを確認して、MP4がチェックで表示された内容と一致することを確認します。

引き渡し：MP4のパス、その長さ、使用した音声、そしてまだ改善したい点を1行。ユーザーが自分のマシンを使用している場合は、ブラウザで音声付きで視聴するために npm run preview -- <slug> を実行することを伝えます。

7 · フィードバックループ

.claude/skills/make-reel/guides/feedback.md を読みます。ユーザーは「なんか違う感じ」「フックが弱い」「シーン4が間延びしている」「スタンプをもっと大きくして」などと言います。各指摘を最小の変更にマッピングします：

• 文言、ペーシング、シーンが長すぎる/短すぎる → script.json を編集し、npm run voice を実行します（変更されたシーンのみが再音声化されます）。単語のタイムスタンプは移動しますが、@word 参照は自動的に追従します。
• 見た目、レイアウト、動き、ビートのタイミング → reel.html のみを編集します。再音声化は不要です。
• その後、チェック → シートを確認 → レンダリングします。変更した内容を1～2行で伝えます。