テイストはインフラである

エージェントは数分で機能的なインターフェースを構築できます。正しいHTML、有効なCSS、動作するインタラクティビティ。出力はあらゆる自動チェックを通過します。しかし、2019年の委員会がデザインしたかのような見た目になるのです。

問題は能力ではありません。エージェントは指示されたあらゆるレイアウト、配色、タイポグラフィの組み合わせを生成できます。問題は、それを逐一指示しなければならないことです。エージェントには「何が美しいか」という意見がありません。デフォルトに頼ります——システムフォント、均等なスペーシング、無難な色、すべてセンター揃え。出力は動きます。しかし、熟慮された印象を与えません。

これがテイストギャップです。機能的であることと優れていることの距離。正しいことと熟慮されていることの距離。バリデーションを通過するインターフェースと、デザイナーが敬意を払うインターフェースの間にある溝です。

テイストはプロンプティングではスケールしません。あらゆるプロンプトにあらゆる美的判断を記述することは不可能です。「プロフェッショナルに見せて」ではジェネリックな出力になります。「セクション間隔は本文フォントサイズの1.5倍、InterとSource Serif Proを組み合わせ、セカンダリテキストのコントラスト比は4:1で」と指定すればより良い出力になりますが、すべての判断を自分で下すことになり、エージェントを使う意味がなくなります。これは私のテイストインフラ論の一部です——品質システムは語るのではなく、エンコードしなければなりません。

テイストはインフラになったとき、スケールします。

テイストの正体

テイストとは、美的品質に対するパターン認識です。何千ものレイアウトをレビューしてきたデザイナーは、何が機能するかについて直感を培います——どのフォントの組み合わせが緊張感を生むか、どのスペーシング比がバランスよく感じられるか、どの色彩配分が視線を誘導するか。この直感は神秘的なものではありません。統計的なものです。これは私の品質哲学と同じ洞察です——クラフトは魔法ではなく、何が機能するかについての蓄積されたエビデンスなのです。デザイナーは十分な優れた作品を見てきたからこそ、それを優れたものにするパターンを認識できるのです。

パターンは構造的であるがゆえに学習可能です。タイポグラフィの慣例、スペーシング比、色彩の関係性、階層の深さ、コンポーネントの構成ルール。これらは恣意的な好みではありません。あらゆるデザイン領域で繰り返し現れる知覚的問題に対する解決策です。見出しは本文と視覚的に区別される必要があります。カードには余白が必要です。カラーパレットにはドミナント、セカンダリ、アクセントが必要です。具体的な値は異なりますが、構造的な関係性は一貫しています。

パターンが構造的で一貫しているならば、プロフェッショナルな作品から抽出し、クエリ可能な形式でエンコードし、生成時にエージェントが適用できるはずです。

LICAの洞察

ある研究チームが、1,550,244の多層グラフィックデザインコンポジションを構造化されたJSONレイヤーツリーとしてデータセット化しました。¹ 画像ではありません。ピクセルでもありません。すべてのデザイン判断がクエリ可能なフィールドとなったJSONオブジェクトです——フォントファミリー、フォントサイズ、行間、字間、色、位置、不透明度、Zオーダー、親子関係。

このデータセットには、20のデザインカテゴリにわたる971,850のユニークテンプレート、2,700の異なるフォントファミリー、そしてコンポーネントごとのキーフレームデータを持つ27,261のアニメーションレイアウトが含まれています。各コンポジションは型付きコンポーネント（テキスト、画像、ベクター、グループ）のツリーであり、要素ごとにリッチなメタデータが付与されています。

ここでの洞察は、デザイン判断がピクセルではなくデータとして表現されたとき、テイストは計算可能になるということです。ソーシャルメディアレイアウトの見出しにプロフェッショナルがどのフォントサイズを使うかを分析するのに、コンピュータビジョンは不要です。データベースにクエリすればよいのです。

3つのレイヤー

テイストをインフラにエンコードするには、3つのレイヤーが必要であり、それぞれが前のレイヤーの上に構築されます。

レイヤー1：デザインナレッジグラフ。 プロフェッショナルなレイアウトツリーを解析し、クエリ可能なデータベースにします。フラットな統計ではなく、関係性です——デザイナーが48pxの太字サンセリフ見出しを使うとき、本文に何を組み合わせるか？ 親子コンポーネント間にはどのようなスペーシング比が現れるか？ ポスターレイアウトとソーシャルメディアレイアウトは構造的にどう異なるか？ 出力はクエリ可能なデータベースです——「32pxのサンセリフ見出しに対して、プロフェッショナルなレイアウトではどのような本文プロパティが使われているか？」

レイヤー2：レイアウトエンベダー。 Apple Siliconで学習された小規模モデルで、レイアウトのコンポーネントツリーを受け取り、ベクトル埋め込みを生成します。学習にはコントラスティブラーニングを使用します——実際のプロフェッショナルレイアウトをポジティブ例、摂動を加えたレイアウト（ランダム化されたスペーシング、入れ替えられたフォント、崩れた階層）をネガティブ例とします。モデルはプロフェッショナルなレイアウトがクラスター化し、崩れたレイアウトが遠くに位置する埋め込み空間を学習します。エージェントがレイアウトを生成したら、それを埋め込み、最も近い5つのプロフェッショナルレイアウトを見つけます。すべてから遠ければ、何かが間違っています。

レイヤー3：テイストレフェリー。 Claudeがエンベダーの出力、最も近いプロフェッショナルレイアウト、関連するナレッジグラフのパターンを読み取ります。プロフェッショナルな先例に基づいた判断を出力します——「このスペーシングは違和感がある」ではなく、「このカテゴリのプロフェッショナルレイアウトではセクション間隔に本文フォントサイズの1.5倍を使っていますが、あなたのは0.8倍です」という形です。

サービングパターンはセマンティック検索と同一です——クエリを埋め込み、ベクトルインデックスで最近傍を見つけ、構造化されたコンテキストを返す。インフラは同じで、ドメインが異なるだけです。

統計だけでは不十分な理由

150万レイアウトにわたるフォントサイズの頻度分布は、何が一般的かを教えてくれます。何が優れているかは教えてくれません。最も人気のあるフォントの組み合わせは、最良の組み合わせではありません。最も無難な組み合わせです。頻度統計を持つエージェントは中央値の仕事をします。中央値はテイストではありません。

テイストには、あるデザイン判断がなぜそのコンテキストで機能するかの理解が必要です。すべてのコンテキストにわたってどれだけ頻繁に出現するかではありません。48pxの太字サンセリフ見出しがポスターレイアウトで機能するのは、視認距離が大きく、階層が即座に判読可能である必要があるからです。同じ見出しをモバイルカードレイアウトに使えば、圧迫感を与えるでしょう。頻度統計ではこの文脈的推論を捉えることはできません。特定カテゴリにおいてプロフェッショナルレイアウトと摂動版の違いを学習するコントラスティブモデルなら可能です。

コントラスティブアプローチはネガティブスペースも扱えます。プロフェッショナルなレイアウトは、しばしば何を省いたかによって機能します——リズムを生む余白、そこに存在しない要素。頻度統計は存在するものをカウントします。コントラスティブモデルは、不在の構造も含めた全体構造から学習するのです。

競争優位としてのテイスト

AIエージェントでインターフェースを生成するすべてのチームが、同じテイストギャップに直面しています。あらゆるエージェントのデフォルト出力は、同じジェネリックな美観です。このギャップを最初に埋めたチームが、同じスピードで目に見えて優れた成果を出すことになります。私が繰り返し立ち返る原則は、品質だけが変数であるということ——スピードとコストはその中で作業する定数であり、引くべきレバーではありません。

このギャップはより良いプロンプティングでは埋まりません。より良いモデルでも埋まりません。モデルは推論、コード生成、指示追従において向上します。美的判断においては向上しません。なぜなら、美的判断はトレーニング目標に含まれていないからです。次のトークンを予測するよう学習されたモデルは、最も確率の高い出力——すなわち美観の中央値——に収束します。

ギャップが埋まるのはインフラによってです——プロフェッショナルなデザイン判断をエンコードするデータセット、構造的品質を学習するモデル、エージェントの出力をプロフェッショナルな先例に基づいて評価するレフェリーシステム。レフェリーパターンはエビデンスゲートを美学に適用したものです——コードレビューを駆動するのと同じ原則を、異なるドメインに適用しただけです。このインフラを構築したチームは、プロジェクトを重ねるごとに優位性を複利的に拡大します。ナレッジグラフが成長し、エンベダーが改善され、レフェリーがより精密になるからです。

これは複合コンテキストをデザインに適用したものです。分析されたプロフェッショナルレイアウトの一つ一つがパターンを蓄積し、各パターンが次の生成をより良くします。デザイン知識のポートフォリオは最初はゆっくり成長し、やがてあなたの出力が他の誰とも違って見える理由そのものになるのです。

FAQ

これはデザインシステムと同じではないのか？

デザインシステムはトークンとコンポーネントを定義します。テイストインフラは、それらのトークンとコンポーネントを使ったコンポジションが美的に成功しているかどうかを評価します。デザインシステムはどの色を使うかを教えてくれます。テイストインフラは、その色の組み合わせ方が機能しているかどうかを教えてくれます。制約とブルータリズムにおける美の関係については、別の記事で探求しています。

150万レイアウトが必要なのか？

いいえ。LICAデータセットの全体は150万コンポジションですが、公開されているサブセットは完全なJSONツリーを持つ1,183レイアウトです。特定のドメイン（ソーシャルメディア、プレゼンテーション、ドキュメント）に集中するなら、意味のあるパターンを抽出するには十分です。分析するレイアウトが増えるたびに、ナレッジグラフは成長していきます。

小規模モデルで本当にテイストを学習できるのか？

モデルはデザインを生成する必要はありません。プロフェッショナルなレイアウトと摂動を加えたレイアウトを区別できればよいのです。これは生成タスクではなく、分類/埋め込みタスクです。構造化されたコンポーネントツリーに対してコントラスティブラーニングで学習された2〜5Mパラメータのモデルで、最近傍による品質評価には十分です。

レフェリーはどのように機能するのか？

Claudeは3つの入力を読み取ります——エージェントが生成したレイアウト（スクリーンショットではなく構造化データとして）、エンベダーからの最も近い5つのプロフェッショナルレイアウト、そしてナレッジグラフからの関連パターンです。プロフェッショナルな先例に基づいた具体的な修正を出力します。レフェリーは、生成されたレイアウトとプロフェッショナルリファレンスセットの間のギャップについて推論します。このアプローチには批判的でありながら優しいフィードバックが求められます——何が間違っているかについては正確に、どう修正するかについては建設的に、そして試みそのものを決して否定しない姿勢です。

ソース