color-motion

モーションにおける色

モーションデザインのための色を選び、組み合わせ、アニメーションさせます。抑制の効いたパレットの構築、上質に見えるグラデーションの作成、知覚的に均一な色空間での色補間、作品の雰囲気と一貫性を整えるカラーグレーディングを行います。正確な OKLCH／hex 値を持つパレット、グラデーションの CSS／コード、トランジションのパラメーターを出力します。

使用する場面

• モーション作品や動画作品に使うパレットを選んだり、色を組み合わせたりするとき。
• グラデーション背景（メッシュ、ノイズ、アニメーションによるドリフト）を作るとき。
• 色のトランジション（ボタンの状態、テーマの切り替え、ローダー）をアニメーションさせるとき。
• 動画の雰囲気を整えたり、くすんだ／グレーがかったグラデーション補間を修正したりするとき。
• After Effects のレンダリングで色あせ、ガンマのずれ、プラットフォーム間の不一致を修正し、プラットフォームごとに適切な書き出し設定や色タグを選ぶとき。

主なテクニック

1. 抑制の効いたパレットを作る

色相を絞ります。優れたモーションパレットは メインカラー 1 色＋アクセントカラー 1 色＋ニュートラルカラー 2〜3 色 です。色相を増やすのではなく、明度と彩度でコントラストと奥行きを作ります。色相を増やしすぎると互いに主張し合い、素人っぽく見えてしまいます。

暗いシーンでは、彩度を最大にするのではなく、彩度を低〜中程度にして明度を高くし、アクセントカラーを際立たせます。彩度が高すぎるアクセントは白飛びしたようになり、暗い背景ではちらついて安っぽく見えます。

色を考える際は OKLCH を使います。oklch(L C H) の L は知覚的明度（0〜1）、C は彩度（0 ≈ 最大 0.37）、H は色相角（0〜360）です。L と C を一定に保って H を回転させると、視覚的な重みが本当に等しい色相が得られます。HSL ではこれを確実に実現できません。

Primary:   oklch(0.62 0.19 264)   /* confident blue */
Accent:    oklch(0.78 0.17 50)    /* warm amber, lighter so it pops */
Neutral-0: oklch(0.97 0.005 264)  /* near-white, faint hue tint */
Neutral-1: oklch(0.55 0.01 264)
Neutral-2: oklch(0.18 0.015 264)  /* near-black, same hue family */

ニュートラルカラーにメインカラー寄りの色相をわずかに加える（彩度をごく小さくする）と、画面全体に統一感が生まれます。色の付いた要素の隣に純粋なグレーのニュートラルカラーを置くと、まとまりがなく見えます。

2. 補間には OKLCH または Lab を使う — 生の sRGB は使わない

2 色を sRGB で線形補間すると、彩度の低い、しばしばグレーや濁った中間色を通ります（青から黄色ではグレーを通り、青から赤では濁った紫を通ります）。知覚的な色空間（OKLCH、OKLab、CIE Lab）では、中間色の鮮やかさと明度が保たれます。

CSS グラデーションはこれをネイティブでサポートしています。

/* Vivid, even midpoint */
background: linear-gradient(in oklch, #2b6cff, #ffb02e);

/* Control hue path around the wheel for two-stop gradients */
background: linear-gradient(in oklch longer hue, #2b6cff, #ffb02e);
background: conic-gradient(in oklch, red, blue, red);

アニメーションするトランジションでは、ライブラリ（参考資料を参照）を使って補間し、フレームごとの色を出力します。2 色の CSS トランジションでは、型付きカスタムプロパティを登録すると、ブラウザーが選択した色空間で補間します。

3. 上質に見えるグラデーション

• メッシュ／複数のラジアルグラデーション：異なる位置に複数の radial-gradient を重ね、その下にベースカラーを置きます。柔らかく自然で、高級感のある見た目になります。
• 粒子を加える：ごく薄いノイズオーバーレイ（SVG の feTurbulence または不透明度約 3〜5% のタイル状 PNG）を加えると、バンディングが目立たなくなり、質感が生まれます。
• ゆっくり動かす：ease-in-out alternate を使い、8〜20 秒かけてグラデーションの位置を移動させます。ゆっくりした動きは上質です。速いグラデーションの動きはスクリーンセーバーのように見えます。

.mesh {
  background-color: #0b0f1a;
  background-image:
    radial-gradient(at 20% 25%, oklch(0.62 0.19 264 / 0.7), transparent 50%),
    radial-gradient(at 80% 30%, oklch(0.70 0.16 320 / 0.6), transparent 55%),
    radial-gradient(at 50% 85%, oklch(0.78 0.17 50  / 0.5), transparent 50%);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
  to { background-position: 8% -6%, -8% 6%, 4% 8%; }
}

4. 色のトランジションアニメーション

このスキルだけで完結できるよう、タイミングの要点を記します。出現／強調には ease-out（cubic-bezier(0.16, 1, 0.3, 1)）を使い、状態の変化は 150〜300ms、テーマや全画面の色変化は 400〜800ms にします。linear は連続ループにのみ使います。

@property --c { syntax: "<color>"; initial-value: #2b6cff; inherits: false; }
.btn { background: var(--c); transition: --c 200ms cubic-bezier(0.16,1,0.3,1); }
.btn:hover { --c: #ffb02e; }

色を実際に補間させるには @property の登録が必要です（登録していないカスタムプロパティは瞬時に切り替わります）。

5. 雰囲気を整えるカラーグレーディング — 正しい順序

グレーディング処理は次の順序で適用してください。順序を変えると結果も変わります。

1. 露出／ホワイトバランス — まず全体の明るさを調整し、色かぶりを補正するか、意図した色かぶりを設定します。
2. コントラスト — 黒と白のポイントを設定し、階調の幅を広げるか、圧縮します。
3. 中間調／彩度 — 全体の彩度と中間調の色を調整します。
4. スプリットトーン — シャドウとハイライトに別々に色を付けます。定番のシネマティックなルックは ティールのシャドウ＋オレンジのハイライト（補色の組み合わせで、肌を美しく見せます）です。控えめに使います。
5. 統一 — 仕上げに全体へ色味／LUT を加え、控えめなビネットで画面をまとめます。

コードでは、CSS フィルターを連結するかフラグメントシェーダーを使ってグレーディングします。動画では実際の LUT またはグレーディングパネルを使います。カットをまたいでもショットが自然につながるよう、作品全体を一貫してグレーディングしてください。

6. 動画／レンダーのカラー管理

After Effects のコンポジションビューアでは正しく見えるレンダーが、QuickTime、ブラウザー、macOS／Windows 間で色あせて見えたり、明るすぎたり、白っぽく見えたり、ガンマがずれて見えたりする場合、原因はアートワークではなく、4 つの段階、つまり AE の作業用スペース、レンダーに埋め込まれたタグ、プレーヤーの解釈、ディスプレイ／OS のガンマ間でのガンマ／伝達特性の不一致です。

基本ルール：

• 明示的な作業用スペースを設定します。 File > Project Settings > Color タブで、Working Space を SDR 動画の場合は Rec.709 Gamma 2.4（UI／静止画の場合は sRGB）に設定します。「None」にするとカラー管理が無効になり、ビューアの表示が最終的な見た目と異なります。グレーディング／グラデーションでバンディングを防ぐには、Depth を 16 bpc に設定します。
• Rec.709 と sRGB の違い。 どちらもプライマリカラーは同じですが、伝達特性が異なります（sRGB は約 2.2 の区分的特性、Rec.709 のディスプレイ特性は 2.4／BT.1886）。間違ったものを使うと中間調の明るさがずれます。動画には Rec.709、スクリーンショット／PNG／UI には sRGB を使います。
• 書き出し時にカラータグを埋め込みます。 macOS／Windows／プレーヤー間でずれが生じるのは、ファイルにタグがないためです。各プレーヤーがそれぞれの既定値を推測します。Render Queue > Output Module > Color Management で Rec.709（または sRGB）を明示的にタグ付けします（ずれが起きる場合は「Preserve RGB」のままにしないでください）。
• QuickTime のガンマバグ。 QuickTime／AVFoundation は約 1.96 のガンマを追加で適用するため、QuickTime では問題なく見えるファイルが、Chrome では暗く、コントラストが強く見えることがあります。QuickTime を基準にグレーディングしたり、承認したりしないでください。Web 配信の正しい基準は Chrome、Premiere、または Resolve です。
• プレビューを最終出力に合わせます。 確認中はコンポジションビューアの「Use Display Color Management」を切り替え、書き出しを数値で検証します。50% グレー（RGB 128）のパッチを配置してレンダーし、再サンプリングします。値が上昇する（128 → 150 以上）場合は、ガンマがずれて色あせていることを確認できます。ffprobe を使って埋め込みタグ（color_primaries／color_transfer／color_space = bt709）を確認します。

プラットフォーム別の書き出し概要：編集用マスターには Rec.709 タグ付きの ProRes 422 HQ/4444、Web／<video>／ソーシャル向けには Rec.709 タグ付きの H.264 (MP4)（Chrome で確認）、透明度には ProRes 4444 + alpha → PNG（sRGB）、HDR には ProRes 4444／HEVC 10-bit Rec.2020 PQ/HLG（32 bpc float が必要）を使います。

詳細な診断フローチャート、正確なメニュー項目、プラットフォーム別の書き出し表、QuickTime の回避策、OS／プレーヤー別のガンマ値、数値テストパッチの手法、ffprobe／ffmpeg のタグ付けコマンド、限定レンジとフルレンジの落とし穴、書き出し前のチェックリストについては、references/color-management.md を参照してください。

配信と検証（スタンドアロン HTML）

同梱ヘルパー（scripts/）：scripts/seek-shot.sh anim.html 0 1.5 3 は ?t=N ハーネスを固定し、各時点のスクリーンショットを撮影します。scripts/contact-sheet.sh sheet.png frame-*.png は、それらを並べて一覧で確認できるようにします。詳しくは scripts/README.md を参照してください。

Web のパレット／グラデーション／色遷移を納品する場合は、ブラウザーで直接開ける .html ファイルを1つ用意してください。ビルド手順は不要です。色の処理は CSS で行い、ファイルは自己完結させます。

出力の仕様：

• .html ファイルを1つ：マークアップと、インラインの <style> 内にグラデーション／遷移を記述します（JS の補間ライブラリが必要な場合に限り、CDN を使用できます）。
• アニメーションドライバーは1つだけにします。CSS の @keyframes によるドリフト、または単一の @property 遷移とし、競合するものは使いません。
• 任意の時点を決定論的にスクリーンショットできるよう、以下のフリーズハーネスを含めます。

フリーズハーネス — スクリーンショット用に CSS アニメーションのフレームを固定します。 ?t=N を指定すると、負の animation-delay が設定されて一時停止し、グラデーション／遷移が N 秒時点の正確なフレームになります。

<script>
  const t = new URLSearchParams(location.search).get("t");
  if (t !== null) {
    document.querySelectorAll(".bg, .btn").forEach(el => {       // animated elements
      el.style.animationDelay = (-parseFloat(t)) + "s";
      el.style.animationPlayState = "paused";
    });
  }
  window.__ready = true;                                          // ready signal for headless wait
</script>

検証ループ — 描画 → 固定 → スクリーンショット → 確認：

1. 開始／中間／終了時点でファイルを固定して開きます：…/color.html?t=0、?t=<period/2>、?t=<period>。
2. 固定した各フレームのスクリーンショットを撮影します。
3. 忠実度（パレット／要件との一致）と色のアーティファクトを確認します。各フレームで、グラデーション／遷移にバンディングや濁った、または灰色の中間色がないことを確かめます（OKLCH/Lab の色経路が鮮やかさを保っていること）。バンディングが見られる場合は、グレインを加えます。
4. 反復： バンディングや濁った／灰色の中間色が現れた場合は、OKLCH/Lab の彩度と明度を調整するか、グレインを加え、同じ ?t=N で再描画してスクリーンショットを撮り、修正を確認します。すべての固定フレームがきれいになるまで繰り返します。

npx playwright screenshot --wait-for-timeout=500 "file://$PWD/color.html?t=8" frame-mid.png

完了前に確認：

1. ブラウザーでスタンドアロンで開けること（コンソールエラーや CDN の読み込み漏れがないこと）。
2. 色のドライバーが1つだけであり、?t=N で正確なフレームを正しく固定できること。
3. 開始／中間／終了時点のスクリーンショットで、バンディングや濁った／灰色の中間色がなく、明度が均一であること。
4. prefers-reduced-motion に従い、ドリフトが読みやすい静止フレームで一時停止すること。
5. 補間は OKLCH/Lab を使用すること（グラデーション／@property）。生の sRGB は使用しないこと。

クイックリファレンス

必要なもの	方法
パレットの色数	プライマリカラー1色＋アクセントカラー1色＋ニュートラルカラー2～3色
等しい重みの色相	OKLCH で L、C を固定し、H を変化させます
鮮やかなグラデーション	linear-gradient(in oklch, ...)
滑らかな色のアニメーション	OKLCH/Lab で補間し、@property で登録します
高級感のある背景	放射状グラデーションを重ね、グレインを加えて、8～20秒かけてゆっくりドリフトさせます
シネマティックなカラーグレーディング	ティールのシャドウ／オレンジのハイライトを控えめに使います
色あせた AE レンダーの修正	Output Module > Color Management で Rec.709 をタグ付けし、Chrome で確認します
避けること	生の sRGB 補間（中間色が濁ります）、QuickTime に合わせたカラーグレーディング

参考ファイル

• references/palettes-and-interpolation.md — OKLCH 値と名前付きレシピを使ったパレット作成ルール、グラデーションのレシピ集（メッシュ、円錐、グレイン）、知覚的補間とスケールに使う culori および d3-interpolate のコード、フィルター／シェーダーの例を含むカラーグレーディング順序の完全なチェックリスト。
• references/color-management.md — 動画／レンダーのカラー管理全般：診断用の決定木、正確なメニュー操作を示した AE プロジェクト／出力のカラー設定、プラットフォーム別エクスポート表、QuickTime のガンマバグ回避策、OS／プレーヤー別のガンマ値、数値テストパッチの方法、ffprobe／ffmpeg によるタグ検証、リミテッドレンジとフルレンジの注意点、エクスポート前チェックリスト。