DESIGN.mdでモバイルアプリのデザインルールをAIに伝える

モバイルアプリのデザインをAIに作らせるとき、最大の課題は「AIが本当に自分たちのデザイン規則を理解しているのか」という不安です。色は指定通りか、フォントサイズは合っているか、余白は統一されているか——こうした細部まで AIが忠実に再現できたら、手直しの時間が劇的に減ります。

Googleが公開した DESIGN.md というオープンソース形式を使うと、この問題が解決します。これはシンプルなマークダウン形式で、アプリのデザイン規則をAIにもわかるように記述する仕組みです。

DESIGN.mdってなに？

DESIGN.mdは、Googleが設計したドキュメント形式です。Apache 2.0ライセンスで公開されており、誰でも自由に採用できます。

基本的な考え方は、ブランドガイドラインやデザインシステムをマークダウンで書いて、AIツール（Rorkなど）に読ませることで、生成されるUIが一貫したデザインに従うようにするというもの。公式のFigmaやAdobeのデザインツール同様、「この色はどんな場面で使う」「このフォントは見出しに限定」といったルールを明文化できます。

なぜモバイルアプリに有効なのか

モバイルアプリ開発では、デザインの統一性が特に重要です。複数の画面で同じボタンなのに色が違う、同じテキストサイズなのに行間がバラバラ——こうした不統一は、アプリを未完成に見せてしまいます。

DESIGN.mdを使うと、

色トークン: プライマリカラー、セカンダリカラー、エラーカラー等を定義
タイポグラフィ: 見出し用、本文用、キャプション用フォントを区別
余白・グリッド: ボタン間隔、コンテナ内余白の基準を記述
コンポーネント規則: ボタン・カード・入力フィールドの見た目を説明

といった情報を、AIがすぐに参照できる形で用意できます。すると、新しい画面をAIに作らせるときに「DESIGN.mdを参考にして」と指示するだけで、過去の画面と統一されたUIが生成されます。

実装例：シンプルなDESIGN.md

実際に、Rorkを使ったカジュアルなアプリ開発用のDESIGN.mdを書いてみましょう。

# Design Tokens (YAML形式)
colors:
  primary: "#2563EB"      # ブランドブルー
  secondary: "#10B981"    # エメラルドグリーン
  error: "#EF4444"        # 警告レッド
  neutral_light: "#F3F4F6"
  neutral_dark: "#1F2937"
 
typography:
  heading_1:
    font_family: "System Font"
    font_size: "28px"
    line_height: "36px"
    font_weight: "700"
  heading_2:
    font_family: "System Font"
    font_size: "20px"
    line_height: "28px"
    font_weight: "600"
  body:
    font_family: "System Font"
    font_size: "16px"
    line_height: "24px"
    font_weight: "400"
 
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"

そして、各セクションの後に、人間向けの説明を加えます。

## Colors
 
### Primary (#2563EB)
This is our brand blue. Use it for:
- Main action buttons (like "Create", "Save", "Continue")
- Active tab indicators
- Primary links
 
DO NOT use for:
- Error states
- Disabled buttons
- Secondary information
 
### Secondary (#10B981)
Success and positive states. Use for:
- Confirmation messages ("Success!")
- Checkmarks and badges
- Progress indicators (completed steps)
 
### Error (#EF4444)
Use ONLY for error messages and invalid form fields.

AIツールがDESIGN.mdを読む仕組み

Rorkや他のAIツールでは、プロンプト内に DESIGN.mdを貼り付けることで、生成されるUIがそのルールに従うようになります。

使い方:

プロンプト例:
「以下のDESIGN.mdに従って、タスク管理アプリのホーム画面を作成してください。
ボタンはプライマリカラーを使い、見出しはHeading2スタイルで、パディングはmd（16px）を基準にしてください。

[DESIGN.mdの内容をここに貼り付け]

画面仕様:
- 上部に大きな見出し「マイタスク」
- その下にタスク一覧（各項目は16pxのpaddingで囲む）
- 右下に「新規タスク」ボタン（プライマリカラー）
」

このようにDESIGN.mdを明示的に参照させると、AIが色・余白・フォントを「この指定を守らないといけない」と認識し、品質が大きく向上します。

CLIツールで検証する

Google公開のDESIGN.mdエコシステムには、検証ツールも含まれています。

# デザイン仕様の妥当性をチェック
designmd validate design.md
 
# Tailwind CSSの設定に自動変換
designmd export design.md --format=tailwind
 
# W3C Design Tokens Community Group形式に変換
designmd export design.md --format=dtcg

こうしたツールを使うことで、書いたDESIGN.mdが実装可能な形式かどうか、矛盾がないかを事前にチェックできます。

Before/After：AIが生成するUIの差

DESIGN.mdなしでAIに指示した場合と、ありの場合の差を見てみましょう。

Before（DESIGN.mdなし）:

ボタンの色がランダム
フォントサイズが不統一（見出しが16pxだったり32pxだったり）
余白がバラバラ（いちいち手直しが必要）
ブランドの統一感がない

After（DESIGN.md参照）:

すべてのボタンが指定のプライマリカラーで統一
見出しが常に28px、本文が16pxで統一
余白が一貫して16pxベース
複数画面を生成してもデザインの統一性が保たれる

実際に使ってみると、手直し作業が50%以上削減されることが多いです。

始めるなら

チームのデザイン規則を箇条書きにする（色・フォント・余白・ルール）
Googleの公式DESIGN.mdテンプレートを参考に、プロジェクト用に書き換える
design.md ファイルをプロジェクトルートに保存
Rorkにプロンプトを送るときに、DESIGN.mdの内容を貼り付ける
生成されたUIを確認し、必要に応じてDESIGN.mdを微調整

DESIGN.mdは、AIと人間が「同じデザイン言語」で会話するための橋渡しです。最初は手間に見えるかもしれませんが、チーム規模が大きいほど、長期的には大きな時間短縮につながります。

あなたのRorkプロジェクトに、ぜひ DESIGN.mdを導入してみてください。