apple-launch-film

コードで作る、Apple風のローンチ動画

Macのすべてのピクセルをコードで描画します。メニューバー、ノッチ、ウィジェット、壁紙まで、すべてです。window.seek(seconds)を備えた1つのHTMLファイルから、MP4を書き出します。

始める前に： brand.mdとMOTION.mdがあれば読んでください。なければ、まずbrand-intakeを実行するか、カラーコード、フォント、ロゴファイルを尋ねてください。それらがない状態で、ブランドに合っていると判断してはいけません。

無料のスキル（私のものではありません）と組み合わせて使えます。 Appleのデザインガイドラインを、Claudeが従うルールに変換してくれます。一度インストールしてください。

npx skills add emilkowalski/skills --skill apple-design

ステップ1：5つの項目を尋ねてから、返答を待つ

1. 製品名と、その一文の説明。文言は一字一句そのままにします。
2. 事実リスト。 動画に表示してよい機能、数値、要件をすべて記載します。それ以外は画面に表示しません。
3. シーン。 6～8個。それぞれ、機能を1つと短いキャプションを1つにします。例：「あなたの声はここにあります。」
4. 参考資料（任意）：実際のMacのローンチ動画、またはそのフレームを、refというフォルダーに入れてください。これは見た目だけを決める参考資料です。
5. サイズと長さ。 デフォルトは1920 x 1080、30fps、各シーン約2.5秒です。

ステップ2：ブリーフを作成する（Claude Codeに貼り付ける）

Use the apple-design skill. [If ref/ exists: Match the LOOK of the reference in ref/. Read every frame first. Do not copy its words or its product name.]

It is a launch film for [PRODUCT]: the black MacBook notch at the top centre grows into Apple-style widgets, one scene at a time. Each scene has its own full-screen colour-gradient wallpaper and one centred caption below the notch, with the last word or two tinted a lighter shade of the wallpaper colour. It opens with the notch expanded and the word "hello" handwritten in a white script line, like the Mac hello screen.

Use only these facts, and add no others:
[FACTS LIST]

Scenes, about 2.5 seconds each:
[1. Notch expanded on black, "hello" handwritten.]
[2..n. Wallpaper colour, what the notch opens into, the caption.]
[Last. Black: the notch closes to its resting shape. Caption: PRODUCT and its one line.]

Size [WIDTH] x [HEIGHT], 30fps. The frame is a Mac screen: a thin macOS menu bar across the top with the notch in the middle of it. System fonts (-apple-system, Helvetica Neue fallback).

Build it as one self-contained HTML file with window.seek(seconds) that draws any exact frame. Capture one frame from each scene [and compare it side by side with the matching reference frame]. Fix what differs, and check the motion against the apple-design skill.

苦労して学んだこと

• ノッチを言葉で指定します。 同じブリーフでも、モデルによってはノートパソコン全体を描いてしまいました。「画面上部中央にあるノッチ」と指定するのが要点です。
• トゥイーンではなく、スプリングを使います。 幅と高さがそれぞれ独自のカーブで変化し、柔らかく開いて、オーバーシュートせずに閉じると、ノッチが自然に見えます。
• 動画の冒頭から動きを設計します。 ノッチが閉じ終わる前に再び開き始める場合、途中の状態から動きが続きます。シーンごとのトゥイーンでは動きが飛んでしまいます。
• シーンごとに参考資料と比較します。 フレームを並べて比較したことで、中央からずれて大きすぎる「hello」、細い目盛りにすべきところが太いプログレスバーになっている点、メニューバーに押し込まれたプロンプトが見つかりました。
• メニューバーは短く保ちます。 単語を並べたメニューは、幅の広いウィジェットに半分隠れてしまいます。項目は5つで十分です。
• ウィジェットに主張を追加しません。 プレースホルダーテキストにはグレーの線を使います。事実リストにないUIの文言（ボタンのラベルや時計の時刻など）は、承認を得るためにリストアップします。

ステップ3：確認して書き出す

最初の1秒で、初めて見る人に本物のMacだと思ってもらえるでしょうか？ 画面上のすべての言葉は、事実リストにあるものでしょうか？ スプリングを短いフェードに置き換える、モーションを減らす設定を追加してください。

HyperFrames（無料のオープンソース）で書き出します。npx skills add heygen-com/hyperframesを実行してから、npx hyperframes renderを実行してください。縦型の動画を作る場合は、MP4をreel-exportに渡します。