Vercel のデザインシステム仕様は、私が見てきた中でも教科書レベルの素晴らしい例です。
今日、私は彼らの DESIGN.md を真剣に研究しました。ライトテーマとダークテーマの両方に対応し、色、フォント、スペーシング、コンポーネント、モーション、そしてコピーライティングのルールを、実行可能なデザイン方法論として完全に記述しています。
この道筋に従えば、今後作成するすべてのプロダクトの design.md を書けると感じています。
詳細はこちら:
DESIGN.md が何かよくわからないという方もいるかもしれません。簡単に言うと、AI が読むためのデザイン仕様書です。AI がコードを書くのを手伝うとき、どの色を使い、どのフォントサイズを適用し、要素間の間隔をどのくらいにするかを知っておく必要があります。
このファイルがないと、AI が生成するインターフェースは毎回異なって見え、スタイルに一貫性がなくなります。
Vercel の DESIGN.md を読んで、優れた DESIGN.md とは、単に AI にどの hex コードやフォントサイズを使うかを伝えるだけではないことに気づきました。それは、デザイン思考のセット全体を表しています。私の認識をかなり覆すものでした。
今日は、このファイルがなぜこれほど優れているのかを分解して説明します。
1
まず、色について話しましょう。
私が最初に DESIGN.md を書き始めたとき、色のセクションは実際には非常にシンプルでした。いくつかの色の値をリストアップし、AI にどれがプライマリ、セカンダリ、アクセントカラーかを伝えるだけで、基本的にそれで終わりでした。
しかし、このように書くと、AI はこれらの色が異なるインタラクション状態にどのように対応するかをまだ理解していません。
例えば、ボタンの場合、デフォルトの状態は何色ですか？ホバー時にはどれだけ暗くするべきですか？クリックされた瞬間は何色ですか？これらの詳細が明確に定義されていなければ、AI が生成する結果は毎回異なる可能性があります。
Vercel のアプローチはこの問題を完全に解決しています。
彼らのデザインシステムでは、各色シリーズは 100 から 1000 までの 10 段階のグラデーションに分解され、各番号は固定のインターフェース状態に対応しています。
100 は要素のデフォルトの背景、200 はホバー時の背景、300 はクリック時の背景です。さらに上に行くと、400 はデフォルトの境界線、500 はホバー時の境界線、600 はクリック時の境界線です。
700 は、タグやボタン自体のようなベタ塗りのブロックに使用されます。800 はこれらのブロックのホバー状態です。900 はセカンダリテキストとアイコンに使用され、1000 はプライマリテキストとアイコンに使用されます。
単なる数字の羅列のように見えますが、その背後には完全なインタラクションロジックが存在します。
100 から 300 は背景の状態を管理します。400 から 600 は境界線の状態を管理します。700 と 800 はベタ塗りブロックの状態を管理します。900 と 1000 は情報の階層を管理します。
言い換えれば、Vercel は実際に AI に対して、ここにはいくつかの状態があり、色はそれらの状態の現れに過ぎないと伝えているのです。
この利点は非常に直接的です。
AI がコードを書くとき、ボタンがホバー時にどれだけ暗くなるか、境界線がどのように変化するかを推測する必要がありません。デフォルト状態は 100、ホバーは 200、クリックは 300 に対応します。ルールは事前に定義されています。
さらに、これに基づいて、Vercel はライトテーマとダークテーマの両方を提供していますが、まったく同じ Token 名を使用しています。
例えば、gray-1000。ライトテーマでは #171717 で、純粋な黒に近いです。ダークテーマでは #ededed になり、純粋な白に近くなります。
デザインシステムにとって、これら 2 つの色は実際には同じものです。
どちらもページ上で最も重要な情報を表しています。開発者と AI は、インターフェースを生成する際に、gray-1000 の背後にある特定の hex 値ではなく、そのセマンティックな意味に焦点を当てます。テーマが切り替わると、システムは自動的にこのセマンティックな意味を対応する色にマッピングします。
2
色の問題を解決した後、もう 1 つのより重要な制約は、ページのリズムです。
Vercel のスペーシングシステムは 4px の倍数に基づいており、合計 9 つの値のみを提供します: 4、8、12、16、24、32、40、64、96。製品全体のすべてのスペーシングはこれらの数値から選択されます。
私の最初の反応は、少し制限が多すぎるのではないかということでした。20px が必要な場合はどうすればいいですか？28px が必要な場合は？
デザイナーの友人に尋ねたところ、圧倒的多数の製品にとって、9 種類のスペーシングスタイルで基本的に十分だと言われました。
スペーシングの選択肢が多すぎると、ページのリズムが失われます。多くのひどいウェブサイトは、非常に場当たり的なスペーシングデザインになっています。これは実際、プロダクトデザインにおける大きなタブーの 1 つです。
優れたデザインシステムは無限の選択肢を与えません。積極的に選択肢を制限します。
Vercel は明確なリズムの提案を直接提供しています: グループ内の要素間は 8px、グループ間は 16px、セクション間は 32 ～ 40px を維持します。これはまさにページの呼吸するリズムを定義しています。
ユーザーはこれらの隙間に気付かないかもしれませんが、どの部分が同じ全体に属し、どこから新しいコンテンツエリアが始まるのかを自然に感じ取ることができます。
多くの場合、ページが見栄えよく見えるのは、デザイナーが高度なテクニックを使ったからではなく、このリズムが全体を通して一貫して保たれているからです。
タイポグラフィも同じロジックに従います。
Vercel のフォントシステムは、色やスペーシングのロジックと同一です。
すべてのテキストは、見出し、ラベル、本文、ボタンといういくつかの固定された役割に分類されます。
各役割の下に、異なるサイズの Token が提供され、各 Token にはフォント、サイズ、太さ、行間、文字間隔が事前に定義されています。
以前は、テキストの一部に直面したとき、デザイナーは 14px か 15px のどちらを使うか、適切な行間は何かを考えていたかもしれません。
デザインシステムがあれば、考え方が変わります。AI はまず、このテキストがどのような役割を果たすかを判断します。見出しですか、本文ですか、それとも二次的な情報ですか？役割が決まれば、対応するスタイルも決まります。
フォントサイズの考え方から役割ベースの考え方へ。視覚的な意思決定からセマンティックな意思決定へ。ここにデザインシステムの真の価値があります。素晴らしい。
ここまで見てくると、スペーシングであれフォントであれ、Vercel がやっていることは同じだと気づきます。実行段階での自由なプレイを可能な限り減らし、ルールを事前に決定し、実行は役割を選択するだけで済むようにすることです。
これはデザイナーにとっても、開発者にとっても、AI にとっても同じです。
3
さらに、コピーライティングも Vercel のデザイン仕様の重要な部分として扱われています。これは、ほとんどの DESIGN.md ファイルで最も欠けやすい部分です。
Vercel はこれらの詳細を非常に具体的に定義しています。
例えば、ボタンのコピーはアクションとオブジェクトで構成されなければなりません。"Deploy Project" や "Delete Member" のように。"Deploy"、"OK"、"Delete" のような曖昧な言葉だけを書くことはできません。
理由は簡単です。"Delete" を見たとき、ユーザーは何が削除されるのかをまだ考える必要があります。アクションとオブジェクトがあれば、ユーザーはすぐに完全な理解を形成できます。
エラーメッセージも同様です。Vercel のルールは明確です。まず、何が起こったかをユーザーに伝えます。次に、次に何をすべきかをユーザーに伝えます。
例えば、パッケージファイルがサイズ制限を超えたためにビルドが失敗した場合、解決策はサイズを減らすか、制限を調整することです。3 つの文を読めば、ユーザーは問題がどこにあるのか、次に何をすべきかをすぐに理解できます。
多くの製品のエラープロンプトは「操作に失敗しました。後でもう一度お試しください」です。このようなプロンプトの情報量はほぼゼロです。ユーザーが読んで得られる唯一の情報は、失敗したということだけです。なぜ失敗したのか、次に何をすべきかは、まだ推測しなければなりません。
デザインシステムにおけるコピーライティングの仕様は、本質的にこの推測を減らすことです。
Vercel はまた、操作完了後の通知メッセージを標準化しており、どのような変更が発生したかのみを述べる必要があります。例えば、"Project deleted" であり、"Project deleted successfully" ではありません。
プロンプトボックスがポップアップできるという事実自体が、操作が完了したことを示しているからです。"successfully" という言葉は冗長な情報です。
次はモーションです。
この部分は特に興味深いです。なぜなら、それは私の直感とは正反対だからです。私は、アニメーションが多ければ多いほど、製品が洗練されていると思っていました。
そのため、ボタンのホバーやメニューのポップアップに少しアニメーションを追加すると、高級感が出るように思えます。現在の多くの Vibe Coding 製品は、この方向に向かっているように見えます。
しかし、Vercel の姿勢はまったく異なります。彼らは、多くのインタラクションシナリオでは、0 ミリ秒が最良の選択であることが多いと明示的に書いています。言い換えれば、アニメーションなしで、即座に完了するということです。
ボタンがデフォルト状態からホバー状態に変化する場合、この変化はすでに十分に明確です。最良のフィードバックは、それが即座に発生することです。アニメーションのレイヤーを追加すると、インターフェースが遅く感じられるようになります。
もちろん、モーションが必要なシナリオもあります。
例えば、ポップアップが突然表示される場合。トランジションがまったくなければ、人々はそれがどこから来たのかわかりません。ここでアニメーションに価値が生まれます。
Vercel は、さまざまなシナリオの持続時間も指定しています。通常の状態変化は約 150 ミリ秒、ポップオーバーは約 200 ミリ秒、モーダルは約 300 ミリ秒です。
変化が大きいほど、より多くの反応時間が与えられます。変化が小さいほど、フィードバックはより直接的になります。
その背後にあるロジックは常に同じです。必要がなければ動かさない。動かさなければならないときは、速く、軽く、控えめに。
最後に深い印象を残した部分は、アクセシビリティです。
正直なところ、私はこれまでこの部分に特に注意を払うことはほとんどありませんでした。なぜなら、ほとんどの場合、製品のインターフェースが見栄えよく、機能が動作すれば十分に思えるからです。しかし、Vercel はこの部分を非常に真剣に書いています。
彼らは、テキストと背景の間に十分なコントラストが必要であると要求しています。状態変化は色だけに依存してはならず、アイコンやテキストの説明と組み合わせる必要があります。
すべてのインタラクティブ要素は明確なフォーカス状態を持たなければならず、視覚的なすっきりさのために削除することはできません。
これらのルールは、デザインシステムがすべての人に役立つことを意味します。色の感度が低い人、キーボードで操作する人、明るい光の中でスマートフォンを見ている人も含めてです。
この DESIGN.md は非常にプロフェッショナルです。皆さんが今後新しい製品を作るときには、これら 2 つの MD ファイルのアイデアに基づいて、独自の DESIGN.md を作成できると思います。
