Art Direction

---
user-invocable: true
description: "デザイン生成の瞬間に効かせるアートディレクションの規律。コンセプト一語から材質・配色・タイポ・シグネチャ表現までを1本の線で導出し、「汎用ダッシュボード化」を防ぐ。design-mock/design-ui等でUIを描く直前、生成結果が「あからさま・テンプレ的」と感じたとき、モデル間の出力品質差を埋めたいときに使う。"
---

# art-direction — 描く瞬間のアートディレクション規律（演出層・モデル非依存）

デザインSSOT（トークン値）が揃っていても、**値から絵にする瞬間の判断**がモデル任せだと
「トークンは合っているのに汎用管理画面の文法」になる。
このスキルは、その瞬間の判断を**モデル非依存の規律**として固定する。

> 出自: 同一デザインランゲージを複数モデルに渡した比較実験（2026-07）。
> 出来の差は描画技術ではなく「コンセプトを視覚言語に翻訳する規律の有無」だった。
> 第2実験（上位モデルの成果物を他モデルに模倣させる）で、抽象規律を守っても
> **値の使い方の低レベル規律**（禁色/効果の序列/声量）と**描画後の批評反復**が無いと届かないことも判明。
> 規律を明文化すれば、どのモデルでも上位の出来に寄せられる、が本スキルの仮説。

## 発火条件

- `design-mock` / `design-ui` / `design-html` 等で**UIを描く直前**（SSOT参照の後、描画の前）
- 生成された画面が「あからさま」「テンプレっぽい」「管理画面みたい」と感じたとき
- プロトタイプ・ゲーム画面・LP等、**体験の第一印象が価値になる**画面を作るとき

## 前提（レイヤー上の位置づけ）

- ここは **how（描き方の規律）**。「このプロジェクトで結局どう決めたか（what/why）」は `project-design-language` の固有値レジストリが持つ
- 規範/逸脱ペア・格（レジスタ）の考え方は `judgment-harness` に従う
- 実装制約への落とし込みは `creative-coder`、アクセシビリティ両立は `accessibility-engineer` に委譲
- 描画後の批評は `design-critique`（デザイン版レビューループ）が担う。ルーブリックのSSOTも同スキル
- レイアウト・グルーピング・視線の流れ＝**要素間の空間関係**は、規律の箇条書きでは生成できない（実測済み）。描画そのものは `design-drafter` エージェント（情報設計→ビジュアルの2段プロセス）が担う

---

## 規律1: コンセプト導出線（描く前に宣言する）

**描き始める前に**、以下を1本の線で言語化して宣言する。導出できない装飾は入れない。

```
コンセプト一語（例:「とける」）
  → タグライン（体験を一文で。例:「とけて、つながる。」）
  → 材質（そのコンセプトの手触り。例: マット・水彩・紙）
  → 配色（材質と調和する彩度・地色。例: 低彩度パステル×暖色クリーム地）
  → タイポ（声の質。例: セリフ体＋字間で静けさ）
  → シグネチャ表現（規律4）
```

- コンセプト一語は `project-design-language` の**単一メタファー宣言**から取る。未確定なら候補提示→人間選定（推測で進めない）
- **メタファーは「表面仕上げ」ではなく「世界」で書く**: 「光沢の水玉」は仕上げの指定であり導出元にならない。「白い紙の上の、丁寧な水彩挿絵」のように**材質＋置かれる文脈＋態度**まで含めると、あらゆる判断がそこから導出できる
- **全ての視覚判断はこの線から導出**する。「なんとなく綺麗だから」は導出ではない
- 宣言はそのまま成果物にも宿す: **プロダクト名とタグラインを画面に打つ**（「UIを作る」ではなく「存在をデザインする」）

### デフォルメの規律（導出線の上限。再現ではなく翻訳）

導出線は**入場券であって義務ではない**。「メタファーから導出できる」は表現を入れる必要条件で、十分条件ではない。
メタファーを全要素の表面に塗ると（にじむタイトル・濡れた玉・液体の満ちるメーター…）、画面全体が濁って**何もメタファーとして読めなくなる**。

- **抽出の宣言**: メタファーから抽出する性質を**1〜2個に絞って**宣言する（例:「とける」→ 状態変化の**挙動** ＋ 顔料の**材質**。「濡れた見た目」は捨てる）
- **宿らせ先の限定**: 抽出した性質を宿らせる場所を決める（挙動 / 材質 / 一点の演出）。**それ以外の層（レイアウト・タイポ・情報表示）はあえて無地・規律正しく**保つ。図地関係: 地が乾いて静かだからこそ、図が濡れて見える（`judgment-harness`「構造は精密に、遊び・有機性は点で効かせる」のメタファー版）
- **再現より翻訳**: 「〜っぽく見せる」表現を見つけたら「〜のように**振る舞う**」に置き換えられないか問う（水っぽく見せるな、水のように振る舞わせろ）
- **リトマス試験**: メタファー表現を1つ取り外しても画面が成立するか。全部に染みていて外せない＝漏れている証拠

## 規律2: 材質ファースト

色コード（トークン値）より先に**質感ワード**を決め、そこから影・ハイライト・彩度を導く。

- 質感ワード例: マット / 光沢 / 紙 / ガラス / 水彩 / 金属 / 布
- 質感とコンセプトの整合を検査する（例:「水にとける」のに光沢プラスチックの玉は矛盾。溶けそうな材質＝マット・低コントラストの陰影を選ぶ）
- トークンの色コードだけ渡すと光沢・影の処理はモデルの癖に落ちる。**材質を明示することで癖を上書き**する

### 禁色（材質を壊す値を締め出す）

- **純白（#fff）をハイライトに使わない**: グラデーションの芯を純白にすると鏡面反射＝プラスチック光沢になる。ハイライトは**パレット由来の色付き淡色**（例: 空色の玉なら `#C9E6F4`）
- **純黒（#000 / rgba(0,0,0,…)）を影・文字に使わない**: 影は**パレット由来の有彩色**（例: 紫灰 `rgba(96,84,138,…)`）、文字も色みのある濃色（例: 藍鼠）にする
- **影の色相は画面全体で1系統に統一**する。要素ごとに違うグレーを混ぜると質感がバラけて安っぽくなる

## 規律3: 引き算の規律（あからさま検知の禁止則）

「良質な管理画面」の文法を無自覚に適用しない。既定の禁止則:

- **情報をカードで囲わない**: スコア・ラベル・説明等の静的情報は、タイポグラフィの階層（ラベル小＋値大、字間、余白）だけで見せる。カード＋影で包むのは操作要素（ボタン等）か、本当に区切りが要る場合のみ
- **塗り（solid fill）を持つ要素は1画面に1〜2個まで**: 主CTAに集中させる。全部に色を塗ると全部が沈む
- **汎用UIパターン（角丸カード・ドロップシャドウ・グラデーション）は導出線に載るときだけ**使う。「みんなやってるから」は理由にならない
- プロジェクト固有の禁止則が `project-design-language` にあれば**そちらを優先**する

## 規律4: シグネチャ表現（1つ以上必須）

**テーマ由来の固有表現を、主要インタラクションの描画に最低1つ**入れる。

- 例:「とける」パズル → 落下ピースの下に溶けるような軌跡（ゴーストの帯）を引く
- 装飾ではなく**コンセプトのゲームフィール/操作感への翻訳**であること（規律1の導出線に載ること）
- 静的な飾り（背景パターン等）はシグネチャ表現に数えない。**動き・状態変化・操作応答**に宿らせる
- 入れられなかった場合は「シグネチャ表現なし」と明示して人間に相談する（黙って省略しない）

## 規律5: 効果の序列（影・動き・彩度は状態差にだけ割り当てる）

効果は「意味の割り当て」であって飾りではない。**全要素に同じ効果を貼ると、どの要素にも意味がなくなる**。

- **影の序列＝情報設計**: 影の強さを状態にマッピングする（例: 静止＝極小の接地影のみ / 落下中・フォーカス＝濃い浮遊影）。盤面・背景は静かに沈黙させ、視線が主役に吸われるようにする
- **動きの序列**: 常時アニメーションを全要素に付けない。動くのは**状態が特別な要素だけ**（例: 連結中だけ膨らむ）。「全部動く＝何も特別じゃない」
- **接触の序列**: 要素同士をむやみに密着させない。触れる・重なるのは**それが意味を持つときだけ**（例: とけあった玉だけがセルいっぱいに膨らみ隣と融合する）
- **彩度の序列**: 高彩度は焦点（主役・CTA）にのみ。周辺は淡く減衰させる

### 声量予算（サイズ・太さの抑制）

- 見出し・数値は**必要と感じるサイズ・太さから1段階抑える**（例: display 40px/bold 700 ではなく 26px/medium 500）。静けさ・上品さはサイズの抑制から生まれる
- 「目立たせたい」を大きさ・太さで解決しない。序列（影・彩度・余白）で解決する

## 規律6: 批評ループ（描いて終わらない）

1回描いて提示しない。**描画 → レンダリング → 批評 → 修正**を回してから人間に見せる。

- 正式な批評は `design-critique` に委ねる: **文脈遮断したサブエージェント**（スクリーンショット＋AD宣言のみを渡す）がルーブリックで違和感を言語化し、**must-fix 0 まで反復**（最大3周）
- なぜ自己採点だけではだめか: **作った本人は自分の選択に錨づけされる**。「光沢」と自分で宣言したモデルは光沢の玉を「宣言どおり」としか判定できない。新鮮な目が要る
- 描く側の責務: 修正のたびに**ファイル冒頭コメントへ vN と解消した違和感を記録**する（例: `v4: チカチカの解消 ─ 色面は盤面ひとつに絞る`）。批評ログを成果物に刻み、次の描画の学習材料にする
- 提示前のセルフチェックとしても `design-critique` のルーブリックで敵対的に自問してよい（**1つはNOを探す**つもりで）。ただしそれは代用ではなく予習

---

## 出力フォーマット（アートディレクション宣言）

描く直前に、以下を1ブロックで宣言してから描画に入る:

```
【AD宣言】
- コンセプト一語: {…}
- タグライン: {…}
- メタファーの抽出: {性質1〜2個} → 宿らせ先: {挙動/材質/一点}（それ以外の層は無地）
- 材質: {質感ワード} → 影/ハイライト/彩度の方針
- 禁色の確認: ハイライト={色付き淡色} / 影={統一する色相}（純白・純黒なし）
- 配色: {地色×キーカラーの関係}
- タイポ: {声の質。サイズ・太さは1段階抑えたか}
- 効果の序列: {何が静止し、何が動き、何に影が濃いか＝状態のマッピング}
- シグネチャ表現: {主要インタラクションのどこに何を}
- 禁止則の適用: カード数{n} / 塗り数{n}
```

確定した宣言内容は `project-design-language` の固有値レジストリへ同期する（発酵ループ）。

## よくある落とし穴

- トークン値が揃っているから大丈夫、と**描く瞬間の判断を無自覚に済ませる**（→ 本スキルの存在理由）
- 描き込み量（グラデ・影・3D感）を上げれば良くなると思い込む。**足すほど汎用に近づく**ことが多い。差は引き算と一貫性から生まれる
- メタファーを**全面の見た目に塗る**（テーマパーク化）。「導出できるから入れてよい」ではなく、抽出1〜2個・宿らせ先限定・地は無地（デフォルメの規律）
- SSOTを「写経」して終わる（転記は導出ではない。値の**使い方**にこそ規律が要る）
- v1〜v2で「宣言は守った」と提示してしまう（上位品質は批評反復の回数から生まれる。描いたら必ず一度は絵を見る）
- シグネチャ表現を「あとで入れる」と後回しにして、結局装飾を貼って終わる
- 自己審査を形式的に全部YESにする。文脈遮断の批評（`design-critique`）まで通してから人間に見せる