AIのUIがパッとしない…？ これで解決 (DESIGN.md)
BBetter Stack
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology
Transcript
00:00:00AIコーディングツールの進化が凄まじいです。Cursor、Claude Code、V0など、
00:00:06アイデアから数分でアプリを形にできますが、UIを開くと違和感を感じることがあります。
00:00:12コードは動くのに、UIが安っぽく見えるのです。StripeやLinear、Vercelなどの大手と比較してみてください。
00:00:17彼らは何が違うのでしょうか？ その鍵は「DesignMD」という、たった1つのシンプルなファイルにあります。
00:00:22Googleがオープンソース化したもので、数分でコードに注入する方法をお教えします。
00:00:30DesignMDは、プロダクトのルック＆フィールをAIエージェントに伝える
00:00:38プレーンなMarkdownファイルです。色、フォント、余白、ボタン、レイアウト、アクセシビリティなどすべてを網羅します。
00:00:45AIがブランドを推測するのではなく、このファイルを読み込んで従うのです。Figmaの書き出しもJSONの混乱もありません。
00:00:52完璧な結果を得るために毎回10段落ものプロンプトを打つ必要もありません。Googleが4月21日に
00:00:57これをオープンソース化すると、わずか数週間でGitHubのスター数は
00:01:027万件を超え、大きな話題となりました。ワークフローを加速させるツールに興味があれば、ぜひ登録を。
00:01:08役立つ動画を定期的にお届けします。さて、これがなぜ重要なのか、その理由をお見せしましょう。
00:01:12同じプロンプトを使ってみます。「モダンなダッシュボードを構築して」と入力します。
00:01:18まずはDesignMDファイルがない場合。生成されました。はい、典型的なAI製ダッシュボードですね。
00:01:24機能的には問題ありませんが、いかにもTailwindのデフォルトという感じです。ただそれっぽいだけで、
00:01:30ボタンはバラバラ、カードも汎用的。構築しているものに独自のアイデンティティが全くありません。
00:01:35では、同じプロンプトにStripeスタイルのDesignMDファイル、あるいは
00:01:42好みのブランドのDesignMDを加えて実行してみましょう。この違いを見てください。色が統一され、
00:01:48余白もスッキリしています。ボタンにも統一感があり、画面全体に
00:01:54一貫した美学が宿っています。同じAI、同じプロンプトでも、コンテキストが違うだけでこれほど変わるのです。
00:02:02DesignMDがないとAIは推測するしかありません。しかし、DesignMDがあれば、
00:02:08実績あるプラットフォームの洗練されたルールに基づき構築できます。では、ファイルの中身はどうなっているのでしょう？
00:02:14「AIが読めるデザインシステム」と考えてください。上部には、構造化されたトークンがあります。
00:02:21正確なカラーコード、フォント、角丸、余白などの厳格なルールです。しかし、重要なのはその先です。
00:02:27Markdown形式で「意図」を説明する部分です。単に「この青色を使え」ではなく、
00:02:34「この青は主要なアクセントであり、明快さと信頼感を与えるべきだ」と記述します。
00:02:40AIには数値だけでなく「判断基準」が必要だからです。優れたDesignMDは、パレット、
00:02:47タイポグラフィ、コンポーネント、レイアウト、アクセシビリティをカバーします。これによりAIは、
00:02:54正確な数値とその背後にある理由を同時に理解し、出力が意図から外れるのを防いでくれます。
00:03:00「新しいデザインシステムの形式が本当に必要なのか？」という疑問もあるでしょう。
00:03:05FigmaやJSONトークン、Cursor Rules、ClaudeMDなどはすでに存在します。
00:03:11しかし、それぞれ解決する課題が異なります。FigmaはUIツールとして人間には最適ですが、
00:03:18通常はリポジトリの外にあります。JSONトークンは機械には向いていますが、サイトの好みや意図を説明できません。
00:03:25Cursor RulesやClaudeMDはエージェントの振る舞いを指示しますが、デザインシステムではありません。
00:03:31DesignMDはその中間に位置します。人間が読めて、同時に
00:03:38機械も読み取れる。バージョン管理が可能で、エージェントネイティブです。これが大きな変化です。
00:03:44デザインシステムはもうデザインツールの中に閉じ込められてはいません。Markdownとして
00:03:49コードのすぐ隣に存在するのです。だからこそ、わずか2週間で開発者の注目を集め、爆発的に普及したのです。
00:03:54コミュニティのリポジトリはすでに7万スターを超えています。驚異的なスピードですよね。
00:03:59Linear、Stripe、Notion、VercelなどのDesignMDファイルが共有されています。理由は単純です。
00:04:04「綺麗にして」「モダンにして」「余白を良くして」「あのサイトっぽくして」と
00:04:09何度も打ち込みたくないからです。そんな作業はすぐに飽きてしまいます。
00:04:16DesignMDを使えば、同じことを繰り返す必要がなくなります。一度デザインルールを教えれば、
00:04:23すべての画面が同じ土台から始まります。これが真の利点です。全画面にわたるデザインの一貫性とスピードです。
00:04:29手戻りが減り、不格好なボタンを何度も修正する手間もなくなります。
00:04:34正直なところ、まだ完璧ではありません。しかし、素晴らしいスタートです。一つのファイルで完結し、
00:04:39リポジトリ内に置け、複数のツールで動作し、アクセシビリティのガイドも含まれています。
00:04:44導入コストもほぼゼロで、非常に簡単です。もちろん、ファイルの質が出力の質に直結します。
00:04:51内容が不十分なら出力もそれなりになりますが、個人開発者やプロトタイプ作成、
00:04:57AIを多用するワークフローには非常に実用的なアップグレードです。使うべきか？ はい、おそらく。
00:05:02特にCursorやClaude Code、V0を使っているなら。概要欄にある
00:05:08Awesomeリポジトリのテンプレートから始めてみてください。プロジェクトに入れて、自分のブランドに合わせて調整しましょう。
00:05:13目標はAIをクリエイティブにすることではなく、AIに「推測させない」ことです。
00:05:20ルールが明確になれば、UIの一貫性は高まり、アプリは「AIのデモ」ではなく「本物のプロダクト」へと進化します。
00:05:25このようなコーディングツールやヒントが気に入ったら、ぜひBetter Stackチャンネルを購読してください。
00:05:31それでは、また次の動画でお会いしましょう。