video-design

動画デザイン

ウェブデザインのスキルはページを理解します。スクロール、ホバー状態、ナビゲーションバーなどです。動画にはそうしたものはありません。視聴者が一時停止して見られないシーンがあり、ナレーションがペースを決め、誰かの手に持たれたスマートフォンや、部屋の奥にあるプロジェクターがあります。このスキルはツールキットの動画レイヤーです。どこから来たものであれデザインの方向性を受け取り、シーンに落とし込み、審査員のようにレンダリング結果を確認します。

3つのレイヤー

design source (optional, the user's choice)  →  design.md (the handoff)  →  video-design (this skill)  →  qc.py + critique
taste-skill, frontend-design, a team's own        palette, type, acts,        fields per act, one data        layout, contrast,
design skill, a brand guide                       rules on/off                accent, type steps, motion      stills, contact sheet

• デザインソースが方向性を示します。配色、書体、アイデアなどです。それができるスキルなら何でも使えますし、必須のものはありません。デフォルトのこちらを使う場合、このスキルがアクトの配色とブランドをもとにdesign.mdを作成します。独自のデザインスキルを接続しても、こちらを使ってもかまいません。プロジェクトでは選択内容をproject.json（design.source）に記録します。sources.mdを参照してください。
• **design.md**はプロジェクト内にあります。これは契約書です。ソースが決めた内容を動画のアクトに対応づけ、無効にしたハウスルールとその理由も記載します。ソースが異なれば、コードではなくdesign.mdが変わります。handoff.mdを参照してください。
• このスキルは、以下のルールに従ってデザインを適用します。ソースの内容にかかわらず、動画の好みではなく視聴のされ方に基づくルールです。

動画のルール

色はストーリーに沿わせます。

• 色面は最大2、3種類とし、変えるのは物語が変わるとき（新しいシーンではなく、新しいアクト）だけです。シーンごとに変わる色は何も意味しません。転換点で変わる色は、何かが変わったことを視聴者に伝えます。まずアクトを書き出し（handoff.md）、それから各アクトに色面を割り当てます。
• 隣り合う色面は、色相だけでなく明度を変えます。明、 中、暗のようにします。同じ明度の色面（オレンジと空色など）はカットでちらつき、ffmpegのカット検出器でさえ変化を検出できません。
• 色面の切り替えはハードカットにします。コンテンツはフェードアウトやフェードインができますが、背景はクロスフェードさせません。
• **データのアクセントカラーは1色だけです。**ブランドカラーは、ナレーションで話題にしているもの（言及している棒、線、数値）にだけ使います。それ以外には使いません。ほかはインク色か、ニュートラルカラーを1段階だけ使います。背景色に色を重ねるのは避けてください（ライム色に黒を45％重ねるとオリーブ色になり、誰も選んでいない色になります）。
• 色面上のテキストは、色面に対するインク色を最大濃度で使うか、コントラストを保てる場合に限り、補助的な行で70～80％の濃度にします。色面上のグレーのテキストは、汚れのように見えます。

文字組み。

• 動画ごとにサイズを5種類だけ決め、一度だけ設定します。1080pの場合は、ディスプレイが200～260、数値が112～132、タイトルが64～72、ラベルが32～36、注記が28です。スマートフォンでの最小サイズは、1080pで28pxです（qc.py --layoutが短辺の2.6％をチェックします）。
• フォントファミリーは1つ、ウェイトは最大2種類です。ディスプレイサイズではトラッキングを-0.03～-0.05em、行送りを0.9～1.0にします。
• タイトルや主張は最大2行にし、フレーズの切れ目で手動改行します（<br />）。自動折り返しに任せてはいけません。文字数を数えます。1920pxのディスプレイサイズでは、1行あたり約32文字です。3行目に単語が1つだけ残るのは、最も目立つ失敗です。
• 数字には等幅数字を使い、カウント中に数字が揺れないようにします。

レイアウト。

• 動画内のすべてのタイトルで左端を揃えます（すべてのシーンで同じx座標にします）。グラフや図はより広い範囲を使ってもかまいませんが、見出しの位置は動かしません。
• 1シーンにつき主役は1つだけにします。グラフ、図、または主張のいずれかです。大きな数値とグラフを同じシーンに配置できるのは、その数値がグラフの合計を示す場合だけです。
• 同じタイルを横一列に並べません（4つのステップに対して黒いボックスを4つ並べるなど）。1つの図形に目印を付ける、文章にする、またはナレーションに合わせて順番に表示します。
• グラデーション、光彩、静止した要素へのドロップシャドウ、ガラスパネル、装飾的な図形は使いません。フラットな色面、製品そのもの、実際の写真、または題材をもとにした背景を使います（下記）。
• 脚注と出典は、注記サイズで左下に1行だけ配置します。注記が3行必要なシーンでは、代わりにナレーションで文章を伝えます。 主題から生まれる背景。 フラットな背景が基本で、多くの場合それが適切です。単調に感じても、装飾を加えるのではなく、主題そのものの構造を描きます。その対象がもともとどんな形を持っているかを考えます。カレンダーなら週のグリッド、曲ならビートのグリッドや五線譜、コードなら行番号の欄、地図なら地形の輪郭、チャットならメッセージ欄、スプレッドシートならセルです。作り足したものではなく、その形だけを背景にします。
• 背景の色を使った細い線を10-16%の濃さで引きます（暗い背景では少し薄くします）。スマートフォンでも見え、文字の背後では消える程度にします。線が言葉より先に目に入る場合は、濃さを半分にします。
• 動画全体でモチーフは1つだけにし、文字を表示するすべてのシーンで同じものを使います。プロダクトやグラフを見せるシーンには背景を付けません。それら自体がすでに画面の主役だからです。
• 背景上の要素には主題固有の語彙（カレンダーなら予定カード、チャットなら吹き出し）を使い、背景色の輪郭線として描き、それを表す言葉に合わせて表示します（cue()）。文字の上と下に配置し、文字の行には重ねません。
• 背景に展開を持たせることもできます。ナレーションで列挙するときに要素を埋め、問いかけのときに空にします。これが、単なるテクスチャとアイデアの違いです。
• design.md の「Ground」に記録します。ノイズ、ストック画像、ぼかし形状、生成した背景は使いません。これらは置き換える対象の装飾です。

グラフ（lib/components/DataChart.tsx）。

• 塗りつぶしは15%以下のフラットな面（area="flat"）、棒は角形（radius={0}）にします。系列が1つだけなら凡例は付けず、グリッド線は3〜7本、またはなしにします。
• アクセントは、ナレーションで触れる棒または線に、その言葉に合わせて適用します（cue()のhighlightAt / growAt）。2つ目のグループがある場合は、背景色か白にし、2つ目の色相は使いません。
• 画面上の数値はすべてデータファイルから取得し、ナレーションで読み上げる数値はすべてビルド時にデータと照合します（examples/data-chart-stars と check() のパターンを参照）。

トランジション。 場面転換はハードカットにするか、動く境界線が効果的な場合は @remotion/transitions の wipe() を使います。背景同士のクロスフェードは使いません。同じものを新しい形で再び見せる場合（別のデザインで同じグラフを見せる場合や、修正後の画面を見せる場合）は、lib/components の PageTurns でその場で切り替え、各切り替えを新しいページを示す言葉に合わせます。エフェクトトランジション（グリッチ、光漏れ、ズームブラー）はブランド上の選択であり、デフォルトではありません。使う場合は design.md の「Rules turned off」に記録します。

モーションについては、.claude/skills/remotion/motion-craft.md を参照してください。フレーム単位のタイミング、読み取り時間、生成されたように見えるデフォルト設定について説明しています。画面上の各変化は、それを示す言葉に合わせます（cue()）。そのため、シーンを保持している間も次のアクションが必ずあり、これが qc.py --render の静止時間チェックで確認される内容です。

ワークフロー

1. 幕。 動画の幕（2〜4つ）と、各幕に含めるシーンを決めます。これは最も重要なデザイン上の判断であり、言葉で決めるものです。
2. 方向性。 project.json でプロジェクトのデザインソースが指定されていればそれを使い、指定されていなければインストール済みのもの（sources.md）を提示するか、こちらのものを使います。つまり、ブランドに合わせた palettes.md の幕ごとのパレットです。
3. design.md。 ソースの方向性（handoff.md）をもとに記入します。幕ごとの背景、背景色、1つのアクセント、5段階の文字サイズ、背景（フラット、または主題固有の形）、理由を添えた無効化ルールを記載します。
4. シーンを作成します。
5. 確認。 uv run tools/qc.py --project <p> --layout と --render out/video.mp4 を実行します。
6. 見直し。 uv run tools/contact_sheet.py out/video.mp4 で、各シーンの表示が落ち着いたフレームを1枚ずつ並べます。critique.md を使って評価し、優先度の高い3点を修正してからレンダリングし、再度確認します。最大3回まで繰り返します。

ファイル

ファイル	読むタイミング
handoff.md	design.md の作成または閲覧時：フォーマットと具体例を確認できます。
sources.md	デザインソースの選択、別のソースの追加、または他の人向けのソースの一覧作成時。
critique.md	コンタクトシートからレンダリング結果をレビューするとき：チェック項目、スコア、上限を確認できます。
palettes.md	動画ですでに効果が確認されているアクト用パレットを、役割と出典に対応付けて確認できます。

ルールの一部（章としてのカラー項目、隣り合う色同士の明度、アクセントカラー1色、2行の見出し、5つのサイズ、批評のスコアと上限）は、Leonxlnx による taste-skill（MIT）を動画向けに応用したものです。sources.md を参照してください。