AI時代のデザイン新常識：DESIGN.mdとは？書き方も解説

Web
|Fumi Nozawa

UIデザインの一貫性を保つことは、従来のプロジェクト運営において常に課題でした。色やフォント、コンポーネントのスタイルなど、視覚的な要素はFigmaやブランドPDF、あるいはデザイナーの頭の中に存在します。しかし、AIエージェントがそれを理解することはできません。ここで登場するのが DESIGN.md です。

DESIGN.mdとは？

DESIGN.mdは、プロジェクトのデザインルールを記述するテキストベースのデザインシステム文書です。人間もAIも読み書きでき、生成されるUIに一貫性を与えます。

ファイル読む人定義する内容
README.md人間プロジェクトの概要
AGENTS.mdコーディングエージェントプロジェクトの作り方
DESIGN.mdデザインエージェントプロジェクトの見た目・感触
← Scroll horizontally →

DESIGN.mdがもたらすメリット

DESIGN.mdを用いることで、デザインエージェント（例：Stitch）が生成する画面は、すべて同じビジュアルルールに従います。カラー、タイポグラフィ、コンポーネントパターンが統一され、画面ごとにバラバラだったUIが「まとまりのある体験」に変わります。
さらにDESIGN.mdは静的な設定ファイルではなく、デザインとともに進化する生きたドキュメントです。エージェントが生成し、あなたが微調整し、画面に再適用して改善していきます。

DESIGN.mdの作り方

1. エージェントに生成させる

StitchなどのAIにプロンプトを与えるだけで、自動的にデザインシステムを生成しDESIGN.mdにまとめられます。

例プロンプト

Code
遊び心のあるコーヒーショップの注文アプリ。温かみのあるカラー、角丸デザイン、フレンドリーな雰囲気

→ AIが色、タイポ、コンポーネントスタイルを解析しDESIGN.mdとして出力

2. 既存ブランドから派生

ブランドサイトや画像を提供すると、AIがカラーパレットやタイポグラフィ、スタイルパターンを抽出してDESIGN.mdを作成します。

3. 手動で作成

高度なユーザーは、Markdown形式で直接DESIGN.mdを書き、詳細なデザイン指針を指定できます。特別なツールや構文は不要です。

DESIGN.mdの例 (Eng）

Code
# Design System

## Overview
A focused, minimal dark interface for a developer productivity tool.

## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#475569): Supporting UI, chips, secondary actions
- **Surface** (#0b1326): Page backgrounds
- **On-surface** (#dae2fd): Primary text on dark backgrounds
- **Error** (#ffb4ab): Validation errors, destructive actions

## Typography
- **Headlines**: Inter, semi-bold
- **Body**: Inter, regular, 14–16px
- **Labels**: Inter, medium, 12px, uppercase for section headers

## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, only for the most important action
- Don't mix rounded and sharp corners in the same view
- Do maintain 4:1 contrast ratio for all text

DESIGN.mdの例 (日本語だとこんな感じ）

Code
# デザインシステム

## 概要
開発者向けの生産性アプリのための、集中できるミニマルなダークテーマUI。
シンプルなライン、視覚ノイズを抑え、高情報密度を実現。

## カラー
- **プライマリ** (#2665fd)：主要なCTA（行動喚起）、アクティブ状態、重要な操作
- **セカンダリ** (#475569)：補助的なUI、チップ、二次的アクション
- **サーフェス** (#0b1326)：ページ背景
- **オン・サーフェス** (#dae2fd)：暗背景上の本文テキスト
- **エラー** (#ffb4ab)：入力エラー、削除などの危険操作

## タイポグラフィ
- **見出し**：Inter、セミボールド
- **本文**：Inter、レギュラー、14〜16px
- **ラベル**：Inter、ミディアム、12px、セクションヘッダは大文字

## コンポーネント
- **ボタン**：角丸（8px）、プライマリはブランドブルーで塗りつぶし
- **入力欄**：1pxのボーダー、控えめなサーフェスバリアント背景
- **カード**：影なし、ボーダーと背景コントラストで視覚的区切り

## Do's and Don'ts
- プライマリカラーは最も重要なアクションにのみ使用
- 角丸と角ばった形を同一画面で混在させない
- テキストはすべて4:1以上のコントラスト比を維持

このDESIGN.mdを読み込むことで、AIエージェントは次に生成する画面もこのルールに従って設計されます。

DESIGN.mdは、デザインの一貫性をAIと人間で保つための新常識です。従来のFigmaやPDFだけでは実現できなかった、「AIが理解できるデザインの共通言語」を提供します。

この記事をシェア

Fumi Nozawa

Fumi Nozawa

デジタルマーケター & ストラテジスト

Paul Smith、Boucheronといったグローバルブランドでデジタルマーケティングを担当。現在は海外を拠点に、戦略設計からWeb実装までを牽引。マーケターとしての視点とテクノロジーへの理解を活かし、欧米企業の日本進出やブランド成長を支援しています。

日本進出支援日本企業の海外進出支援Web開発デジタル体験ブランド戦略デジタル広告

プロジェクトの相談、その他ご相談など、 お気軽にお問い合わせください。

お問い合わせはこちら→

他の記事も読む

←すべての記事に戻る