AIデザイン生成の最適解は？「設計図」と「批評」の比較実験から判明した指示の渡し方
本記事は、AIにウェブサイトのランディングページ（LP）を生成させる際、参照ドキュメントとして「具体的な仕様書（設計図型）」を用いるか、「デザイン思想を解説した分析ノート（批評型）」を用いるかという二つのアプローチを比較した実験結果を報告しています。実験では、架空のAPI監視ツール「Pulse」のLPを題材とし、同じモデル、同じお題、同じ対象サイト（linear.app）を固定し、参照ファイルのみを差し替えてAIに2枚のLPを生成させました。
その結果、全体的な成果物としては、色や寸法、CSSの具体的な仕様（例：8段階のダークグレー色階、`font-feature-settings`など）を詳細に記述した「設計図型」ドキュメントの方が、より明確で技術的に優れた成果物を出しました。AIは、ドキュメントに書かれている「何を使うか」という具体的なトークン情報を実行する能力に優れていることが示されました。
しかし、批評型ドキュメントが優位に立った点も明確に存在しました。それは、単なる仕様の羅列ではなく、「なぜ、いつ使わないか」という判断基準です。例えば、本物のLinearサイトがヒーローセクションに色付きボタンを置いていないという「逆張り」の観察を批評型が提供したため、AIはそれを正確に再現しました。つまり、設計図型は「何を使うか」を教え、批評型は「なぜ・いつ使わないか」という判断力を教えるという本質的な違いが浮き彫りになりました。
筆者は、この二つの形式の利点を統合した「分析＋仕様書」のハイブリッド形式が最も理想的であると結論づけています。これにより、AIに対して「何を」「なぜ」「いつやめるか」という包括的な指示を一度に与えることが可能になります。
背景
AIによるデザイン生成が普及する中で、単に「良いデザイン」という抽象的な指示だけでは、モデルは平均的で汎用的な結果になりがちです。本記事の背景には、AIが具体的なデザインの「良い」の定義を理解し、プロレベルの仕様に基づいたアウトプットを出すための、より高度な参照ドキュメント形式を確立する必要性があります。
重要用語解説
- DESIGN.md: AIへのデザイン指示を目的としたオープンなフォーマット。色、タイポグラフィ、コンポーネントの仕様をトークン表として記述し、AIが機械的に読み取りやすい形式で提供します。
- トークン表: デザインの要素（色、フォントサイズ、余白など）を、具体的なコードや数値（トークン）として定義した表。AIが曖昧な解釈をせず、正確な仕様に基づいて生成することを可能にします。
- 批評型ドキュメント: 単なる仕様ではなく、「なぜこのデザインが良いのか」「この手法が向いていない場面」といった、デザインの意図や制約を言語化した分析ノート形式のドキュメントです。
今後の影響
本知見は、今後のAIを活用したデザインワークフローの標準化に大きな影響を与えます。単一のドキュメント形式に頼るのではなく、技術的な仕様（設計図）と戦略的な判断（批評）を組み合わせたハイブリッドな指示出しが、プロフェッショナルなアウトプットを引き出す鍵となります。