0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@akihidem

デザインの質を機械で判定する：「床」と「天井」の分け方

0
Last updated at Posted at 2026-07-01

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 に落とせて、何が落とせないかを仕分けるのが出発点になります。落とせるものは決定的ゲートで固め、落とせないものは正直に人へ。その境界線こそが設計の本体だと思います。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?