UX
UX / Design Tools

DESIGN.mdは便利なのに、
なぜ使いにくいのか?

―"見えない設計資産"を、使える形に変える管理UIという発想―

AIにデザインの方向性を伝える手段として、DESIGN.mdへの注目が高まっている。 発想自体は強い。しかし、実際に触れると「便利そうなのに使いにくい」という違和感が生まれる。 その正体と、解決策としての管理UIについて整理する。

DESIGN.mdという発想自体は、かなり強い

従来、デザインの指示は曖昧になりやすかった。「高級感のある雰囲気で」「もう少し柔らかくしたい」「このブランドっぽくしたい」——こうした言葉は、人間同士でも解釈がぶれやすい。AIに渡すとなると、なおさら不安定になる。

そこで、デザインのルールをあらかじめ構造化し、Markdownとして保持しておく。色・タイポグラフィ・余白・コンポーネントの雰囲気をテキストでまとめておけば、AIに対する指示のブレを大きく減らせる。

DESIGN.mdは、デザインの曖昧さを再利用可能な設計資産に変える仕組みである。

それでも使いにくい、3つの理由

問題は、概念が悪いことではない。問題は運用の仕方にある。

Problem 01

中身が見えない

DESIGN.mdはテキストである。内容を読めば意味は分かるが、最終的にどんな雰囲気になるのかが直感的に分からない。

  • 本当に高級感があるのか
  • どれくらい柔らかいのか
  • どのブランドに近いのか
Problem 02

比較しにくい

複数のDESIGN.mdが存在しても、意思決定のUIがない。どれが今回の目的に合うかをテキスト同士で比べることは難しい。

  • どれが自社に近いのか
  • スライド向きか、LP向きか
  • 資産があっても選べない
Problem 03

管理しにくい

複数ブランドや複数トーンを持つ場合、テキストファイルを散在させると再利用しづらい状態になる。

  • 会社A向けのトーン
  • 採用向けのトーン
  • 役員説明向けのトーン

必要なのは、単なるファイル保存ではない。
DESIGN.mdを"見て選べて使える状態"にする管理UIである。

管理UIが備えるべき機能

このギャップを埋めるプログラムを実際に作成した。以下のような機能を持たせている。

デフォルトとオリジナルの切り替え
カラーパレットのビジュアルプレビュー
検索・カテゴリ絞り込み
お気に入り管理
右パネルでの詳細確認
DESIGN.md全文確認・コピー・ダウンロード
CSS変数のワンクリックコピー
新規追加・編集・HTMLからの解析
デザイン管理ツール 63のデザインシステムをギャラリー形式で閲覧・比較できる実装済みツール
ツールを開く →

ツールで確認できること

実際に動作している管理ツールの画面を示す。カード一覧・詳細パネル・DESIGN.md適用プレビューの3つの視点で、テキストでは伝わらないデザイン資産の可視化を確認できる。

Screen 01 — ギャラリー一覧
デザイン管理ツール:63ブランドのギャラリー一覧。カテゴリ別にカードを表示し、ミニプレビューとカラーパレットを一覧で確認できる。

63ブランドをカテゴリ別にカード表示。各カードにミニプレビューとカラースウォッチを表示し、一覧から視覚的に選定できる。検索・カテゴリ絞り込み・お気に入りフィルターを備える。

Screen 02 — 詳細パネル(DESIGN.md & カラーパレット)
デザイン管理ツール:ブランドカードをクリックすると右パネルにカラーパレット・DESIGN.md全文・プレビューが表示される。

カードをクリックすると右パネルが開き、カラーパレット(hex値コピー可)・DESIGN.md全文・プレビューを確認できる。そのままコピーしてAIに渡せる。

Screen 03 — DESIGN.md適用プレビュー(同一テンプレート × 複数ブランド)
同一HTMLテンプレートに異なるDESIGN.mdを適用した比較:ダーク/テラコッタ/ブルーセリフ/ダークテールの4パターン

同一のHTMLテンプレートに異なるDESIGN.mdを適用した出力例。内容はそのままに、フォント・カラー・レイアウト感がブランドごとに全く異なる雰囲気に変わる。これがDESIGN.mdを"差し替え可能な設計資産"として扱う利点である。

このプログラムの本質

一見すると、このツールはDESIGN.mdのギャラリーに見える。しかし本質はそこではない。

本当にやっていることは、"見えないデザインルール"を、意思決定できる形に変えることである。

つまりこれは単なるビューワーではなく、ブランドの雰囲気を可視化し、AIに渡す前の確認を容易にし、複数資産を一元管理し、そのまま制作に接続できる——AI時代のデザイン指示ハブに近い位置づけになる。

なぜ実用性が高いのか

この仕組みの強さは、単発の便利さではない。

Point 01
同じ内容を別トーンで即試せる

たとえば同じHTMLでも、適用するDESIGN.mdを変えるだけで雰囲気が一気に変わる。未来感のある印象・温かく知的な印象・高級感のある印象——内容を変えずに文章の人格やブランドの空気感を差し替えられる。

Point 02
たたき台作成が速くなる

従来は、AIに毎回長文でデザイン説明をしていた。管理UIがあれば「これを選ぶ→コピーする→AIに渡す」だけで済む。この差は制作の初速に直結する。

Point 03
自社資産として育てられる

有名ブランドを参考にするだけでなく、自社トーンも登録できる。ブランドルールの蓄積・資料用トーンの保存・過去資産の再利用が可能になる。ここまで来ると、参考集ではなく社内用の簡易デザインシステム管理ツールになる。

向いている場面

この仕組みは、特に以下のような場面で強い。

Scene 01

HTMLスライド作成

役員向け・採用向け・社外向けなど、見せる相手によってトーンを変えたいときに、差し替えが一瞬でできる。

Scene 02

LPや記事の初稿生成

AIでページを作るとき、最大の問題は最初の方向性がぶれること。DESIGN.mdを選んで先に固定すれば、初稿の安定性が上がる。

Scene 03

複数ブランド管理

複数事業・複数サービス・複数トーンを持つ組織にとって、こうした管理UIの価値はさらに大きくなる。

このツールが持つ価値の変化

最初は「AIに渡しやすくしたい」という個人的な不便さから始まるかもしれない。しかし実際には、それ以上の価値が見えてくる。

フェーズ 価値
最初の価値 自分が使いやすい / AIに渡しやすい / 雰囲気を素早く変えられる
その先の価値 ブランド資産の一元管理 / 社内共有 / 制作の初速向上 / デザイン指示の標準化 / 再利用可能な管理基盤

つまりこれは、個人用の便利ツールから、チームやプロジェクトをまたぐ管理ツールへ発展しうる構造を持っている。

Conclusion

DESIGN.mdの発想は強い。
テキストだけでは、使いにくい
そのギャップを埋めるのが管理UIである。

見て、選んで、比較して、使える形にする。それがDESIGN.mdを本当の設計資産として機能させるための鍵になる。