オリジナル特集オリジナル特集

AIにデザインの意図を伝える『DESIGN.md』とは？デザインシステムの新しい形

DESIGN.mdとは何か――AIに「見た目」だけでなく「理由」を渡す

DESIGN.mdは、ウェブやアプリのデザインシステムを、AIコーディングエージェントにも読み取りやすい形で記述するMarkdownファイルです。Googleがデザインツール「Stitch」と関連づけて提案したオープンな形式として注目されています。従来のデザイン資料が人間のデザイナーや開発者を主な読者としていたのに対し、DESIGN.mdはAIが実装時に参照する「デザインの手引き」を目指します。

ファイルの特徴は、機械が扱いやすい値と、人が読める意図を一つにまとめること。冒頭には色、文字、角丸、余白、コンポーネントなどのデザイントークンを構造化して記述し、その後に自然文で背景や使い方を説明します。色コードの一覧だけでは伝わりにくい「この色はリンク用で、ボタンには使わない」といった判断基準も、同じファイルに残せます。

数値の指定に加え、選択の理由と禁止事項を書く

デザイントークンは、AIに具体的な実装値を渡すうえで重要です。たとえば、ブランドカラーや本文の書体、見出しの大きさ、ボタンの角丸を定義すれば、画面ごとに値がばらつくのを抑えられます。コンポーネントの状態や、色の役割を意味に基づく名前で整理しておけば、単なる「青」「灰色」の指定よりも一貫した利用につながります。

ただし、数値を列挙するだけでは十分ではありません。なぜその色を使うのか、どの画面で余白を広く取るのか、どんな印象を避けたいのかを文章で補うことが、DESIGN.mdの要点です。「落ち着いた印象にする」「一画面に主ボタンは一つ」「装飾目的の絵文字は使わない」といった方針は、トークンにない状況でAIが判断する手がかりになります。望ましい例だけでなく、避けるべき表現も具体的に書くことで、曖昧な指示を減らせます。

デザインと実装の間にある「暗黙知」を共有する

デザインシステムがあっても、画面を作るたびに担当者が解釈を加える場面は少なくありません。既存のコンポーネントをどこまで再利用するか、モバイルで情報の優先順位をどう変えるかなど、図や数値だけでは伝わりにくい判断があるためです。AIがコードを生成する場合、この暗黙知が欠けていると、整ってはいてもブランドらしさの薄い画面になったり、ページごとに違う表現が混在したりする可能性があります。

DESIGN.mdは、こうした判断をリポジトリ内の文書として共有し、コードと同じように変更履歴を管理できる点に価値があります。デザインの方針を変えたとき、トークンと説明を一緒に更新すれば、チームメンバーとAIの双方が同じ基準を参照できます。既存のデザインシステムを置き換えるものというより、既存のルールをAIが活用できる形に整理する補助線と考えるのが適切です。

導入の鍵は、短く具体的に保つこと

導入時は、色や書体をすべて網羅することよりも、AIが迷いやすい判断を優先して書くのが現実的です。まずはブランドの方向性、主要なトークン、頻出コンポーネントの使い分け、避けるべき表現をまとめます。説明は「モダンに」などの抽象語だけで終わらせず、何をどうするかに落とし込むのがポイントです。たとえば「情報量の多い一覧ではカード間隔を詰め、操作ボタンは各項目の末尾に置く」とすれば、実装に結びつきやすくなります。

また、DESIGN.mdを一度作って終わりにせず、実際の生成画面をレビューして更新する運用も欠かせません。トークンの値と文章の説明が食い違えば、AIの解釈も人間の理解も揺らぎます。形式自体も発展途上の部分があるため、利用するツールがどの記述を読めるのかを確認しながら整える必要があります。DESIGN.mdの新しさは、デザインシステムを「見た目の規格」から「判断の理由まで共有する仕様」へ広げようとする点にあります。