10. DESIGN.md入門

この章では、AIにデザインルールを伝えるための DESIGN.md について学びます。

DESIGN.md は、サイトやプロジェクトのデザイン方針をMarkdownでまとめたファイルです。

AIにUIを作らせたり、既存デザインに合わせて修正させたりするときに、色、余白、フォント、コンポーネントのルールを伝える資料として使えます。

DESIGN.mdとは

DESIGN.md は、AIにデザインの方向性やルールを伝えるためのMarkdownファイルです。

人間にとってのデザイン仕様書やスタイルガイドのようなものを、AIにも読ませやすい形でまとめます。

たとえば、次のような情報を書きます。

  • ブランドの雰囲気
  • ターゲット
  • カラーパレット
  • タイポグラフィ
  • 余白ルール
  • 角丸や影のルール
  • ボタンの種類
  • カードのデザイン
  • フォームの見た目
  • アニメーションの方針
  • アクセシビリティのルール
  • Do / Don’t

AIは、何もルールを渡さないと、その場で雰囲気を推測してUIを作ります。

DESIGN.md があると、推測ではなくプロジェクトの方針に合わせて作業させやすくなります。

なぜDESIGN.mdが必要なのか

AIにUIを作らせると、ページごとに雰囲気が変わることがあります。

たとえば、次のようなズレが起きやすいです。

  • 色味がページごとに違う
  • 角丸の大きさが統一されない
  • 余白が毎回変わる
  • ボタンの見た目がそろわない
  • カードの影や線の使い方が変わる
  • アニメーションの強さがバラバラになる

AIは、既存のデザインルールを明確に知らないまま作業すると、もっともらしいUIをその場で作ってしまいます。

DESIGN.md を用意すると、AIに「このプロジェクトではこう作る」という基準を渡せます。

DESIGN.mdに書く内容

DESIGN.md には、AIが判断に使える具体的なルールを書きます。

抽象的な言葉だけでなく、できるだけ実装に落とし込める形にします。

DESIGN.mdの構成例
# DESIGN.md

## Brand Overview

このサイトは、初心者向けにWeb制作を学べる教材サイトです。
やさしく、落ち着いていて、信頼できる印象を大切にします。

## Colors

- Primary: #1f5a99
- Text: #2f3137
- Background: #f8f8f6
- Border: #ded8cc

## Typography

- Body: LINE Seed JP
- Code: JetBrains Mono
- Heading weight: 600
- Body weight: 400

## Spacing

- 基本の余白は8px単位
- セクション間は48px以上
- カード内余白は24px

## Components

### Button

- 主要ボタンは塗り
- 補助ボタンは枠線
- 角丸は8pxまで

### Card

- 背景は白または薄い色
- 影は強くしない
- 枠線で区切る

## Do / Don't

### Do

- 読みやすさを優先する
- 余白を広めに取る
- 情報を詰め込みすぎない

### Don't

- 派手なグラデーションを多用しない
- 角丸を大きくしすぎない
- 装飾だけの要素を増やさない

このように、AIがそのまま判断材料にできる粒度で書きます。

ブランドの雰囲気を書く

最初に、サイト全体の雰囲気を書きます。

ブランド概要の例
## Brand Overview

このサイトは、Web制作を初めて学ぶ人のための教材サイトです。
専門的すぎず、でも幼くなりすぎない印象を目指します。
安心感、読みやすさ、実務へのつながりを大切にします。

「おしゃれ」「かっこいい」だけでは、AIの解釈が広くなります。

誰に向けて、どんな印象を大事にするのかを書くと、ブレにくくなります。

色とフォントを書く

色やフォントは、できるだけ具体的に書きます。

色とフォントの例
## Colors

- Primary: #1f5a99
- Accent: #d89b3d
- Text: #2f3137
- Muted Text: #6b6f76
- Background: #f8f8f6
- Surface: #ffffff
- Border: #ded8cc

## Typography

- Body: LINE Seed JP
- Code: JetBrains Mono
- Body size: 18px
- Body line-height: 1.9
- Heading weight: 600

AIに「青系で」と伝えるより、実際の色を渡した方が安定します。

コンポーネントのルールを書く

ボタン、カード、フォームなど、よく使うUIのルールも書きます。

コンポーネントルールの例
## Components

### Button

- Primaryは背景色をPrimaryにする
- Secondaryは枠線だけにする
- 高さは44px以上
- アイコンだけのボタンにはaria-labelを付ける

### Form

- labelは必ず表示する
- エラー文は入力欄の下に出す
- 必須項目は視覚的にわかるようにする

コンポーネントごとのルールがあると、AIが新しいUIを作るときも既存デザインに合わせやすくなります。

DoとDon’tを書く

AIには、やってほしいことだけでなく、やってほしくないことも伝えます。

Do / Don'tの例
## Do / Don't

### Do

- 文章を読みやすくする
- 余白を一定のルールで取る
- ユーザーが次に取る行動をわかりやすくする

### Don't

- 装飾だけの要素を増やさない
- テキストを画像化しない
- hover前提の操作だけにしない
- コントラストが低い配色にしない

Don’tがあると、AIが避けるべき方向を判断しやすくなります。

Web制作での活用例

DESIGN.md は、次のような場面で使えます。

  • LPのデザインルール作成
  • サイト全体のトーン統一
  • CursorにUI実装させる前提資料
  • クライアントごとのデザイン方針整理
  • 既存サイト改修時の基準作成
  • デザインカンプがない案件での方向性整理

特に、AIに複数ページを作らせる場合は、DESIGN.md があるとページごとの見た目のズレを減らせます。

AIへの渡し方

AIに作業を依頼するときは、DESIGN.md を読ませたうえで、作業範囲を指定します。

DESIGN.mdを使った依頼
まず DESIGN.md を読んで、このサイトのデザインルールを理解してください。

そのルールに合わせて、トップページのカード一覧セクションを実装してください。

条件:
- 既存の色と余白ルールに合わせる
- カードの角丸は8pxまで
- 装飾を増やしすぎない
- スマホでは1カラムにする

ルールを読ませても、AIが完全に守るとは限りません。

修正後は、差分と見た目を確認します。

この章のまとめ

  • DESIGN.md は、AIにデザインルールを伝えるためのMarkdownファイル
  • 色、フォント、余白、コンポーネント、Do / Don’tを書く
  • AIの出力ブレを減らし、サイト全体のトーンをそろえやすくする
  • 抽象的な雰囲気だけでなく、具体的な数値やルールを書く
  • 実装後は差分と見た目を確認し、必要に応じて更新する