デザインの科学をAIに渡したら、10分でプロ品質のLPができた
Claude Codeに「LP作って」と言ったら、素人っぽいものが出てきた経験はありませんか。原因はセンスの不足ではありません。AIに「設計書」を渡していないからです。
この記事は**全文無料（期間限定）**で閲覧できます。
見出し画像はAIで生成しました。 プロンプトは100,000文字超えの記事に掲載中。
https://note.com/kawaidesign/n/n09dd9fcc4810
デザインは科学——数値で定義できるルールの集合体
「良いデザインにはセンスが必要」。
これは間違いです。
デザインには、再現可能な科学的ルールが存在します。
以下の4つを知っているだけで、デザインの判断基準が根本的に変わります。
-
Fittsの法則
ターゲットが大きく・近いほど、人はクリックしやすい。ボタンを大きくすべき科学的根拠です
ゲシュタルトの法則（近接） 近くにある要素は同じグループに見える。余白の設計に直結します
F字視線パターン 人は画面を左上→右→左下へF字型に読む。重要情報の配置位置を決める根拠です
コントラスト比 4.5:1 WCAG AA基準。これを下回ると文字が読みにくくなる。国際規格で定められた数値です
全部、数値で定義されています。センスではありません。良いデザインとは、これらのルールに従っているデザインのことです。
つまり——ルールを知っていれば、誰でも再現できます。
【「何に使えばいいの？」が消える40分】 プロのClaude Code仕事場、全部見せます
先着100名限定ウェビナー 詳細はこちら↓
https://note.com/kawaidesign/n/n9e876b925b37
AIは設計書がないと「無難」を出す
ルールを知ったところで、AIに直接「LP作って」と伝えてもプロ品質は出ません。
AIは設計書がないとき、学習データの中で最も出現頻度が高いデザインを出力します。統計的に最も平均的な見た目——つまり、誰のブランドも体現していない、最も記憶に残らないデザインです。
毎回のプロンプトで「色はこれ、フォントはこれ、余白はこれ」と書いている人も多いでしょう。しかしそれは、設計書がないことの代償として毎回同じ作業を繰り返しているだけです。
設計書を1回書けば、AIが毎回自動で読みます。プロンプトは「LPを作って」の6文字で済みます。
DESIGN.md〜AIに渡すデザイン設計書〜
その設計書がDESIGN.mdです。
DESIGN.mdはGoogleが提唱したAI向けデザイン設計書のフォーマットです。2026年3月のGoogle Stitch 2.0アップデートでネイティブ対応されました。
https://note.com/kawaidesign/n/nbf90149e30db
特徴は以下の通りです。
テキストファイル（.md）なのでFigma不要
9つのセクションで構成
GitHubでバージョン管理・PRレビューが可能
Claude Code、Gemini、Cursor——どのAIツールにも渡せる
Figmaで作ったデザインシステムとの最大の違いは、AIが直接読めることです。FigmaはAIがそのまま読めません。DESIGN.mdは読めます。
https://note.com/kawaidesign/n/n146f759c5343
9セクション構造
-
Visual Theme & Atmosphere — 全体の世界観
Color Palette & Roles — 色と役割
Typography Rules — フォントと文字サイズ
Component Stylings — ボタン・カード等のスタイル
Layout Principles — 配置のルール
Depth & Elevation — 影・奥行き
Do’s and Don’ts — やること・やらないこと
Responsive Behavior — スマホ対応
Agent Prompt Guide — AIへの指示方法
ただし、最初から9セクション全部を書く必要はありません。
Color Palette & Roles、Typography Rules、Component Stylings の3セクションだけで、十分な品質が出ます。
最小版サンプル
`## Color Palette & Roles
- Primary: #1A73E8 （メインCTA・リンク）
- Background: #FFFFFF
- Text: #202124
- Accent: #EA4335 （警告・強調）
Typography Rules
- Font: Noto Sans JP
- Base size: 16px
- Line height: 1.75
- Heading: Bold、H1=32px、H2=24px、H3=20px
Component Stylings
- Button: 角丸8px、padding 12px 24px、最小横幅 120px
- Card: 角丸12px、shadow 0 2px 8px rgba(0,0,0,0.08)
- Input: border 1px solid #DADCE0、角丸4px` 重要なルールが1つあります。このファイルに書いていいのは、数値と固有名詞だけです。
NG 「おしゃれな感じ」「細くて読みやすいフォント」
OK 「#1A73E8（Googleブルー）」「Noto Sans JP Regular、16px、行間1.75」
曖昧な言葉はゼロ。これがデザインを科学として扱うということです。
Claude Code × DESIGN.md 実践フロー
DESIGN.mdを書いたら、次の3ステップで動きます。
ステップ1: CLAUDE.mdに命令を追記
プロジェクトのCLAUDE.mdに以下を追記します。
`## デザインルール
- UIを実装する際は、必ずDESIGN.mdを参照すること
- DESIGN.mdに定義されていない色・フォント・余白を独自に追加しないこと
- ボタンのスタイルはComponent Stylingsの定義に従うこと` これでClaude Codeは毎回DESIGN.mdを自動で読みます。プロンプトに毎回指定する必要はありません。
ステップ2: LPを生成
プロンプトはこれだけです。
「DESIGN.mdを読んで、サービス紹介のLPを作ってください。セクション構成：ヒーロー・特徴3点・CTA」
色・フォント・余白の指定はゼロ。DESIGN.mdが全部引き受けています。出力されたLPのコントラスト比を確認すると、WCAG AA基準の4.5:1をクリアしています。
ステップ3: 数値で育てる
修正も数値で指示します。
「CTAボタンのサイズを48px以上にしてください」（Material Designタッチターゲット推奨値）
「セクション間の余白を80pxに統一してください」
「ヒーローのコントラスト比を4.5:1以上にしてください」（WCAG AA基準）
「なんかボタンが小さい気がする」「なんか読みにくい」というセンスの言葉は不要です。数値を知っていれば、正確に指示できます。
別ページへの展開
同じDESIGN.mdを持ったまま、別のページを作れます。
「同じDESIGN.mdで、お問い合わせフォームのページを作ってください」
LPと同じ色、同じフォント、同じ余白感。プロンプトは1行。5ページ作っても、全部同じトーンになります。これが設計書を持つことの本当の価値です。
無難を超える——Frontend Design Plugin
DESIGN.mdで9割は解決します。
しかし残り1割——AIがDESIGN.mdに書かれていない部分を判断するとき、統計的に最も無難な選択をする問題が残ります。
これを突破するのが、Anthropic公式のFrontend Design Pluginです。
https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design
Claude Codeに審美的な指示を与えるためのファイルで、以下のような指示が含まれています。
「大胆なタイポグラフィを使え。システムフォントのデフォルトを使うな」
「色は単調にするな。階調と深みを出せ」
「レイアウトは非対称を恐れるな。動きと緊張感を作れ」
「Googleのデフォルトスタイルを使うな」
DESIGN.mdで科学を渡し、Frontend Design Pluginで審美性を渡す。この2層で、初心者がプロ品質を超えられます。
まとめ——明日やる1つのこと
デザインはセンスではなく科学です。再現できます。
必要なものは4つだけです。
DESIGN.md — デザインの科学を書いた設計書
CLAUDE.md — 「DESIGN.mdを必ず読め」という命令書
Claude Code — 会話でWebサイトを作るツール
Frontend Design Plugin — 審美性の指示
明日やることは、2つのうち1つだけ選んでください。
A: DESIGN.mdの最小3セクション（色・フォント・ボタン）を書いて、Claude Codeに渡してみる
B: 既存のClaude Codeプロジェクトに、DESIGN.mdを追加して再生成する
DESIGN.mdに科学を書いて、Claude Codeに渡す。それだけです。
【「何に使えばいいの？」が消える40分】 プロのClaude Code仕事場、全部見せます
先着100名限定ウェビナー 詳細はこちら↓
https://note.com/kawaidesign/n/n9e876b925b37
noteメンバーシップに参加すると700本以上の記事が読み放題です。
https://note.com/kawaidesign/membership
Claude Code 法人研修 無料相談はこちら
https://docs.google.com/forms/d/e/1FAIpQLSddjlWNKFU6gMm7GrK0o8E5OJlvwkxxYDSontP_eHgbkJBXvw/viewform
書籍「AIでゼロからデザイン」好評発売中
https://www.amazon.co.jp/dp/4798193429
お問い合わせ・個別相談・法人研修のご依頼などはこちら
https://kawai-official.pages.dev/
#AI #生成AI #AIエージェント #AI時代 #AI活用 #AI人材 #AI研修 #AIツール #デザイン #デザイナー