このページの中身

実物のデザインシステム

理屈を読むより、動いているものを見るほうが早い場面があります。公開されているデザインシステムを、公開の深さと目的で分けて並べました。

公開されているデザインシステムを、公開の深さと参照する目的で分けた図

図の中身を文字で読む

公開されているものは、どこまで見せているかが違う。目的に合うものを見る
考え方まで　Material Design　Human Interface Guidelines　GOV.UK　デジタル庁　U.S. Web Design System
なぜそう決めたかが書いてある　判断の根拠を学ぶときに読む。部品の使い方より、なぜその形かが書いてある
部品と実装まで　Carbon　Polaris　Atlassian　Primer　Lightning　Spectrum　Fluent　Backpack　Pajamas
コードが手に入る　部品の粒度や状態の持たせ方を、実物で確かめられる
日本語で読める　デジタル庁　SmartHR　Spindle（Ameba）　Vibes（freee）
和文の組版に触れている　和文の行間・約物・書体の扱いが書いてある。海外のものには無い部分
土台だけ
見た目を持たない　Radix UI　shadcn/ui
操作とアクセシビリティだけを提供する。見た目は自分で決める
見るときの順
1. 自分の案件に近い規模と業種のものを1つ選ぶ　丸ごと真似ない。規模も体制も違う
2. トークンの名前の付け方を見る。値ではなく役割で名付けているか　大企業のものは、大きな組織で回すための重さを含む
3. 同じ部品（ボタン・入力欄）を2つのシステムで見比べ、判断が分かれる箇所を探す　小さな案件には、その重さは要らない

雰囲気で見る#

同じ架空の予約画面を、それぞれのシステムのトークン（色・角丸・影・密度）で組み直しました。押すとその詳細へ移ります。公式サイトの画面ではありません。

同じ「デザインシステム」でも、公開している深さが違います。考え方まで書いてあるもの、部品とコードまで出しているもの、土台だけを提供するもの。目的に合うものを見ます。

作り手がもっとも多く、判断の根拠まで書かれています。

名前	作っている組織	特徴
Material Design 3	Google	1つの基準色から色を機械的に生成する仕組みが特徴。トークンの命名と役割分けの見本になる
Human Interface Guidelines	Apple	部品の仕様より、なぜその形かの説明が厚い。プラットフォームごとの作法の違いが読める
Fluent 2	Microsoft	Web、Windows、iOS、Android を横断して同じ考え方を通す構成。業務システム向けの部品が充実

自社製品のために作られたもので、部品と実装コードまで公開されています。

名前	作っている組織	特徴
Carbon	IBM	情報密度の高い業務画面向け。データテーブルやグラフの扱いが厚い。角丸を使わない硬い造形
Polaris	Shopify	管理画面に特化。文言の書き方（コンテンツガイドライン）が具体的で、UXライティングの参考になる
Atlassian Design System	Atlassian	部品の数が多く、状態の持たせ方が細かい。トークンの階層設計が読みやすい
Primer	GitHub	開発者向けの画面。文字が主体で密度が高く、色数を抑えた構成。CSS の設計思想が公開されている
Lightning Design System	Salesforce	大規模な業務システム向け。アクセシビリティの記述が厚い
Spectrum	Adobe	制作ツール向け。暗い画面での色の扱いと、細かな操作部品の設計が参考になる
Backpack	Skyscanner	旅行予約向け。日付や価格など、実データの見せ方の例が多い
Pajamas	GitLab	すべてが公開されており、決定の経緯まで追える。運用の進め方の参考になる
Geist	Vercel	開発者向けの静かな造形。無彩色と1px の罫線で組む型の見本
Nord	Nordhealth	医療向け。誤操作が起きにくい設計と、状態の伝え方に重きが置かれている

読み手を選べない前提で作られているので、アクセシビリティと平易さの基準として役立ちます。

名前	作っている組織	特徴
デジタル庁デザインシステム	デジタル庁	日本語。和文の組版と、行政サービスに特有のデザインスタイルが扱われている
GOV.UK Design System	イギリス政府	実際の利用者調査に基づく判断が書かれている。「なぜこの形か」の書き方の手本
U.S. Web Design System	アメリカ政府	部品ごとにアクセシビリティの要件が添えられている
BBC GEL	BBC	放送局。文字、映像、音声を横断する設計。書体の扱いが厚い

和文の組版に触れていることが、海外のものにはない価値です。行間、約物、書体の選び方が、日本語を前提に書かれています。

名前	作っている組織	特徴
デジタル庁デザインシステム	デジタル庁	日本語書体の指定と、行政文書の言い回しの基準
SmartHR Design System	SmartHR	業務システム向け。文言のガイドラインが具体的で、敬語の扱いまで踏み込んでいる
Spindle	サイバーエージェント（Ameba）	消費者向けサービス。アクセシビリティの取り組みが詳しく公開されている
Vibes	freee	会計サービス向け。数字と表の見せ方、業務画面の設計が参考になる

見た目を持たず、操作とアクセシビリティだけを引き受けます。自分でデザインを載せる前提のものです。

名前	何を提供するか
Radix UI	キー操作、フォーカス管理、ARIA を実装した部品。見た目はいっさい持たない
shadcn/ui	Radix の上に最小限の見た目を載せたもの。コードを自分のリポジトリに取り込んで改造する形式