title: 「デザインの良し悪し」を機械で判定する。床（決定的ゲート）と天井（審美）を分ける
tags: [デザイン, AI, ClaudeCode, デザインシステム, アクセシビリティ]
private: true

AI に広告のラフ（コンプ）やスライドを作らせると、出来上がりを見て「なんか違う」と感じることがあります。色が薄くて読めない、見出しと本文の差がなくて平板、文字が断ち切り線ギリギリ。こういう「破綻」は、実は機械で YES/NO 判定できるものが多い。一方で「美しいか」「視線が気持ちよく流れるか」は機械では決められない。

この記事は、デザインの質を 床（機械判定できる最低ライン） と 天井（人の審美判断） に分け、床だけを決定的なゲートで固める考え方と、その床を自分で学んで広げる仕組みを整理します。コードを書かせるループで言う「テストという砦」を、デザインに持ち込む話です。

床と天井

ソフトウェアの自己検証ループでは、LLM の甘い自己採点を pytest や tsc --noEmit のような決定的ゲートで縛ります（モデルが言い逃れできない自動判定＝砦）。デザインにも同じ砦が作れる部分があります。

床（FLOOR）= 決定的ゲートにできる: コントラスト、文字サイズの階層（ジャンプ率）、はみ出し、印刷のセーフエリア、行の長さ、余白のグリッド。いずれも数値で YES/NO が引ける。
天井（CEILING）= 人/審美に残す: 整列の妙、近接によるグループ感、配色の調和、視線誘導（Z/F）、構図のバランス。文脈と意図に依存し、幾何だけからは決まらない。

床を機械で固めると、「破綻ゼロ」までは自動で保証できる。その上に人（あるいは審美を見る別の判定者）が乗る。床は機械、天井は人、という役割分担です。

床にできた判定の例

実際に決定的ゲート化できたもの（opt-in で、基準を満たす key があるときだけ走る形）:

{
  "canvas": { "width": 1080, "height": 1080 },
  "required_text": ["お問い合わせ", "0120-000-000"],
  "contrast_min": 4.5,          // WCAG コントラスト比
  "min_jump_ratio": 2.5,        // 見出し/本文のサイズ比（階層の強さ）
  "max_colors": 6,
  "grid_unit": 8,               // 余白は 8 の倍数（8ポイントグリッド）
  "max_line_em": 40,            // 1 行の長さ（可読性）
  "safe_area_px": 20            // 印刷セーフエリア（5mm 相当）
}

コントラスト: WCAG 2.x の相対輝度比。#999 の文字が薄すぎれば落ちる。透明度（opacity）やグラデーション背景も畳み込んで判定する。
ジャンプ率: 見出しと本文のサイズ比。本文＝「最も文字数を占めるサイズ」を基準にし、全部同じサイズの平板なデザインを弾く。デザイン教材で「150〜200%」とされる階層づけの数値版です。
行の長さ（measure）: 1 行の幅 ÷ フォントサイズ（em）。長すぎる行は次の行頭を見失う。WCAG 1.4.8 は 1 行 80 字（日本語など 40 字）以下を推奨していて、どちらも実は 約 40em に収束します（日本語は全角＝約 1em、欧文は約 0.5em なので、字数が半分でも幅は同じ）。だから 1 つの閾値で両言語を見られる。
8ポイントグリッド: 余白（margin/padding/gap）を 8 の倍数で統一する Material Design / Apple HIG 由来の規律。宣言された 余白値だけを見るので、コンテンツで決まる高さ（テキストの行数で変わる）を誤検知しない。

仕組み：床を「自分で学んで」広げる

最初から全部のゲートを思いつけるわけではない。そこで、デザインの基礎を学ぶたびに床を 1 段広げる反復ループを組みました。

1. 何を学ぶかを、漏れなく自動で選ぶ

学ぶ対象を思いつきで選ぶと体系に穴が空く。そこで美大のグラフィック/視覚伝達デザインのカリキュラム（武蔵野美術大学、多摩美術大学、RISD、SVA、バウハウス由来の基礎造形）を参照して、網羅的なトピック表を作り、未習得のユニットを順に自動選択します（基礎造形 → 色彩 → タイポグラフィ → レイアウト → 製版/DTP → 論）。

2. 二重に接地する：記事（WHAT）＋ GitHub（HOW）

トピックごとに 2 つの源で裏を取る。

解説記事 = WHAT（原則そのもの）: 何が原則で、なぜ効くか、具体値（ジャンプ率 150〜200%、配色比 70:25:5 など）。
GitHub = HOW（先行実装）: その原則がどう機械化されているか。コントラストなら WCAG 相対輝度、余白なら 8pt グリッドのトークン。独立した実装が複数あれば「床にできる」強い兆候。記事にしか無く実装が見当たらなければ「天井寄り」の兆候。

両方の裏付けが無い主張はゲートにしない。思いつきで床を作らないための歯止めです。

3. 床候補は「別系統のAI」で敵対的に検証する

実装した人（私）が自分で「OK」と言うと甘くなる。そこで builder ≠ checker：実装は一方のモデル、検証はもう一方（別ベンダーの AI）に欠陥探しをさせる。指摘を裏取りして直し、合格するまで回す。同じモデル同士だと同じ盲点を共有するので、系統を跨ぐのが肝です。

一番面白かったのは「機械化できないことの確定」

このループで最大の収穫は、新しいゲートが増えたことではなく、何が機械化できないかが判別できたことです。

整列（alignment）は天井。「左端がほんの数 px ズレている」を検出するゲートを作って、別系統 AI に 8 ラウンド検証させたら、毎回別の構成で穴が見つかった。中央寄せの一点物、同じ位置にズレた 2 要素、padding と手動オフセットの区別、不可視ラッパー、ルート要素の padding……。要するに左端整列はレンダリング後の幾何だけからは決定不能で、どの定義にも裏の穴がある。だから潔く捨てて天井に戻した。
行の長さ（measure）は床。同じく多ラウンド指摘が出たが、こちらは固定高さの箱、段組、上付き文字、transform:scale といった個別のバグで、直すと固定する。WCAG という健全な核があるので収束した。

ここから 1 つの判別法が出ます。別系統 AI に何ラウンド検証させても穴が出続けるとき、核が健全なら収束し、核が不能なら収束しない。収束しなければ、それは床ではなく天井。

「信頼できない床」を出荷するくらいなら、ゲートが無いほうがましです（false な安心は害になる）。だから収束しないものは捨てて、台帳に「なぜ機械化できないか」を 1 行残し、二度と蒸し返さない。

まとめ

デザインの質は 床（機械判定 YES/NO に接地できる） と 天井（審美・文脈・意図） に分かれる。
床にできたのは、コントラスト・ジャンプ率・行の長さ・8ポイントグリッド・セーフエリア・はみ出し・パレット数など。
できなかったのは、整列・近接・配色の調和・視線誘導・構図のバランス。「全部機械化」は誤りで、YES/NO に接地できるものだけが床になる。
床を広げる仕組みは、カリキュラム接地でトピックを漏れなく選び、記事(WHAT)＋GitHub(HOW)で二重接地し、別系統 AI で敵対的に検証して採否を決める。
床をどれだけ広げても、審美の天井は人（か審美を見る判定者）に残る。機械は「破綻ゼロの床」までを保証する道具です。

デザインに限らず、「品質を機械で担保したい」とき、まず何が YES/NO に落とせて、何が落とせないかを仕分けるのが出発点になります。落とせるものは決定的ゲートで固め、落とせないものは正直に人へ。その境界線こそが設計の本体だと思います。

参考

WCAG 2.1 Understanding SC 1.4.8 Visual Presentation（1 行の長さ「no more than 80 characters or glyphs (40 if CJK)」） https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html
8ポイントグリッド / 余白の設計（Material Design・Apple HIG の系譜） https://www.designsystems.com/space-grids-and-layouts/
デザインの4原則 / 視線誘導（N・F・Z） https://321web.link/design-4principles/ , https://321web.link/readers-pattern/
ジャンプ率 https://dezasuta.com/columns/jump-rate/
配色 70:25:5 https://www.furi-ten.com/color-combinations-3-colors-70-25-5-rule/
CRAP 原則 https://designlab.wisc.edu/resources/design-tips-and-tricks/crap-principles/
美大カリキュラム参照: 武蔵野美術大学視覚伝達デザイン学科 / 多摩美術大学グラフィックデザイン学科 / RISD BFA Graphic Design / SVA BFA Design