DESIGN.mdとは？一度決めれば画像も資料もサイトも同じ世界観で作れる、AI時代のデザイン指示書

DESIGN.mdは、色・書体・余白・やらないことを書いた1枚のテキストファイルです。GoogleがAIにコードを書かせるための形式として公開したものですが、中身は見た目の指定なので、渡す相手をコーディングツールに限る必要はありません。

自分に必要かどうかは、AIを使う頻度では決まりません。効いてくるのは、出力が画像や資料やサイトなど複数の場所に出ていくか、決まっているのに毎回書き直している指定があるか、文字で説明しても毎回ぶれるものを持っているかの3点です。

この記事では、この3点に沿ってDESIGN.mdの使いどころを確認し、実際に自社で運用している例をお見せします。読み終えると、自分に必要かどうかと、最初の30分で何を書くかを判断できます。

はじめに：DESIGN.mdを3分でおさらい

DESIGN.mdは、GoogleのAIデザインツール「Stitch」で使われていた形式です。2026年4月21日に、Googleが仕様の草案をオープンソースとして公開しました。

形式はMarkdownです。見出しや箇条書きを記号で表す書き方で、拡張子が.mdのただのテキストファイルです。

公式の仕様では、1つのファイルが2層に分かれています。

• 上の層：色の番号や文字の大きさなど、機械が読むための値（デザイントークン）
• 下の層：その値をなぜ選んだのか、どう使うのかを人の言葉で書いた本文

本文の見出しは、全体像、色、タイポグラフィ、レイアウト、奥行きと影、形、コンポーネント、やることとやらないことの8つが標準です。

特別なツールは要りません。ファイルをプロジェクトの中に置くか、対話画面に貼り付けるだけで使えます。

ひとつだけ、はっきりさせておきたいことがあります。公式の位置づけは、コーディングエージェントに見た目のルールを伝えるための形式です。

「画像生成のための規格」ではありません。仕様もまだアルファ版で、今後も変わる前提で公開されています。

ただし中に書いてあるのは、色と書体と余白の指定です。読む相手をコーディングツールに限る理由は、書式の側にはありません。

この記事で扱うのは、その使い方の広げ方です。

DESIGN.mdは開発者だけのものではありません

ここからがこの記事の本題です。DESIGN.mdを解説した日本語の記事はすでに何本もありますが、どれもAIにUIを実装させる話として書かれています。

実際に使ってみると、効く範囲はもっと広いというのが運用しての実感です。

画像生成・資料・サイト・記事・SNS投稿で同じ1枚が使える

自分のサイトや事業のデザインを一度決めて1枚のテキストにしておくと、使える場面が一気に増えます。

画像を生成するとき、Webサイトを作るとき、資料を作るとき、記事を書くとき、SNSに投稿する画像を用意するとき。

このすべてで、同じ1枚を貼るだけで前提がそろいます。

ChatGPTでもClaudeでも、対話の最初にファイルの中身を貼れば済みます。専用のツールに乗り換える必要はありません。

プロンプトではなくコンテキストを固定する

毎回プロンプトに「落ち着いた雰囲気で、青系で、余白は広めに」と書き足しているなら、それは指示の文章を毎回書き直している状態です。

DESIGN.mdがやっているのは、指示ではなく前提を固定することです。この考え方の違いは、コンテキストエンジニアリングとプロンプトエンジニアリングの違いとしても整理されています。

前提が固定されていれば、その日書くプロンプトは「セミナー告知のバナーを作って」だけで済みます。

無いとどうなるか

DESIGN.mdを持たずにAIへ作らせると、行き着く先は2つのどちらかです。

ひとつは、毎回プロンプトでトーンを設定し直す方法です。指定を思い出して書き並べる手間が、作るたびにかかります。

もうひとつは、指定を省いて出てきたものをそのまま使う方法です。この場合、仕上がりはその日の運になります。

どちらも作業としては進みますが、資料とサイトとSNSを並べたときにトーンがそろいません。ばらつきは1点ずつ見ているうちは気づかず、並べた瞬間に見えます。

なお、そもそもどのツールで作るかを迷っている段階であれば、AI画像生成ツールの一覧から用途に合うものを選ぶところから始めても構いません。

自社の資料を一発で出した実例

ここからは、実際に運用している例をお見せします。まずは資料です。

2026年6月に締め切られた「Blooming DRIVE with MUIC 2026」という公募に、応募時点のプロジェクト名「Weabee」で提出した資料があります。全15ページで、DESIGN.mdを使って制作したものです。

なお、その後AIリスキル株式会社としての採択が決まり、実証の範囲はWeabee単体ではなくなっています。

正確に書いておきます。構成と骨子は、ChatGPTと数時間かけてやり取りして詰めています。

何を何ページ目に置くか、どの順で説得するかは、ここで決まりました。

一発で出したのは、そのあとの工程です。確定したテキストから15ページのデザイン資料に落とし込むところは、自社のDESIGN.mdを渡して一度で出しています。

15ページを並べると、下地の色、枠の太さ、見出しの大きさがそろっていることが分かります。

つまり、AIに全部を任せたわけではありません。時間をかけるところと、任せるところが分かれているという話です。

この分け方は、後の章でもう一度扱います。

このサイトと配布資料も、同じ考え方で作っています

いま読んでいただいているAIツールギャラリーも、DESIGN.mdにあたるものを持っています。

トップページの面の作り方、罫線の太さ、影を使う場所は、すべてそこに書いてあるルールに従っています。デザイナーが毎回判断しているわけではありません。

配布している自治体向け生成AI 90日プランも同じです。サイトと資料を並べたときに同じ世界観に見えるのは、同じ1枚を参照しているからです。

なお、当サイトのDESIGN.mdそのものは公開していません。中身は事業ごとに違うものなので、他社のものを見ても真似できないからです。

代わりに、記事の後半で空欄のひな形をお渡しします。

正反対の2ブランドを、同じ方法で作り分ける

さきほどの資料はWeabee、このサイトはAIツールギャラリーで、2つは別のDESIGN.mdを持っています。

そして両者の世界観は、方向として正反対です。

	Weabee	AIツールギャラリー
印象	元気・ポップ・親しみやすい	静か・精密・信頼
下地	クリーム色に模様を敷く	ごく薄い灰色に白い面を重ねる
境界の作り方	太い黒枠とずらした影	細い罫線のみで影は使わない
見出し	極太のゴシック体で大きく	ウェイトを抑えて情報量を優先

注目していただきたいのは、境界の行です。AIツールギャラリーでは影を既定で付けない運用にしていますが、Weabeeでは太い枠と影を意図的に使っています。

矛盾ではありません。ブランドが違えば正解が違う、というだけです。

ここから言えることがひとつあります。

「AIっぽさを消す方法」を単一の正解として説明している記事は多いのですが、正解はブランドごとに違います。

DESIGN.mdは、その違いを固定するための道具です。何が正しいかを決めてくれる道具ではありません。

文字で書く部分と、実物を渡す部分を分ける

DESIGN.mdだけでは足りません。ここは運用してみないと出てこないところなので、少し丁寧に書きます。

キャラクターとロゴは文章で書いても固定できない

Weabeeには「ウィービーくん」という蜂のキャラクターがいて、AIツールギャラリーには「タイルン」がいます。どちらもAIで作ったものです。

これをDESIGN.mdに「黄色い蜂のキャラクター」と文章で書いても、うまくいきません。ページごとに違う蜂が出てきます。

解決したのは、キャラクターの画像そのものを参照画像として一緒に渡す方法でした。ロゴも同じです。

応募資料のほとんどのページに同じ蜂が登場しているのは、その結果です。

渡す実物は「キャラクターシート」にまとめる

実際に渡しているのが、次の2枚です。

1枚目はWeabeeのシートです。ロゴと、手を振る・指さす・パソコンを打つといった動きのある蜂を、1枚にまとめています。

2枚目はタイルンのシートです。正面・横・後ろの造形、6つの表情、持ち物を変えたポーズ、使ってよい色までを1枚に入れています。

1枚にまとめておくと、渡し忘れが減ります。AIの側も、正面の顔だけでなく横から見た形や手足の色まで読み取れるので、別のポーズを描かせても同じキャラクターに見えやすくなります。

この記事のサムネイルや図解に出てくるタイルンも、このシートを毎回一緒に渡して描かせたものです。

言葉で一意に決まるものと、決まらないものがあります。切り分けはこうなります。

• 文字で書くもの：色、書体、余白、角の丸み、面の作り方、やらないこと、印象
• 実物を渡すもの：ロゴ、キャラクター、うまくいった出力の参考画像

うまくいった出力を参考画像として貯める

参照画像は、ロゴやキャラクターだけの話ではありません。

DESIGN.mdを使って作ったもののうち、いちばん良かった1枚を保存しておきます。次に作るときは、その画像も一緒に渡します。

近い方向のものが返ってきます。

これはDESIGN.mdに限らず、画像を扱うAI全般で効く使い方です。ツールの選択肢を広げたい場合は、AIデザインツールの一覧も参考にしてください。

思ったものが出ないとき、多くの人はDESIGN.mdを厚く書き足そうとします。原因が実物側にある場合、文章をいくら足しても解決しません。

ここはAIに任せないほうがいい

良い面だけを書くと、実際に試したときに落差が出ます。限界も書いておきます。

体感の目安として書きますが、何も渡さずにAIへ出させたデザインは40点から60点あたりです。トーンが毎回変わり、平均的なものが返ってきます。

DESIGN.mdとプロンプトを整えると、85点くらいまでは届きます。サイトのUI、SNS画像、資料のレイアウト、世界観の統一は、この時点でかなり良くなります。

残りの15点が問題です。キャッチコピー、企業の理念、ブランドの中核になるメッセージ。

ここをAIに全部任せるのは勧めません。本気で100点を目指す領域で、まだ届いていないと感じています。

ただし「AIを使うな」という話ではありません。

さきほどの応募資料の表紙にある「分散するAIイベントをつなぎ、AIを学びたい人の“最初に見に行く場所”をつくる。」という一文も、AIと壁打ちしながら詰めたものです。

案を出させて、選んで、削って、決めるところは人の仕事です。出てきたものをそのまま採用するのが、まずい使い方になります。

最初の30分で書く、最小のひな形

下のひな形は、公式の本文セクションから最初に埋められる範囲だけを残したものです。

そこに、運用していちばん効いた2項目を足しています。「やらないこと」と「参照する実物」です。

公式の形式にある上の層（機械が読む値）は省いています。画像や資料に使うだけなら、本文だけでも十分に伝わるためです。

コーディングツールで厳密に使う段階になったら、公式の仕様に沿って上の層を足してください。

# DESIGN.md

## この事業について
（1文で。誰の何を助けるものか）

## 色
- 主役の色：
- 下地の色：
- 強調に使う色：
（3つまで。増やすほど守られなくなります）

## 書体
- 見出し：
- 本文：

## 余白と角
- 基本の余白：
- 角の丸み：

## 印象
（似せたい方向を3語で。例：静か / 精密 / 速い）

## やらないこと
-
-
-
（3つ書ければ十分です。ここがいちばん効きます）

## 参照する実物
- ロゴ：
- キャラクター：
- 参考にしてほしい出力：
（ファイル名を書き、実物を一緒に渡します）

埋めるときのコツを3つだけ挙げます。

色は3つまでにしてください。増やすほど、どれを使うべきかの判断が曖昧になり、守られなくなります。

「やらないこと」は、思いつかなければ後回しで構いません。ただし、AIの出力を見て「これは違う」と感じた瞬間に書き足してください。

その1行が、次から効きます。

「参照する実物」は、ファイル名だけ書いても機能しません。使うときに実物を一緒に渡してください。

キャラクターがいるなら、前の章のようなシートを1枚作っておくと楽になります。

自分で書くか、頼むか

ひな形を埋めるだけなら、30分あればできます。まずは自分で書いてみてください。

そのうえで、進めていくと止まりやすい場所が2つあります。

ひとつは、自社らしさを言葉にするところです。自分の事業の印象を3語で書くのは、外から見てもらったほうが早い場合があります。

中にいると、当たり前になっていて選べません。

もうひとつは、書いたあとの確認です。同じプロンプトを、ファイルを渡す場合と渡さない場合で試して出力を並べる作業になり、ここは時間がかかります。

この2つを自社で回せそうなら、外に頼む必要はありません。止まりそうなら、そこだけ相談するという進め方もあります。

よくある質問

Markdownが分からなくても書けますか

書けます。見出しに#を付ける以外は、普通のテキストと同じです。

ひな形をコピーして、コロンの右側を埋めてください。

既存のブランドガイドラインがあれば、それで足りますか

多くの場合、そのままでは足りません。ブランドガイドラインは人が読む前提で書かれているため、判断の余地を残した表現が入っています。

DESIGN.mdは、そこを一意に決め直す作業になります。

ChatGPTとClaudeで同じファイルを使い回せますか

使い回せます。特定のツール専用の書式ではないためです。

ただし出力の傾向はモデルごとに違うので、同じファイルでも仕上がりは完全には一致しません。

他社ブランドのDESIGN.mdをそのまま使ってもいいですか

形式そのものはApache 2.0ライセンスで公開されていますが、個々のDESIGN.mdの扱いは配布元ごとに違います。商用で使う場合は、配布元の記載を必ず確認してください。

記載が見つからない場合は、そのまま使わない判断が安全です。

まとめ

DESIGN.mdは、色・書体・余白・やらないことを書いた1枚のテキストです。AIコーディング向けの形式ですが、画像生成や資料作成でも同じものが使えます。

自分に必要かどうかは、冒頭の3点で判断できます。出力が複数の場所に出ていくか、毎回書き直している指定があるか、文字で説明しても毎回ぶれるものがあるか。

書くときは、文字で決まるものと実物を渡すものを分けてください。キャラクターやロゴは、文章では固定できません。

そして、言葉を決めるところは人が判断してください。そこから先をそろえる作業が、DESIGN.mdの担当範囲です。

自社のデザインをAIに正しく伝えたい企業の方へ

ひな形を埋めたあと、自社らしさを外から言語化するところと、渡した瞬間から使える状態にそろえるところは、社内だけで進めると手が止まりやすい部分です。

自社のDESIGN.mdをどう作るか、どこまでAIに任せるかを一緒に整理したい場合は、AIツールギャラリーの法人向け相談をご利用ください。

お問い合わせはこちら

この記事の出典

• Stitch's DESIGN.md format is now open-source so you can use it across platforms（Google公式ブログ、2026年4月21日公開、2026年9月28日確認）
• google-labs-code/design.md（Google Labs公式リポジトリ、2026年9月28日確認）