目次
DESIGN.md という画期的な発明
ここ数年、生成AIでWebサイトやUIをつくる流れが一気に加速しました。その中で注目を集めているのが 「DESIGN.md」 という概念です。
DESIGN.md とは、AIに対して「このサービスのデザインはこう作ってほしい」を伝えるための デザインルールブック（Markdown形式） のこと。タイポグラフィ、カラーパレット、UIトークン、余白ルール、アクセシビリティ制約を構造化して記述しておき、AIに渡すだけで、出力されるデザインの一貫性が劇的に向上します。
- ChatGPT / Claude / Gemini / Cursor / v0 など、あらゆるAIに同じ指示書を渡せる
- プロンドのたびに「フォントは…配色は…」と書き直す必要がない
- 人間同士の共通言語にもなる（チーム内・クライアント説明に転用できる）
ひとつのMarkdownファイルでデザインの意思決定を横断的に固定できるこの仕組みは、AIと共にデザインを作る時代における 画期的な発明 だとSNS等で話題になっています。
なお、実際の DESIGN.md は、こんな構造を持っています（抜粋）。
# DESIGN.md — やさしい地域医療クリニック
## 1. Concept & Rationale
高齢者のご利用を想定し、「安心感」「清潔感」「読みやすさ」を
最優先に設計。彩度を抑えた青系を基調とし、視認性と信頼性を両立させる。
## 2. Typography
- 和文: Noto Sans JP（weight 400 / 600）
- 欧文: Inter（weight 400 / 600）
- 見出し weight: 600（bold 700 は使用しない）
- 本文サイズ: 18px（高齢者配慮で標準より大きめ）
- line-height: 1.8（日本語として読みやすい余裕のある行間）
## 3. Color Palette & Variables
--color-primary: #4a7ba8; /* 藍鉄 — 信頼感のある落ち着いた青 */
--color-accent: #7fb2d4; /* 空色 — 補助的な明るいアクセント */
--color-text: #222222; /* 純黒は使わず、わずかに柔らかい黒 */
--color-bg: #ffffff;
--color-surface: #f4f7fa; /* セクション背景 */
## 4. UI Tokens & Spacing
- 角丸: 8px（カード）/ 500px（CTAボタン=ピル型）
- タップ領域: 最小 48px × 48px
- セクション間余白: 80px
## 5. Accessibility Rules
- コントラスト比 7:1 以上（WCAG AAA 目標）
- CUD配慮: 赤と緑のみでの区別禁止、アイコン併用
- リンクは必ず下線を付与
- フォーカスリング（2px solid）を明示これを AI に渡すと、「安心感のある医療系サイトを作って」と曖昧に頼むだけの時と比べて、まるで別物のような一貫したデザイン が出てきます。
詳細を知りたい方は、ぜひ下の記事をご覧ください。
ところが ──「DESIGN.md は、デザイナーじゃないと書けない」
…ここで、お気づきかもしれません。
この Markdown を自分で書くには、けっきょくデザインの専門知識が必要 なのです。
- どのフォントを何ウェイトで組み合わせるのが読みやすいのか
- プライマリ／アクセント／セマンティックカラーをどう定義するか
- 日本語の line-height や letter-spacing の最適値
- WCAG の AA と AAA の違い、CUD（カラーユニバーサルデザイン）の配慮
- 和色の使い分け、UDフォントの選択基準
エンジニアやディレクター、事業担当者にとって、上のようなMarkdownをゼロから書くのはかなりハードルが高い。 「AIにいい指示を出すために、まず人間がデザインの勉強をする」 という本末転倒な状態になりがちでした。
非デザイナーでも、直感で DESIGN.md が作れるツールを作りました
そこでエレファンキューブでは、非デザイナーの方が直感的な操作だけで DESIGN.md を生成できる Webツール、DESIGN.md Maker JP をリリースしました。
フォント名やCSS変数を知らなくても大丈夫。カード選択とスライダー操作、そして「なんとなくこういう雰囲気」というタグ選びだけで、プロ仕様の DESIGN.md が完成します。
3ステップで完成
STEP 1 — 土台を決める
ターゲット（子供／若者／一般／高齢者／公共）と目的（ブランディング／購入・申込／情報発信／コミュニティ）を選ぶだけ。この段階でアクセシビリティ要件が内部的にセットされます。
STEP 2 — 雰囲気を言語化してAIに提案させる
4つの感性スライダー
5カテゴリ31個の雰囲気タグ（最大5つ）
色イメージ（任意1色）
参考テキストやURL
これらをベースに、AIが 2案ずつ デザイン案を生成・蓄積。気に入らない案は×ボタンで削除、気になった案は スタイルガイドを確認できます。
STEP 3 — DESIGN.md を自動生成
選んだ1案をもとに、AIが以下を含む完成版 DESIGN.md を出力します。
Concept & Rationale（コンセプトと根拠）
Typography（タイポグラフィ）
Color Palette & Variables（カラーパレットと変数）
UI Tokens & Spacing（UIトークンと余白ルール）
Accessibility Rules（アクセシビリティの具体的制約）
「なぜこのデザインにしたのか」という Rationale（根拠）付き なので、そのままクライアント説明や社内提案にも使えます。
日本市場に特化した配慮
海外製のAIデザインツールでは届かない、日本独自の事情にもしっかり対応しています。
- 和欧混植 — Inter + Noto Sans JP の欧文優先指定を標準化
- 和色の感覚 — 「青」を選べば紺碧・藍・瑠璃・空色のニュアンスでAIに伝える
- UDフォント・CUD対応 — ターゲットが高齢者や公共なら、自動的に厳格モードに
- ターゲット別テンプレート — 子供向けなら大きな文字とひらがな、公共なら WCAG AAA 目標、など具体解をプリセット
AIが海外基準にブレないよう、内部の System Prompt でこれらを 絶対ルール として強制しています。
料金プラン
価格 内容
無料枠 ¥0 毎週3回（月曜0時リセット）
ライト ¥1,000 5回分チケット
スタンダード ¥3,500 20回分チケット
プロ ¥8,000 50回分チケット
買い切り型のチケット制。サブスクではありません。Google / GitHub のソーシャルログインで即利用開始できます。
| プラン | 価格 | 内容 |
|---|---|---|
| 無料枠 | ¥0 | 毎週3回（月曜0時リセット） |
| ライト | ¥1,000 | 5回分チケット |
| スタンダード | ¥3,500 | 20回分チケット |
| プロ | ¥8,000 | 50回分チケット |
こんな方におすすめ
- AIでモック制作を内製したいエンジニア・ディレクター
- クライアント提案時にデザイン根拠を言語化したいWeb制作会社
- 公共・自治体・教育案件でCUD準拠を担保したい担当者
- プロンプトを毎回書き直す時間を減らしたいすべての方
今すぐ試す
ブラウザからすぐご利用いただけます。
ご意見・ご要望は問い合わせフォームよりご連絡ください。
最終更新日: 2026-04-25