学ぶ価値のある公開デザインシステム4つと各システムが公開している内容、そして色・フォント・角丸の選択から1ページのスタイルガイドとCSSを作るライブツールを紹介します。
デザインシステムとは、チームが開発に使うトークン、コンポーネント、使い方のルールを共有したものです。Webサイトのスタイルガイドはその最小の形で、色、文字、基本コンポーネントをまとめた1ページです。USWDS、GOV.UK、Carbon、Atlassianなどの公開システムを参考にし、下のツールで自分のサイト用のスタイルガイドを作り始めましょう。
デザインシステムに通常含まれるもの
デザインシステムのまとめ記事は、リンクを並べて終わりがちです。このページでは、ドキュメントが充実した4つの公開システムから何を学ぶべきかを説明し、さらに実際に動くスタイルガイド作成ツールを用意しています。選んだ設定からボタン、入力欄、カード、アラートを描画し、対応するCSSカスタムプロパティを書き出します。
スタイルガイドは、色、フォント、ロゴの使い方、トーンといった見た目のルールを記録したものです。デザインシステムはそれに加えて、ルールを製品に反映するためのコード化されたコンポーネント、トークン、ドキュメントを含み、通常はそれらを変更するためのプロセスも備えています。小さなサイトの多くは、スタイルガイドといくつかのコンポーネントがあれば十分です。
USWDSやGOV.UKなどの政府のシステムは公開されており、各選択の理由を説明し、アクセシビリティを重視しています。Carbonからは、大企業が複雑なコンポーネントをどう文書化しているかがわかります。Atlassianは、役割に基づいてトークンに名前を付ける良い手本です。
オープンソースのコードを公開しているものもありますが、それぞれ独自のライセンスとブランドのルールを定めています。また、無関係なサイトが政府や企業の見た目をしていると、訪問者を誤解させるおそれがあります。コンポーネントや見た目を再利用する前に、そのシステムのサイトでライセンスとブランドのルールを確認しましょう。
まずはブランドカラー1色、文字用の黒に近い色、枠線と背景用のグレー1〜2色、エラー用の赤から始めましょう。実際のコンポーネントで必要になったときだけ色を増やします。
すべてのルールがカスタムプロパティを読み込むので、--brandや--radiusを変えるだけで全コンポーネントのスタイルが一度に変わります。
米国一般調達局
デザイントークン、アクセシビリティと実装のガイダンス付きのコンポーネント
色、文字、余白の単位のトークンの段階
英国政府デジタルサービス
スタイル、コンポーネント、パターン
名前の入力を求めるなど、タスク全体のパターン
IBM
IBM Plexの書体をベースにした、ReactとWeb Components向けのオープンソースのコンポーネント
企業向けのデータテーブルと情報量の多いレイアウト
Atlassian
color.textのように、基礎、プロパティ、修飾子の順で名付けられたデザイントークン
わかりやすいトークンの命名規則
システムのゴシック体
システムの明朝体
丸ゴシック
等幅
ブランドカラー、フォントスタック、角丸の大きさ、余白の単位を選んでください。シートと下のCSSが同時に更新されます。
ブランドカラー
フォントスタック
角丸：{n}px
余白の単位：{n}px
ブランドカラー上の白い文字：
（通常の文字の4.5:1を満たしています）
（大きな文字のみ可、3:1が必要）
（文字には低すぎます）
保存
キャンセル
メールアドレス
カードのタイトル
カードは1つのアイデアとそのアクションをまとめます。
[email protected]の形式でメールアドレスを入力してください
CSSをコピー
学ぶ価値のある公開デザインシステム
2026年10月、各システムの公式サイトで確認
システム
作成元
公開している内容
学べること
無料で始める · クレジットカード不要